プログラマーですが何か?まだプログラマーですが何か?プログラマーネタとアスリートネタ中心。ウェブ画面へのファイルドラッグ&ドロップを実現する方法を紹介します。何も準備しないでウェブ画面へファイルをドラッグ&ドロップすると、デフォルト挙動によって、そのファイルがブラウザで開かれます。画像ファイルをウェブ画面にドラッグ&ドロップすると、その画像ファイルがブラウザ内で開かれて表示されます。ドラッグ&ドロップを実現するには、まずブラウザのこのデフォルト挙動を上書きして、別の挙動にするよう指定する必要があります。指定しておく必要があります。これでファイルをドロップしてもブラウザでは開かなくなります。プロパティにはドラッグ&ドロップしたファイルの情報が配列で入ってきます。その画像を表示する、という挙動を実装しています。することで動的に(リロードなしに)そのドロップされたファイルをブラウザ内に表示することができるようになります。この挙動を実装したのが以下です。(の一部)など、複数行に渡るようなテキストファイルの中身をまとめて1つの文字列変数内に格納したい場合にヒアドキュメントと呼ばれる構文を使うのが便利です。サポートされていません。ヒアドキュメントもどきのようなことはできます。関数で取り出して代入する、というアイデア賞ものの方法です。内に直書きして扱いたい場合に便利です。ハッカソンに参加してきました。限られた時間の中で4~5人のチームをビルドして、アイデアを出し、実現可能性を調べた上で実装する、というハッカソン。使うという前提で「旅をハックする」という制作テーマが与えられていました。提供されている各種サービスを使うことでシステム構築の手間を大幅に減らすことができます。よるチーム開発環境も提供されています。非常に相性のいい環境であると感じました。各チームに与えられた時間は8時間プラスアルファ。チーム内で役割分担して開発するとはいえ、必ずしも充分な時間とはいえません。そのため出されたアイデアのどの部分を実装するのか(どの部分は諦めるのか)、という判断も必要になります。使い、特定エリア(日本)の位置情報をリアルタイムに集めてDBに格納します。その情報を使い、地図上に表示されたエリア内で最近ツイートされたのはどんな情報か、を可視化するウェブアプリケーションです。よって、現在地が特定され、その周辺の地図が表示されます。同時に地図内の青みがかったエリア内で最近ツイートされた内容が画面右部に表示されます:また画面を下にスクロールすると、そのエリア内の宿泊施設や、周辺のマンホール(笑)の情報が表示される、というものです:地図をドラッグして青部分が移動すると、ツイート/宿泊施設情報/マンホール情報も、そのエリア内や周辺の情報に切り替わります。加えて、画面上部のファイル指定ボタンで位置情報が埋め込まれた画像を指定すると、その画像に含まれた位置まで地図が移動し、そのエリア周辺のツイートや宿泊施設の情報が表示されます。今回のハッカソンで作れたのはここまでです。組み合わせて感じ(苦笑)。本当はツイートを検索してもっと絞り込んだり、位置情報に付随した別の情報を表示したり、UIをより見やすくしたり、といったこともやりたかったのですが、優先度の判断で落としました。環境のすごさを目の当たりにした結果でもあると感じています。使っての印象として、やはりこれだけの情報を集めることができるようになったことは、非常に面白いと感じました。地図上で可視化する、というアイデア1つにしてももっと別のアプローチもあるでしょうし、またほとんどが位置とは関係のない情報ばかりである一方で、たまに隠れている「その地域の役立つ情報」を如何に探し出して表示するのか、という新しい課題も浮き彫りになりました。限られた時間の中での作業だからこそ、見えてくるものもあります。ハッカソンは終わってしまいましたが、このアプリを今後少し改良してみるつもりです。ハッカソンにはこういう「終わった後の楽しみ」もあっていいですね。番ポートで実行するための指定方法も書き加えています。番ポートで動いているように見せる、というものでした。番ポートで動かすことができるようになります。番ポートを専有してしまう」という難点もあります。番ポートも含めて専有してしまうということです。番ポートで平行して動かすことができます。アプリケーションサーバーを同時に動かす、ということが可能でした。動かすことができなくなってしまいます。サーバーを同時に動かすことはできなくなってしまいます。ユーザーに指定させる必要が出てきます。番ポートとなると会社レベルのファイアウォールが許可していない可能性も出てきます。これを解決する方法もあります。側で処理をする、という作業分担が可能になります。番ポートと停止することもできる)、という副次的なメリットも生まれます。