メイン

カテゴリー:TextFormations のすべてのエントリー

エントリー一覧

   

エントリー

2007-06-30 Sat

TextFormations(ver2.4) | マイページ機能追加!(はてな認証API使用)

サッカーフォーメーション図作成ツールTextFormationsをリニューアルしました。

念願のマイページ機能の追加です。
マイページには、自分のつくったフォーメーションをリストでき、一覧できます。

会員登録機能つくったり、パスワードリマインダー作ったりするのが
面倒でいままで作らなかったのですが、はてな認証APIなるものがあることを発見。

これなら、ユーザー情報を自分で管理する必要もないし、余計なアプリケーションを作る必要もありません。

はてなさんありがとうございます。


さて、作ってはみたものの、まだまだ機能不足です。

削除はできませんし、公開することも出来ません。
公開非公開をユーザーが設定できるようにして、公開されたリストはTOPページに更新情報出したりしたいですね。

とはいえ、loopshoot.comはついに会員制のサービスを行えるようになりました。
おもしろそうなアイデアがいっぱい浮かんできます。
TextFormationsだけじゃなく、他のアプリでも使って行きたいです。


それではどうぞ → TextFormations

2007-05-29 Tue

TextFormations(ver2.3) | ユーザーズリンク追加

サッカーフォーメーション図作成ツールTextFormationsをバージョンアップしました。

textformations_2_3.png


今回は前回きれいにしたTOPページに"TextFormationsを使っているブログのエントリーのリンク10件"の表示を追加しました。

"TextFormationsを使っているブログのエントリー"をどうやって出すかいろいろ考えたのですが、結局Google様のブログ検索のRSSを持ってくることにしました。
※厳密には”TetFormationsを使っている…”ではなく、”TetFormationsへリンクを貼っている…”になります。

第一候補はテクノラティのAPIだったのですが、
なんとこれがブログエントリーのタイトルを返さない。

なんとか出すように頑張ったのですが、やっぱり大変だし、ページが重くなりそうだったのでやめました。
で、行き着いた先がGoogle様。
やっぱりGoogleは技術的に大事なところを抑えているなと感じました。
こうやってGoogleの優位が進んでいくんだなー

いつも使ってくださっているユーザーの皆様のアクセスアップに少しでも貢献できればと思います。

----
TextFormationsって何?という方へ

TextFormationsのユーザの中でおそらく海外のチームのフォーメーションを1番作っているのは、MAROONED STADIUMさんです。
MAROONED STADIUMさんのとこに行けば使い方わかってもらえるのではないのでしょうか。


それではどうぞ → TextFormations


2007-05-19 Sat

TextFormations(ver2.2) | TOPページリニューアル!!

サッカーフォーメーション図作成ツールTextFormationsのTOPページをリニューアルしました。(TOPページだけっす)

before



after

リンクをいっぱい置けるようになったサイドには開発履歴を載せています。


つかれた。デザインは時間がかかって仕方がないです。

2007-05-03 Thu

TextFomstions(ver2.1) | YouTube Elevenページ追加!

簡易フォーメーション図作成アプリTextFormationsをバージョンアップしました。

今回は新しいページの追加です。
名づけて「YouTube Eleven」(↓マンUの場合のイメージ)
YouTube_Eleven2.png

TextFormationsでは作成されたフォーメーション図には、more_infoのリンクがつきます。
フォーメーション図のしたのmore_infoと書かれたリンクがそれにあたります。


で、このリンク先で何が見れるかというと、
フォーメーション図に入力された選手名をキーワードとして、YouTubeやGoogleやYahooやはてなブックマークからの検索結果を見ることが出来ます。

選手1人に対して、さまざまは検索結果を一気に出すという形を取っていました。
(俊輔のmore infoページならこんな感じ。)

これが、今まであった機能。

今回追加したYouTube Elevenページでは、選手11名に対して、YouTubeの検索結果を一気に出しています。他の情報はいいから動画だけ探したいという方のために、一度にデータが手に入るようになっています。

また、このYouTube Elevenページはloopshoot suggestの検索結果を優先して採用しているので、海外チームのフォーメーション図であっても、ある程度は一発で動画を探し当てることが出来ます。

リンク元は個人別のmore infoページにあります。

more infoの機能はTextFormationsの売りでもあるので、どんどん機能追加していきたいです。


それでは、いくつかサンプルを載せておきます。
CL決勝トーナメント一回戦2ndlegのフォーメーションを作ってみました。
マンチェスターユナイデッド
バイエルン
アーセナル
インテル
ミラン
チェルシー
リバプール

よろしければどうぞ
いじょう。■

2007-02-25 Sun

TextFormationsバージョンアップ(ver2.0)

自作アプリケーションTextFormationsをバージョンアップしました。

今回の改修では、初めてはてなのAPI(#APIというよりRSS)を使用しました。
シンプルなのでなかなかやりやすかったです。

改修したページはmore infoページ。
このページ、フォーメーション図の選手名を元に、YouTubeやGoogleに検索をかけて、詳細情報を得ようというのもなのですが、今回の改修ではてなブックマークの検索結果が表示されるようになりました。

まだ、あまり試してませんが、なかなか面白い検索結果が出てきます。
#たまに返ってこなくなるときがあるのはこちら側のせいだろうか。

バルサの選手なんて日本でも有名なので、いい結果が出てきます。→バルサmore_info


今回プログラミングしていて驚いたのが、はてなブックマークの数を画像で取得するAPIなるものがあったこと。
これはimageタグにはさむだけという簡単さ。驚かされました。

そういえば、はてなブックマークの表示ってどこ行っても同じデザインだなーと思ってました。。。


more infoページですが、flickrも試してみたいし、amazonを使えばもしかしたら小遣い稼ぎができるかもなんて考えてます。
いつもどおりすこしづつ追加していこうと思います。
(ちなみに今回の改修でYahooの動画検索はたいした結果が返ってこないので削除しました。)


それではどうぞ → TextFormations

2007-02-23 Fri

TextFormationsバージョンアップ(ver1.9) 

自作アプリケーションTextFormationsをバージョンアップしました。

今回はTextFormations+Dというあたらしいサービスの追加です。

TextFormations+Dで作ったフォーメーション図はこんな感じ

リーガ 23節 バレンシア vsバルサ
ビジャ モリエンテス
シルバ アングロ
マルチェナ アルベルダ
モレッティ ミゲル
アルビオル アジャラ
  ビュテユ  


フォーメーション図の下になにやらリンクがいくつかあります。
クリックしてもらうと、フォーメーション図が変化します……

つまり、ひとつのフォーメーション図のスペースで、選手交代やフォーションの変化が表現できるようになったわけです。

で、TextFormations+Dの作り方ですが、普通にTextFormationsでいくつか作ってもらってそれをぺたぺたと張ってもらって、作成ボタンを押せば完了というシンプルさを保つことが出来ました。


はじめ作ったときは、同じページに2つ載せるとうまく動かなかったのですが、そこもなんとか修正しました。

よかったら使ってみてください。


さて、今日はもうひとつ。このアプリTextFormationsのバージョンアップ案リストの公開です。

TextFormationsのバージョンアップ案リスト 「TextFormations の野望」

check*padでリスト公開しています。
リストを良く見てみると
「テキスト型のサッカーフォーメーション図作成ツール (238日前)」とあります。
ver.0.1が完成してからもうそんなにたつんですね。
しかし、まだまだアイデアは貯まっています。
ゆっくりとバージョンアップさせて行きたいです。


せっかくなので他のアプリケーションのバージョンアップ案リストも公開しておきましょうか。
TextMatchReport の野望
TextTunes の野望
ImpressivePlayers の野望
ImpressivePlace の野望

2007-01-31 Wed

TextFormationsバージョンアップ(ver1.8)

自作アプリケーションTextFormations~簡易フォーメーション図作成アプリ~をバージョンアップしました。


今回追加したサービスは"loopshoot suggest"。

名前のとおり(?)、Google suggestをアイディアの元にしています。

YouTubeでサッカー選手の動画を探したい場合に力を発揮します。

例えば、"アンリ"の動画を探したくて、"アンリ"と検索窓に入力しても、あまり良い結果は返ってきません。"アンリ"と呼ぶのはもちろん日本人だけで、YouTubeのようなワールドなサイトでさがすには"Henry"で探さなくてはいけません。

この"アンリ" → "Henry" をサジェストしてくれるのが、"loopshoot suggest”の機能です。

以下に実際にサービスを貼り付けてみました。
この検索はYouTubeでの動画リストを出すと同時に、"loopshoot suggest"からも結果を取得します。 なので、どうぞ日本語で検索をかけてみてください。
いい結果が出てこなかったら、緑枠内の単語をクリックしてください。検索窓にその単語が入ります。(結果が無い場合はごめんなさい) そしてまた検索すれば、きっと良い結果が返ってくると思います。

それではどうぞ↓
powered by YouTube
Stand by OK!
Stand by OK!


---------------
で、これがTextFormationsとどうつながるかというと……


more_infoのページで"loopshooot suggest"を出しています。

つまり、フォーメーション図にはいつもの呼び名で書いても、more_infoのページでサジェストされて、良い情報を手に入れられるというわけです。


それでは、こっちもどうぞ  → TextFormations

2007-01-24 Wed

TextFormationsバージョンアップ(ver1.7)

自作アプリケーションTextFormations~簡易フォーメーション図作成アプリ~をバージョンアップしました。


改修したのは、「more info」のページ。

いままでperlで呼び出していた、YouTube APIの検索結果をAjaxで呼び出す形にしました。
デザインをGoogle Ajax search API に合わせたかったのと、同じページ内での再検索を可能にしたかったという目的がありました。

perlの時の原因不明の文字化けも無くなって、動画のタイトルやコメントも表示できるようになりました。


画面はこんな感じ↓ ロシツキーで作ってみました!!
Image00014.jpg


まぁこれだけの変更です。
次にやりたいことへの布石です。

それではどうぞ  → TextFormations

2007-01-19 Fri

TextFormationsバージョンアップ(ver1.6)

自作アプリケーションTextFormations~簡易フォーメーション図作成アプリ~をバージョンアップしました。


TOPページに置いていたフォーメーションのサンプルをJavaScriptを使って表示切替できるようにしました。

こんな感じです↓(本物より縦長ですが)


**----- Sample -----**
たくさんのサンプルを見れるようにしたわけです。
ただ切り替えるのではつまらないので、フェードイン、フェードアウトするのもJavaScriptで構成しました。

で、フォーメーションの切り替えのタイミングですが、
クリックしてもらうのもなかなか大変だと思い、思い切ってマウスオーバーしました。

この記事なんかを見ると、
クリックのいらないページを作るのもこれから大切になってくるらしいです。

これから、ガンガンサンプルフォーメーションを増やしていきます。

それではどうぞ  → TextFormations

2007-01-12 Fri

TextFormationsバージョンアップ(ver1.5)

自作アプリケーションTextFormations~簡易フォーメーション図作成アプリ~をバージョンアップしました。

前回追加したmore_infoのページGoogle AJAX Search API を追加しました。

これ、簡単なJavaScriptを追記するだけなので、ホントに簡単です。

カスタマイズするには英語のドキュメント読まなきゃいけないのでちょっと大変そうですが…

とりあえず、デフォルトのデザインの表示にしておきます。


検索結果はWEBとビデオとブログ。
ブログが表示されるのはうれしいですね。
さすがGoogleなところは、WEBの検索結果にwikipediaやはてなの情報が頻出するところ。
あと選手が公式サイトを持っていたら必ず一番に現れます。


ってことで→今回はドーハの悲劇のときのフォーメーションを頑張って思い出してみました↓
ドーハの悲劇
カズ ゴン
  長谷川 健太  
ラモス 吉田  光範
  森保 一  
勝矢  寿延 堀池  巧
柱谷  哲二 井原  正巳
  松永  成立  

上記:more infoのリンクをお楽しみください。
まだまだほかのAPI追加していく予定です。


それではどうぞ  → TextFormations

2007-01-08 Mon

TextFormationsバージョンアップ(ver1.4)

自作アプリケーションTextFormations~簡易フォーメーション図作成アプリ~をバージョンアップしました。

今回は新しいページを追加しています。
その名もmore_info。

作成したフォーメーション図のフッター(最下部)に注目してください。
:more infoというリンクが作成されていると思います。

これが、今回新しく作ったページです。


このmore infoは、フォーメーションに入力された選手名を元に、youtubeから動画、yhaooから画像、動画を検索し、表示していています。

例えば、こんなフォーメーション図を作成した場合。

(管理人が選ぶ有名な)日本代表 
  高原 直泰  
  中田 英寿  
松井 大輔 中村 俊輔
稲本 潤一 小野 伸二
三都主 加地 亮
宮本 恒靖  闘莉王
  川口 能活  


more infoのリンク先ページではこんな画面が現れます。

tf14.jpg

このmore infoページはAPIを利用したページです。
各種APIに対して、選手名を元に検索をかけ、結果を表示しています。

フォーメーション図を構成する11人もの選手の名前をわざわざ入力してもらっているという事実に気づきました。これはすごいことです。
これを活かさない手はありません。

そう思い、考え付いたのがmore infoページです。
選手名を各種APIに投げれば、十分に価値のある結果が取得できます。
今回、まずは1番需要のあるであろうサッカー選手の動画が見つかるようYouTubeのAPIの結果を出せるようにしました。
(それだけではさびしいので、Yahooから画像&動画を取得するようにしました。)

これから、Google,wekipedia,YahooオークションなどのAPIも使ってみたいと思います。

検索結果なので、ほしい情報が確実に見つかるわけではありませんが、有名な選手であれば、間違いなく動画が見つけられます。


サンプルとしてすこしつくってみましたので、フッターのmore infoリンクで検索結果をお楽しみください。


2006 天皇杯 決勝 浦和レッズ vsガンバ
  永井  
小野 ポンテ
相馬 平川
鈴木(啓) 山田
ネネ 細貝
  内舘  
  都築  

W杯 2006 決勝 フランス vsイタリア
  アンリ  
  ジダン  
マルダ リベリー
マケレレ ヴィエラ
アビダル サニョル
ギャラス トゥラム
  バルデス  

W杯 2006 決勝 イタリア
  トニ  
  トッティ  
ペロッタ カモラネージ
ガットーゾ ピルロ
グロッソ ザンブロッタ
マテラッティ カンナバーロ
  ブッフォン  

1996 アトランタ マイアミの奇跡
  城 彰二  
中田 英寿 前園 真聖
服部 年宏 路木 龍次
遠藤 彰弘 伊東 輝悦
鈴木 秀人 田中 誠
  松田 直樹  
  川口 能活  

てきとーに選んだ11人
  シェフチェンコ  
ジダン ロナウジーニョ
アイマール ベッカム
ランパード ジェラード
ロベカル カフー
  ベッケンバウアー  
  シュマイケル  

もっと確実に情報が表示されるよう、改修していきたいと思います。
ご期待ください。

それではどうぞ  → TextFormations


2006-12-23 Sat

TextFormationsバージョンアップ(ver1.3)

自作アプリケーションTextFormations~簡易フォーメーション図作成アプリ~をバージョンアップしました。

前回の改修で実現した念願のフォーメーション図保存機能。
フォーメーション図をリンクとして保存できるようにしたので、
思い切ってその保存リンクをフォーメーション図に載せてしまうことにしました。

↓これが、ver1.3で作成できるフォーメーション図ですが、

2006 天皇杯 準々決勝 浦和レッズ vs磐田
  永井  
山田 ポンテ
相馬 平川
鈴木(啓) 長谷部
細貝 内舘
  坪井  
  都築  

1番右下の”R”がこのフォーメーション図の作成画面のリンクとなっています。
これでフォーメーション図の公開=保存リンクの公開となりました。

保存リンクははじめはブックマークに登録して使ってもらうつもりでしたが、
毎回登録するのは面倒だし、それを管理するのも面倒なことに気づきました。

保存リンクを公開しても、自分の作ったフォーメーション図が変更されるわけではないので、
WEBに保存リンクごと公開するのもまったく問題ないと思います。

それではどうぞ  → TextFormations

2006-12-10 Sun

TextFormationsバージョンアップ(ver1.2)

自作アプリケーションTextFormations~簡易フォーメーション図作成アプリ~をバージョンアップしました。

念願のフォーメーション図保存機能を完成させました。

この保存機能ですが、TextFormationsをもっと使ってもらうためには必要不可欠な機能と思い、実装方法を考えていました。同じチームのフォーメーション図を作成するなら、毎回の変更点は数箇所で、一度作ったフォーメーション図を再利用できれば、その作業効率のアップはどんなにAjaxを駆使しようとかなわないものだと思っていました。

しかし、どうやって実装するか、かなり悩みました。

ユーザー認証をして、マイページを持たせて…なんてめんどくさいし、使ってもらえそうにありません。

行き着いた答えは、「フォーメーション図一つ一つのリンクを作成する」というものです。


そのリンクをお気に入りに追加してもらえれば、ワンクリックでまた次のフォーメーションが作成できます。

内部的な動作としては、フォーメーション図作成のたびに、一意なKeyを発行し、それに各々の設定項目を紐付けて保存しておきます。ユーザーはそのKeyをパラメータとしたURLにアクセスすれば、自分の設定項目が反映されているフォーメーション作成画面を表示させることが出来ます。

お気に入りというのは、完全にユーザー個人の管理下にあるし、URLとして保存できるので2次利用は簡単です。

ユーザー認証を導入するよりも簡単に、かつ拡張性のある形で、保存機能を実装できたと思います。

画面はこんな感じです↓
○これが、フォーメーション作成画面
tf12_1.gif
○フォーメーション図作成完了画面では、URLが発行される。
tf12_2.gif

URLのアクセス先は設定反映済みのフォーメーション作成画面です!!!!


P.S.
今回の改修と同時に、デザインを少し変えました。
いつものことながら、IEとFireFoxの違いに悩まされています。
まだ全画面(3つしかないが…)のデザインが統一できてません。

それではどうぞ  → TextFormations

2006-12-07 Thu

TextFormationsバージョンアップ(ver1.1)

自作アプリケーションTextFormations~簡易フォーメーション図作成アプリ~をバージョンアップしました。

追加した機能は、色の即時反映。

ラジオボタンを排除して、クリックでプレービューへ反映&次画面への値の設定をするようにしました。
ラジオボタンがなくなった分、サイズを小さくまとめることが出来ました。

version11の新機能


JavaScriptを使って、「スタイルシートに直接アクセスするのと同時にhiddenの値を更新」というのはなかなか使えると思いました。

それではどうぞ  → TextFormations


さて、つぎつぎ

2006-11-10 Fri

TextFormationsバージョンアップ(ver1.0)

自作アプリケーションTextFormations~簡易フォーメーション図作成アプリ~をバージョンアップしました。

ついにバージョンも1.0に!!!

祝いたいところですが、、まだまだやりたいことがあるので、いつもどおり行きます。

今回の改修点は、前回前々回の改修により、
選手名の入力の後からも、フォーメーションが変更できるようになりました。

それにより、選手のポジション交換の必要がでてきたので、その部分についてJavaScriptを書きました。
本当はドラッグ&ドロップで変更できるようにしたかったのですが、なんとFireFoxが対応していないようなので仕方なく、

1、変更したい元の選手をクリック(その選手の背景が変わる)
   ↓
2、変更したい先の選手をクリック

の手順で変更できるようにしました。

まぁまぁの使いやすさです。
当然、選手名の入力部分も変更が反映されます。


IEでやると、テキストエリアがなぜか変込んだ形になってしまいますが、機能は実現されているので、良しとします。


それではどうぞ  → TextFormations

2006-11-05 Sun

TextFormationsバージョンアップ(ver0.9)

自作アプリケーションTextFormations~簡易フォーメーション図作成アプリ~をバージョンアップしました。

今回は大改修です。

Ajaxを使って、フォーメーションも即時に反映されるようにしました。

ということで、
「フォーメーションの選択」と「選手名の入力」が同時にプレビューを見ながら行えるようになりました。

この変更により、いままでフォーメーション選択の機能を持っていたTOPページが情報表示だけの機能になってしまいました。TOPページだけ見て帰っていく人が増えそうで心配です。(次のページへのリンクを大きく見せるように対応はして見ましたが…)

フォーメーション作成の方はこれでいっそう使いやすくなったと思います。

ただ、今回の改修によって「選手を簡単に入れ替える機能」が新たに必要になりました。
ドラッグ&ドロップで代えられるようにしたいです。

Ajaxを使ってみると、いままでページ遷移が必要だったことがとてもストレスであったことに気づかされます。

これでバージョンは0.9です。


それではどうぞ  → TextFormations

2006-11-04 Sat

TextFormationsバージョンアップ(ver0.8)

自作アプリケーションTextFormations~簡易フォーメーション図作成アプリ~をバージョンアップしました。

選手名入力画面で、LOWERのチェックボックスにチェックを入れると、選手の位置が変わる
という機能があるのですが、
それが、チェックを入れたときに、プレビューにすぐに反映されるようにしました。

Ajaxです。

改修内容は前のバージョンアップとほとんど同じなのですが、
JavaScripで、tdタグのvalignの値がどうしても呼び出せなくて苦労しました。
仕方なく、styleでvalignをしていすることにしました。こちらは、呼び出しが可能。

そのため、フォーメーションのテンプレートすべてに手を入れなければならなかったので、手間がかかりました。

もうひとつ、ふたつAjax使って使いやすくしようと思います。


それではどうぞ  → TextFormations

2006-11-03 Fri

TextFormationsバージョンアップ(ver0.7)

自作アプリケーションTextFormations~簡易フォーメーション図作成アプリ~をバージョンアップしました。

選手名入力画面で、選手名を入力すると、プレビューにすぐに反映されるようにしました。

Ajaxです。

どんどんAjaxを導入していく予定です。


それではどうぞ  → TextFormations

2006-10-25 Wed

TextFormationsバージョンアップ(ver0.6)

自作アプリケーションTextFormations~簡易フォーメーション図作成アプリ~をバージョンアップしました。

要望の多かった、"色"のカスタマイズ機能です。



フォーメーションの文字色、枠色、背景色、タイトル文字色を設定可能にしました。

できるだけ多くの色から選べるようにしたいと思い、125色を用意。
それが常に画面にあるとうるさいと思ったので、OPEN/CLOSE機能をつけ、
カスタマイズしたいときだけ表示できるようにしました。
ちょっとしたAJAXです。

WEB上の色は、赤、緑、青の3つの値からなるので、それを2次元のページ上にどう並べるか悩みましたが、5×5のパレットを5枚並べることでなんとか落ち着きました。(自分的には満足です)

完成して、実際に使ってみると、
色の組み合わせを考えられるというのは、面白いな~と感じました。
自分のオリジナルのカスタマイズができる楽しみというのは、ブロガーなら共感してもらえると思います。

ほかにもカスタマイズでき