loopshoot.com

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

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

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

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

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


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

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

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


それではどうぞ　→　TextFormations

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




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

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

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

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

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

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

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

それではどうぞ　→　TextFormations

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

before

after

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

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

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

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

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のフォーメーションを作ってみました。
マンチェスターユナイデッド
バイエルン
アーセナル
インテル
ミラン
チェルシー
リバプール

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

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

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

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

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

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

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

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

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

それではどうぞ　→　TextFormations

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

それではどうぞ　　→　TextFormations

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

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

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

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

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

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

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

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

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

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

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

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

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

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

それではどうぞ　　→　TextFormations

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

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

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

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

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

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

それではどうぞ　　→　TextFormations

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

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

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

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

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

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

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

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

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

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

画面はこんな感じです↓
○これが、フォーメーション作成画面

○フォーメーション図作成完了画面では、URLが発行される。

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

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

それではどうぞ　　→　TextFormations

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

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

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

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

それではどうぞ　　→　TextFormations

さて、つぎつぎ

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

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

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

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

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

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

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

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

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

それではどうぞ　　→　TextFormations

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

今回は大改修です。

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

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

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

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

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

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

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

それではどうぞ　　→　TextFormations

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

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

Ajaxです。

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

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

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

それではどうぞ　　→　TextFormations

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

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

Ajaxです。

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

それではどうぞ　　→　TextFormations