bathtimefish's blog

bathtimefish's blog2018-07-27T17:39:27+09:00bathtimefishHatena::Bloghatenablog://blog/6435922169449007119ニュース見て思ったことhatenablog://entry/102578461326050790782018-07-27T17:39:27+09:002018-07-27T17:41:31+09:00ほんとはFacebookに投稿しようと思って書きはじめたものなんだけど、長くなったしなんとなく思いついてブログのほうに晒しとこうと思います。気づいたら2年半ぶりくらいのブログと投稿になるんだけど、とくに意味深いものじゃありません。 【起きろ社畜】AIが社員の「まぶたを監視」して居眠りさせないようにする鬼システムが話題に! ネットの声「すごい奴隷制度」「国会に導入せよ」 https://rocketnews24.com/2018/07/26/1095540/ いま絶賛話題のダイキン工業さん&NECさんが実験中の まぶた監視->空調制御による居眠り抑制の実証実験について思ったこと。 ネットニュース…<p>ほんとは<a class="keyword" href="http://d.hatena.ne.jp/keyword/Facebook">Facebook</a>に投稿しようと思って書きはじめたものなんだけど、長くなったしなんとなく思いついてブログのほうに晒しとこうと思います。気づいたら2年半ぶりくらいのブログと投稿になるんだけど、とくに意味深いものじゃありません。</p> <p> </p> <p>【起きろ<a class="keyword" href="http://d.hatena.ne.jp/keyword/%BC%D2%C3%DC">社畜</a>】AIが社員の「まぶたを監視」して居眠りさせないようにする鬼システムが話題に! ネットの声「すごい<a class="keyword" href="http://d.hatena.ne.jp/keyword/%C5%DB%CE%EC%C0%A9">奴隷制</a>度」「国会に導入せよ」</p> <p><a href="https://rocketnews24.com/2018/07/26/1095540/">https://rocketnews24.com/2018/07/26/1095540/

<p> </p> <p>いま絶賛話題の<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%C0%A5%A4%A5%AD%A5%F3%B9%A9%B6%C8">ダイキン工業</a>さん&amp;<a class="keyword" href="http://d.hatena.ne.jp/keyword/NEC">NEC</a>さんが実験中の まぶた監視-&gt;空調制御による居眠り抑制の実証実験について思ったこと。</p> <p>ネットニュース初見では、「これがAI, IoTといったテク<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%CE%A5%ED">ノロ</a><a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%B8%A1%BC">ジー</a>について、世間一般の人への不信感を増大させるためが目的だとすると、実によく練られたソリューションである意味すごいな!」と思ったんだけど、さすがにそんなことはないだろうと思ってプレスリリースを探して読んでみた。</p> <p><a href="http://www.daikin.co.jp/press/2018/20180725/">http://www.daikin.co.jp/press/2018/20180725/

<p>仮説と検証方法の脈絡を読み解いてみると、ソリューションの目的は「従事者に適切な覚醒レベルを提供して生産効率を維持する」ということにみえる。 特に2) 検証結果のグラフをみると温度刺激に加えてアロマによる芳香刺激、ライトによる照明刺激とその複合によって覚醒レベルをコン<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%C8%A5%ED%A1%BC%A5%EB">トロール</a>できることが示唆されていて興味深い。</p> <p>このような検証をもとに今回のプロトタイプでは空調、照明の効果をピックアップしてその制御に依る覚醒レベルのコン<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%C8%A5%ED%A1%BC%A5%EB">トロール</a>を実証実験中。というのが正確な表現になるだろう。一概に「部屋を冷やして疲労した<a class="keyword" href="http://d.hatena.ne.jp/keyword/%BC%D2%C3%DC">社畜</a>を強制労働させ続ける」ということを狙ったものではない感じがした。</p> <p>一方で、本検証・実証については以下の疑問も出てくる。</p> <p>1. 本仮説にはヤーキーズ・ドットソンの法則が引用されているが、本法則に照らせば、ある一定水準のストレス状態に対して適切な刺激を与えると、覚醒レベルを維持向上させることができる示唆がされているが、逆にあまりに高いストレス状態に対して刺激を与えることは逆効果につながると説明されている。</p> <p><a href="https://en.wikipedia.org/wiki/Yerkes%E2%80%93Dodson_law">https://en.wikipedia.org/wiki/Yerkes%E2%80%93Dodson_law

<p>本検証において、まぶた監視によるストレス検知が当該法則で説明されている刺激を与えるに妥当なストレスレベルを検知できる手法であるのか?まぶたが下がりはじめた状態は睡眠初期でありストレスレベル軽であると仮定しているのであれば、その人のその時点での健康状態についての睡眠重要度が不明であるため、もしその時睡眠をとらなければ体調に不調をきたす状態であった場合、刺激を与えることが当該法則により不適当ということになる。そのあたりの考慮はされていのか?</p> <p>2. 本仮設はヤーキーズ・ドットソンの法則の覚醒度(the level of arousal)を眠気ストレスを測る度合としての"覚醒度"と同一視しているように見受けられるが、当該法則における arousal levelとは(to increase motivation) と説明されていて、どちらかというとやる気を測る指標である。このあたりは論文を読んでいない上で恐縮だが、当該法則について説明されているページをいくつか読んだ上ではやはり当該法則の「覚醒度」とは「やる気」に関係するもののようだ。</p> <p>ということは本検証は「眠気のない状態」=「やる気のある状態」という前提のもと構築されていることになり、本検証から出力されるソリューションは平たく言えば「眠気をなくせば、みんな意欲的にバリバリ働くのでオフィスの眠気を払拭しましょう!」というものになると推測される。</p> <p>... これマジだろうか?みなまでは言わないが。あまり極論を言いたくはないが、「オフィスに出勤している時点で意欲的に仕事をする気に違いない」という仮定は経営的観点からも誤りであり、「従業者のモチベーションはその人の身体、精神、周辺状態により日々変化している」という実際を無視していると捉えることもできるように思う。この点に対して、本検証ではどういう議論がされたのかが気になるところである。</p> <p>以上のことを鑑みてみると、本実証実験はまあAIやIoTを貶める目的でないことやある程度の仮説検証プロセスに基づき計画され明確な効果を狙ったプロジェクトであることが見える一方、これから引き続き検討しなければならない課題や検証がいくつかあることがうかがえる。個人的に思いつくのは、</p> <p>1. すべての眠い従業員を起こすことが妥当でない場合がある。何らかの方法で個々の従業員を計測し、本当に睡眠が重要な人にあっては別のケアを実行することをサブシステム等で設ける必要かもしれない。</p> <p>2. 本検証の効果から、上記疑問2についての前提が本当に妥当であるかどうかが生産効率の変化を計測することによって検証できるだろう。多くの従業員にとって従業中の「眠気のない状態」が「やる気のある状態」であれば良し。そうでなければソリューション全体を見直す必要に迫られるのかもしれない。この点は興味深いのでぜひ検証の報告を待ちたいものである。</p> <p>以上。</p> <p>あ、あと大企業が莫大な予算を投じてやっているAIやIoTの実証実験なので面白おかしく取り上げてTogetterあたりを盛り上げたいのはわかりますけどね各紙。ちょっとはコンテキストを読み解いて書いてあげるのも世の中のためによろしかろうと思いますよ。</p> <p>あと<a class="keyword" href="http://d.hatena.ne.jp/keyword/Twitter">Twitter</a>に書きたい人も、書く前に一回公式プレスリリースをみてそれでも面白おかしくdisれると判断したときに、絶賛書いたほうがいいと思います。</p>
bathtimefish
Espruino PicoでDS18B28で気温測ったのをESP-WROOM-2でMQTTしてみたhatenablog://entry/66535863471475963772015-12-14T00:30:00+09:002015-12-14T09:10:20+09:00JavaScript for Robotics or Hardware Advent Calendar 2015 14日目です。ロボットネタじゃねえけどJSBoardでもいいって書いてあったからEspruinoのネタにしました。 Espruino PicoはKickstarter発のマイコンボードでJavaScriptコンパイルして即実行するインタプリタを搭載しています。つーかインタプリタの名前がEspruinoでPicoはそのリファレンスボードのひとつって感じね。先輩のEspruino Boardに比べてめっちゃちっちゃいので本格的なデバイス実装にもいろいろ使えそうな感じです。最近ではAm…<p class="adventCalendarJumbotron_heading"><a href="http://qiita.com/advent-calendar/2015/jsrobotics">JavaScript for Robotics or Hardware Advent Calendar 2015</a> 14日目です。<br />ロボットネタじゃねえけどJSBoardでもいいって書いてあったからEspruinoのネタにしました。</p> <p class="adventCalendarJumbotron_heading"> </p> <p class="adventCalendarJumbotron_heading"><a href="http://www.espruino.com/Pico">Espruino Pico</a>はKickstarter発の<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%DE%A5%A4%A5%B3%A5%F3">マイコン</a>ボードで<a class="keyword" href="http://d.hatena.ne.jp/keyword/JavaScript">JavaScript</a>を<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%B3%A5%F3%A5%D1%A5%A4%A5%EB">コンパイル</a>して即実行する<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%A4%A5%F3%A5%BF%A5%D7%A5%EA%A5%BF">インタプリタ</a>を搭載しています。つーか<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%A4%A5%F3%A5%BF%A5%D7%A5%EA%A5%BF">インタプリタ</a>の名前が<a href="https://github.com/espruino/Espruino">Espruino</a>でPicoはそのリファレンスボードのひとつって感じね。先輩の<a href="http://www.espruino.com/EspruinoBoard">Espruino Board</a>に比べてめっちゃちっちゃいので本格的なデバイス実装にもいろいろ使えそうな感じです。最近では<a href="http://www.amazon.co.jp/Espruino-Pico-JavaScript-%E3%82%B9%E3%83%86%E3%82%A3%E3%83%83%E3%82%AF-%E3%83%9E%E3%82%A4%E3%82%AF%E3%83%AD%E3%82%B3%E3%83%B3%E3%83%88%E3%83%AD%E3%83%BC%E3%83%A9/dp/B011JU3JAW/ref=sr_1_1?ie=UTF8&qid=1449365996&sr=8-1&keywords=espruino+pico">Amazonで取扱もあって国内でも入手できるようになった</a>のだけどめっちゃ高い。これなら<a href="http://www.adafruit.com/product/2621">Adafruit</a>とかで買ったほうがいいっすね。</p> <p class="adventCalendarJumbotron_heading"> </p> <p class="adventCalendarJumbotron_heading">Espruinoのいいところはなんといっても<a class="keyword" href="http://d.hatena.ne.jp/keyword/JavaScript">JavaScript</a>ネイティブな<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%DE%A5%A4%A5%B3%A5%F3">マイコン</a>ボードであるということ。JSで<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%DE%A5%A4%A5%B3%A5%F3">マイコン</a>制御を体験できる、<a href="http://www.espruino.com/Tutorials">センサー&amp;デバイスの豊富な対応ライブラリがビルトインされている</a>、<a href="http://www.espruino.com/Web+IDE">IDE</a>で簡単に対話/書き込み実行が可能、STM32, Raspberry Piをはじめとする<a href="https://github.com/espruino/Espruino/blob/master/README_Building.md">様々なデバイスでビルド可能</a>といったところがメリットとして挙げられます。個人的には一番漢なJSBoardだと思っていてJSネイティブってだけで他のことはどうでもいいです。ですよね。</p> <p class="adventCalendarJumbotron_heading"> </p> <p class="adventCalendarJumbotron_heading">去年は<a href="http://qiita.com/advent-calendar/2014/espruino">Espruino Advent Calendar 2014</a>をいっぱい書いて燃え尽きた感あったので今年は書かないつもりだったけど<a class="keyword" href="http://d.hatena.ne.jp/keyword/JavaScript">JavaScript</a> for Robotics or Hardwareというキーワードに釣られて一個でも書こうかと思った次第。で、ネタとしてはPicoになってから新たに加わったMQTT機能といま絶賛ブレイク中のESP8266 <a class="keyword" href="http://d.hatena.ne.jp/keyword/Wifi">Wifi</a>チップを使ってなんかやることにします。送るデータはなんでも良かったのでとりあえずDS18B20デジタル温度計で気温取って送った。Espruino公式の<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%C1%A5%E5%A1%BC%A5%C8%A5%EA%A5%A2%A5%EB">チュートリアル</a>的には<a href="http://www.espruino.com/DS18B20">これ</a>と<a href="http://www.espruino.com/ESP8266">これ</a>の合わせ技プラスアルファみたいな感じです。</p> <p class="adventCalendarJumbotron_heading"> </p> <h4>配線</h4> <p class="adventCalendarJumbotron_heading">ブレッドボード上での配線はこんな感じです。</p> <p><img class="hatena-fotolife" title="f:id:bathtimefish:20151206161958j:plain" src="http://cdn-ak.f.st-hatena.com/images/fotolife/b/bathtimefish/20151206/20151206161958.jpg" alt="f:id:bathtimefish:20151206161958j:plain" /></p> <p>上だとわかりづらいのでEspruino Picoとの話<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%EF%A5%A4%A5%A2%A1%BC%A5%C9">ワイアード</a>を図にしたのがこちら。</p> <p><img class="hatena-fotolife" title="f:id:bathtimefish:20151206164443p:plain" src="http://cdn-ak.f.st-hatena.com/images/fotolife/b/bathtimefish/20151206/20151206164443.png" alt="f:id:bathtimefish:20151206164443p:plain" /></p> <p class="adventCalendarJumbotron_heading">Fritzing使ったことないけど練習で描いてみたのがこちら。今回使ってるのはESP-WROOM-2だけどFritzingのオブジェクトになかったので違うESP8266チップになってます。そのためWROOM-2よりピン1列少なくて配線が異なったりしてますが、その辺は雰囲気です。上の写真が正しいので参考程度にしてください。</p> <p><img class="hatena-fotolife" title="f:id:bathtimefish:20151206160136p:plain" src="http://cdn-ak.f.st-hatena.com/images/fotolife/b/bathtimefish/20151206/20151206160136.png" alt="f:id:bathtimefish:20151206160136p:plain" /></p> <p><a href="http://cerevo.shop-pro.jp/?pid=91592223">CerevoのESP-WROOM-2ブレイクアウトボード</a>を使用しました。他のブレイクアウトボードよりもピン出しが素直な感じで気に入ってます。ピンレイアウトはこちら。</p> <p><a class="http-image" href="http://tech-blog.cerevo.com/wp-content/uploads/2015/07/53f0389a5f6bf0a2dfde0073841dbd67.jpg" target="_blank"><img class="http-image" src="http://tech-blog.cerevo.com/wp-content/uploads/2015/07/53f0389a5f6bf0a2dfde0073841dbd67.jpg" alt="http://tech-blog.cerevo.com/wp-content/uploads/2015/07/53f0389a5f6bf0a2dfde0073841dbd67.jpg" /></a></p> <p>イ<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%CD%A1%BC%A5%D6%A5%EB">ネーブル</a>とリセットを10kΩの抵抗でプルアップ、電源をEspruino Picoの3.3V、各<a class="keyword" href="http://d.hatena.ne.jp/keyword/GND">GND</a>をPicoの<a class="keyword" href="http://d.hatena.ne.jp/keyword/GND">GND</a>、TXDをPicoのB7(UART1 RX), RXDをPicoのB6(UART1 TX)に接続します。DS18B20デジタル温度計は<a href="http://www.espruino.com/DS18B20">こちら</a>を参考に。<a class="keyword" href="http://d.hatena.ne.jp/keyword/GND">GND</a>(左ピン)をPicoの<a class="keyword" href="http://d.hatena.ne.jp/keyword/GND">GND</a>に、データ(真ん中ピン)をPicoのB1、電源(右ピン)をPicoの3.3Vに接続します。データ(真ん中ピン)と電源(右ピン)を4.7kΩの抵抗で接続します。</p> <h4>MQTT subscriberの準備</h4> <p>MQTT subscriberは去年のEspruino Advent Calenderのrockymanobiくんのものを使わせてもらいました。<a href="https://github.com/rockymanobi/espruino-mqtt-sample">rockymanobi/espruino-mqtt-sample </a>をcloneして以下を実行します。</p> <blockquote> <p>node broker.js</p> </blockquote> <p>別のウィンドウで</p> <blockquote> <p>node subscriber.js</p> </blockquote> <p>broker.jsの画面で<a class="keyword" href="http://d.hatena.ne.jp/keyword/IP%A5%A2%A5%C9%A5%EC%A5%B9">IPアドレス</a>が表示されるので後述のEspruinoの<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%BD%A1%BC%A5%B9%A5%B3%A1%BC%A5%C9">ソースコード</a>中の mqttHostに<a class="keyword" href="http://d.hatena.ne.jp/keyword/IP%A5%A2%A5%C9%A5%EC%A5%B9">IPアドレス</a>をセットします。</p> <h4>Espruinoのプログラミング</h4> <p><a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%BD%A1%BC%A5%B9%A5%B3%A1%BC%A5%C9">ソースコード</a>は以下。</p> <p> <script src="https://gist.github.com/bathtimefish/f3e5a732388f0b888806.js"></script> </p> <p>使用したESP8266のファームバージョンは0.25.0.0だったので<a href="http://www.espruino.com/ESP8266">ドキュメント</a>にしたがってESP8266WiFi_0v25をrequireしました。ボーレートは115200です。configオブジェクトには<a class="keyword" href="http://d.hatena.ne.jp/keyword/Wifi">Wifi</a>の<a class="keyword" href="http://d.hatena.ne.jp/keyword/SSID">SSID</a>、パスワード、MQTT subscriberのホストIPをセットします。</p> <p>Espruino <a class="keyword" href="http://d.hatena.ne.jp/keyword/IDE">IDE</a>でプログラムを転送してしばらくすると、<a class="keyword" href="http://d.hatena.ne.jp/keyword/Wifi">Wifi</a>に接続されてpublisherのコンソールで温度が表示されるようになります。</p> <p><img class="hatena-fotolife" title="f:id:bathtimefish:20151206160808j:plain" src="http://cdn-ak.f.st-hatena.com/images/fotolife/b/bathtimefish/20151206/20151206160808.jpg" alt="f:id:bathtimefish:20151206160808j:plain" /></p> <p>DS18B20の温度取得をsetIntervalで回して、それとは別に<a class="keyword" href="http://d.hatena.ne.jp/keyword/Wifi">Wifi</a>をセットアップしてMQTT接続を確立、確立後2秒ごとにsubscriberに向かって温度データをpublishしています。こんな感じで非同期でセンサー毎にループが書けるのはJSのメリットが活かせて便利だと思う。</p> <p><img class="hatena-fotolife" title="f:id:bathtimefish:20151205171420j:plain" src="http://cdn-ak.f.st-hatena.com/images/fotolife/b/bathtimefish/20151205/20151205171420.jpg" alt="f:id:bathtimefish:20151205171420j:plain" /></p> <h4>まとめ</h4> <p>EspruinoはMQTTライブラリをビルトインでサポートしているので簡単にMQTT通信するデバイスをつくることができます。あとESP8266安くていいですね。Espruinoでも最近ESP8266対応の<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%EA%A5%D5%A5%A1%A5%AF%A5%BF%A5%EA%A5%F3%A5%B0">リファクタリング</a>が積極的に行われています。さらに<a href="https://github.com/espruino/Espruino/blob/master/README_Building.md#for-esp8266">EspruinoをESP8266上に直接書き込んでビルドする方法</a>も公開されていて激アツです。これは今度やってみたい。</p> <p>MQTT対応側でも<a href="http://docs.aws.amazon.com/iot/latest/developerguide/iot-message-broker.html">AWS IoT Message Broker</a>向けと思われるライブラリが<a href="https://github.com/espruino/EspruinoDocs/pull/194">マージされた</a>りと面白そうなことになってる。<a href="https://github.com/espruino/Espruino/pull/749">こんなマージ</a>もあったし今後も注目したいですね。</p> <p>以上です。<br />Espruino日本でももっと流行んねぇかな。</p>bathtimefish<a class="keyword" href="http://d.hatena.ne.jp/keyword/Android%20Wear">Android Wear</a>のアプリを<a class="keyword" href="http://d.hatena.ne.jp/keyword/HTML5">HTML5</a>つくってみるhatenablog://entry/84544204500830499142015-02-10T15:11:29+09:002015-02-10T15:24:49+09:00最近キャラ的にHTML5属性のほかにウェアラブル属性が追加された気がして、まあ日本ウェアラブルバイスユーザー会(WUG)とかやってたりヘンなデバイスたくさん買ったりしてるので仕方ない。つーかソフトウェアと違ってハード持ってると目立ちますね。最近イベントいったらよく写メ撮られます。塚本先生には遠く及ばないけど。 ウェアラブルのこと話してるとよく「職業変えたんですか?」と聞かれるけど、そんなことはない。そもそもWUGをやりたかったのもGoogle Glassをはじめてみたときに「あー、これのアプリはそのうちHTML5で動くだろうな」と思ったから。Androidウェアラブルになるという時点でどう…<p>最近キャラ的に<a class="keyword" href="http://d.hatena.ne.jp/keyword/HTML5">HTML5</a>属性のほかに<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%A6%A5%A7%A5%A2%A5%E9%A5%D6%A5%EB">ウェアラブル</a>属性が追加された気がして、まあ<a href="http://w-ug.jp/">日本ウェアラブルバイスユーザー会</a>(WUG)とかやってたりヘンなデバイスたくさん買ったりしてるので仕方ない。つーかソフトウェアと違ってハード持ってると目立ちますね。最近イベントいったらよく写メ撮られます。<a href="http://ja.wikipedia.org/wiki/%E5%A1%9A%E6%9C%AC%E6%98%8C%E5%BD%A6">塚本先生</a>には遠く及ばないけど。</p> <p> </p> <p><a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%A6%A5%A7%A5%A2%A5%E9%A5%D6%A5%EB">ウェアラブル</a>のこと話してるとよく「職業変えたんですか?」と聞かれるけど、そんなことはない。そもそもWUGをやりたかったのも<a class="keyword" href="http://d.hatena.ne.jp/keyword/Google%20Glass">Google Glass</a>をはじめてみたときに「あー、これのアプリはそのうち<a class="keyword" href="http://d.hatena.ne.jp/keyword/HTML5">HTML5</a>で動くだろうな」と思ったから。<a class="keyword" href="http://d.hatena.ne.jp/keyword/Android">Android</a>が<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%A6%A5%A7%A5%A2%A5%E9%A5%D6%A5%EB">ウェアラブル</a>になるという時点でどうせそのうち<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%A6%A5%A7%A5%A2%A5%E9%A5%D6%A5%EB">ウェアラブル</a>デバイスにも<a class="keyword" href="http://d.hatena.ne.jp/keyword/HTML5">HTML5</a>の波がおしよせてくると思ったんです。なのでその感覚を忘れないために<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%A6%A5%A7%A5%A2%A5%E9%A5%D6%A5%EB">ウェアラブル</a>デバイスを日常的に追っかける必要があると思ったからみんなとユーザー会を立ち上げたというのが本音。</p> <p> </p> <p>まあGlassは当分ないでしょうけど、そう遠い将来でもないんじゃないでしょうか。昨今の<a class="keyword" href="http://d.hatena.ne.jp/keyword/Android">Android</a>と<a class="keyword" href="http://d.hatena.ne.jp/keyword/Chrome">Chrome</a>の融合っぷりをみるともちろんモバイルのほうが先だろうけど、そのうちアプリランタイムとしての<a class="keyword" href="http://d.hatena.ne.jp/keyword/Android">Android</a>と<a class="keyword" href="http://d.hatena.ne.jp/keyword/Chrome">Chrome</a>は見分けがつかなくなるんじゃないかな。そのころには<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%A6%A5%A7%A5%A2%A5%E9%A5%D6%A5%EB">ウェアラブル</a>な<a class="keyword" href="http://d.hatena.ne.jp/keyword/Android">Android</a>は普通に<a class="keyword" href="http://d.hatena.ne.jp/keyword/HTML5">HTML5</a>だと。まあそうなったら誰得かは別にしておもしろいなと思います。</p> <p> </p> <p>で、そういう未来を見据えてかどうか、去年から<a href="http://blog.ludei.com/cocoonjs-enables-android-wear-html5-app-development/">CocoonJSがAndroid Wearに対応</a>していてかなり限定的ではあるけど<a class="keyword" href="http://d.hatena.ne.jp/keyword/HTML5">HTML5</a>で<a class="keyword" href="http://d.hatena.ne.jp/keyword/Android">Android</a> Wearアプリが書けるという選択肢が登場しました。これ速攻で試すつもりだったんだけど実機持ってなかったりハンダ付けにはまったりしてたんでやるの遅くなりました。昨年末に<a href="http://auonlineshop.kddi.com/disp/CSfLastGoodsPage_001.jsp?GOODS_NO=4939">LG Watch R</a>を購入したのでやれる状況になったのでやってみた。やってみた結果がこれ。</p> <p> </p> <p><img class="hatena-fotolife" title="f:id:bathtimefish:20150210122550j:plain" src="http://cdn-ak.f.st-hatena.com/images/fotolife/b/bathtimefish/20150210/20150210122550.jpg" alt="f:id:bathtimefish:20150210122550j:plain" /></p> <p><img class="hatena-fotolife" title="f:id:bathtimefish:20150210122554j:plain" src="http://cdn-ak.f.st-hatena.com/images/fotolife/b/bathtimefish/20150210/20150210122554.jpg" alt="f:id:bathtimefish:20150210122554j:plain" /></p> <p><img class="hatena-fotolife" title="f:id:bathtimefish:20150210122557j:plain" src="http://cdn-ak.f.st-hatena.com/images/fotolife/b/bathtimefish/20150210/20150210122557.jpg" alt="f:id:bathtimefish:20150210122557j:plain" /></p> <p><a class="keyword" href="http://d.hatena.ne.jp/keyword/HTML5">HTML5</a>, JS, CSS3のロゴがsetIntervalでふわふわ切り替わります。ちょっと外出の用事があってデモ動いてからバスの中で写真とった。家に出る前に作業してだいたい15分くらいで動くところまでできたと思う。<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%BD%A1%BC%A5%B9%A5%B3%A1%BC%A5%C9">ソースコード</a>はこちら。</p> <p><a href="https://github.com/bathtimefish/html5-wear-app">bathtimefish/html5-wear-app · GitHub</a></p> <p> </p> <p>ludei公式の <a href="https://github.com/ludei/app-wear-demo">app-wear-demo</a> をちょっといじってシンプルにした感じ。元が<a href="http://labs.hyperandroid.com/static/caat/">caat.js</a>使ってたんで何も考えずにフローをなぞったけど、やってることが単純なので素の<a class="keyword" href="http://d.hatena.ne.jp/keyword/Canvas">Canvas</a> 2Dで書いたほうがもっと良くなる気がする。まあその気になったら<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%EA%A5%D5%A5%A1%A5%AF%A5%BF%A5%EA%A5%F3%A5%B0">リファクタリング</a>するかもしないかも。</p> <p><br /><a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%BD%A1%BC%A5%B9%A5%B3%A1%BC%A5%C9">ソースコード</a>のビルドの仕方は app-wear-demo のREADMEに書いてあります。また、<a href="http://blog.ludei.com/cocoonjs-enables-android-wear-html5-app-development/">CocoonJS Enables Android Wear HTML5 App Development</a> のブログにも書いてある。まあざっくり言うと、CocoonJSでプロジェクト作ってソースzipでアップして、<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%B3%A5%F3%A5%D1%A5%A4%A5%EB">コンパイル</a>オプションで<a class="keyword" href="http://d.hatena.ne.jp/keyword/Android">Android</a> Wearを指定。出来上がったapkを<a class="keyword" href="http://d.hatena.ne.jp/keyword/Android">Android</a> Wearに直接 adb install するだけです。</p> <p> </p> <p>まあCocoonJS使えば<a class="keyword" href="http://d.hatena.ne.jp/keyword/Android">Android</a> Wearも<a class="keyword" href="http://d.hatena.ne.jp/keyword/HTML5">HTML5</a>だぜーざまーと言えるかなと思ったけど、現状はネタ的にそう言えるレベルかなと思いました。現状では<a class="keyword" href="http://d.hatena.ne.jp/keyword/Canvas">Canvas</a>でのグラフィック描画とタップイベントくらいがサポートされているようで、<a class="keyword" href="http://d.hatena.ne.jp/keyword/Bluetooth">Bluetooth</a>とかセンサー系の<a class="keyword" href="http://d.hatena.ne.jp/keyword/API">API</a>は用意されていない。handheldとやりとりするアプリとかはできないからつくれるものにかなり制限がある。</p> <p> </p> <p>あと、起動遅い、バッテリーの減りが尋常じゃない、しばらく動かしてると時計がホカホカしてくるなどの特典があってまあそうだよなーという感じ。このあたりがどう進化していくか、CocoonJS的にネタで終わるのか。今後もぬるく見守っていこうと思いました。</p>bathtimefishAngularJSリファレンスを読んで書いたりしてみたhatenablog://entry/84544204500786410992015-01-01T13:53:47+09:002015-01-01T13:53:47+09:00HTML5 Expertsやhtml5j部長のよしみで著者の金井さんに献本いただいたAngularJSリファレンス。いただいてから結構時間が経ってしまったけど、とりあえずざっと読み通したのでレビューなど書かせていただこうかと思います。 AngularJSリファレンス 作者: 池添明宏,金井健一,吉田徹生,丸山弘詩 出版社/メーカー: インプレス 発売日: 2014/09/05 メディア: 単行本(ソフトカバー) この商品を含むブログを見る まずは献本いただきありがとうございます。恐縮です。AngularJSはぼちぼち勉強していってるんだけどまだ仕事で使ったことなくて具体的なノウハウがあんまりな…<p><a class="keyword" href="http://d.hatena.ne.jp/keyword/HTML5">HTML5</a> Expertsやhtml5j部長のよしみで著者の<a href="http://html5experts.jp/canidoweb/">金井さん</a>に献本いただいたAngularJSリファレンス。<br />いただいてから結構時間が経ってしまったけど、とりあえずざっと読み通したのでレビューなど書かせていただこうかと思います。</p> <p> </p> <div class="freezed"> <div class="hatena-asin-detail"><a href="http://www.amazon.co.jp/exec/obidos/ASIN/4844336681/hatena-blog-22/"><img class="hatena-asin-detail-image" title="AngularJSリファレンス" src="http://ecx.images-amazon.com/images/I/51gDda3RiUL._SL160_.jpg" alt="AngularJSリファレンス" /></a> <div class="hatena-asin-detail-info"> <p class="hatena-asin-detail-title"><a href="http://www.amazon.co.jp/exec/obidos/ASIN/4844336681/hatena-blog-22/">AngularJSリファレンス</a></p> <ul> <li><span class="hatena-asin-detail-label">作者:</span> 池添明宏,金井健一,吉田徹生,丸山弘詩</li> <li><span class="hatena-asin-detail-label">出版社/メーカー:</span> <a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%A4%A5%F3%A5%D7%A5%EC%A5%B9">インプレス</a></li> <li><span class="hatena-asin-detail-label">発売日:</span> 2014/09/05</li> <li><span class="hatena-asin-detail-label">メディア:</span> 単行本(ソフトカバー)</li> <li><a href="http://d.hatena.ne.jp/asin/4844336681/hatena-blog-22" target="_blank">この商品を含むブログを見る</a></li> </ul> </div> <div class="hatena-asin-detail-foot"> </div> </div> </div> <p> <br />まずは献本いただきありがとうございます。恐縮です。<br /><a href="https://angularjs.org/ ">AngularJS</a>はぼちぼち勉強していってるんだけどまだ仕事で使ったことなくて具体的なノウハウがあんまりない感じ。あとディレクティブとか<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%B3%A5%F3%A5%DD%A1%BC%A5%CD%A5%F3%A5%C8">コンポーネント</a>とか興味のある部分しか見てないので全体的な知識があまりない状態。<br />ボクはそんな感じなのでこの本をいただいて全体的に勉強できるチャンスだなと思った次第です。結果的に知らなかったことが多くて大変勉強になりました。</p> <h4>入門しやすさがよく考えられてると思う</h4> <p>AngularJSといえばJS高機能フロントエンド<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%D5%A5%EC%A1%BC%A5%E0%A5%EF%A1%BC%A5%AF">フレームワーク</a>としてよく知られていると思います。高機能である一方、入門の敷居が高いことでも知られているわけで、便利便利と言われているわりに日本のユーザーがイマイチ増えてない気がしてます。</p> <p>特に<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%C1%A5%E5%A1%BC%A5%C8%A5%EA%A5%A2%A5%EB">チュートリアル</a>を抜けてさあ自分で考えて使ってみようなシーンになるととたんに難しくなるイメージがあって、その時点で諦めちゃうユーザーが多いんじゃないかなと思います。リファレンス本はその敷居をどう切り抜けるんだろうかと思ってたら、まずビルトインディレクティブの使い方をサンプルコード付きで説明するというアプローチをとってます。</p> <p>これはとてもうまいなと思った。JS初心者でも入りやすいと思います。個人的にこの本で一番好感だったのがこの点です。ビルトインディレクティブの使い方ということは、9割がた<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%BD%A1%BC%A5%B9%A5%B3%A1%BC%A5%C9">ソースコード</a>もHTMLのみになるわけで、HTMLを書けば動的なUIができるというのはAngularJSの恩恵が実感できる。</p> <p>さながら「<a class="keyword" href="http://d.hatena.ne.jp/keyword/jQuery">jQuery</a> Mobileで簡単Webアプリ作成」みたいなノリがあってまったくAngularJSを知らない人にも最初に興味を持ってもらえるいいアプローチだと思いました。その前に「AngularJSとは」でAngularJSの基本的な構造や決まり事の説明があるけど、そのへんも理論抜きでさらっとやってるところも好感です。</p> <p>技術屋だとこのあたりで構造や設計理論などをつい説明しがちだけど、それって入門者のストレスを上げるだけなので入門本としては不向きかもしれない。その辺の気遣いが垣間見えた気がしてよく考えられてるなと思いました。</p> <p>DOM操作系のディレクティブから先に説明しているのもいい。なんというかngAppあたりから説明するのがセオリーかなと思えるんだけど、ngBindTemplateとかngClassとか実践でよく使うものを優先しているのもいいです。</p> <h4>とにかく端的な説明と豊富なサンプルコードがいい</h4> <p>全章とおして説明が端的簡潔なのと必ずその後にサンプルコードがついているのがいいです。タイトルのとおりリファレンスとして開発中に字引として使える。<br />なんせビルトインディレクティブだけでも大量にあって、フィルタやサービスとそのセマンティクスなんか全部覚えるの不可能なのでなんとなく覚えといて使う時に都度調べる。<br />そういう現場でのニーズによくはまってると思います。会社に一冊置いてあってもいいでしょうね。</p> <p>個人的にはカスタムディレクティブの作成法とか詳しく知りたくて、他の章とばしてそこ読んだんだけどとにかく理論的なことは省いて実装例がたくさん載せてあったのはよかったです。まあ2,3回読んで覚えられることじゃないし、ざっくり何が書いてあるか覚えておいて実際使う時にピンポイントで実装例を参考にするという使い方ができる。実装例のコードも丁寧に書いてあるのでそのまま使えてありがたいです。</p> <p>考えてみれば最近、「〜〜徹底解説」みたいな本を読んでもサンプルコードしか見てない気がする。まあ制作者の立場からすると、ある意味使えて動けばいいわけで、そういう立場の人にはよく合う本じゃないかなあと思います。</p> <p>とりあえず動かせるようになってから本家や<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%BD%A1%BC%A5%B9%A5%B3%A1%BC%A5%C9">ソースコード</a>を見て理論を把握すればよいしね。もし「AngularJS徹底解説」なんて本が出たら間違いなくタウンページみたいな厚さになるし高いからたぶん買わないなあ。</p> <h4>1.3のコラムが興味深い</h4> <p>各章のコラムに現在開発中の1.3や2.0系の情報があって、これがためになりました。<br />2.0なんて全然追っかけてないので勉強になった。個人的には<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/observe">Object.observe</a> の普及とAngularJSのアップデートの関係が興味深いけど、そのあたりを意識した未来のAngularJSの設計がどうなってるかを追いかけてなかった。</p> <p>コラムの情報はそれほど多くないけど、いろいろ想像するきっかけになって本性並みにためになったというのが感想です。</p> <h4>まとめ</h4> <p>いい本です。献本いただいたのでお世辞をいいたいところですが、ガチでいいです。増刷かかったって聞いたけど納得の内容。<br />献本なくても本屋で立ち読みしたら買ってました。</p> <p>特に、とりあえず理屈はいいんで早く使えるようになりたいって人にオススメです。</p> <p>あと、あけましておめでとうございます。本年もどうぞよろしくお願い申し上げます。</p>bathtimefishEspruino TypeScript向けに espruino.d.ts を書いたっていうか書きかけhatenablog://entry/84544204500777681342014-12-22T21:14:06+09:002014-12-22T21:16:43+09:00Espruino Advent Calender 22日目です。 Web屋というのはソフトウェア開発者の中でも最も組込み系と縁が遠いところにいるような気がしていて、そんな立場でEspruinoを使っているとなんかこう微妙な気持ちになってくることがあります。特に組込み系というと静的型付けという先入観があって、動的でそのへんをよくdisられるJavaScriptで書いてると、なんとなくなんか言われそうな強迫観念というか被害妄想というかそういうのが片隅に湧いたりします。っていうのはボクだけなんでしょう。 まあべつにJS好きだし普通に動くのでいいんですが、一方でEspruinoで込み入った制御を書いて…<p><a href="http://qiita.com/advent-calendar/2014/espruino">Espruino Advent Calender 22日目</a>です。</p> <p>Web屋というのはソフトウェア開発者の中でも最も組込み系と縁が遠いところにいるような気がしていて、そんな立場でEspruinoを使っているとなんかこう微妙な気持ちになってくることがあります。<br />特に組込み系というと静的型付けという先入観があって、動的でそのへんをよくdisられる<a class="keyword" href="http://d.hatena.ne.jp/keyword/JavaScript">JavaScript</a>で書いてると、なんとなくなんか言われそうな強迫観念というか被害妄想というかそういうのが片隅に湧いたりします。っていうのはボクだけなんでしょう。</p> <p>まあべつにJS好きだし普通に動くのでいいんですが、一方でEspruinoで込み入った制御を書いてるときはちょっとクラスにまとめてみたいなという欲求も出てきて<a href="http://www.typescriptlang.org/">TypeScript</a>を試してみようという気になってきました。<br />そんなわけでEspruinoの処理をTypeScriptで書いてみようと思いました。つまりTypeScriptで書いて<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%B3%A5%F3%A5%D1%A5%A4%A5%EB">コンパイル</a>したJSをEspruino <a class="keyword" href="http://d.hatena.ne.jp/keyword/IDE">IDE</a>で転送する。というやり方です。</p> <p>やってみると個人的にはなかなか気に入りました。しかしEspruinoでTypeScriptをやるとそのままでは動かないことがあります。<br />それはEspruino独自のグローバルオブジェクトが<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%B3%A5%F3%A5%D1%A5%A4%A5%EB">コンパイル</a>エラーを起こすことです。</p> <p>EspruinoにはA0, C6, LED1といったGPIO用などのグローバルなオブジェクトが存在します。また <a href="http://www.espruino.com/Reference#l__global_digitalWrite">digitalWrite</a>, <a href="http://www.espruino.com/Reference#l__global_analogRead">analogRead</a>, <a href="http://www.espruino.com/Reference#l__global_setWatch">setWatch</a>といった独自のグローバル関数もあります。<br />これらがTypeScriptでは未定義のオブジェクトとなり<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%B3%A5%F3%A5%D1%A5%A4%A5%EB">コンパイル</a>エラーが出てJSが生成されません。</p> <p>これはTypeScriptで <a class="keyword" href="http://d.hatena.ne.jp/keyword/jQuery">jQuery</a>やnode.jsなどのライブラリを使ってコードを書いても起こることで、型厳密を追求するTypeScriptの特長です。<br />解決するには各ライブラリ向けの<a href="http://www.typescriptlang.org/Handbook#writing-dts-files">declaration file</a>をつくります。<a class="keyword" href="http://d.hatena.ne.jp/keyword/%B3%C8%C4%A5%BB%D2">拡張子</a>は .d.ts です。</p> <p>というわけで、Espruino向け declaration file espruino.d.ts を書きました。っていうか書きかけです。</p> <p><iframe class="embed-card embed-webcard" style="width: 100%; height: 155px; max-width: 500px; margin: 10px 0px;" title="bathtimefish/espruino.d.ts" src="http://hatenablog.com/embed?url=https%3A%2F%2Fgithub.com%2Fbathtimefish%2Fespruino.d.ts" frameborder="0" scrolling="no"><a href="https://github.com/bathtimefish/espruino.d.ts">bathtimefish/espruino.d.ts</a></iframe><br /> <a href="https://github.com/bathtimefish/espruino.d.ts">bathtimefish/espruino.d.ts · GitHub</a></p> <p>使い方は、.ts ファイルと同じディレクトリに置いて .tsの行頭に以下のコメントを書きます。</p> <script src="https://gist.github.com/bathtimefish/6c6d60bdcc2ea906edb2.js"></script> <p>こうすることで<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%B3%A5%F3%A5%D1%A5%A4%A5%EB">コンパイル</a>時にespruino.d.ts中の<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%A2%A5%F3%A5%D3%A5%A8%A5%F3%A5%C8">アンビエント</a>宣言が参照されるようになります。<br />espruino.d.tsは今のところすべてのオブジェクトを定義できていません。ていうかすごく単純なことしか定義できてないです。anyだらけでゆるゆるです。<br />そもそもTypeScriptの declareやinterfaceの書き方がいまいちつかめなくて<a href="https://github.com/borisyankov/DefinitelyTyped">Definitely Typed</a>を参考にしながら手探りで書いてます。TS力が足りてない。。</p> <p>まあ、Espruino独自のオブジェクトの型が定義されることで存在しないプロパティを参照したりする危険性が少なくなるのでいいかもしれません。<br />必要なところからぼちぼちアップデートしていこうと思います。</p> <p>よく考えたらこの記事はEspruinoっていうかTypeScriptの記事だった気がしますが気にしないことにします。</p>bathtimefishEspruino 圧力センサーでつまむとLEDが光るやつをつくるhatenablog://entry/84544204500776495232014-12-21T11:30:46+09:002014-12-21T11:30:46+09:00Espruino Advent Calender 21日目です。 先日、ハード系のハッカソンに参加したら圧力センサーを使ってるチームがいて圧力おもしろいなと思ったので買ってみました。値段も手頃だし壊れにくそうなので電子回路の勉強には使いやすいかなと思います。というわけで今回はEspruino と圧力センサーをつなげてみようと思います。 とりあれずセンサーに圧力をかけたらLEDが光るみたいなarduinoとかでよくあるデモをつくってみようと思います。圧力センサーは与えられた圧力に応じて抵抗が変化するのでespruinoで回路の電圧の変化を読み取ります。そのために抵抗分圧回路というのをつくります。…<p><a href="http://qiita.com/advent-calendar/2014/espruino">Espruino Advent Calender 21日目</a>です。</p> <p>先日、ハード系のハッカソンに参加したら圧力センサーを使ってるチームがいて圧力おもしろいなと思ったので買ってみました。<br />値段も手頃だし壊れにくそうなので電子回路の勉強には使いやすいかなと思います。<br />というわけで今回はEspruino と圧力センサーをつなげてみようと思います。</p> <p>とりあれずセンサーに圧力をかけたらLEDが光るみたいな<a class="keyword" href="http://d.hatena.ne.jp/keyword/arduino">arduino</a>とかでよくあるデモをつくってみようと思います。<br />圧力センサーは与えられた圧力に応じて抵抗が変化するのでespruinoで回路の電圧の変化を読み取ります。そのために<a href="http://www.kairo-nyumon.com/resistor_divider.html">抵抗分圧回路</a>というのをつくります。</p> <p>用意するもの</p> <p>* <a href="http://akizukidenshi.com/catalog/g/gP-04002/">圧力センサーFSR402</a><br />* <a href="http://akizukidenshi.com/catalog/g/gI-00624/">LED</a><br />* <a href="http://akizukidenshi.com/catalog/g/gR-25103/">抵抗 10kオーム</a><br />* <a href="http://akizukidenshi.com/catalog/g/gR-07972/">抵抗 220オーム</a><br />* ジャンパワイヤ 7本</p> <p>回路はこんな感じになります。</p> <p><img class="hatena-fotolife" title="f:id:bathtimefish:20141221103353j:plain" src="http://cdn-ak.f.st-hatena.com/images/fotolife/b/bathtimefish/20141221/20141221103353.jpg" alt="f:id:bathtimefish:20141221103353j:plain" /></p> <p>赤いケーブルを espruinoのvbatに、黒いケーブルを espruinoの<a class="keyword" href="http://d.hatena.ne.jp/keyword/GND">GND</a>に接続します。<br />緑のケーブルを espruinoのA0ピンに、青いケーブルを espruinoのA8ピンに接続します。</p> <p><a class="keyword" href="http://d.hatena.ne.jp/keyword/JavaScript">JavaScript</a>はこんな感じ。</p> <script src="https://gist.github.com/bathtimefish/36c0ead44b5bbd6259af.js"></script> <p>Espruino <a class="keyword" href="http://d.hatena.ne.jp/keyword/IDE">IDE</a>でプログラムを転送するとこんな感じで動きます。<br /><a href="http://www.espruino.com/Reference#l__global_analogRead">analogRead(A0)</a>で取得した値が0.5以下になるとLEDが点灯する仕組みです。</p> <p><img class="hatena-fotolife" title="f:id:bathtimefish:20141221103611j:plain" src="http://cdn-ak.f.st-hatena.com/images/fotolife/b/bathtimefish/20141221/20141221103611.jpg" alt="f:id:bathtimefish:20141221103611j:plain" /></p> <p>vbat(赤ケーブル)からくる電圧に10kオームの抵抗をかませます。その後にA0ピン(緑ケーブル)を挿しその後に圧力センサの片方のピンを接続、圧力センサのもう片方のピンを<a class="keyword" href="http://d.hatena.ne.jp/keyword/GND">GND</a>に落とします。<br /><br />こうすることで圧力センサをつまんだときに変化する抵抗で回路の電圧が変化しA0ピンでその電圧の変化を計測できます。こういうのを<a href="http://www.kairo-nyumon.com/resistor_divider.html">抵抗分圧回路</a>というらしいです。<br /><br />秋月のページによるとFSR402圧力センサーは力いっぱいつまんで10kオームということなので前に10kオームかませることで力いっぱいつまむと約5V、半分くらいだと約2.5V、何もしないと約0V。おおざっぱにいうとそんなかんじで電圧が変化します。</p> <p>温度計や圧力センサーなんかは単純な回路でアナログ値が取得できます。単純なんだけどやってみると意外に面白くて初歩的な回路の勉強にもなります。<br />なるほど<a class="keyword" href="http://d.hatena.ne.jp/keyword/arduino">arduino</a>とかの<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%C1%A5%E5%A1%BC%A5%C8%A5%EA%A5%A2%A5%EB">チュートリアル</a>でよくやられる理由がわかります。</p> <p>Espruinoには各種センサー向けのビルトインライブラリが豊富に用意されていて<a href="http://www.espruino.com/Tutorials">チュートリアル</a>も充実していますが、個人的にはanalogReadみたいな基本的な機能を使いこなすのもおもしろくなってきた今日このごろです。</p>bathtimefishEspruino 人感センサーで動きを検知してみるhatenablog://entry/84544204500770483012014-12-14T16:13:05+09:002014-12-14T16:39:32+09:00Espruino Advent Calender 14日目です。 なんとなく人感センサーが好きです。焦電素子で生き物の動きを検知。自動ドアとかで使われているやつです。回路も単純でいかにもセンサー使ったっぽくなるので電気回路初心者のボクでも動かしやすいわけで、今回はEspruinoで人感センサーを使って動きを検知してみます。 基本的にはこちらのCode Exampleそのまんまです。人感センサーもここに載ってるのと同じやつを使います。 人体感知センサーモジュール HC-SR501 配線はこんな感じ まず黒いワイヤをEspruinoのGNDピンに挿します。次に赤いワイヤをBatピン、緑のワイヤをA…<p><a href="http://qiita.com/advent-calendar/2014/espruino">Espruino Advent Calender 14日目</a>です。</p> <p>なんとなく人感センサーが好きです。<a href="http://ja.wikipedia.org/wiki/%E7%84%A6%E9%9B%BB%E7%B4%A0%E5%AD%90">焦電素子</a>で生き物の動きを検知。自動ドアとかで使われているやつです。<br />回路も単純でいかにもセンサー使ったっぽくなるので電気回路初心者のボクでも動かしやすいわけで、今回はEspruinoで人感センサーを使って動きを検知してみます。</p> <p>基本的にはこちらの<a href="http://www.espruino.com/Pyroelectric">Code Example</a>そのまんまです。人感センサーもここに載ってるのと同じやつを使います。</p> <p><a href="http://www.marutsu.co.jp/pc/i/238993/">人体感知センサーモジュール HC-SR501</a></p> <p>配線はこんな感じ</p> <p><img class="hatena-fotolife" title="f:id:bathtimefish:20141214160833j:plain" src="http://cdn-ak.f.st-hatena.com/images/fotolife/b/bathtimefish/20141214/20141214160833.jpg" alt="f:id:bathtimefish:20141214160833j:plain" /></p> <p>まず黒いワイヤをEspruinoの<a class="keyword" href="http://d.hatena.ne.jp/keyword/GND">GND</a>ピンに挿します。次に赤いワイヤをBatピン、緑のワイヤをA1ピンに挿します。</p> <p><img class="hatena-fotolife" title="f:id:bathtimefish:20141214155355j:plain" src="http://cdn-ak.f.st-hatena.com/images/fotolife/b/bathtimefish/20141214/20141214155355.jpg" alt="f:id:bathtimefish:20141214155355j:plain" /></p> <p>そして黒いワイヤを人感センサーの左端のピン(<a class="keyword" href="http://d.hatena.ne.jp/keyword/GND">GND</a>)に、緑のワイヤを真ん中のピン(OUT)、赤いワイヤを右端のピン(VCC)に挿します。<br />これで配線は完了です。</p> <p><a class="keyword" href="http://d.hatena.ne.jp/keyword/Javascript">Javascript</a>の<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%BD%A1%BC%A5%B9%A5%B3%A1%BC%A5%C9">ソースコード</a>は以下です。</p> <script src="https://gist.github.com/bathtimefish/d29319dc87c6d046480c.js"></script> <p>setWatch()関数を使って焦電センサーの状態を監視します。<br />動きが検知されるとsetWatch内のコールバックが呼ばれLED2(緑LED)が点灯する仕組みです。<br />setTimeoutで3秒後にLED2を消灯します。</p> <p><img class="hatena-fotolife" title="f:id:bathtimefish:20141214154006j:plain" src="http://cdn-ak.f.st-hatena.com/images/fotolife/b/bathtimefish/20141214/20141214154006.jpg" alt="f:id:bathtimefish:20141214154006j:plain" /></p> <p><a href="http://www.espruino.com/Reference#l__global_setWatch">setWatch()</a> はEspruino独自の関数で setInterval(callback, 0) みたいな動きをする関数ですが、オプションで監視の繰り返しや監視する電圧状態の指定、監視間隔が指定できるのでセンサーの監視に特化してるみたいです。</p> <p>玄関に人が来たらアラームがなるやつとか、Espruinoで普通に作れそうでおもしろいです。</p>bathtimefishEspruinoのビルトインLEDをコン<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%C8%A5%ED%A1%BC%A5%EB">トロール</a>するクラスを書いたhatenablog://entry/84544204500769187572014-12-13T16:21:58+09:002014-12-13T16:21:58+09:00Espruino Advent Calender 13日目です。 Espruinoでちょっとまともなモックアップをつくったりしていると、電源状態やエラーの通知などでビルトインのLEDを点灯させたり点滅させたりする必要がでてきました。Espruinoには赤、緑、青の3つのLEDがついてJavaScript的にはLED1, LED2, LED3というオブジェクトが割り当てられています。なんかちょっとそれっぽいプロトタイプをつくるときに例えば電源ONのときには緑を点灯、通信中のときは青を点滅、エラーのときには赤を点滅といった制御をすると見た目それっぽくていいです。 処理的には単純なんだけど、毎回書く…<p><a href="http://qiita.com/advent-calendar/2014/espruino">Espruino Advent Calender 13日目</a>です。</p> <p>Espruinoでちょっとまともな<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%E2%A5%C3%A5%AF%A5%A2%A5%C3%A5%D7">モックアップ</a>をつくったりしていると、電源状態やエラーの通知などでビルトインのLEDを点灯させたり点滅させたりする必要がでてきました。<br />Espruinoには赤、緑、青の3つのLEDがついて<a class="keyword" href="http://d.hatena.ne.jp/keyword/JavaScript">JavaScript</a>的にはLED1, LED2, LED3というオブジェクトが割り当てられています。<br />なんかちょっとそれっぽいプロトタイプをつくるときに例えば電源ONのときには緑を点灯、通信中のときは青を点滅、エラーのときには赤を点滅といった制御をすると見た目それっぽくていいです。</p> <p>処理的には単純なんだけど、毎回書くのがめんどうだなと思って簡単に使えるSignalsクラスを書きました。</p> <p>こんな感じで使います。</p> <script src="https://gist.github.com/bathtimefish/3dcc80e90a802b6981c5.js?file=signals_test.js"></script> <p>LED1~3の振る舞いをセットしたオブジェクトを segnals.set()の引数にするだけです。<br />上記のコードではLED1(赤)が消灯、LED2(緑)が点滅、LED3(青)が点灯です。</p> <p>Signalsの<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%BD%A1%BC%A5%B9%A5%B3%A1%BC%A5%C9">ソースコード</a>はこんな感じ。最近慣れてきたTypeScriptで書きました。</p> <script src="https://gist.github.com/bathtimefish/3dcc80e90a802b6981c5.js?file=signals.ts"></script> <p><a class="keyword" href="http://d.hatena.ne.jp/keyword/tsc">tsc</a>で吐かれた<a class="keyword" href="http://d.hatena.ne.jp/keyword/JavaScript">JavaScript</a>コードは以下。こちらをEspruino <a class="keyword" href="http://d.hatena.ne.jp/keyword/IDE">IDE</a>に貼り付けて動かします。</p> <script src="https://gist.github.com/bathtimefish/3dcc80e90a802b6981c5.js?file=signals.js"></script> <p>Espruinoはrequire()で外部JSモジュールを読み込めるんだけど、 <a href="http://qiita.com/rockymanobi/items/af1174e10a5966ee6350">9日目</a>で書かれているようにSDカードが必要だったりちょっとしたことでやるには面倒です。<br />なので今のところmoduleにせず単なるクラスとして利用するようにしてます。</p> <p>利用する場合は Signals クラスを単にプログラムに含めるかたちで。ちょっとソースが冗長になるけど、まあ簡単便利と<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%C8%A5%EC%A1%BC%A5%C9%A5%AA%A5%D5">トレードオフ</a>かなと思ってます。<br />個人的には便利に使えてます。</p>bathtimefishEspruino シリアル通信でTWE-Liteの受信コマンドを表示してみるhatenablog://entry/84544204500763896112014-12-07T18:50:47+09:002014-12-08T00:06:33+09:00Espruino Advent Calender 7日目です。最近TWE-LiteにはまっているのでEspruinoとつなげてみようと思います。Espruino、TWE-LiteはともにサポートしているUARTで通信してTWE-Liteのデータ通信の様子をのぞいてみようと思います。 完成形 完成形はこんなかんじです。 左側のブレッドボードがTWE-Lite DIP親機、右側が子機です。子機をEspruinoにつなげて、親機からの受信データコマンドをEspruino IDEに表示しています。 今回つかったパーツ一覧 TWE-Lite DIP 2台 LED ブレッドボード 2台 リチウムイオンポリ…<p><a href="http://qiita.com/advent-calendar/2014/espruino">Espruino Advent Calender 7日目</a>です。<br />最近<a href="http://tocos-wireless.com/jp/products/TWE-001Lite.html">TWE-Lite</a>にはまっているのでEspruinoとつなげてみようと思います。<br />Espruino、TWE-Liteはともにサポートしている<a href="http://ja.wikipedia.org/wiki/UART">UART</a>で通信してTWE-Liteのデータ通信の様子をのぞいてみようと思います。</p> <h4>完成形</h4> <p>完成形はこんなかんじです。</p> <p><img class="hatena-fotolife" title="f:id:bathtimefish:20141207182352j:plain" src="http://cdn-ak.f.st-hatena.com/images/fotolife/b/bathtimefish/20141207/20141207182352.jpg" alt="f:id:bathtimefish:20141207182352j:plain" /></p> <p>左側のブレッドボードがTWE-Lite <a class="keyword" href="http://d.hatena.ne.jp/keyword/DIP">DIP</a>親機、右側が子機です。<br />子機をEspruinoにつなげて、親機からの受信データコマンドをEspruino <a class="keyword" href="http://d.hatena.ne.jp/keyword/IDE">IDE</a>に表示しています。</p> <h4>今回つかったパーツ一覧</h4> <ul> <li><a href="http://akizukidenshi.com/catalog/g/gM-06760/">TWE-Lite DIP</a>  2台</li> <li><a href="http://www.sengoku.co.jp/mod/sgk_cart/detail.php?code=EEHD-4FE5">LED</a></li> <li><a href="http://akizukidenshi.com/catalog/g/gP-05294/">ブレッドボード</a>  2台</li> <li><a href="http://www.sengoku.co.jp/mod/sgk_cart/detail.php?code=EEHD-4FAS1">リチウムイオンポリマー電池 3.7V 40mAh  </a></li> <li><a href="http://www.sengoku.co.jp/mod/sgk_cart/detail.php?code=EEHD-4DBK">ジャンパワイヤー</a>  </li> <li><a href="http://www.sengoku.co.jp/mod/sgk_cart/detail.php?code=EEHD-0J3R">ジャンパワイヤパック</a>  </li> <li><a href="http://www.sengoku.co.jp/mod/sgk_cart/detail.php?code=EEHD-0BPJ">PHR 2Pケーブル</a>  </li> <li><a href="http://akizukidenshi.com/catalog/g/gP-03648/">タクトスイッチ</a> </li> </ul> <p>TWE-Lite <a class="keyword" href="http://d.hatena.ne.jp/keyword/DIP">DIP</a>は親、子の2台必要です。<br />親機の電源はたまたま道具箱の中にあった<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%EA%A5%C1%A5%A6%A5%E0%A5%A4%A5%AA%A5%F3%C5%C5%C3%D3">リチウムイオン電池</a>を使いましたが、単3電池2本とかで大丈夫です。<br />ただしTWE-Liteは3.6V以下でないと動かないので電源は3.6V以下にしてください。<br />3.6V以上入れると壊れる可能性があります。</p> <h4>親機の組み立て</h4> <p>配線は写真のようにします。</p> <p><img class="hatena-fotolife" title="f:id:bathtimefish:20141207171554j:plain" src="http://cdn-ak.f.st-hatena.com/images/fotolife/b/bathtimefish/20141207/20141207171554.jpg" alt="f:id:bathtimefish:20141207171554j:plain" /></p> <p>TWE-Lite <a class="keyword" href="http://d.hatena.ne.jp/keyword/DIP">DIP</a>の仕組みについては長くなるので割愛します。配線は<a href="http://tocos-wireless.com/jp/products/TWE-Lite-DIP/TWE-Lite-DIP-step1.html">TWE-Lite DIP使用方法初級編</a>や <a href="http://www.amazon.co.jp/TWE%E2%80%90Lite-%E3%83%88%E3%83%AF%E3%82%A4%E3%83%A9%E3%82%A4%E3%83%88-%E3%81%A7%E3%81%AF%E3%81%98%E3%82%81%E3%82%8B%E3%82%AB%E3%83%B3%E3%82%BF%E3%83%B3%E9%9B%BB%E5%AD%90%E5%B7%A5%E4%BD%9C%E2%80%95%E3%80%8C%E7%84%A1%E7%B7%9A%E3%82%B7%E3%82%B9%E3%83%86%E3%83%A0%E3%80%8D%E3%81%8C%E3%80%8C%E3%81%A4%E3%81%AA%E3%81%90%E3%80%8D%E3%81%A0%E3%81%91%E3%81%A7%E5%87%BA%E6%9D%A5%E3%82%8B-I%E3%83%BBO-BOOKS/dp/4777518485/ref=sr_1_1?ie=UTF8&qid=1417940216&sr=8-1&keywords=twe-lite%E3%81%A7%E3%81%AF%E3%81%98%E3%82%81%E3%82%8B+%E3%82%AB%E3%83%B3%E3%82%BF%E3%83%B3%E9%9B%BB%E5%AD%90%E5%B7%A5%E4%BD%9C">TWE-Liteではじめる カンタン電子工作</a> に書いてあるほぼそのまんまです。<a class="keyword" href="http://d.hatena.ne.jp/keyword/PHR">PHR</a><a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%B3%A5%CD%A5%AF%A5%BF">コネクタ</a>をつけて3.7Vの<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%EA%A5%C1%A5%A6%A5%E0%C5%C5%C3%D3">リチウム電池</a>を電源にしました。<br />TWE-Liteの動作電圧は3.6V以下なので3.7Vの電池は少しオーバー電圧ですが電池をテスターで測ったらだいたい3.4Vくらいしか出てなかったのでそのまま接続しても大丈夫でした。</p> <h4>子機の組み立て</h4> <p>配線は写真のようにします。</p> <p><img class="hatena-fotolife" title="f:id:bathtimefish:20141207173320j:plain" src="http://cdn-ak.f.st-hatena.com/images/fotolife/b/bathtimefish/20141207/20141207173320.jpg" alt="f:id:bathtimefish:20141207173320j:plain" /></p> <p>こちらも初級編や本に書いてある子機の配線そのままです。電源はEspruinoからとります。赤いケーブルをEspruinoの3.3とシルクプリントされているピンに挿し、黒いケーブルを<a class="keyword" href="http://d.hatena.ne.jp/keyword/GND">GND</a>と書いてあるピンに挿します。<br />これでEspruinoからTWE-Liteへ3.3Vの電圧がはいります。間違って3.3のとなりにあるBatには接続しないでください。Batは5VなのでTWE-Liteが壊れます。</p> <h4>TWE-Lite同士が通信できるか試してみる</h4> <p>組み立てたら親機の電池をつなぎ、子機のEspruinoをUSBケーブルでPCと繋げます。<br />そして、親機のタクトスイッチを押してみます。子機のLEDが点灯したら正常に通信ができています。</p> <p><img class="hatena-fotolife" title="f:id:bathtimefish:20141207173901j:plain" src="http://cdn-ak.f.st-hatena.com/images/fotolife/b/bathtimefish/20141207/20141207173901.jpg" alt="f:id:bathtimefish:20141207173901j:plain" /></p> <h4>シリアル接続する</h4> <p>いったんEspruinoからUSBケーブルをはずして、シリアル通信のためのケーブルを配線します。まず、子機の3番ピン(左下から3番目)の真下のブレッドボードの穴にケーブルを挿します。<br />次に子機の10番ピン(左下から10番目)の真下のブレッドボードの穴に別のケーブルを挿します。</p> <p><img class="hatena-fotolife" title="f:id:bathtimefish:20141207174747j:plain" src="http://cdn-ak.f.st-hatena.com/images/fotolife/b/bathtimefish/20141207/20141207174747.jpg" alt="f:id:bathtimefish:20141207174747j:plain" /></p> <p>3番ピンに挿したケーブルをEspruinoのB6ピンに挿します。そして10番ピンに挿したケーブルをEspruinoのB7ピンに挿します。</p> <p><img class="hatena-fotolife" title="f:id:bathtimefish:20141207175115j:plain" src="http://cdn-ak.f.st-hatena.com/images/fotolife/b/bathtimefish/20141207/20141207175115.jpg" alt="f:id:bathtimefish:20141207175115j:plain" /></p> <p>この2本の配線でUARTの送受信が可能になります。</p> <h4>コードを書く</h4> <p><a class="keyword" href="http://d.hatena.ne.jp/keyword/JavaScript">JavaScript</a>コードは以下になります。</p> <script src="https://gist.github.com/bathtimefish/e09da6992ad0ed6ad8ee.js"></script> <p>Espruinoの<a href="http://www.espruino.com/Reference#Serial">Serial Class</a> を使います。<br />Serial1はEspruinoが持つ6つの汎用シリアルポートの内のひとつです。</p> <p>Serial1.setup()でTWE-Liteとのシリアル接続を設定します。<br />TWE-Liteのデフォルトの通信設定は、</p> <ul> <li>ボーレート(通信速度): 115200bps</li> <li>データ長: 8bit</li> <li><a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%D1%A5%EA%A5%C6%A5%A3">パリティ</a>(データチェックの有無): none</li> <li>ストップビット(区切りの長さ): 1bit</li> <li>フロー制御(送信一時停止を行う機能): none</li> </ul> <p>です。Serial1.setup()の引数にこれらを設定します。<br />options.tx, options.rxはそれぞれUARTの送受信ピンを指定しています。</p> <p>Serial1.on()でdataイベントを補足し、コールバック内にTWE-Liteのデータ受信コマンドが返ってきます。<br />データは分割して受信され、キャリッジリターンが終端になっているので printLine()でデータの断片を処理し1行のデータとして表示しています。<br />このあたりの処理は<a href="http://www.espruino.com/USART">EspruinoのUARTのページ </a>を参酌しました。</p> <h4>実行してみる</h4> <p>親機を電池につなぎ、EspruinoをPCとUSBケーブルで接続します。<br />Espruino <a class="keyword" href="http://d.hatena.ne.jp/keyword/IDE">IDE</a>を起動し、Espruinoと接続します。<br /><a class="keyword" href="http://d.hatena.ne.jp/keyword/JavaScript">JavaScript</a>コードをエディタに貼り付け、Espruinoに転送してみましょう。</p> <p>約1秒間隔でデータがコンソールにデータが表示されます。このデータが子機が親機から受信しているデータです。</p> <p>TWE-Liteの受信データの例:</p> <p>:00811501<span style="color: #cc0000;">D2</span>8100693F00111500<span style="color: #0000cc;">0D2D</span>1D<span style="color: #00cc00;">01</span>01FFFFFFFFFFF4</p> <p>TWE-Liteの受信データの内容は、<a href="http://tocos-wireless.com/jp/products/TWE-Lite-USB/monitor.html">このページ</a>の「データの読み方」の段で解説されています。<br />この実験でデータの変化を確認できるのは以下の3点です。</p> <p>* 受信電波品質(赤文字の部分)<br />* 電源電圧(青文字の部分)<br />* デジタル入力(緑文字の部分)</p> <p>受信電波品質は親機と子機を離したり近づけたりすると変化します。<br />電源電圧は一定ではないため常に変化します。<br />デジタル入力は親機のボタンを押すと01、離すと00となります。</p> <h4>まとめ</h4> <p>TWE-Liteたのしいです。省電力でけっこう通信距離が長いし、データの構造もシンプルなので単純なデータの送受信ならすぐできます。<br />Espruino連動させるといろんな用途のセンサーネットワーク用小型デバイスができそうです。<br />なにより<a class="keyword" href="http://d.hatena.ne.jp/keyword/JavaScript">JavaScript</a>でそれが実現できるってのがたまりませんね。<br /><br /></p> <p><img class="hatena-fotolife" title="f:id:bathtimefish:20141207182352j:plain" src="http://cdn-ak.f.st-hatena.com/images/fotolife/b/bathtimefish/20141207/20141207182352.jpg" alt="f:id:bathtimefish:20141207182352j:plain" /></p>bathtimefishEspruino setIntervalでLEDを点滅させてみるhatenablog://entry/84544204500763119322014-12-06T22:01:52+09:002014-12-06T23:42:49+09:00Espruino Advent Calender 6日目です。今日はEspruinoにLEDをつなげてsetInterval()でLチカしてみます。2日目とかぶってますが気にしないでください。書いてから気づきました。LチカというのはLEDをチカチカ点滅させることで、はじめて電子工作をするときによく動作確認として試されます。ソフトウェア開発でのHello Worldみたいなものですね。 ここではEspruinoに市販のLEDを配線してLチカしてみます。Espruinoに搭載されているLEDでやってもいいんですが、せっかくなので電子工作っぽい感じを出してみます。 用意するもの Espruino B…<p><a href="http://qiita.com/advent-calendar/2014/espruino">Espruino Advent Calender 6日目</a>です。<br />今日はEspruinoにLEDをつなげてsetInterval()でLチカしてみます。<a href="http://qiita.com/rockymanobi/items/9420037d32c4e12b7dc8">2日目</a>とかぶってますが気にしないでください。書いてから気づきました。<br />LチカというのはLEDをチカチカ点滅させることで、はじめて電子工作をするときによく動作確認として試されます。<br />ソフトウェア開発での<a class="keyword" href="http://d.hatena.ne.jp/keyword/Hello%20World">Hello World</a>みたいなものですね。</p> <p>ここではEspruinoに市販のLEDを配線してLチカしてみます。<br />Espruinoに搭載されているLEDでやってもいいんですが、せっかくなので電子工作っぽい感じを出してみます。</p> <h4>用意するもの</h4> <p>Espruino Board意外に用意するものは以下です。<br /><a class="keyword" href="http://d.hatena.ne.jp/keyword/%BD%A9%B7%EE%C5%C5%BB%D2">秋月電子</a>や<a class="keyword" href="http://d.hatena.ne.jp/keyword/%C0%E9%C0%D0%C5%C5%BE%A6">千石電商</a>などの電子パーツ店によく売ってあるならだいたいなんでもいいんですが、具体例としてリンクを貼っておきます。</p> <p>* <a href="http://www.sengoku.co.jp/mod/sgk_cart/detail.php?code=EEHD-4FE5">LED</a><br />* <a href="http://akizukidenshi.com/catalog/g/gP-05294/">ブレッドボード</a><br />* <a href="http://www.sengoku.co.jp/mod/sgk_cart/detail.php?code=33MT-35HC">ジャンパワイヤー(2本 赤、黒)</a></p> <p>Espruinoは<a href="http://akizukidenshi.com/catalog/g/gC-00167/">ピンヘッダ</a>または<a href="http://akizukidenshi.com/catalog/g/gC-05779/">ピンソケット</a>がハンダ付けされた状態を前提としています。<br />ジャンパワイヤ購入の際はワイヤのオスメス構成をよく確認してから購入してください。</p> <p>例えばEspruinoにピンソケット(メス)を取り付けている場合、ジャンパワイヤは(オス-オス)でブレッドボードと結線できます。</p> <p>Espruino[メス][オス]---[オス][メス]ブレッドボード</p> <p>というかたちです。</p> <p>Espruinoにピンヘッダ(オス)を取り付けている場合、ワイヤは(メス-オス)でブレッドボードと結線と結線できます。</p> <p>Espruino[オス][メス]---[オス][メス]ブレッドボード</p> <p>というかたちです。</p> <p>その他注意すべき点は<a href="http://rocky-manobi.com/blog/?p=224">4日目</a>の記事にも書いてあるので参考にしてください。</p> <h4>LEDをブレッドボードに取り付ける</h4> <p>LEDをブレッドボードに取り付けます。<br />まず、ブレッドボードを横(長いほうを水平)におきます。</p> <p><img class="hatena-fotolife" title="f:id:bathtimefish:20141206211111j:plain" src="http://cdn-ak.f.st-hatena.com/images/fotolife/b/bathtimefish/20141206/20141206211111.jpg" alt="f:id:bathtimefish:20141206211111j:plain" /></p> <p>次にブレッドボード上のたくさん空いている穴にLEDの足を挿します。<br />ここではLEDの足の長い方を左、短い方を右にしてブレッドボードに挿し込みます。</p> <p><img class="hatena-fotolife" title="f:id:bathtimefish:20141206211158j:plain" src="http://cdn-ak.f.st-hatena.com/images/fotolife/b/bathtimefish/20141206/20141206211158.jpg" alt="f:id:bathtimefish:20141206211158j:plain" /></p> <p>LEDにはプラス極とマイナス極があります。<br />足の長いほうがプラス極、短いほうがマイナス極です。上の写真では左のほうがちょっと長いですね。左がプラス極です。<br />刺すときにどちらがプラスでどちらがマイナスかを覚えておきましょう。<br />ワイヤを刺すときに必要です。</p> <p><img class="hatena-fotolife" title="f:id:bathtimefish:20141206211214j:plain" src="http://cdn-ak.f.st-hatena.com/images/fotolife/b/bathtimefish/20141206/20141206211214.jpg" alt="f:id:bathtimefish:20141206211214j:plain" /></p> <p>ブレッドボードを横に置いて、LEDの足を水平方向に挿しました。<br />これにも意味があります。<br />ブレッドボード内に流れる電気の方向には決まったルールがあります。<br />LEDを垂直方向に挿しても光らないので注意してください。</p> <h4>ジャンパワイヤをとりつける</h4> <p>ジャンパワイヤはLEDを挿した穴の真下の穴に挿し込みます。<br />LEDのプラス側(左)には赤いワイヤ、マイナス側(右)には黒いワイヤを挿します。</p> <p><img class="hatena-fotolife" title="f:id:bathtimefish:20141206211331j:plain" src="http://cdn-ak.f.st-hatena.com/images/fotolife/b/bathtimefish/20141206/20141206211331.jpg" alt="f:id:bathtimefish:20141206211331j:plain" /></p> <p>実はワイヤは何色でもいいんですが、Espruinoにワイヤを挿すときにプラスとマイナスを間違えないようにこうしています。<br />電子工作ではプラスを赤、マイナスを黒で表現することが多いので、習慣にしておくといいでしょう。</p> <h4>Espruinoと結線する</h4> <p>ブレッドボードに取り付けたワイヤをEspruinoに挿します。<br />念のためEspruinoからUSBケーブルを抜いて電源が入っていない状態にしておきましょう。</p> <p>まず黒いケーブル(LEDのマイナス側)をEspruino Boardの<a class="keyword" href="http://d.hatena.ne.jp/keyword/GND">GND</a>(<a href="http://www.espruino.com/ReferenceESPRUINOBOARD">PINOUT</a>のボード写真の一番左下のピン)に取り付けます。<br />次に、赤いケーブル(LEDのプラス側)をEspruino BoradのA8(<a href="http://www.espruino.com/ReferenceESPRUINOBOARD">PINOUT</a>の右上から6番目のピン)に取り付けます。</p> <p><img class="hatena-fotolife" title="f:id:bathtimefish:20141206211445j:plain" src="http://cdn-ak.f.st-hatena.com/images/fotolife/b/bathtimefish/20141206/20141206211445.jpg" alt="f:id:bathtimefish:20141206211445j:plain" /></p> <p>A8はEspruino Boardにいくつかあるデジタル入出力ピンのひとつです。<br />今回はこのA8ピンに電流を流したり消したりすることで、LEDを点滅させます。</p> <h4><a class="keyword" href="http://d.hatena.ne.jp/keyword/JavaScript">JavaScript</a>を書く</h4> <p>LEDを点滅させるための<a class="keyword" href="http://d.hatena.ne.jp/keyword/JavaScript">JavaScript</a>コードを書きます。<br />Espruinoには<a href="https://chrome.google.com/webstore/detail/espruino-web-ide/bleoifhkdalbjfbobjackfdifdneehpo">Espruino IDE</a>という開発環境が用意されています。<br />ここではEspruino <a class="keyword" href="http://d.hatena.ne.jp/keyword/IDE">IDE</a>のエディタにコードを書いて、Espruinoに転送して実行させてみます。</p> <p><a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%BD%A1%BC%A5%B9%A5%B3%A1%BC%A5%C9">ソースコード</a>は以下です。</p> <script src="https://gist.github.com/bathtimefish/f85f27cf702f16e122df.js"></script> <p> setInterval()を使って1秒間隔でコールバック内の処理が繰り返し実行されるようにします。<br />on = !on; の部分で onをtrue, falseと交互に変更しています。<br />A8.write(on); でLEDに電圧をかけたり電圧を落としたりしています。<br />A8.write(true); でLEDに電圧がかかり点灯、A8.write(false); でLEDの電圧が落ちて消灯となります。</p> <h4>Lチカを実行する</h4> <p><a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%BD%A1%BC%A5%B9%A5%B3%A1%BC%A5%C9">ソースコード</a>をEspruino Boardに転送して実行します。<br />まず、USB-micro USBケーブルをPCにつなぎ、micro USB端子側をEspruino Boardに接続します。</p> <p>次にEspruino <a class="keyword" href="http://d.hatena.ne.jp/keyword/IDE">IDE</a>左上のConnectボタンをクリック。接続可能なポートの一覧が表示されるのでEspruinoのttyを選択します。<br />ポートは /dev/tty.usbmodem**** となっています。</p> <p><img class="hatena-fotolife" title="f:id:bathtimefish:20141206215810p:plain" src="http://cdn-ak.f.st-hatena.com/images/fotolife/b/bathtimefish/20141206/20141206215810.png" alt="f:id:bathtimefish:20141206215810p:plain" /></p> <p>正常に接続されると、<a class="keyword" href="http://d.hatena.ne.jp/keyword/IDE">IDE</a>左側のコンソールパネルにプロンプトが表示されます。<br /><br /></p> <p><img class="hatena-fotolife" title="f:id:bathtimefish:20141206220025p:plain" src="http://cdn-ak.f.st-hatena.com/images/fotolife/b/bathtimefish/20141206/20141206220025.png" alt="f:id:bathtimefish:20141206220025p:plain" /></p> <p><br />この状態で、<a class="keyword" href="http://d.hatena.ne.jp/keyword/IDE">IDE</a>中央の一番下の Send to Espruino ボタンをクリックします。</p> <p><img class="hatena-fotolife" title="f:id:bathtimefish:20141206215904p:plain" src="http://cdn-ak.f.st-hatena.com/images/fotolife/b/bathtimefish/20141206/20141206215904.png" alt="f:id:bathtimefish:20141206215904p:plain" /></p> <p>正常に転送されると、1秒間隔でLEDが点滅しはじめます。</p> <p><img class="hatena-fotolife" title="f:id:bathtimefish:20141206212012j:plain" src="http://cdn-ak.f.st-hatena.com/images/fotolife/b/bathtimefish/20141206/20141206212012.jpg" alt="f:id:bathtimefish:20141206212012j:plain" /></p> <p>うまくいったでしょうか。</p> <h4>まとめ</h4> <p><a class="keyword" href="http://d.hatena.ne.jp/keyword/Arduino">Arduino</a>でのLチカは</p> <p>```<br />void loop()<br /><br /> digitalWrite(ledPin, HIGH);<br /> delay(1000);<br /> digitalWrite(ledPin, LOW);<br /> delay(1000);<br /><br />```</p> <p>みたいにloop関数の中にdelay()を仕込んでやるわけですが、Espruinoは<a class="keyword" href="http://d.hatena.ne.jp/keyword/JavaScript">JavaScript</a>なのでsetIntervalのコールバックで処理します。<br />ちょっとプログラミングの感覚が違っていておもしろいんじゃないでしょうか。</p> <p>Espruinoを購入したらまずはこのLチカからはじめてみてください。</p>bathtimefishMatchstickは<a class="keyword" href="http://d.hatena.ne.jp/keyword/%B5%BB%C5%AC">技適</a>通すのか聞いてみたhatenablog://entry/84544204500684199962014-10-13T12:04:29+09:002014-10-13T12:04:29+09:00Matchstick - The Streaming Stick Built on Firefox OS by Matchstick.tv — Kickstarter ChromecastをFirefox OSでつくりましたみたいな製品。HTML5でアプリがつくれるのはChromecastと同じだけどなんとなく自由度が高そうな気がするし、Chromecastアプリとも互換するみたいなことが書いてあって、なかなか興味深い。一瞬で目標金額を達成しているので注目度も高いようです。 Wifiを使う製品なわけで、技適通すのかどうか気になったので、開発チームに聞いてみた。そしたら「まずは米国発売をターゲッ…<p><a href="https://www.kickstarter.com/projects/matchstick/matchstick-the-streaming-stick-built-on-firefox-os">Matchstick - The Streaming Stick Built on Firefox OS by Matchstick.tv — Kickstarter</a></p> <p><iframe src="https://www.kickstarter.com/projects/matchstick/matchstick-the-streaming-stick-built-on-firefox-os/widget/video.html" width="480" height="360" frameborder="0" scrolling="no"> </iframe></p> <p>Chromecastを<a class="keyword" href="http://d.hatena.ne.jp/keyword/Firefox%20OS">Firefox OS</a>でつくりましたみたいな製品。<a class="keyword" href="http://d.hatena.ne.jp/keyword/HTML5">HTML5</a>でアプリがつくれるのはChromecastと同じだけどなんとなく自由度が高そうな気がするし、Chromecastアプリとも互換するみたいなことが書いてあって、なかなか興味深い。一瞬で目標金額を達成しているので注目度も高いようです。</p> <p> </p> <p><a class="keyword" href="http://d.hatena.ne.jp/keyword/Wifi">Wifi</a>を使う製品なわけで、技適通すのかどうか気になったので、開発チームに聞いてみた。そしたら「まずは米国発売をターゲットしているので<a href="http://www.fcc.gov/">FCC</a>をマストに考えてる。日本で発売する際には技適にもトライするよ。教えてくれてありがとう。」みたいな返事がすぐ返ってきた。</p> <p> </p> <p>まあ<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%D9%A5%F3%A5%C1%A5%E3%A1%BC">ベンチャー</a>な製品だから最初からいろいろやるのはキツいですよね。順を追っていつか日本国内でも販売してくれるといいですね。</p>bathtimefishTizen <a class="keyword" href="http://d.hatena.ne.jp/keyword/SDK">SDK</a> for Wearableをインストールしてみたhatenablog://entry/129212288157329527972014-09-15T19:26:02+09:002014-09-15T19:26:02+09:00最近はWeb技術のほかにウェアラブルバイスにも強い関心があって、日本ウェアラブルバイスユーザー会の起ち上げに参加したりしているわけですが個人的にはウェアラブルバイスにはすぐWeb技術が浸透してくるだろうなと思っていて、そういう流れには遅れないようにしないとな、という気持ちがあったりもします。 、、とかなんとか思っているうちにmoto360が発売されたりApple Watchが発表されたりしてメガネの前に時計が普及してくるのかな?と思ってたらスマートウォッチの中でSumsung Gear Sというのがあってハード的にはディティールがダサいはデカイわで全然ほしくないんだけど、ソフトウェア的に…<p>最近はWeb技術のほかに<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%A6%A5%A7%A5%A2%A5%E9%A5%D6%A5%EB">ウェアラブル</a>デバイスにも強い関心があって、<a href="http://w-ug.jp/">日本ウェアラブルバイスユーザー会</a>の起ち上げに参加したりしているわけですが個人的には<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%A6%A5%A7%A5%A2%A5%E9%A5%D6%A5%EB">ウェアラブル</a>デバイスにはすぐWeb技術が浸透してくるだろうなと思っていて、そういう流れには遅れないようにしないとな、という気持ちがあったりもします。</p> <p> </p> <p>、、とかなんとか思っているうちに<a href="https://moto360.motorola.com/">moto360</a>が発売されたり<a href="https://www.apple.com/jp/watch/">Apple Watch</a>が発表されたりしてメガネの前に時計が普及してくるのかな?と思ってたらスマートウォッチの中で<a href="http://www.samsung.com/global/microsite/gears/">Sumsung Gear S</a>というのがあってハード的にはディティールがダサいはデカイわで全然ほしくないんだけど、ソフトウェア的には興味深いので誰か買って貸してくれないかなぁ、自分では買いたくない。と思っていました。</p> <p> </p> <p>何が興味深いかというと、OSが<a href="https://www.tizen.org/ja">Tizen</a>というところ。<br />日本では<a href="http://japanese.engadget.com/2014/01/16/tizen-os/">ドコモの今年あたまの発表</a>で終了のお知らせと思われていて、実際噂されてた<a href="http://itpro.nikkeibp.co.jp/atcl/news/14/072900255/">ロシアでの発売も延期</a>らしくて<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%B9%A5%DE%A1%BC%A5%C8%A5%D5%A5%A9%A5%F3">スマートフォン</a>市場的にはほぼ終了みたいな空気になっているわけですが、一方でTizen IVIやらAGLは車のほうで何かやってたりCross Walkがスピンアウトしたりと<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%B9%A5%DE%A1%BC%A5%C8%A5%D5%A5%A9%A5%F3">スマートフォン</a>端末以外のところでは動きがあったりしているわけです。</p> <p> </p> <p>Gear SはそんなTizenベースのスマートウォッチだということで。これ以前にも<a href="http://www.samsung.com/jp/consumer/mobilephone/gear/docomo/SM-R3800VSADCM">Gear2</a>とかでていたわけですがGear S発売というニュースをみて「そういやTizenだったな」と再認識したところです。</p> <p> </p> <p>加えて、Gear S発表の数日後に<a href="https://developer.tizen.org/ja/downloads/tizen-sdk?langredirect=1#wearable">Tizen SDK for Wearable</a>の存在を知って、「ちゃんと開発環境そろえてるんや!」と知ってちょっとやる気がでてきた次第。<br /><br />で、とりあえず<a class="keyword" href="http://d.hatena.ne.jp/keyword/IDE">IDE</a>をセットアップしてサンプルを動かすところまでやってみました。</p> <p> </p> <p>セットアップのやり方は以下のとおりです。<br /><a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%B9%A5%AF%A5%EA%A1%BC%A5%F3%A5%B7%A5%E7%A5%C3%A5%C8">スクリーンショット</a>は<a class="keyword" href="http://d.hatena.ne.jp/keyword/OSX">OSX</a>ですが、<a class="keyword" href="http://d.hatena.ne.jp/keyword/Windows">Windows</a>でも同じ要領でセットアップできます。<br /><br />まず、<a href="https://developer.tizen.org/ja/downloads/tizen-sdk?langredirect=1#wearable">Tizen SDK for Wearableのダウンロードページ</a>に飛んで、OSにあったインストールマネージャをダウンロードします。</p> <p><img class="hatena-fotolife" title="f:id:bathtimefish:20140915175712p:plain" src="http://cdn-ak.f.st-hatena.com/images/fotolife/b/bathtimefish/20140915/20140915175712.png" alt="f:id:bathtimefish:20140915175712p:plain" /></p> <p> </p> <p>次に、このページをスクロールダウンして下にある<a class="keyword" href="http://d.hatena.ne.jp/keyword/SDK">SDK</a>のイメージの欄からOSにあったイメージをダウンロードします。</p> <p><img class="hatena-fotolife" title="f:id:bathtimefish:20140915180026p:plain" src="http://cdn-ak.f.st-hatena.com/images/fotolife/b/bathtimefish/20140915/20140915180026.png" alt="f:id:bathtimefish:20140915180026p:plain" /></p> <p> </p> <p>ダウンロードが終わったら、インストールマネージャを起動します。</p> <p><img class="hatena-fotolife" title="f:id:bathtimefish:20140915180201p:plain" src="http://cdn-ak.f.st-hatena.com/images/fotolife/b/bathtimefish/20140915/20140915180201.png" alt="f:id:bathtimefish:20140915180201p:plain" /></p> <p> </p> <p>初期画面で、右下の「Advanced」をクリックします。</p> <p><img class="hatena-fotolife" title="f:id:bathtimefish:20140915180245p:plain" src="http://cdn-ak.f.st-hatena.com/images/fotolife/b/bathtimefish/20140915/20140915180245.png" alt="f:id:bathtimefish:20140915180245p:plain" /></p> <p> </p> <p>Advanced Configurationのダイアログで<a class="keyword" href="http://d.hatena.ne.jp/keyword/SDK">SDK</a> image<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%E9%A5%B8%A5%AA%A5%DC%A5%BF%A5%F3">ラジオボタン</a>を選択して、右側のフォルダアイコンから、先ほどダウンロードした<a class="keyword" href="http://d.hatena.ne.jp/keyword/SDK">SDK</a>イメージ(zipのまま)を選択します。</p> <p><img class="hatena-fotolife" title="f:id:bathtimefish:20140915180545p:plain" src="http://cdn-ak.f.st-hatena.com/images/fotolife/b/bathtimefish/20140915/20140915180545.png" alt="f:id:bathtimefish:20140915180545p:plain" /></p> <p> </p> <p>こんな感じで指定できたらOKをクリックします。</p> <p><img class="hatena-fotolife" title="f:id:bathtimefish:20140915180606p:plain" src="http://cdn-ak.f.st-hatena.com/images/fotolife/b/bathtimefish/20140915/20140915180606.png" alt="f:id:bathtimefish:20140915180606p:plain" /></p> <p> </p> <p>Nextをクリックします。</p> <p><img class="hatena-fotolife" title="f:id:bathtimefish:20140915180640p:plain" src="http://cdn-ak.f.st-hatena.com/images/fotolife/b/bathtimefish/20140915/20140915180640.png" alt="f:id:bathtimefish:20140915180640p:plain" /></p> <p> </p> <p>「I agree to the License Agreement」にチェックをいれてNextをクリックします。</p> <p><img class="hatena-fotolife" title="f:id:bathtimefish:20140915180738p:plain" src="http://cdn-ak.f.st-hatena.com/images/fotolife/b/bathtimefish/20140915/20140915180738.png" alt="f:id:bathtimefish:20140915180738p:plain" /></p> <p> </p> <p>Installをクリックします。</p> <p><img class="hatena-fotolife" title="f:id:bathtimefish:20140915180813p:plain" src="http://cdn-ak.f.st-hatena.com/images/fotolife/b/bathtimefish/20140915/20140915180813.png" alt="f:id:bathtimefish:20140915180813p:plain" /></p> <p> </p> <p>インストールが完了したらCloseをクリックしてインストールマネージャを終了します。</p> <p><img class="hatena-fotolife" title="f:id:bathtimefish:20140915181246p:plain" src="http://cdn-ak.f.st-hatena.com/images/fotolife/b/bathtimefish/20140915/20140915181246.png" alt="f:id:bathtimefish:20140915181246p:plain" /></p> <p><br />デフォルトでは<a class="keyword" href="http://d.hatena.ne.jp/keyword/IDE">IDE</a>は ~/tizen-wearable-<a class="keyword" href="http://d.hatena.ne.jp/keyword/sdk">sdk</a>/<a class="keyword" href="http://d.hatena.ne.jp/keyword/ide">ide</a>/<a class="keyword" href="http://d.hatena.ne.jp/keyword/IDE">IDE</a> にインストールされます(<a class="keyword" href="http://d.hatena.ne.jp/keyword/OSX">OSX</a>)。<a class="keyword" href="http://d.hatena.ne.jp/keyword/IDE">IDE</a>をダブルクリックして起動します。<a class="keyword" href="http://d.hatena.ne.jp/keyword/Eclipse">Eclipse</a>ベースのTizen <a class="keyword" href="http://d.hatena.ne.jp/keyword/IDE">IDE</a> for Wearableが起動します。</p> <p><img class="hatena-fotolife" title="f:id:bathtimefish:20140915182116p:plain" src="http://cdn-ak.f.st-hatena.com/images/fotolife/b/bathtimefish/20140915/20140915182116.png" alt="f:id:bathtimefish:20140915182116p:plain" /></p> <p> </p> <p>使い方は基本的に<a class="keyword" href="http://d.hatena.ne.jp/keyword/Eclipse">Eclipse</a>です。新しいアプリケーションを作るには File -&gt; New -&gt; Tizen Wearable Web Project を選択します。<br /> <br />プロジェクトは<a class="keyword" href="http://d.hatena.ne.jp/keyword/%CA%A3%BF%F4">複数</a>ありますが、てっとり早く<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%A6%A5%A7%A5%A2%A5%E9%A5%D6%A5%EB">ウェアラブル</a>っぽいUIを見たければ、Wearable UI -&gt; <a class="keyword" href="http://d.hatena.ne.jp/keyword/Basic">Basic</a> application か List applicationを選択するとよいです。</p> <p><img class="hatena-fotolife" title="f:id:bathtimefish:20140915182530p:plain" src="http://cdn-ak.f.st-hatena.com/images/fotolife/b/bathtimefish/20140915/20140915182530.png" alt="f:id:bathtimefish:20140915182530p:plain" /></p> <p> </p> <p>プロジェクトが生成された状態。html, js, <a class="keyword" href="http://d.hatena.ne.jp/keyword/css">css</a>が生成されています。</p> <p><img class="hatena-fotolife" title="f:id:bathtimefish:20140915182831p:plain" src="http://cdn-ak.f.st-hatena.com/images/fotolife/b/bathtimefish/20140915/20140915182831.png" alt="f:id:bathtimefish:20140915182831p:plain" /></p> <p> </p> <p><a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%A8%A5%DF%A5%E5%A5%EC%A1%BC%A5%BF">エミュレータ</a>を起動します。Connection Explorer の左端にあるEmulator Managerアイコンをクリックします。</p> <p><img class="hatena-fotolife" title="f:id:bathtimefish:20140915183232p:plain" src="http://cdn-ak.f.st-hatena.com/images/fotolife/b/bathtimefish/20140915/20140915183232.png" alt="f:id:bathtimefish:20140915183232p:plain" /><br /><br />Emulator Managerで適当な<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%A8%A5%DF%A5%E5%A5%EC%A1%BC%A5%BF">エミュレータ</a>を作成します。作成できたら<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%A8%A5%DF%A5%E5%A5%EC%A1%BC%A5%BF%A1%BC">エミュレーター</a>の再生ボタンをクリックして<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%A8%A5%DF%A5%E5%A5%EC%A1%BC%A5%BF%A1%BC">エミュレーター</a>を起動します。</p> <p><img class="hatena-fotolife" title="f:id:bathtimefish:20140915183428p:plain" src="http://cdn-ak.f.st-hatena.com/images/fotolife/b/bathtimefish/20140915/20140915183428.png" alt="f:id:bathtimefish:20140915183428p:plain" /></p> <p> </p> <p>こんな感じで、時計型の<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%A8%A5%DF%A5%E5%A5%EC%A1%BC%A5%BF%A1%BC">エミュレーター</a>が起動します。</p> <p><img class="hatena-fotolife" title="f:id:bathtimefish:20140915184146p:plain" src="http://cdn-ak.f.st-hatena.com/images/fotolife/b/bathtimefish/20140915/20140915184146.png" alt="f:id:bathtimefish:20140915184146p:plain" /></p> <p> </p> <p><a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%A8%A5%DF%A5%E5%A5%EC%A1%BC%A5%BF%A1%BC">エミュレーター</a>が正常に起動すると、<a class="keyword" href="http://d.hatena.ne.jp/keyword/IDE">IDE</a>のConnection Explorerに<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%A8%A5%DF%A5%E5%A5%EC%A1%BC%A5%BF%A1%BC">エミュレーター</a>IDが記載されます。この状態になるとアプリケーションを<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%A8%A5%DF%A5%E5%A5%EC%A1%BC%A5%BF%A1%BC">エミュレーター</a>上で起動できるようになります。</p> <p><img class="hatena-fotolife" title="f:id:bathtimefish:20140915185417p:plain" src="http://cdn-ak.f.st-hatena.com/images/fotolife/b/bathtimefish/20140915/20140915185417.png" alt="f:id:bathtimefish:20140915185417p:plain" /></p> <p> </p> <p>アプリケーションのビルドと起動は<a class="keyword" href="http://d.hatena.ne.jp/keyword/IDE">IDE</a>のビルドボタンもしくはプロジェクトを右クリックしてRun As -&gt; Tizen Wearable Web Applicationをクリックします。</p> <p><img class="hatena-fotolife" title="f:id:bathtimefish:20140915185552p:plain" src="http://cdn-ak.f.st-hatena.com/images/fotolife/b/bathtimefish/20140915/20140915185552.png" alt="f:id:bathtimefish:20140915185552p:plain" /></p> <p> </p> <p>ビルドが成功するとこんな感じでアプリケーションが起動します。UIはHTML, <a class="keyword" href="http://d.hatena.ne.jp/keyword/CSS">CSS</a>でデザインされています。</p> <p><img class="hatena-fotolife" title="f:id:bathtimefish:20140915185827p:plain" src="http://cdn-ak.f.st-hatena.com/images/fotolife/b/bathtimefish/20140915/20140915185827.png" alt="f:id:bathtimefish:20140915185827p:plain" /></p> <p> </p> <p>このプロジェクトには最初からlowBatteryCheck.jsというバッテリーのイベントを聴いてバッテリーが少なくなったらアプリケーションを終了するというプログラムが組まれています。バッテリーのリスナの詳細は<a href="http://SystemInfo API https://developer.tizen.org/dev-guide/2.2.1/org.tizen.web.device.apireference/tizen/systeminfo.html">Tizen SystemInfo API</a>を参照してください。</p> <p> </p> <p><img class="hatena-fotolife" title="f:id:bathtimefish:20140915190139p:plain" src="http://cdn-ak.f.st-hatena.com/images/fotolife/b/bathtimefish/20140915/20140915190139.png" alt="f:id:bathtimefish:20140915190139p:plain" /></p> <p><br /><br /></p> <p>実際にこれを試してみます。まずは上記の lowThreshold : 0.04 となっている値を 0.4 にします。変更を保存したら<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%A8%A5%DF%A5%E5%A5%EC%A1%BC%A5%BF%A1%BC">エミュレーター</a>で起動してください。<br /><br />アプリが起動したら<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%A8%A5%DF%A5%E5%A5%EC%A1%BC%A5%BF%A1%BC">エミュレーター</a>上を右クリックして<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%B3%A5%F3%A5%C6%A5%AD%A5%B9%A5%C8%A5%E1%A5%CB%A5%E5%A1%BC">コンテキストメニュー</a>のControl Panelをクリックします。</p> <p><img class="hatena-fotolife" title="f:id:bathtimefish:20140915190427p:plain" src="http://cdn-ak.f.st-hatena.com/images/fotolife/b/bathtimefish/20140915/20140915190427.png" alt="f:id:bathtimefish:20140915190427p:plain" /></p> <p> </p> <p>Emulator Control Panelが立ち上がるので、右ペインのEvent Injectorの中のBatteryをクリックします。バッテリーレベルをエミュレートする<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%D7%A5%ED%A5%B0%A5%EC%A5%B9%A5%D0%A1%BC">プログレスバー</a>が表示されるので、レベルを40%以下にすると、アプリケーションが終了する動作を観察することが出来ます。<br /><br /></p> <p><img class="hatena-fotolife" title="f:id:bathtimefish:20140915190659p:plain" src="http://cdn-ak.f.st-hatena.com/images/fotolife/b/bathtimefish/20140915/20140915190659.png" alt="f:id:bathtimefish:20140915190659p:plain" /></p> <p> </p> <p>このEmulator Control Panelはなかなかよくできていて、他にもフリックジェスチャーのシミュレーションや<a class="keyword" href="http://d.hatena.ne.jp/keyword/%CA%E2%BF%F4%B7%D7">歩数計</a>のエミュレートもできるようです。端末に搭載されるセンサーが増えてくると、エミュレートできる機能も増えそうな気がします。</p> <p> </p> <p><a class="keyword" href="http://d.hatena.ne.jp/keyword/SDK">SDK</a>の詳細やアプリ開発の<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%AC%A5%A4%A5%C9%A5%E9%A5%A4%A5%F3">ガイドライン</a>などは<a href="http://developer.samsung.com/samsung-gear">Sumsung Developers</a>のサイトにいろいろ資料があります。</p> <p> </p> <p>使ってみた感想としては、開発環境はけっこう揃っていていい感じだなと思いました。Sumsung Developers にはTizen for Wearableのアプリと<a class="keyword" href="http://d.hatena.ne.jp/keyword/Android">Android</a>アプリを連携させるサンプルなどもあってけっこう参考になるんですが、どうやらSumsungのインフラを通してでないとアプリを配布できないみたいで、基本的にSumsung製<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%B9%A5%DE%A1%BC%A5%C8%A5%D5%A5%A9%A5%F3">スマートフォン</a>上のアプリとの連携が基本になるみたいです。<br /><br />技術的には興味深いんですが、こういうクローズドなエコシステムがやる気をなくさせますね。。そもそもSumsung<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%B9%A5%DE%A1%BC%A5%C8%A5%D5%A5%A9%A5%F3">スマートフォン</a>持ってねえし。買わねえし。</p> <p> </p> <p>一方で、<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%AF%A5%ED%A5%B9%A5%D7%A5%E9%A5%C3%A5%C8%A5%D5%A5%A9%A1%BC%A5%E0">クロスプラットフォーム</a>技術である<a class="keyword" href="http://d.hatena.ne.jp/keyword/HTML5">HTML5</a>などのWeb技術は今後普及するプラットフォームに浸透も徐々に浸透してくると思います。これから<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%A6%A5%A7%A5%A2%A5%E9%A5%D6%A5%EB">ウェアラブル</a>デバイスの開発が多様化するにつれてTizenや<a class="keyword" href="http://d.hatena.ne.jp/keyword/Firefox%20OS">Firefox OS</a>、<a class="keyword" href="http://d.hatena.ne.jp/keyword/Chrome">Chrome</a>などをベースに動作するかもしれません。</p> <p> </p> <p>そうなったらこっちの仕事なので、<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%A6%A5%A7%A5%A2%A5%E9%A5%D6%A5%EB">ウェアラブル</a>デバイスとWeb技術に関する情報も追っかけていきたいと思います。<br /><br />ちなみに先日FxOS勉強会でこんな発表しました。まじFxOSで<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%A6%A5%A7%A5%A2%A5%E9%A5%D6%A5%EB">ウェアラブル</a>デバイス出たらいいなと思います。<br /><br /><iframe style="border: 1px solid #CCC; border-width: 1px; margin-bottom: 5px; max-width: 100%;" src="//www.slideshare.net/slideshow/embed_code/38766877" width="425" height="355" frameborder="0" marginwidth="0" marginheight="0" scrolling="no" allowfullscreen=""> </iframe></p> <div style="margin-bottom: 5px;"><strong> <a title="FxOSはウェアラブルデバイスの夢を見るか?" href="//www.slideshare.net/bathtimefish/fx-os-38766877" target="_blank">FxOSはウェアラブルデバイスの夢を見るか?</a> </strong> from <strong><a href="//www.slideshare.net/bathtimefish" target="_blank">Masakazu Muraoka</a></strong></div>bathtimefishCivic Hack OSAKA 2014 をやってみたらとてもたのしかったhatenablog://entry/129212288157328832552014-09-14T14:29:01+09:002014-09-14T23:13:41+09:008月24日、31日にCivic Hack OSAKA 2014というイベントを開催しました。IT系のエンジニア、クリエイターと行政の職員がいっしょにチームを組んでやるアイデアソン・ハッカソンというイベント。特にお題を決めてかかるわけじゃなくて、組んだチームが自由に考えてやる、まあ素朴なHackathonです。なんというか、これは前からとてもやってみたいと思っていて、けど「たぶん公務員の人とか呼んでも来てくんないよな。」とか「こんな組み方してもまともにアイデアでてこないんじゃないか」とか不安があって躊躇してたんだけど、イノベーションハブの角さんやMiMoSの原さんが「やりましょう!」って言ってく…<p>8月24日、31日に<a href="http://civichack-osaka-2014.peatix.com/">Civic Hack OSAKA 2014</a>というイベントを開催しました。<br />IT系のエンジニア、クリエイターと行政の職員がいっしょにチームを組んでやるア<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%A4%A5%C7%A5%A2">イデア</a>ソン・ハッカソンというイベント。特にお題を決めてかかるわけじゃなくて、組んだチームが自由に考えてやる、まあ素朴な<a class="keyword" href="http://d.hatena.ne.jp/keyword/Hackathon">Hackathon</a>です。<br /><br />なんというか、これは前からとてもやってみたいと思っていて、けど「たぶん公務員の人とか呼んでも来てくんないよな。」とか「こんな組み方してもまともにア<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%A4%A5%C7%A5%A2">イデア</a>でてこないんじゃないか」とか不安があって躊躇してたんだけど、<a href="http://www.innovation-osaka.jp/ja/">イノベーションハブ</a>の角さんや<a href="http://mimos.jp/index.html">MiMoS</a>の原さんが「やりましょう!」って言ってくれたのでなんとかなるかもしれないと思ってやりました。<br /><br /></p> <p><img class="hatena-fotolife" title="f:id:bathtimefish:20140914131323j:plain" src="http://cdn-ak.f.st-hatena.com/images/fotolife/b/bathtimefish/20140914/20140914131323.jpg" alt="f:id:bathtimefish:20140914131323j:plain" /></p> <p><br />いやほんと、前からやりたかったんですよ。日本でも<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%B7%A5%D3%A5%C3%A5%AF">シビック</a>テックとかCode for なにがしとかいうのは地域でもたくさん立ち上がって様々な検討がされていると聞いています。東北方面では特に活発で、ハッカソンやいろいろな地域活動に結びついていますね。とても素晴らしいことだと思います。</p> <p><br />そういう動きを地域の自治体などの行政がキャッチアップして活動を支援しているというのはよくある流れなんだけど、行政と技術者がいっしょになって活動する体というのはあまり聞いたことがないです。行政はあくまで支援するのであって、実際にア<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%A4%A5%C7%A5%A2">イデア</a>を出したりものつくったりするのは技術者がやってるわけですね。<br /><br />それはそれですごいことなんだけど、「実際に行政といっしょにものをつくりたい」という気持ちがあってですね。行政サービスというのは普段からいろいろdisられているんだけど、エンジニアとしては「問題があるなら解決できるものつくったらいい」という思考に即なるわけで、行政の人とガチで話し合って市民として、エンジニア目線でものづくりにトライしたらいいものができるんじゃないかと。<br /><br />公務員と技術者が同じ目線で同じ目的に向かってモノづくりしてみると新しいなんかが生まれるかもしれないと思って。まずはやってみようという感じでやってみた感じです。</p> <p> </p> <p><img class="hatena-fotolife" title="f:id:bathtimefish:20140914131925j:plain" src="http://cdn-ak.f.st-hatena.com/images/fotolife/b/bathtimefish/20140914/20140914131925.jpg" alt="f:id:bathtimefish:20140914131925j:plain" /></p> <p><br /><br />で、募集してみたら<a class="keyword" href="http://d.hatena.ne.jp/keyword/%CB%E8%C6%FC%BF%B7%CA%B9">毎日新聞</a>さんに取り上げられたり、いろいろな方が公務員やエンジニアの方に声をかけていただいたりしてあっという間に満席になって、かなりニッチなハッカソンなのにちょっとびっくりした次第。</p> <p><iframe style="width: 100%; height: 155px; max-width: 500px; margin: 10px 0px;" title="シビックハック:IT技術者と行政が大阪でコラボ 問題解決アプリ開発へ" src="http://hatenablog.com/embed?url=http%3A%2F%2Fmainichi.jp%2Ffeature%2Fnews%2Fm20140815mog00m050007000c.html" frameborder="0" scrolling="no"><a href="http://mainichi.jp/feature/news/m20140815mog00m050007000c.html" data-mce-href="http://mainichi.jp/feature/news/m20140815mog00m050007000c.html">シビックハック:IT技術者と行政が大阪でコラボ 問題解決アプリ開発へ</a></iframe><br /> <a href="http://mainichi.jp/feature/news/m20140815mog00m050007000c.html">シビックハック:IT技術者と行政が大阪でコラボ 問題解決アプリ開発へ - 毎日新聞<br /><br /></a></p> <p>ふたを開けてみると約半数が公務員という当初の想定からは逆のエンジニア少なくね?みたいな比率になってちゃんとモノがつくれるか?という感じだったけど、結果発表がすごいことになりました。<br /><br />今回は<a class="keyword" href="http://d.hatena.ne.jp/keyword/%C2%E7%BA%E5%BB%D4">大阪市</a>、<a class="keyword" href="http://d.hatena.ne.jp/keyword/%B9%E2%C4%D0%BB%D4">高槻市</a>、<a class="keyword" href="http://d.hatena.ne.jp/keyword/%CF%C2%B2%CE%BB%B3%B8%A9">和歌山県</a>、<a class="keyword" href="http://d.hatena.ne.jp/keyword/%CA%BC%B8%CB%B8%A9">兵庫県</a>、神戸市、<a class="keyword" href="http://d.hatena.ne.jp/keyword/%BE%BE%B9%BE%BB%D4">松江市</a>の職員の方々が参加。大阪だけでなく関西・中国地方の各自治体から有志の職員さんが参加されました。異なった行政圏の職員がチームを組んでものづくりに取り組むという機会もなかなかないのではないでしょうか。<br /><br />実際やる気のある技術者、やる気のある公務員がチームを組むと、こんなに面白いのか。と実感できる内容でした。参加者の方々から「おもしろかった!」という声をいただいたのも何よりうれしかったです。<br /><br /></p> <p><img class="hatena-fotolife" title="f:id:bathtimefish:20140914132119j:plain" src="http://cdn-ak.f.st-hatena.com/images/fotolife/b/bathtimefish/20140914/20140914132119.jpg" alt="f:id:bathtimefish:20140914132119j:plain" /></p> <p><br />個人的に、Civic Hackでは技術者には自由に技術をふるまってほしくて、公務員の方々には技術はわからないまでも「こんなのがあるのか、こんなことができるのか」みたいなことを感じてほしかった。ので、ソフトウェア、ハードウェアの両面で運営側から何か提供したいと思いました。<br /><br />が、まあ金がないのは毎度のことで、どうしようかなと思っていたところ、協力していいただける企業さんが名乗りをあげてくれて、想像以上のレベルで実現できました。何でも言ってみるもんです。ほんと<a class="keyword" href="http://d.hatena.ne.jp/keyword/%B4%B6%BC%D5%B4%B6%B7%E3%B1%AB%A4%A2%A4%E9%A4%EC">感謝感激雨あられ</a>。<br /><br /><a href="http://www.newphoria.co.jp/">株式会社ニューフォリア</a>さんから<a class="keyword" href="http://d.hatena.ne.jp/keyword/HTML5">HTML5</a>マルチプラット<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%D5%A5%EC%A1%BC%A5%E0%A5%EF%A1%BC%A5%AF">フレームワーク</a> <a href="http://www.applican.com/">applican</a> の開発支援の提供、ハードウェア系ハッカソンで有名な <a href="http://gugen.jp/">GUGEN</a> さんから<a class="keyword" href="http://d.hatena.ne.jp/keyword/Arduino">Arduino</a>をはじめとする開発用ハードウェア、センサー類の貸し出し、<a href="http://japan.ni.com/">日本ナショナルインスツルメンツ</a>さんから、計測機器の試用などをご提供いただきました。なんつーかすごい盛りだくさんでした。<br /><br /></p> <p><img class="hatena-fotolife" title="f:id:bathtimefish:20140914133053j:plain" src="http://cdn-ak.f.st-hatena.com/images/fotolife/b/bathtimefish/20140914/20140914133053.jpg" alt="f:id:bathtimefish:20140914133053j:plain" /></p> <p><br />ア<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%A4%A5%C7%A5%A2">イデア</a>ソンから、ハッカソンまで。ア<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%A4%A5%C7%A5%A2">イデア</a>が決まってから1週間あったので各チームいろいろ仕込んでいたようです。ハッカソン当日はとにかくものづくりに集中していましたが、元データやプレゼンの計画などは各チームハッカソンまでにけっこう練っていたようです。ア<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%A4%A5%C7%A5%A2">イデア</a>ソンででた各チームのア<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%A4%A5%C7%A5%A2">イデア</a>はこんなかんじ。<br /><br /></p> <p><img class="hatena-fotolife" title="f:id:bathtimefish:20140914133404j:plain" src="http://cdn-ak.f.st-hatena.com/images/fotolife/b/bathtimefish/20140914/20140914133404.jpg" alt="f:id:bathtimefish:20140914133404j:plain" /><br /><br />公務員が半数という構成のハッカソンで、当日はどんな作業の感じになるかわからなかったんですが、全体的にみんな忙しく手を動かしている状態でした。技術者は主にアプリなど黙々と開発している感じ、公務員はデータをまとめたり、プレゼンア<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%A4%A5%C7%A5%A2">イデア</a>を練ったり、スライドをつくったり。過去の経験からもそうですが、どんな人でもハッカソンの場に身を置くとなにかで忙しくなるもんです。ヒマになる人なんていない、ちょうどいい焦燥感があって、みんなで忙しさを楽しめるのが良いハッカソンですね。<br /><br /></p> <p><img class="hatena-fotolife" title="f:id:bathtimefish:20140914133918j:plain" src="http://cdn-ak.f.st-hatena.com/images/fotolife/b/bathtimefish/20140914/20140914133918.jpg" alt="f:id:bathtimefish:20140914133918j:plain" /></p> <p> </p> <p>特に公務員の人たちはプレゼンの作成に集中していました。よく考えたら行政マンって広報とかでプレゼンも大事な仕事ですよね。そのせいもあってか、結果発表のクオリティがとんでもないことになりました。数々のハッカソンをやってますがはっきりいってこんなにエンターテイメントな発表ははじめてでした(笑)<br /><br />まず、チーム ビーコンファイブ。商店街などにBLEビーコンを設置して見守り・保安に役立てようという「まちビーコン」プロジェクト。<br /><br /></p> <p><img class="hatena-fotolife" title="f:id:bathtimefish:20140914134325j:plain" src="http://cdn-ak.f.st-hatena.com/images/fotolife/b/bathtimefish/20140914/20140914134325.jpg" alt="f:id:bathtimefish:20140914134325j:plain" /><br /><br />何気にロゴっぽいタイトルつくってます。<br />しかも寸劇形式、まちビーコンを売り込みにきたセールスマンと商店街のオッサンの対談形式でアピールしています。セールスマン役の人はこのためにスーツ着てきたと思う。だって当日は日曜日なのに。商店街のオッサン役の人は某役所の職員さんなんですが、<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%DF%A5%CA%A5%DF%A4%CE%C4%EB%B2%A6">ミナミの帝王</a>に出てくる借金かかえた町工場の社長みたいでした。<br /><br /><br />チーム プッシュ大阪。行政の広報誌をアプリでプッシュ配信。<br />こちらも寸劇かと思いきや、ラジオドラマ形式。スライドをテロップ風に使うとか斬新すぎる。<br /><br /></p> <p><img class="hatena-fotolife" title="f:id:bathtimefish:20140914134954j:plain" src="http://cdn-ak.f.st-hatena.com/images/fotolife/b/bathtimefish/20140914/20140914134954.jpg" alt="f:id:bathtimefish:20140914134954j:plain" /></p> <p> </p> <p><img class="hatena-fotolife" title="f:id:bathtimefish:20140914135007j:plain" src="http://cdn-ak.f.st-hatena.com/images/fotolife/b/bathtimefish/20140914/20140914135007.jpg" alt="f:id:bathtimefish:20140914135007j:plain" /></p> <p><br />延々テロップと寸劇が繰り返されるので、「かんじんのアプリは?」とツッコミそうでしたが、ちゃんと作れていたのでよかったです。<br /><br /></p> <p><img class="hatena-fotolife" title="f:id:bathtimefish:20140914135144j:plain" src="http://cdn-ak.f.st-hatena.com/images/fotolife/b/bathtimefish/20140914/20140914135144.jpg" alt="f:id:bathtimefish:20140914135144j:plain" /></p> <p><br />チーム サキイカ。災害時の避難経路共有サービス。市民が災害時の情報を行政に報告できる仕組み。<br /><br /></p> <p><img class="hatena-fotolife" title="f:id:bathtimefish:20140914135323j:plain" src="http://cdn-ak.f.st-hatena.com/images/fotolife/b/bathtimefish/20140914/20140914135323.jpg" alt="f:id:bathtimefish:20140914135323j:plain" /></p> <p>こちらも寸劇。模造紙余ってないですか?と聞かれたんですが、タスキつくってたのか。。この方、<a class="keyword" href="http://d.hatena.ne.jp/keyword/%BA%E5%BF%C0%C2%E7%BF%CC%BA%D2">阪神大震災</a>のときに災害対策本部をされていたとのことで、演技が生生しかったです。本部での情報の混乱とその整理がいかに大変かということが伝わりました。解決するための仕組みが必要と切実な訴えです。<br /><br /></p> <p><img class="hatena-fotolife" title="f:id:bathtimefish:20140914135550j:plain" src="http://cdn-ak.f.st-hatena.com/images/fotolife/b/bathtimefish/20140914/20140914135550.jpg" alt="f:id:bathtimefish:20140914135550j:plain" /></p> <p> </p> <p>チーム ゴミ。毎日のごみ収集のタイミングをカウントダウンでお知らせ。<br />これ個人的には超ほしいです。朝ごみ出しに行ったら収集車が行った後だったというのが1回や2回じゃないので。<br /><br /></p> <p><img class="hatena-fotolife" title="f:id:bathtimefish:20140914135810j:plain" src="http://cdn-ak.f.st-hatena.com/images/fotolife/b/bathtimefish/20140914/20140914135810.jpg" alt="f:id:bathtimefish:20140914135810j:plain" /></p> <p>めったにない収集のタイミングを教えてくれるとか、これもほしいです。<br /><br /></p> <p><img class="hatena-fotolife" title="f:id:bathtimefish:20140914135902j:plain" src="http://cdn-ak.f.st-hatena.com/images/fotolife/b/bathtimefish/20140914/20140914135902.jpg" alt="f:id:bathtimefish:20140914135902j:plain" /></p> <p><br />チーム SHOK。 地域の奉仕活動などの活動情報を、活動したい市民とマッチングするサービス。マッチングだけでなく活動実績をポイント化してTポイントや学校の内申点に還元するなどの仕組みも用意。かなり具体的なビジネスモデルでした。<br /><br /></p> <p><img class="hatena-fotolife" title="f:id:bathtimefish:20140914140214j:plain" src="http://cdn-ak.f.st-hatena.com/images/fotolife/b/bathtimefish/20140914/20140914140214.jpg" alt="f:id:bathtimefish:20140914140214j:plain" /></p> <p><img class="hatena-fotolife" title="f:id:bathtimefish:20140914140234j:plain" src="http://cdn-ak.f.st-hatena.com/images/fotolife/b/bathtimefish/20140914/20140914140234.jpg" alt="f:id:bathtimefish:20140914140234j:plain" /></p> <p> </p> <p>チーム DAN-SA。 町の道路などにある段差の情報を共有。障害者やベビーカーなどでの通行の援助に。<br />こちらも寸劇。寝ている女性は段差の役だとか。段差役なんて聞いたことない。<br /><br /></p> <p><img class="hatena-fotolife" title="f:id:bathtimefish:20140914140449j:plain" src="http://cdn-ak.f.st-hatena.com/images/fotolife/b/bathtimefish/20140914/20140914140449.jpg" alt="f:id:bathtimefish:20140914140449j:plain" /></p> <p>作成したアプリ<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%E2%A5%C3%A5%AF%A5%A2%A5%C3%A5%D7">モックアップ</a>を発表中に<a class="keyword" href="http://d.hatena.ne.jp/keyword/QR%A5%B3%A1%BC%A5%C9">QRコード</a>でダウンロードできるところまで。用意周到です。<br /><br /></p> <p><img class="hatena-fotolife" title="f:id:bathtimefish:20140914140537j:plain" src="http://cdn-ak.f.st-hatena.com/images/fotolife/b/bathtimefish/20140914/20140914140537.jpg" alt="f:id:bathtimefish:20140914140537j:plain" /></p> <p><br />審査は全員投票+審査員票で決定。ア<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%A4%A5%C7%A5%A2">イデア</a>ソン時点で、DAN-SAとビーコンファイブには優秀点が加点されています。基本的には参加者の投票数が一番重要になります。<br /><br /></p> <p><img class="hatena-fotolife" title="f:id:bathtimefish:20140914140811j:plain" src="http://cdn-ak.f.st-hatena.com/images/fotolife/b/bathtimefish/20140914/20140914140811.jpg" alt="f:id:bathtimefish:20140914140811j:plain" /></p> <p> </p> <p>結果、1位サキイカ(避難情報共有)、2位DAN-SA(段差情報共有)、3位プッシュ大阪(広報誌アプリ)。2位、3位は同ポイントという接戦でしたがア<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%A4%A5%C7%A5%A2">イデア</a>ソン優勝だったDAN-SAを評価して2位としました。<br /><br />1位チーム サキイカ。賞品は<a class="keyword" href="http://d.hatena.ne.jp/keyword/Arduino">Arduino</a> Uno Rv3</p> <p><img class="hatena-fotolife" title="f:id:bathtimefish:20140914141130j:plain" src="http://cdn-ak.f.st-hatena.com/images/fotolife/b/bathtimefish/20140914/20140914141130.jpg" alt="f:id:bathtimefish:20140914141130j:plain" /></p> <p>2位 チーム DAN-SA 賞品は「ハルロック」1巻</p> <p><img class="hatena-fotolife" title="f:id:bathtimefish:20140914141213j:plain" src="http://cdn-ak.f.st-hatena.com/images/fotolife/b/bathtimefish/20140914/20140914141213.jpg" alt="f:id:bathtimefish:20140914141213j:plain" /></p> <p>3位 プッシュ大阪 賞品はたこ焼きようかん+たこ焼きキャンディ</p> <p><img class="hatena-fotolife" title="f:id:bathtimefish:20140914141306j:plain" src="http://cdn-ak.f.st-hatena.com/images/fotolife/b/bathtimefish/20140914/20140914141306.jpg" alt="f:id:bathtimefish:20140914141306j:plain" /></p> <p><br />ハッカソンは向かうための目標とするたに、あえて順位づけをしたほうが楽しいんですが、実際は優劣をきめられるようなことじゃないです。今回のCivic Hackででた作品はどれもよく考えられていて、実際の行政に活用できるものだと思いました。審査員の方々からも「これほど実用的なア<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%A4%A5%C7%A5%A2">イデア</a>がでてくるとは思ってなかった」という声がありました。<br /><br />この辺りは実際の行政の現場に携わる公務員と、技術者がチームを組んだことに意味があったように思います。参加された技術者の中には「うちのチームで考えたやつをこれで終わらせるのはもったいないからイベント後も作りつづけて完成させます!」とおっしゃった方もおられました。<br /><br />こういう姿勢が本質的な<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%DC%A5%C8%A5%E0%A5%A2%A5%C3%A5%D7">ボトムアップ</a>型の市民参画型行政の姿だといえるんじゃないでしょうか。「行政が支援するから」「<a class="keyword" href="http://d.hatena.ne.jp/keyword/%BD%F5%C0%AE%B6%E2">助成金</a>がでるから」じゃなくて実際に問題を認識して、どこにも媚びず解決するサービスを開発し、それを行政と共同で運営していく。こういうのが本当の意味で市民が行政に参加するということ、技術で行政を助けるのがCivic Tech / Civic Hackの意義だと思います。<br /><br /></p> <p><img class="hatena-fotolife" title="f:id:bathtimefish:20140914141351j:plain" src="http://cdn-ak.f.st-hatena.com/images/fotolife/b/bathtimefish/20140914/20140914141351.jpg" alt="f:id:bathtimefish:20140914141351j:plain" /></p> <p> </p> <p>行政サービスも人が運営しているものです。その地域を担う行政の職員と市民がいっしょになって運営して、その難しさも、達成できた時の喜びも分かち合えるとよりよい自治体が形成できるのではないでしょうか。</p> <p> </p> <p><img class="hatena-fotolife" title="f:id:bathtimefish:20140914142518j:plain" src="http://cdn-ak.f.st-hatena.com/images/fotolife/b/bathtimefish/20140914/20140914142518.jpg" alt="f:id:bathtimefish:20140914142518j:plain" /></p> <p><br />ほんと今回は楽しかったです。他の地域から来られた行政職員の方々も自分の地域でもCivic Hackをやってみたいとおっしゃっておられました。ぜひやってください。ボクもまたやりたいと思います。<br /><br />最後に、協賛いただいた企業様、協力していただいた審査員の方々。厚く御礼申し上げます。ありがとうございました。<br /><br />なにより、参加されたみなさん。おつかれさまでした!<br />またやりましょう。<br /><br /><a class="keyword" href="http://d.hatena.ne.jp/keyword/Happy%20Hacking">Happy Hacking</a> !!</p> <p><br /><br /></p>bathtimefish「<a class="keyword" href="http://d.hatena.ne.jp/keyword/%B6%D7%B1%BA%A4%B5%A4%F3">琴浦さん</a>」&「<a class="keyword" href="http://d.hatena.ne.jp/keyword/%B6%D7%B1%BA%C4%AE">琴浦町</a>」バースデイ<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%B9%A5%DA%A5%B7%A5%E3">スペシャ</a>ルイベント に行ってきたhatenablog://entry/129212288157318424442014-09-02T13:04:28+09:002014-09-02T13:17:53+09:00琴浦さん]“聖地”鳥取県琴浦町でバースデーイベント | マイナビニュース というのをみて、琴浦町で生まれ育ったボクとしてはぜひ行かねばならないな!と思って応募し、イベントに行ってきました。そうかー琴浦町10周年ですか。町村合併はつい最近のことだと思ってたんだけど、あれから随分とたってるんですね。 琴浦町というのは鳥取県中部の町で、原則的に何もない鳥取県の中でも最も何もない地域として県民に知られています。東は鳥取市、西は米子市という鳥取の中では大きな街がありますが、中部にはないんですね。そんな中、全国放送のアニメとして放映された琴浦さんというコンテンツは地域としてものすごいインパクトなわけで、…<p><a href="http://news.mynavi.jp/news/2014/07/28/219/">[琴浦さん]“聖地”鳥取県琴浦町でバースデーイベント | マイナビニュース</a></p> <p> </p> <p>というのをみて、<a class="keyword" href="http://d.hatena.ne.jp/keyword/%B6%D7%B1%BA%C4%AE">琴浦町</a>で生まれ育ったボクとしてはぜひ行かねばならないな!と思って<a href="http://www.town.kotoura.tottori.jp/docs/2014062300020/">応募し</a>、イベントに行ってきました。そうかー<a class="keyword" href="http://d.hatena.ne.jp/keyword/%B6%D7%B1%BA%C4%AE">琴浦町</a>10周年ですか。町村合併はつい最近のことだと思ってたんだけど、あれから随分とたってるんですね。</p> <p> </p> <p><a class="keyword" href="http://d.hatena.ne.jp/keyword/%B6%D7%B1%BA%C4%AE">琴浦町</a>というのは<a class="keyword" href="http://d.hatena.ne.jp/keyword/%C4%BB%BC%E8%B8%A9">鳥取県</a>中部の町で、原則的に何もない<a class="keyword" href="http://d.hatena.ne.jp/keyword/%C4%BB%BC%E8%B8%A9">鳥取県</a>の中でも最も何もない地域として県民に知られています。東は<a class="keyword" href="http://d.hatena.ne.jp/keyword/%C4%BB%BC%E8%BB%D4">鳥取市</a>、西は<a class="keyword" href="http://d.hatena.ne.jp/keyword/%CA%C6%BB%D2%BB%D4">米子市</a>という<a class="keyword" href="http://d.hatena.ne.jp/keyword/%C4%BB%BC%E8">鳥取</a>の中では大きな街がありますが、中部にはないんですね。そんな中、全国放送のアニメとして放映された<a href="http://www.kotourasan.com/">琴浦さん</a>というコンテンツは地域としてものすごい<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%A4%A5%F3%A5%D1%A5%AF">インパク</a>トなわけで、たまたま作者が町名をヒロインの名前にしたというか細いつながりであってもこれを使って地域おこしをするには十分すぎるバリューなわけです。</p> <p> </p> <p><a class="keyword" href="http://d.hatena.ne.jp/keyword/%B6%D7%B1%BA%A4%B5%A4%F3">琴浦さん</a>の放送中には劇中に<a class="keyword" href="http://d.hatena.ne.jp/keyword/%B6%D7%B1%BA%C4%AE">琴浦町</a>の景色が登場したり、AパートあけのCMで<a class="keyword" href="http://d.hatena.ne.jp/keyword/%B6%D7%B1%BA%C4%AE">琴浦町</a>のロケを流しあからさまに聖地をアピールするなど<a href="http://www.jvcmusic.co.jp/flyingdog/">フライングドッグ</a>さんも好意的にやっていただいたようです。ありがたいことですほんと。</p> <p> </p> <p><img class="hatena-fotolife" title="f:id:bathtimefish:20140830144630j:plain" src="http://cdn-ak.f.st-hatena.com/images/fotolife/b/bathtimefish/20140830/20140830144630.jpg" alt="f:id:bathtimefish:20140830144630j:plain" /></p> <p> </p> <p>で、2014年8月30日のバースデーイベント。数年ぶりに<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%AB%A5%A6%A5%D9%A5%EB">カウベル</a>ホールに行ってみたらすごい人でした。<a class="keyword" href="http://d.hatena.ne.jp/keyword/%B6%D7%B1%BA%C4%AE">琴浦町</a>で入場待ち的な行列を見たのはもしかしたら生まれて初めてかもしれません。</p> <p> </p> <p><img class="hatena-fotolife" title="f:id:bathtimefish:20140902123630p:plain" src="http://cdn-ak.f.st-hatena.com/images/fotolife/b/bathtimefish/20140902/20140902123630.png" alt="f:id:bathtimefish:20140902123630p:plain" /></p> <p> </p> <p>写真はイベント開始前の物販ブースで「<a class="keyword" href="http://d.hatena.ne.jp/keyword/%B6%D7%B1%BA%A4%B5%A4%F3">琴浦さん</a>×<a class="keyword" href="http://d.hatena.ne.jp/keyword/%B6%D7%B1%BA%C4%AE">琴浦町</a> 特製ナンバープレート」にできてた行列。列の途中にはちゃんと<a href="http://ja.wikipedia.org/wiki/%E9%B3%A5%E5%8F%96%E7%89%9B%E9%AA%A8%E3%83%A9%E3%83%BC%E3%83%A1%E3%83%B3">牛骨ラーメン</a>や<a href="http://www.pref.tottori.lg.jp/178464.htm">あごカツカレー</a>の販売ブースを用意して<a class="keyword" href="http://d.hatena.ne.jp/keyword/%C2%D4%A4%C1%B9%D4%CE%F3">待ち行列</a>に食わせようという気満々。地元の店がブース出展していたようです。</p> <p> </p> <p><img class="hatena-fotolife" title="f:id:bathtimefish:20140902123848j:plain" src="http://cdn-ak.f.st-hatena.com/images/fotolife/b/bathtimefish/20140902/20140902123848.jpg" alt="f:id:bathtimefish:20140902123848j:plain" /></p> <p> </p> <p>ナンバープレート買ってきました。これで<a class="keyword" href="http://d.hatena.ne.jp/keyword/%B6%D7%B1%BA%C4%AE">琴浦町</a>になんぼか金が落ちるかなと思って。なかなかそれらしい感じでかわいいです。</p> <p> </p> <p><img class="hatena-fotolife" title="f:id:bathtimefish:20140830145842j:plain" src="http://cdn-ak.f.st-hatena.com/images/fotolife/b/bathtimefish/20140830/20140830145842.jpg" alt="f:id:bathtimefish:20140830145842j:plain" /></p> <p> </p> <p>物販のとなりでは原画や等身大タテカン、地元<a class="keyword" href="http://d.hatena.ne.jp/keyword/%B6%D7%B1%BA%C4%AE">琴浦町</a>のために書き下ろされた4コマなどが展示されていました。ご当地的な感じがしていいですね。<a class="keyword" href="http://d.hatena.ne.jp/keyword/%B6%D7%B1%BA%C4%AE">琴浦町</a>には<a href="http://www.kominka-tyugoku.com/kotohime.htm">琴姫</a>さまという<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A4%E6%A4%EB%A5%AD%A5%E3%A5%E9">ゆるキャラ</a>がいるんですが、個人的にはどうしてこうなった?という感じです。合戦モチーフとか生々しいし顔がこええよ。ちょっとヒネりどころを間違えている気がします。<br /><br />なので、</p> <p> </p> <p><img class="hatena-fotolife" title="f:id:bathtimefish:20140830144657j:plain" src="http://cdn-ak.f.st-hatena.com/images/fotolife/b/bathtimefish/20140830/20140830144657.jpg" alt="f:id:bathtimefish:20140830144657j:plain" /></p> <p> </p> <p><img class="hatena-fotolife" title="f:id:bathtimefish:20140830144850j:plain" src="http://cdn-ak.f.st-hatena.com/images/fotolife/b/bathtimefish/20140830/20140830144850.jpg" alt="f:id:bathtimefish:20140830144850j:plain" /></p> <p> </p> <p><img class="hatena-fotolife" title="f:id:bathtimefish:20140830144647j:plain" src="http://cdn-ak.f.st-hatena.com/images/fotolife/b/bathtimefish/20140830/20140830144647.jpg" alt="f:id:bathtimefish:20140830144647j:plain" /></p> <p> </p> <p><a class="keyword" href="http://d.hatena.ne.jp/keyword/%B6%D7%B1%BA%C4%AE">琴浦町</a>はもう<a class="keyword" href="http://d.hatena.ne.jp/keyword/%B6%D7%B1%BA%BD%D5%B9%E1">琴浦春香</a>ちゃんでいいと思いました。</p> <p> </p> <p><img class="hatena-fotolife" title="f:id:bathtimefish:20140830150720j:plain" src="http://cdn-ak.f.st-hatena.com/images/fotolife/b/bathtimefish/20140830/20140830150720.jpg" alt="f:id:bathtimefish:20140830150720j:plain" /></p> <p> </p> <p>イベントは声優さんのトークショー、<a href="http://ja.wikipedia.org/wiki/%E9%87%91%E5%85%83%E5%AF%BF%E5%AD%90">金元寿子</a>さん、<a href="http://ja.wikipedia.org/wiki/%E7%A6%8F%E5%B3%B6%E6%BD%A4">福島潤</a>さんの主役級が出演されました。トークおもしろかったです。福島さんおもしろかった。フリートークに加えて聖地当てクイズ、4コマ生アフレコなど。トークショーは撮影禁止だったので写真は撮れなかったけど、けっこう笑えて楽しかったです。</p> <p> </p> <p>第1話、最終12話の上映を含めた2時間強くらいのイベントでした。終わってみるとあっという間だったけど、会場は200名以上来場されていたと思います。聞いてみると北は<a class="keyword" href="http://d.hatena.ne.jp/keyword/%B4%E4%BC%EA%B8%A9">岩手県</a>、南は<a class="keyword" href="http://d.hatena.ne.jp/keyword/%B2%AD%C6%EC%B8%A9">沖縄県</a>からの来客だったとか。県外から<a class="keyword" href="http://d.hatena.ne.jp/keyword/%C4%CB%BC%D6">痛車</a>で来てた猛者も目撃しました。<a class="keyword" href="http://d.hatena.ne.jp/keyword/%CA%BC%B8%CB%B8%A9">兵庫県</a>からの参加なんてぬるいですね。。放送から1年以上経過している作品にこれだけのファンがいるとは、<a class="keyword" href="http://d.hatena.ne.jp/keyword/%B6%D7%B1%BA%C4%AE">琴浦町</a>はこのコンテンツでもっとやっていけるなと思いました。まじでがんばってください。</p> <p> </p> <p>イベントの運営は町役場の方々でされてたようです。イベント運営とか慣れないだろうに、おつかれさまでした。<a href="http://ja.wikipedia.org/wiki/%E6%B5%A6%E5%AE%89%E9%A7%85_(%E9%B3%A5%E5%8F%96%E7%9C%8C)">浦安駅</a>までのピストン運送とかすげーがんばってますよね。</p> <p> </p> <p><img class="hatena-fotolife" title="f:id:bathtimefish:20140830171250j:plain" src="http://cdn-ak.f.st-hatena.com/images/fotolife/b/bathtimefish/20140830/20140830171250.jpg" alt="f:id:bathtimefish:20140830171250j:plain" /></p> <p> </p> <p>リアルでは名も知られず何もない地域ですが、ネットではアニメ聖地のひとつとして名を馳せているわけです。これを通じて景色がいいとか、食べ物がうまいとかいう<a class="keyword" href="http://d.hatena.ne.jp/keyword/%B6%D7%B1%BA%C4%AE">琴浦町</a>の隠れた良さを発信していってほしいです。</p> <p><br />またなんかやってください。必ず行きます。</p> <p>ありがとう<a class="keyword" href="http://d.hatena.ne.jp/keyword/%B6%D7%B1%BA%C4%AE">琴浦町</a>。</p> <p> </p> <p><img class="hatena-fotolife" title="f:id:bathtimefish:20140830171228j:plain" src="http://cdn-ak.f.st-hatena.com/images/fotolife/b/bathtimefish/20140830/20140830171228.jpg" alt="f:id:bathtimefish:20140830171228j:plain" /></p>bathtimefish<a class="keyword" href="http://d.hatena.ne.jp/keyword/Google%20Glass">Google Glass</a>をかけてサーキットを爆走したらどうなるかhatenablog://entry/129212288157242845112014-05-16T14:01:24+09:002014-05-16T14:49:36+09:00※本実験は、デバイスの使用感を試すためのものであり、Google Glass装着時の運転の安全性を何ら保証するものではありません。このような運転は通常の運転に比べて危険な行為であるため、十分に安全性に配慮した上で実験を行っております。同様の行為を軽率に行わないようにしてください。くれぐれもお願い致します。 先日、とても興味深い実験に参加させていただきました。その実験のテーマがこれ「Google Glassをかけてサーキットを爆走したらどうなるか?」です。Android開発やグラスウェアmiramaの開発で有名な株式会社ブリリアントサービスさんにお誘いいただきました。 Google Glassと…<p style="padding: 5px; border: solid 1px #ddd; border-radius: 3px;">※本実験は、デバイスの使用感を試すためのものであり、<a class="keyword" href="http://d.hatena.ne.jp/keyword/Google%20Glass">Google Glass</a>装着時の運転の安全性を何ら保証するものではありません。このような運転は通常の運転に比べて危険な行為であるため、十分に安全性に配慮した上で実験を行っております。同様の行為を軽率に行わないようにしてください。くれぐれもお願い致します。</p> <p>先日、とても興味深い実験に参加させていただきました。<br />その実験のテーマがこれ「<a class="keyword" href="http://d.hatena.ne.jp/keyword/Google%20Glass">Google Glass</a>をかけてサーキットを爆走したらどうなるか?」です。<a class="keyword" href="http://d.hatena.ne.jp/keyword/Android">Android</a>開発やグラスウェア<a href="http://www.brilliantservice.co.jp/lab/mirama.html">mirama</a>の開発で有名な<a href="http://www.brilliantservice.co.jp/">株式会社ブリリアントサービス</a>さんにお誘いいただきました。</p> <p><img class="hatena-fotolife" title="f:id:bathtimefish:20140516130023p:plain" src="http://cdn-ak.f.st-hatena.com/images/fotolife/b/bathtimefish/20140516/20140516130023.png" alt="f:id:bathtimefish:20140516130023p:plain" /></p> <p><a class="keyword" href="http://d.hatena.ne.jp/keyword/Google%20Glass">Google Glass</a>といえば、ぼちぼち一般販売が開始されそうな気配が漂ってきていて一般の人々の手にも届くのかなという雰囲気になってきてますが、そもそも開発者向けには2012年から提供が開始されており、世界中でどんな用途で便利に使えるかとか、Glasswareと呼ばれる専用アプリケーションを開発する試みが続けられてきています。</p> <p>まあ、ちょっと考えると<a class="keyword" href="http://d.hatena.ne.jp/keyword/Google%20Glass">Google Glass</a>をつけたままで運転するというのはなんか便利じゃないかと思う反面、だいぶ危なっかしい気もします。ボクが最初に<a class="keyword" href="http://d.hatena.ne.jp/keyword/Google%20Glass">Google Glass</a>を装着した印象では、右目の直前にディスプレイがある状態で、片目の視界がほぼ覆い隠される感じでした。</p> <p><img class="hatena-fotolife" title="f:id:bathtimefish:20140516134438p:plain" src="http://cdn-ak.f.st-hatena.com/images/fotolife/b/bathtimefish/20140516/20140516134438.png" alt="f:id:bathtimefish:20140516134438p:plain" /></p> <p>正直この状態で運転をするというのは片目をつぶって運転するとほぼ変わらない。かなり危ないな思いました。まあでも実際やってみないとわからんなーと思っていたので今回の実験は大変興味深く、二つ返事で参加した次第です。</p> <p>法律上、<a class="keyword" href="http://d.hatena.ne.jp/keyword/Google%20Glass">Google Glass</a>を装着したまま一般道路を走るわけにはいきません。なので<a class="keyword" href="http://d.hatena.ne.jp/keyword/%CE%EB%BC%AF">鈴鹿</a>のサーキットまで行って、サーキット内で実験しました。サーキットに行くまでは「まあ一般車で通常の速度で走るんだろうな」と思ってましたが行ってみると車はレーサー仕様。タイヤも今日のために新調してきたという気合ぶり。どうやら社長の趣味も入ってるようですが、いろいろすごい仕様になってました。</p> <p><img class="hatena-fotolife" title="f:id:bathtimefish:20140507102211j:plain" src="http://cdn-ak.f.st-hatena.com/images/fotolife/b/bathtimefish/20140507/20140507102211.jpg" alt="f:id:bathtimefish:20140507102211j:plain" /></p> <p>ただ装着して走るだけでは勿体ないということで、開発者の方が実験用のGlasswareをつくってこられてました。車に搭載されている<a href="http://ja.wikipedia.org/wiki/OBD">ODB2</a>インターフェースからエンジンの回転数を取得し、それを車に搭載した<a class="keyword" href="http://d.hatena.ne.jp/keyword/Android">Android</a>端末経由でリアルタイムに<a class="keyword" href="http://d.hatena.ne.jp/keyword/Google%20Glass">Google Glass</a>に送るという仕組みです。さらに7000回転を超えるとアラートを表示。これで走行中に回転数を眼前でモニタしながらドライブできるというわけです。</p> <p><img class="hatena-fotolife" title="f:id:bathtimefish:20140507101349j:plain" src="http://cdn-ak.f.st-hatena.com/images/fotolife/b/bathtimefish/20140507/20140507101349.jpg" alt="f:id:bathtimefish:20140507101349j:plain" /></p> <p>ボクはカーレースド素人なので何も知りませんでしたが、レースでは<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%B9%A5%D4%A1%BC%A5%C9%A5%E1%A1%BC%A5%BF%A1%BC">スピードメーター</a>より<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%BF%A5%B3%A5%E1%A1%BC%A5%BF%A1%BC">タコメーター</a>が大事だそうです。スピードは出せる時に目一杯出すのでレース中の関心事ではない一方、エンジンの回転数はコーナーを曲がるタイミングなどで非常に重要らしいです。ほんと一般道での走行とは世界が違いますね。車にモニタ用の端末等を取り付けて、いざ走ってみました。</p> <p><img class="hatena-fotolife" title="f:id:bathtimefish:20140507113724j:plain" src="http://cdn-ak.f.st-hatena.com/images/fotolife/b/bathtimefish/20140507/20140507113724.jpg" alt="f:id:bathtimefish:20140507113724j:plain" /></p> <p>ドライバーは社長の杉本さん。趣味でよくサーキットを走ると聞いていましたが、めっちゃうまい!ボクは助手席でリアル<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%A4%A5%CB%A5%B7%A5%E3%A5%EBD">イニシャルD</a>な体験をさせていただきました。ジェットコースターの感覚ですね。酔うヒマもありません。とにかく席にしがみつくのにせいいぱいでしたw </p> <p><img class="hatena-fotolife" title="f:id:bathtimefish:20140516132551p:plain" src="http://cdn-ak.f.st-hatena.com/images/fotolife/b/bathtimefish/20140516/20140516132551.png" alt="f:id:bathtimefish:20140516132551p:plain" /></p> <p>ドライバーの杉本さんはというと、さすがかなり余裕の表情です。Glassをつけたまま120km/h以上平気で出してました。「邪魔にならないですか?」と聞いたら「意外にイケますw」とのこと。意外なことに運転には全く支障がないようです。</p> <p>このときは写真を見ていただくとわかりますが、ヘルメットをしっかりかぶるためにGlassはだいぶ浅くかける必要がありました。そのため目とディスプレイとの間にだいぶ距離が空いたので視界を邪魔しなかったのかもしれません。</p> <p>さらに写真をよくみると<a class="keyword" href="http://d.hatena.ne.jp/keyword/Google%20Glass">Google Glass</a>のディスプレイ位置がちょうどヘルメットのシールド部分に来ているのがわかります。なるほどこれで邪魔になってないと。興味深いですね。</p> <p><img class="hatena-fotolife" title="f:id:bathtimefish:20140516133339j:plain" src="http://cdn-ak.f.st-hatena.com/images/fotolife/b/bathtimefish/20140516/20140516133339.jpg" alt="f:id:bathtimefish:20140516133339j:plain" /></p> <p>時間の許すかぎりサーキットを周回しましたが、全く問題なくラップタイムも安定していました。今回の実験では<a class="keyword" href="http://d.hatena.ne.jp/keyword/Google%20Glass">Google Glass</a>が運転に支障を与えるようなことはありませんでした。というか、ドライバーにとってはかなり便利だったようです。</p> <p>運転中に眼前にエンジンの回転数が表示されるというのはかなり良かったもよう。たしかに同乗した体験からもそれはうなずけました。とにかく運転中はコースから目が離せなくて、計器類をみるヒマもないからです。</p> <p>同乗した体験から、エンジンの回転数をはじめとして、刻々と変わる車の情報が眼前に表示されるというのはレーサーの判断や車の制御の効率化に貢献しそうな感じがしました。もし車のインフォメーションが全てGlassに完結するということになれば、計器類が必要無くなり車の軽量化にもつながるかもしれないですね。</p> <p><img class="hatena-fotolife" title="f:id:bathtimefish:20140516134455p:plain" src="http://cdn-ak.f.st-hatena.com/images/fotolife/b/bathtimefish/20140516/20140516134455.png" alt="f:id:bathtimefish:20140516134455p:plain" /></p> <p>いやー、杉本さんおつかれさまでした!</p> <p>今回の実験では次のことがわかりました。</p> <ol> <li><a class="keyword" href="http://d.hatena.ne.jp/keyword/Google%20Glass">Google Glass</a>はカーレース並みの運転でも邪魔にならない(かけ方による?)</li> <li>車情報のリアルタイム表示はかなりイイ</li> <li><a class="keyword" href="http://d.hatena.ne.jp/keyword/Google%20Glass">Google Glass</a>の使いどころはいろんな場面にあるかも</li> </ol> <p>メガネに時計と、最近になって<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%A6%A5%A7%A5%A2%A5%E9%A5%D6%A5%EB">ウェアラブル</a>デバイスの開発が活発になってきてますが、実際の活用ケースとなるとまだまだピンとこない。という感覚が世間では強いのではないでしょうか。しかし生活のいろいろな場面に実際に使ってみると、意外にすごく便利だ!というケースがあるような気がしました。</p> <p>個人的には今回で<a class="keyword" href="http://d.hatena.ne.jp/keyword/Google%20Glass">Google Glass</a>のような<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%A6%A5%A7%A5%A2%A5%E9%A5%D6%A5%EB">ウェアラブル</a>デバイスは日常生活よりは、特殊な環境の中での作業時に便利となるケースが多いんじゃないかと感じました。</p> <p>街をぶらぶらしていて、すぐ写真がとれる。なんてのは正直たいして便利とは言えないですが、エンジンの回転数が瞬時にわかって、他のドライバーよりコンマ1秒速くコーナーを抜けられる、というのは大きいと思います。</p> <p>関西では<a href="http://atnd.org/events/50811">HMDミーティング</a>など<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%A6%A5%A7%A5%A2%A5%E9%A5%D6%A5%EB">ウェアラブル</a>デバイスの情報が得られる機会も増えてきました。今後も積極的に情報を得て未来のITの可能性を追究していきたいと思います。</p> <p>最後に今回の実験にお誘いいただいた株式会社ブ<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%EA%A5%EA%A5%A2%A5%F3">リリアン</a>トサービスの杉本社長、サーキットでいろいろお話いただいた社員の方々にこの場を借りて御礼申し上げます。</p> <p>ありがとうございました。</p>bathtimefishyeoman webapp で複数ページで<a class="keyword" href="http://d.hatena.ne.jp/keyword/AMD">AMD</a>する方法hatenablog://entry/129212288157118871302013-11-03T18:53:40+09:002013-11-03T18:53:40+09:00最近仕事でもyeomanを使うことが多くなってきた。というか開発スタイルをできるだけ画一化したいので必要なことはyeoman上で片付けてしまおうという気持ちがまあ強い。 べつにyeomanじゃなくてもいいんだけど、他にもっとよいツールが思いつかない状態なので。bracketsDreamweaverなんかも試してみたんだけど個人的にはyeoman+vimがWebアプリもWebページも作りやすかったりしてます。bowerやnpmでモジュールの導入が楽なのとgrunt様が強力なおかげですね。 yeomanはgeneratorというプロジェクト生成モジュールを使うことでいろいろな開発に適したプロジェ…<p>最近仕事でも<a href="http://yeoman.io/">yeoman</a>を使うことが多くなってきた。というか開発スタイルをできるだけ画一化したいので必要なことはyeoman上で片付けてしまおうという気持ちがまあ強い。<br /><br /></p> <p> べつにyeomanじゃなくてもいいんだけど、他にもっとよいツールが思いつかない状態なので。bracketsや<a class="keyword" href="http://d.hatena.ne.jp/keyword/Dreamweaver">Dreamweaver</a>なんかも試してみたんだけど個人的にはyeoman+<a class="keyword" href="http://d.hatena.ne.jp/keyword/vim">vim</a>がWebアプリもWebページも作りやすかったりしてます。bowerやnpmでモジュールの導入が楽なのとgrunt様が強力なおかげですね。<br /><br /></p> <p> yeomanはgeneratorというプロジェクト生成モジュールを使うことでいろいろな開発に適したプロジェクトを生成することができる。公式にもいっぱいあるのだけどGetting Startedで使われてる<a style="line-height: 1.5;" href="https://github.com/yeoman/generator-webapp">generator-webapp</a>が一番ポピュラーだろう。<br /><br /></p> <p> webappはいい感じのhtml、<a class="keyword" href="http://d.hatena.ne.jp/keyword/css">css</a>、jsのセットを出してくれるんでよく使ってた。今まではWebサイトやシングルページの小さいアプリを作るときに使っていたんだけど、アプリの規模を大きくして複数のページで違うjsプログラムを使うようになってちょっとハマった。requirejsのビルド設定がうまくいかなかったのである。<br /><br /></p> <p> webappは<a style="line-height: 1.5;" href="https://github.com/yeoman/generator-webapp">grunt-contrib-requirejs</a>をつかってgrunt build時にrequire.config()が記述されているmain.jsを起点にdefineされたモジュールを結合、minifyしてくれる。なんとも便利なんだけど、これが2つ以上のページで異なるrequireをしたいときにはそのままじゃうまくいかない。<br /><br /></p> <p> 例えば、index.htmlでmain.jsを使ってa.js, b.js, c.jsをrequireする。一方でabout.htmlではmain2.jsでb.js, c.js, d.jsをrequireするといったことをやろうと思ってもうまくいかない。about.htmlで <br /><br /></p> <p><code> &lt;!-- build:js scripts/main2.js --&gt;<br /> &lt;script data-main="scripts/main2" src="bower_components/requirejs/require.js"&gt;<br /> &lt;!-- endbuild --&gt;</code></p> <p><br /> みたいにしても、期待通りにビルドされない。これって簡単にできないと複数ページになるアプリが書けねえじゃんと思ってけっこう本気で調べたけどかなり時間がかかった。。まあ結果的にrequirejsやgrunt-contrib-requirejsのことがだいぶ判りましたよとほほ。<br /><br /></p> <p> で、結果としてできたのが<a style="line-height: 1.5;" href="https://gist.github.com/bathtimefish/7080839">こちらのgistにおいてあるコード</a>です。</p> <p>必要なのは主にGruntfileのビルド設定。 </p> <p>  <script type="text/javascript" src="https://gist.github.com/bathtimefish/7080839.js?file=Gruntfile.js"></script> </p> <p>ポイントは152行目のuglifyのブロックと156行目以降のrequirejsのブロック。</p> <p>まずrequirejsでdist1、dist2という2つのbuild.jsオプションを記述。それぞれmain.jsとmain2.jsを割り当てる。ページが増えてrequireを記述するjsファイルが増えていけば同じようにdistを増やしていく。</p> <p> </p> <p>この発想はなかった。ボクはoptionのほうでなんとかするもんだと思い込んでいて<a href="https://github.com/robdodson/requirejs-multipage-shim-tutorial">requirejs-multipage-shim-tutorial</a>なんかを参考に設定いじりまくってうまくいかなかった。のでこれ見たときコロンブスの卵すぎて鼻水出そうになった。どっかのstackoverflowでこれ見つけたんだけどリンク失ってしまった。ありがとうどっかのだれか!<br /><br /></p> <p>dist1, dist2の設定により、これでmain.js、main2.jsはそれぞれよろしく結合されることになるんだけど、実際にビルドしてみるとmain2.jsのほうがminifyされない。調べてみるとmain2.jsの存在がuglifyに伝わってない感じだったのでwebappのGruntfileでは省略されているuglifyのブロックを追加してmain.js, main2.jsを明示した。するとmain2.jsもoptimizeされるようになった。<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%C7%A5%A3%A1%A6%A5%E2%A1%BC%A5%EB%A5%C8">ディ・モールト</a>良し!<br /><br /></p> <p>この方法だと、requireの制御が増えるごとにGruntfileを編集する必要があって、もう少しうまくタスクを組んで自動化できないかなあと思うのだけど、まあそんなにめんどいことじゃないからとりあえずこれでいいか、ということにした。<br /><br /></p> <p>何よりこれで何日か悩んでた問題が解けたし、webappで開発できるアプリの幅が少し広がったので新たな欲が湧くまでは当面これでいいことにした次第です。<br /><br /></p> <p>つーかもっとgenerator増えないかなあ。yeomanはもっとニッチなgeneratorが増えたほうが面白いことになると思う。generator<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%CF%A5%C3%A5%AB%A5%BD%A5%F3">ハッカソン</a>とかやろうかなあ。誰も来ないかもなあw</p>bathtimefish<htmlday>に凸撃してきたお話hatenablog://entry/116962483187548370282013-06-19T01:06:57+09:002013-06-19T02:15:15+09:002013年6月8日(土)。この日は日本のWeb業界において象徴的な日になったなぁと後で思った次第。なぜなら<htmlday>という日本全国でWeb系のイベントが同時多発的に開催されるという今までにないムーブメントが起こった日だからです。 このhtmldayを凸撃生放送したときのお話。詳しくは同じく取材スタッフをやってくれたIT Mediaのともちゃんが記事を書いてくれてます。 <htmlday> 凸撃生放送舞台裏 Photoレポート:世界のITエキスパートたちを捕獲! 凸撃インタビュー - @IT 全国で32イベント、延べ1555名の賛同参加があったとのこと。すごい。勉強会、セミナーから有志の…<p>2013年6月8日(土)。この日は日本のWeb業界において象徴的な日になったなぁと後で思った次第。なぜなら<a href="http://www.htmlday.jp/">&lt;htmlday&gt;</a>という日本全国でWeb系のイベントが同時多発的に開催されるという今までにないムーブメントが起こった日だからです。</p> <p>このhtmldayを凸撃生放送したときのお話。詳しくは同じく取材スタッフをやってくれたIT Mediaのともちゃんが記事を書いてくれてます。</p> <p><a href="http://www.atmarkit.co.jp/ait/articles/1306/11/news026.html">&lt;htmlday&gt; 凸撃生放送舞台裏 Photoレポート:世界のITエキスパートたちを捕獲! 凸撃インタビュー - @IT<br /></a></p> <p>全国で32イベント、延べ1555名の賛同参加があったとのこと。すごい。<br />勉強会、セミナーから有志の飲み会まで。大阪でも<a href="http://atnd.org/events/39831">HTML5など勉強会</a>が賛同開催された。</p> <p>実に様々なイベントが各地で開かれこの日全国でWebをテーマに1500名以上のクリエイターがWebについて考えた。まさに前代未聞の日だったと。うん、やっぱり後で考えてもすごい日だ。</p> <p><span><img class="hatena-fotolife" title="f:id:bathtimefish:20130617175526j:plain" src="http://cdn-ak.f.st-hatena.com/images/fotolife/b/bathtimefish/20130617/20130617175526.jpg" alt="f:id:bathtimefish:20130617175526j:plain" /></span></p> <p> </p> <p>同日東京では3つの大きなイベントが開催された。<a href="http://www.buildinsider.net/event/offline/01">Build Insider Offline</a>, <a href="http://testthewebforward.org/events/tokyo-2013.html">Test the Web Forward</a>, <a href="http://www.w3.org/2013/06/meetup-Tokyo.html">W3C Developers Meetup</a>。どれもWebの未来という点で非常に重要なイベントである。TestTWF, <a class="keyword" href="http://d.hatena.ne.jp/keyword/W3C">W3C</a> Dev Meetupについては世界中から<a class="keyword" href="http://d.hatena.ne.jp/keyword/W3C">W3C</a>メンバーの技術者たちが集まる場で、日本では希少な機会だ。</p> <p>全国的にWebが盛り上がってるのもアツいが、東京もアツい。こんなすごい日はもう二度と無いかもしれないということで、<a href="http://www.html5j.org/">html5j</a>はメンバー総出で各イベントを全力サポートした。</p> <p>できるかぎり配信したいということでhtml5jの放送職人が<a class="keyword" href="http://d.hatena.ne.jp/keyword/Youtube">Youtube</a> Liveで当日配信を行った。とりあえず<a href="http://blog.html5j.org/2013/06/w3c-developer-meetup-tokyo.html">W3C Dev Meetup のアーカイブはこちら</a>でみることができる。</p> <p>公式配信はOK。準備に抜かりはないなと思ったけどふと、先日<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%CB%A5%B3%A5%CB%A5%B3%C4%B6%B2%F1%B5%C4">ニコニコ超会議</a>2に行った時の感覚がよみがえって「せっかくだから突撃取材やって会場の雰囲気流さねぇ?」って言ってみたらやろうやろうってなったからニコ生で<a href="http://ch.nicovideo.jp/html5j">htmlday凸撃生放送</a>というのをやることになった。こんな感じで。</p> <p><span><img class="hatena-fotolife" title="f:id:bathtimefish:20130608181808j:plain" src="http://cdn-ak.f.st-hatena.com/images/fotolife/b/bathtimefish/20130608/20130608181808.jpg" alt="f:id:bathtimefish:20130608181808j:plain" /></span></p> <p><br />まあほんと朝から晩まで生放送なんて初めての経験でした。しかもこの特製ヘルメットのおかげで取材役のクセに写メとられまくった。どっちが取材されたかわからん感じで。まず朝イチ羽田についてからヒルズへ直行。1Fのカフェでスタッフと準備。</p> <p><span><img class="hatena-fotolife" title="f:id:bathtimefish:20130617181830j:plain" src="http://cdn-ak.f.st-hatena.com/images/fotolife/b/bathtimefish/20130617/20130617181830.jpg" alt="f:id:bathtimefish:20130617181830j:plain" /><br /><br />いっしょにいるのがこの特製ヘルメット型配信装置を作成したwakasa氏。公式配信を手がけたhtml5jイチの配信職人でありこんなヘルメットを自作できるクレイジーエンジニアである。こだわりがいちいちすごい。<br /></span></p> <p><span><img class="hatena-fotolife" title="f:id:bathtimefish:20130608190453j:plain" src="http://cdn-ak.f.st-hatena.com/images/fotolife/b/bathtimefish/20130608/20130608190453.jpg" alt="f:id:bathtimefish:20130608190453j:plain" /></span></p> <p>ヘルメットの装備。フロントカメラに<a href="http://jp.gopro.com/">Go Pro</a>、配信装置に<a href="http://static-shell.cerevo.com/first/ja/product.html">LiveShell</a>、<a class="keyword" href="http://d.hatena.ne.jp/keyword/Wimax">Wimax</a>ルーター、バッテリーパックも装着。Go ProとLiveShellは<a class="keyword" href="http://d.hatena.ne.jp/keyword/HDMI">HDMI</a>で接続、マイク入力。これだけでPCレスの独立した配信装置として機能する。一応ノートPCを片手に持っていたがこれは画角とコメント確認用に使っていた。</p> <p><span> </span></p> <p><span>まあこんな感じで各会場を巡って実況というかインタビューというか、なんかそんなことをしました。10:00〜22:00の間3回に分けての配信。断続的とはいえ長丁場でここ何年ぶりというくらい疲れました。楽しかったけどね。22:00くらいのボクはもうこんな感じだった。</span></p> <p><span><img class="hatena-fotolife" title="f:id:bathtimefish:20130608220605j:plain" src="http://cdn-ak.f.st-hatena.com/images/fotolife/b/bathtimefish/20130608/20130608220605.jpg" alt="f:id:bathtimefish:20130608220605j:plain" /></span></p> <p> </p> <p><span>最初の会場Build Insider Offline(品川のMS社)では会場の雰囲気が厳かな感じだったこともあって「ナレーションが堅えよ」などとコメントをいただいた。まあ若干緊張してたしなれない機材に気を遣いながらという感じだったのでアレでした。</span></p> <p><span>まあ次の会場くらいには慣れてちょっとやわらかくなりました。外国のエンジニアもご陽気に接してくれたことも手伝ってだいぶ気分的にも楽になったかな。しかし配信がくだけてきた最も大きな要因は。。</span></p> <p><span><img class="hatena-fotolife" title="f:id:bathtimefish:20130618171317j:plain" src="http://cdn-ak.f.st-hatena.com/images/fotolife/b/bathtimefish/20130618/20130618171317.jpg" alt="f:id:bathtimefish:20130618171317j:plain" /></span></p> <p>この娘の暴走である。第2会場 TestTWFから本格的にエンジンがかかってきた。ボク的にはこの会場、<a class="keyword" href="http://d.hatena.ne.jp/keyword/W3C">W3C</a>のSpec Editorらがわんさかいて「やべーいつもMLで見てる<a class="keyword" href="http://d.hatena.ne.jp/keyword/CSS">CSS</a> Groupの◯◯だよ。。」と芸能人を見てる感じでビクビクしていると、誰かもわからず突入して「今持ってるボトル変わってますね。」などと配信的に微妙なことを聞いていく。</p> <p>そんなともちゃん(写真)にツッコミを入れつつ、いらんことしようとするのを諌めつつの配信だった。思えばこれに体力を消耗した気がするんだけどまあそれはそれでネタてきにはおいしかったのかなと。ともちゃんのおかげで凸撃感のある配信になりました。感謝。</p> <p> </p> <p><span><img class="hatena-fotolife" title="f:id:bathtimefish:20130608190435j:plain" src="http://cdn-ak.f.st-hatena.com/images/fotolife/b/bathtimefish/20130608/20130608190435.jpg" alt="f:id:bathtimefish:20130608190435j:plain" /></span></p> <p>じっとしてれば美人なんだけどねぇ。</p> <p> </p> <p><span><img class="hatena-fotolife" title="f:id:bathtimefish:20130608205454j:plain" src="http://cdn-ak.f.st-hatena.com/images/fotolife/b/bathtimefish/20130608/20130608205454.jpg" alt="f:id:bathtimefish:20130608205454j:plain" /></span></p> <p>こっちのがデフォルトみたい。</p> <p>最後のほうにはともちゃんがヘルメットをかぶって配信してたんだけどまあ完全に酔っ払ってました。酔ってるのとヘルメットが重いのでともちゃんぐらんぐらんしてたみたいですね。「画面見てたら酔う」などとコメントをいただきボクは管理者コメで謝る役をやってました。</p> <p>しかしさすが、「凸撃力は上がった」とのコメントもあり。こりゃあ酔ってない時にかぶせるべきだったかなと思った次第。来年もhtmldayをやるならともちゃんメインキャスターでやったほうがいいかなとも思いました。</p> <p><span><img class="hatena-fotolife" title="f:id:bathtimefish:20130608212126j:plain" src="http://cdn-ak.f.st-hatena.com/images/fotolife/b/bathtimefish/20130608/20130608212126.jpg" alt="f:id:bathtimefish:20130608212126j:plain" /></span></p> <p><br />おそらくWeb技術者としていままで経験したことのない<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%A4%A5%F3%A5%D1%A5%AF">インパク</a>トの数々に出会った日。それを一日中実況した日。もうこんなのは二度とないかもな経験ができたのは日本と世界中から集まったWebを支える技術者たちとhtmldayを開催したhtml5jスタッフの尽力あってのことです。</p> <p>ほんとみなさんおつかれさま&ありがとうございました。</p> <p> </p> <p><span><img class="hatena-fotolife" title="f:id:bathtimefish:20130608212521j:plain" src="http://cdn-ak.f.st-hatena.com/images/fotolife/b/bathtimefish/20130608/20130608212521.jpg" alt="f:id:bathtimefish:20130608212521j:plain" /></span></p> <p>ほんと楽しかった。機会があればまたやりたい。</p>bathtimefishFirefoxOS keon <a class="keyword" href="http://d.hatena.ne.jp/keyword/%B3%AB%C9%F5">開封</a>の儀hatenablog://entry/116962483187545461792013-06-11T11:47:55+09:002013-12-05T19:11:41+09:00Firefox OSの開発者向け端末keonを購入した。東京にいるので家に帰ってから開けようと思ってたんだけどいま少し時間ができたから開けてみようとおもった。ので今から開封の儀を行おうと思います。 箱のデザインはこんな感じ。なんかムダに縦に長い。 開封した。なんかリッチな感じでナナメに梱包されている。なるほど高さが出るはず。keonは低価格なほうの端末なのでせめてものリッチ感の演出か? 持ってみた。軽くて持ちやすい。やっぱ携帯電話はこれくらいのサイズが実用的だよな。 付属品はバッテリー、イヤホン、MicroUSBケーブル、コンセント。 裏面 電源を入れてみた。geeksphoneのロゴ。 Fi…<p><span><a class="keyword" href="http://d.hatena.ne.jp/keyword/Firefox%20OS">Firefox OS</a>の開発者向け端末<a href=" http://shop.geeksphone.com/en/phones/1-keon.html">keon</a>を購入した。<br />東京にいるので家に帰ってから開けようと思ってたんだけどいま少し時間ができたから開けてみようとおもった。ので今から開封の儀を行おうと思います。<br /></span></p> <p> </p> <p><span>箱のデザインはこんな感じ。なんかムダに縦に長い。<br /></span></p> <p><span><img class="hatena-fotolife" title="f:id:bathtimefish:20130611103550j:plain" src="http://cdn-ak.f.st-hatena.com/images/fotolife/b/bathtimefish/20130611/20130611103550.jpg" alt="f:id:bathtimefish:20130611103550j:plain" /></span></p> <p><span><img class="hatena-fotolife" title="f:id:bathtimefish:20130611103610j:plain" src="http://cdn-ak.f.st-hatena.com/images/fotolife/b/bathtimefish/20130611/20130611103610.jpg" alt="f:id:bathtimefish:20130611103610j:plain" /></span></p> <p><span><img class="hatena-fotolife" title="f:id:bathtimefish:20130611103650j:plain" src="http://cdn-ak.f.st-hatena.com/images/fotolife/b/bathtimefish/20130611/20130611103650.jpg" alt="f:id:bathtimefish:20130611103650j:plain" /></span></p> <p><span><img class="hatena-fotolife" title="f:id:bathtimefish:20130611103623j:plain" src="http://cdn-ak.f.st-hatena.com/images/fotolife/b/bathtimefish/20130611/20130611103623.jpg" alt="f:id:bathtimefish:20130611103623j:plain" /></span></p> <p><span><img class="hatena-fotolife" title="f:id:bathtimefish:20130611103641j:plain" src="http://cdn-ak.f.st-hatena.com/images/fotolife/b/bathtimefish/20130611/20130611103641.jpg" alt="f:id:bathtimefish:20130611103641j:plain" /></span></p> <p> </p> <p>開封した。なんかリッチな感じでナナメに梱包されている。なるほど高さが出るはず。keonは低価格なほうの端末なのでせめてものリッチ感の演出か?</p> <p><span><img class="hatena-fotolife" title="f:id:bathtimefish:20130611103745j:plain" src="http://cdn-ak.f.st-hatena.com/images/fotolife/b/bathtimefish/20130611/20130611103745.jpg" alt="f:id:bathtimefish:20130611103745j:plain" /></span></p> <p>持ってみた。軽くて持ちやすい。やっぱ携帯電話はこれくらいのサイズが実用的だよな。</p> <p><span><img class="hatena-fotolife" title="f:id:bathtimefish:20130611103900j:plain" src="http://cdn-ak.f.st-hatena.com/images/fotolife/b/bathtimefish/20130611/20130611103900.jpg" alt="f:id:bathtimefish:20130611103900j:plain" /></span></p> <p>付属品はバッテリー、イヤホン、MicroUSBケーブル、コンセント。</p> <p><span><img class="hatena-fotolife" title="f:id:bathtimefish:20130611103824j:plain" src="http://cdn-ak.f.st-hatena.com/images/fotolife/b/bathtimefish/20130611/20130611103824.jpg" alt="f:id:bathtimefish:20130611103824j:plain" /></span></p> <p>裏面</p> <p><span><img class="hatena-fotolife" title="f:id:bathtimefish:20130611103934j:plain" src="http://cdn-ak.f.st-hatena.com/images/fotolife/b/bathtimefish/20130611/20130611103934.jpg" alt="f:id:bathtimefish:20130611103934j:plain" /></span></p> <p>電源を入れてみた。geeksphoneのロゴ。</p> <p><span><img class="hatena-fotolife" title="f:id:bathtimefish:20130611104155j:plain" src="http://cdn-ak.f.st-hatena.com/images/fotolife/b/bathtimefish/20130611/20130611104155.jpg" alt="f:id:bathtimefish:20130611104155j:plain" /></span></p> <p>FirefoxOSのロゴが次に出る。ピント合わなかったけど。</p> <p><span><img class="hatena-fotolife" title="f:id:bathtimefish:20130611104206j:plain" src="http://cdn-ak.f.st-hatena.com/images/fotolife/b/bathtimefish/20130611/20130611104206.jpg" alt="f:id:bathtimefish:20130611104206j:plain" /></span></p> <p>言語選択。日本語はない。</p> <p><span><img class="hatena-fotolife" title="f:id:bathtimefish:20130611104230j:plain" src="http://cdn-ak.f.st-hatena.com/images/fotolife/b/bathtimefish/20130611/20130611104230.jpg" alt="f:id:bathtimefish:20130611104230j:plain" /></span></p> <p><span><a class="keyword" href="http://d.hatena.ne.jp/keyword/Wifi">Wifi</a>設定<br /></span></p> <p><span><img class="hatena-fotolife" title="f:id:bathtimefish:20130611104306j:plain" src="http://cdn-ak.f.st-hatena.com/images/fotolife/b/bathtimefish/20130611/20130611104306.jpg" alt="f:id:bathtimefish:20130611104306j:plain" /></span></p> <p><span>SIM, <a class="keyword" href="http://d.hatena.ne.jp/keyword/Facebook">Facebook</a>から連絡先がインポートできるみたい<br /></span></p> <p><span><img class="hatena-fotolife" title="f:id:bathtimefish:20130611104839j:plain" src="http://cdn-ak.f.st-hatena.com/images/fotolife/b/bathtimefish/20130611/20130611104839.jpg" alt="f:id:bathtimefish:20130611104839j:plain" /></span></p> <p><span>ニュースがほしかったらメアド入力してね<br /></span></p> <p><span><img class="hatena-fotolife" title="f:id:bathtimefish:20130611104926j:plain" src="http://cdn-ak.f.st-hatena.com/images/fotolife/b/bathtimefish/20130611/20130611104926.jpg" alt="f:id:bathtimefish:20130611104926j:plain" /></span></p> <p><span><a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%BF%A5%A4%A5%E0%A5%BE%A1%BC%A5%F3">タイムゾーン</a>の設定。ざっとみたところ+9:00が見当たらなかったので+9:30を設定。あとでよく探す。<br /></span></p> <p><span><img class="hatena-fotolife" title="f:id:bathtimefish:20130611104827j:plain" src="http://cdn-ak.f.st-hatena.com/images/fotolife/b/bathtimefish/20130611/20130611104827.jpg" alt="f:id:bathtimefish:20130611104827j:plain" /></span></p> <p>Privacy Choice</p> <p><span><img class="hatena-fotolife" title="f:id:bathtimefish:20130611104857j:plain" src="http://cdn-ak.f.st-hatena.com/images/fotolife/b/bathtimefish/20130611/20130611104857.jpg" alt="f:id:bathtimefish:20130611104857j:plain" /></span></p> <p>初期設定は以上。以下クイックスタートが数画面続く</p> <p><span><img class="hatena-fotolife" title="f:id:bathtimefish:20130611105037j:plain" src="http://cdn-ak.f.st-hatena.com/images/fotolife/b/bathtimefish/20130611/20130611105037.jpg" alt="f:id:bathtimefish:20130611105037j:plain" /></span></p> <p><span><img class="hatena-fotolife" title="f:id:bathtimefish:20130611105107j:plain" src="http://cdn-ak.f.st-hatena.com/images/fotolife/b/bathtimefish/20130611/20130611105107.jpg" alt="f:id:bathtimefish:20130611105107j:plain" /></span></p> <p><span> </span></p> <p><span><img class="hatena-fotolife" title="f:id:bathtimefish:20130611105129j:plain" src="http://cdn-ak.f.st-hatena.com/images/fotolife/b/bathtimefish/20130611/20130611105129.jpg" alt="f:id:bathtimefish:20130611105129j:plain" /></span></p> <p><span><img class="hatena-fotolife" title="f:id:bathtimefish:20130611105148j:plain" src="http://cdn-ak.f.st-hatena.com/images/fotolife/b/bathtimefish/20130611/20130611105148.jpg" alt="f:id:bathtimefish:20130611105148j:plain" /></span></p> <p><span><img class="hatena-fotolife" title="f:id:bathtimefish:20130611105139j:plain" src="http://cdn-ak.f.st-hatena.com/images/fotolife/b/bathtimefish/20130611/20130611105139.jpg" alt="f:id:bathtimefish:20130611105139j:plain" /></span></p> <p><span><img class="hatena-fotolife" title="f:id:bathtimefish:20130611105054j:plain" src="http://cdn-ak.f.st-hatena.com/images/fotolife/b/bathtimefish/20130611/20130611105054.jpg" alt="f:id:bathtimefish:20130611105054j:plain" /></span></p> <p><span><img class="hatena-fotolife" title="f:id:bathtimefish:20130611105118j:plain" src="http://cdn-ak.f.st-hatena.com/images/fotolife/b/bathtimefish/20130611/20130611105118.jpg" alt="f:id:bathtimefish:20130611105118j:plain" /></span></p> <p>ロック画面きた。</p> <p><span><img class="hatena-fotolife" title="f:id:bathtimefish:20130611105210j:plain" src="http://cdn-ak.f.st-hatena.com/images/fotolife/b/bathtimefish/20130611/20130611105210.jpg" alt="f:id:bathtimefish:20130611105210j:plain" /></span></p> <p>ホーム画面。</p> <p><span><img class="hatena-fotolife" title="f:id:bathtimefish:20130611105224j:plain" src="http://cdn-ak.f.st-hatena.com/images/fotolife/b/bathtimefish/20130611/20130611105224.jpg" alt="f:id:bathtimefish:20130611105224j:plain" /></span></p> <p>右にスワイプ。Settingをクリックしてみる。</p> <p><span><img class="hatena-fotolife" title="f:id:bathtimefish:20130611105240j:plain" src="http://cdn-ak.f.st-hatena.com/images/fotolife/b/bathtimefish/20130611/20130611105240.jpg" alt="f:id:bathtimefish:20130611105240j:plain" /></span></p> <p><span>Settingの画面。設定内容はiOSや<a class="keyword" href="http://d.hatena.ne.jp/keyword/Android">Android</a>でよく見る感じの項目。<br /></span></p> <p><span><img class="hatena-fotolife" title="f:id:bathtimefish:20130611105300j:plain" src="http://cdn-ak.f.st-hatena.com/images/fotolife/b/bathtimefish/20130611/20130611105300.jpg" alt="f:id:bathtimefish:20130611105300j:plain" /></span></p> <p><span>ホームから左にスワイプ。アプリケーションがカテゴリ別にまとめられている。<br /></span></p> <p><span><img class="hatena-fotolife" title="f:id:bathtimefish:20130611105333j:plain" src="http://cdn-ak.f.st-hatena.com/images/fotolife/b/bathtimefish/20130611/20130611105333.jpg" alt="f:id:bathtimefish:20130611105333j:plain" /></span></p> <p><a class="keyword" href="http://d.hatena.ne.jp/keyword/Google">Google</a> Mapを起動してみた。普通にヌルヌル動く。ハード的にはやや低スペックだけど特にストレスはない。</p> <p><span><img class="hatena-fotolife" title="f:id:bathtimefish:20130611105411j:plain" src="http://cdn-ak.f.st-hatena.com/images/fotolife/b/bathtimefish/20130611/20130611105411.jpg" alt="f:id:bathtimefish:20130611105411j:plain" /></span></p> <p><a class="keyword" href="http://d.hatena.ne.jp/keyword/Firefox">Firefox</a>ブラウザを起動</p> <p><span><img class="hatena-fotolife" title="f:id:bathtimefish:20130611105445j:plain" src="http://cdn-ak.f.st-hatena.com/images/fotolife/b/bathtimefish/20130611/20130611105445.jpg" alt="f:id:bathtimefish:20130611105445j:plain" /></span></p> <p>hello と検索。検索エンジンはBing。</p> <p><span><img class="hatena-fotolife" title="f:id:bathtimefish:20130611105506j:plain" src="http://cdn-ak.f.st-hatena.com/images/fotolife/b/bathtimefish/20130611/20130611105506.jpg" alt="f:id:bathtimefish:20130611105506j:plain" /></span></p> <p> </p> <p>keonが欲しかった理由はFirefoxOSが低リソース環境でどこまで動くかということが知りたかったから。結果的にこれくらいのハードリソースなら余裕で動くということがわかった。これならキャリアは十分に実用的な100ドル端末をバラまくことができるんじゃないかな。面白くなってきた。</p> <p>まじ神戸に帰ったらいろいろやってみようと思う。</p> <p>あと、昨日中の人から「FirefoxOS アプリ開発者ガイド」すごいよと教えてもらった。うん、知ってる人たちが書いてるからいい本に違いないと思ってたんだけど正直<a class="keyword" href="http://d.hatena.ne.jp/keyword/Mozilla">Mozilla</a> Wikiや公開されてるドキュメント読んでたらだいたいわかるでしょと思って購入をしぶってた。しかしちょっと読ませてもらって間違いだとわかった。</p> <p>この本まじですごい。アプリの実践的な開発方法はもちろんのこと、FirefoxOS自体のビルドや公式にサポートされていないボードに対するカスタムビルドの解説、まだドキュメントが公開されていない<a class="keyword" href="http://d.hatena.ne.jp/keyword/API">API</a>リストなど(これ、<a class="keyword" href="http://d.hatena.ne.jp/keyword/Gecko">Gecko</a>やGaiaの<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%BD%A1%BC%A5%B9%A5%B3%A1%BC%A5%C9">ソースコード</a>読まないと抽出できないはず)現時点で貴重な情報が収録されている。</p> <p>keon引き取って帰りがけにAmazonでポチっておいた。帰宅する頃には届いているはず。本のレビューはまたゆっくりと。</p> <p>さて、仕事行ってこよ。</p> <p><div class="hatena-asin-detail"><a href="http://www.amazon.co.jp/exec/obidos/ASIN/4897979218/hatena-blog-22/"><img src="http://ecx.images-amazon.com/images/I/51%2BhjfZOb1L._SL160_.jpg" class="hatena-asin-detail-image" alt="Firefox OSアプリ開発ガイド" title="Firefox OSアプリ開発ガイド"></a><div class="hatena-asin-detail-info"><p class="hatena-asin-detail-title"><a href="http://www.amazon.co.jp/exec/obidos/ASIN/4897979218/hatena-blog-22/">Firefox OSアプリ開発ガイド</a></p><ul><li><span class="hatena-asin-detail-label">作者:</span> 本間雅史,宮家秀二,秋葉秀樹,今村博宜,山本祐輔,<a class="keyword" href="http://d.hatena.ne.jp/keyword/%BD%A9%CD%D5%A4%C1%A4%D2%A4%ED">秋葉ちひろ</a>,小森田賢史,浅井智也</li><li><span class="hatena-asin-detail-label">出版社/メーカー:</span> <a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%EA%A5%C3%A5%AF%A5%C6%A5%EC%A5%B3%A5%E0">リックテレコム</a></li><li><span class="hatena-asin-detail-label">発売日:</span> 2013/06/10</li><li><span class="hatena-asin-detail-label">メディア:</span> 単行本(ソフトカバー)</li><li><a href="http://d.hatena.ne.jp/asin/4897979218/hatena-blog-22" target="_blank">この商品を含むブログ (1件) を見る</a></li></ul></div><div class="hatena-asin-detail-foot"></div></div></p>bathtimefish<a class="keyword" href="http://d.hatena.ne.jp/keyword/Firefox">Firefox</a>でアプリケーションキャッシュを<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%C7%A5%D0%A5%C3%A5%B0">デバッグ</a>するhatenablog://entry/116962483187541540562013-06-01T15:06:56+09:002013-06-01T15:06:56+09:00Firefox23(現在はAurora)になって、アプリケーションキャッシュがデバッグできるようになったみたいなことをどっかで見たので(どこで見たか忘れた)やってみることにした。 アプリケーションキャッシュというと強力な機能なんだけど実際に使いづらいという印象があってまだ積極的に使ってない。使い方としてはマニフェストファイルにキャッシュしたいデータを定義してmanifest属性でそれを指定するだけという超カンタンなんだけど簡単なだけに動きがブラックボックス的で挙動がわかりづらい。 あと開発者ツールでキャッシュ状況を閲覧したり操作したりできないから要望がなかったらまあいいやみたいな感じで敬遠して…<p>Firefox23(現在はAurora)になって、<a href="http://www.html5rocks.com/ja/tutorials/appcache/beginner/">アプリケーションキャッシュ</a>が<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%C7%A5%D0%A5%C3%A5%B0">デバッグ</a>できるようになったみたいなことをどっかで見たので(どこで見たか忘れた)やってみることにした。</p> <p>アプリケーションキャッシュというと強力な機能なんだけど実際に使いづらいという印象があってまだ積極的に使ってない。使い方としては<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%DE%A5%CB%A5%D5%A5%A7%A5%B9%A5%C8">マニフェスト</a>ファイルにキャッシュしたいデータを定義してmanifest属性でそれを指定するだけという超カンタンなんだけど簡単なだけに動きがブラックボックス的で挙動がわかりづらい。</p> <p>あと開発者ツールでキャッシュ状況を閲覧したり操作したりできないから要望がなかったらまあいいやみたいな感じで敬遠してた感があった。<a class="keyword" href="http://d.hatena.ne.jp/keyword/Chrome">Chrome</a>ではResourseパネルにApplication Cacheの項目があってたしかキャッシュ状況は閲覧できたはず。</p> <p><a class="keyword" href="http://d.hatena.ne.jp/keyword/Firefox">Firefox</a>では23から開発ツールバーでappcacheコマンドが打てるようになった。これを使ってアプリケーションキャッシュの<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%C7%A5%D0%A5%C3%A5%B0">デバッグ</a>がいろいろできそうな感じ。現在23はAuroraで提供されているので、<a href="http://www.mozilla.jp/firefox/preview/">Aurora</a>で実際に試してみた。</p> <p>まず、Auroraの[ツール] -&gt; [Web開発] -&gt; [開発ツールバー] をクリックする。</p> <p><span><img class="hatena-fotolife" title="f:id:bathtimefish:20130601144038p:plain" src="http://cdn-ak.f.st-hatena.com/images/fotolife/b/bathtimefish/20130601/20130601144038.png" alt="f:id:bathtimefish:20130601144038p:plain" /></span></p> <p> </p> <p>すると、ブラウザの最下部に、黒いテキストボックスが表示される。これが開発ツールバー。いわゆる<a class="keyword" href="http://d.hatena.ne.jp/keyword/Firefox">Firefox</a>で開発するためのコマンドラインでaddonとか開発用ツールをコマンドでコントロールできる。</p> <p><span><img class="hatena-fotolife" title="f:id:bathtimefish:20130601144348p:plain" src="http://cdn-ak.f.st-hatena.com/images/fotolife/b/bathtimefish/20130601/20130601144348.png" alt="f:id:bathtimefish:20130601144348p:plain" /><br /><br />このコマンドラインで、「help appcache」と打つとこんな感じで表示される。</span></p> <p><span><img class="hatena-fotolife" title="f:id:bathtimefish:20130601144802p:plain" src="http://cdn-ak.f.st-hatena.com/images/fotolife/b/bathtimefish/20130601/20130601144802.png" alt="f:id:bathtimefish:20130601144802p:plain" /></span></p> <p><br />コマンドは4種類。<br />appcache clear:アプリケーションキャッシュを削除する<br />appcache list:キャッシュの一覧を表示する<br />appcache validate:<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%DE%A5%CB%A5%D5%A5%A7%A5%B9%A5%C8">マニフェスト</a>ファイルをバリデートする<br />appcache viewentry:別タブで指定キャッシュの情報を表示する</p> <p><br />だそうで。ためしに<a href="http://html5demos.com/offlineapp">アプリケーションキャッシュのDemoサイト</a>にアクセスしてみてappcache listを打つとこんな感じで表示された。</p> <p><span><img class="hatena-fotolife" title="f:id:bathtimefish:20130601145734p:plain" src="http://cdn-ak.f.st-hatena.com/images/fotolife/b/bathtimefish/20130601/20130601145734.png" alt="f:id:bathtimefish:20130601145734p:plain" /></span></p> <p><a class="keyword" href="http://d.hatena.ne.jp/keyword/Chrome">Chrome</a>と比べてけっこう情報量が多い。要るか要らないかは別として。でもData sizeはうれしいかも。どうせならData sizeの合計もほしいかも。</p> <p>あとclearやvalidateなんかは実際開発時に使えると思う。<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%DE%A5%CB%A5%D5%A5%A7%A5%B9%A5%C8">マニフェスト</a>ファイルのバリデートは<a href="http://manifest-validator.com/">Cache Manifest Validator</a>でオンラインできるんだけどここのコマンドでできるほうが便利。<br /><br /></p> <p>うん、使える。アプリケーションキャッシュを使う開発ではこのappcacheコマンドを使うだろうなあと思いました。<br /><br /></p>bathtimefish企業内でIE6は使われ続けてもいい。ただアクセスを外に出さないでほしい。hatenablog://entry/116962483187534563992013-05-14T16:54:11+09:002013-05-14T17:23:02+09:00双日システムズWindows XPから7/8への移行向けにIE6互換ブラウザを開発 こういうのは絶対出てくると思ってました。だってこれ儲かるもん。導入したい大企業はけっこう多いと思うので、一山なんぼのいい商売ができると思います。個人的にはシステム移行に怠慢な企業にバンバン営業をかけて儲けていただきたい。ただ売るときには以下の様な仕組みを合わせて導入して欲しいなと思います。それは、 IE6(互換ブラウザ)でWWWにアクセスできないような仕組みです。双日システムさん開発するIE6互換ブラウザにこういう機能を実装するか別のアプライアンスとセットで売るか。なんかそんなことしていただきたい。 特定の企…<p><a href="http://news.mynavi.jp/news/2013/05/10/168/index.html">双日システムズWindows XPから7/8への移行向けにIE6互換ブラウザを開発</a></p> <p><br />こういうのは絶対出てくると思ってました。だってこれ儲かるもん。導入したい大企業はけっこう多いと思うので、一山なんぼのいい商売ができると思います。個人的にはシステム移行に怠慢な企業にバンバン営業をかけて儲けていただきたい。ただ売るときには以下の様な仕組みを合わせて導入して欲しいなと思います。それは、</p> <p><br /><strong>IE6(互換ブラウザ)でWWWにアクセスできないような仕組み</strong><br /><br />です。双日システムさん開発するIE6互換ブラウザにこういう機能を実装するか別の<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%A2%A5%D7%A5%E9%A5%A4%A5%A2%A5%F3%A5%B9">アプライアンス</a>とセットで売るか。なんかそんなことしていただきたい。</p> <p><br />特定の企業の中でIE6が使われ続けて、中のWebサイトの表示の対応がややこしかったりセキュリティの問題が出たとしても、それが企業の中に閉じていて企業の責任範囲である以上問題はないと思います。それをサポートする<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%B5%A1%BC%A5%C9%A5%D1%A1%BC%A5%C6%A5%A3">サードパーティ</a>が儲かるなら良いと思うくらいです。</p> <p><br />ただ、企業の中のIE6アクセスがWWWに出てしまい、企業の外のサイトにアクセスすることを止めてほしい。IE6を使いつづける者とは関係ないWebサイトにIE6のアクセスログが残ると、それらのサイトはIE6サポートが切れなくなる。クライアントはその僅かなアクセスログを根拠にウェブクリエイターにIE6対策を強いてくる。</p> <p><br />結果ウェブクリエイターは今日も終電まで不毛なIE6対策に追われることになる。<br />これは、「IE6を使い続けるものが世の中に迷惑をかけている」状態と言っていいと思っています。</p> <p><br />ボクは以前から<a href="https://spreadsheets.google.com/a/bathtimefish.com/viewform?formkey=dG9Da3RWY1RETHA0akZjT0pSUzVWZHc6MQ">「IE6対応? それ、別料金でできるよ。」キャンペーン</a>でアンケートをとったり、<a href="http://www.moongift.jp/2011/01/20110114-2/">IE6非対応サイトになるならば告知をしよう「ie6alert-js」</a>をつくったり、<a href="http://www.slideshare.net/bathtimefish/ie6-9410543">Ie6をさっさとやめよう</a>なんて講演をあちこちでやったりしてきました。<br /><br />あげくのはてに去年の<a href="http://www.slideshare.net/bathtimefish/ie6-15583209">IE6をやめようと思ってももう手遅れ</a>に至っては6万Viewを超え<a class="keyword" href="http://d.hatena.ne.jp/keyword/2%A4%C1%A4%E3%A4%F3%A4%CD%A4%EB">2ちゃんねる</a>のネタ速報に載ったとか。これはさすがに笑ったけど。まあ一部からはすっかりIE6を目の敵にしてるキャラだと思われてるのかもしれないですねw<br /><br /></p> <p>けど、実際はそんなことはなくて優秀なブラウザだと思っています。優秀であるがゆえに今も使われ続けている。そんな側面もあると思うので。あえて言うなら優秀じゃないのは今までIE6対策に手を出さなかった人間のほうですよね。</p> <p><br />まあそんなグチっぽいことは置いといて、IE6対策についていろいろ考えてきた中で、ある時期から「IE6サポートが終了してもたいしてIE6の数は減らないんじゃないか?」と思うようになりました。なぜならWin7, 8に移行してもIE6を使い続ける手段があるから。そのひとつが上記プレスリリースのような仕組みですね。</p> <p><br />簡単に解決できる。業務システム刷新のコストより導入コストのほうが安い(たぶん)。責任者がなんもしなくていい。こういう仕組みは売れます。こういう製品が出て売れるのであればIE6の利用数は下げ止まるだろうと。たぶん2014年以降そうなるんじゃないかと思います。0.5%くらいを維持し続けるんじゃないかな。</p> <p><br />それは悪いことか?と考えてみると、実はそうでもない。企業の立場になってみると、下手をすると億かかるかもしれないシステム刷新より低コストでスムーズに解決できるというのは筋がいい。さらに上記のように企業内に閉じてIE6を使うことは我々にとって迷惑じゃない。それをふまえて改めてボクが求めているのは何か?と考えてみると、<br /><br /><strong>企業内でIE6は使われ続けてもいい。ただアクセスを外に出さないでほしい。</strong></p> <p><br />だったことがわかりました。</p> <p><br />それでその考えを形で示そうと思ってつくったのが、<a href="https://github.com/bathtimefish/ie6-proxy">ie6-proxy</a>。<br />こういうファイアーウォールを置いてとにかくIE6(互換ブラウザ)のアクセスが外に出るのを禁じるようにしたらいいと。業務システムを使っていて、うっかりそのまま昼休憩にYahoo!を見に行くとかできないようにしたらいいと思うんです。</p> <p><br />今後IE6がWWWをウロウロするというのは、我々Webクリエイターにとって迷惑なだけじゃなく、セキュリティ的な観点からも悪いのは明白です。ほんとITコンサルの方々もそういったことを指導していったほうがいいと思うのですよね。それはそれでうまくやればいい小遣い稼ぎになると思いますよ。</p>bathtimefish<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%CB%A5%B3%A5%CB%A5%B3%C4%B6%B2%F1%B5%C4">ニコニコ超会議</a>2に行ってきたhatenablog://entry/116962483187529541432013-05-01T18:18:19+09:002013-05-01T18:24:12+09:00実はニコニコ動画より比較的Youtube派だったり、配信はUSTREAMばかりでニコニコ生放送はやったことがなかったりするボクですが、電王戦が超アツだったり最近コンビニとかでよく初音ミクを見かけたりとニコニコのコンテンツをよく出くわすようになったのでちょっと面白そうだなと思って行ってみた。 けっこう真面目な話市場調査というか最新動向の調査という名目に仕立てあげて最近台頭しているニコニコ動画が日本のコンテンツ市場にどういう影響をあたえるか考察するというテーマにしといて行ってきた。結果的にはまあ勉強になったというか楽しかった。いやこれはニコ厨じゃなくても普通に楽しいですよ総合エンタメでしたね。 来…<p>実は<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%CB%A5%B3%A5%CB%A5%B3%C6%B0%B2%E8">ニコニコ動画</a>より比較的<a class="keyword" href="http://d.hatena.ne.jp/keyword/Youtube">Youtube</a>派だったり、配信は<a class="keyword" href="http://d.hatena.ne.jp/keyword/USTREAM">USTREAM</a>ばかりで<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%CB%A5%B3%A5%CB%A5%B3%C0%B8%CA%FC%C1%F7">ニコニコ生放送</a>はやったことがなかったりするボクですが、電王戦が超アツだったり最近コンビニとかでよく<a class="keyword" href="http://d.hatena.ne.jp/keyword/%BD%E9%B2%BB%A5%DF%A5%AF">初音ミク</a>を見かけたりとニコニコのコンテンツをよく出くわすようになったのでちょっと面白そうだなと思って行ってみた。</p> <p>けっこう真面目な話市場調査というか最新動向の調査という名目に仕立てあげて最近台頭している<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%CB%A5%B3%A5%CB%A5%B3%C6%B0%B2%E8">ニコニコ動画</a>が日本のコンテンツ市場にどういう影響をあたえるか考察するというテーマにしといて行ってきた。結果的にはまあ勉強になったというか楽しかった。いやこれは<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%CB%A5%B3%BF%DF">ニコ厨</a>じゃなくても普通に楽しいですよ総合エンタメでしたね。</p> <p>来年も開催されるみたいじゃないですか。来年も時間が許せば行きたいなと思いました。つーか帰ってから「なんかいろいろやって<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%CB%A5%B3%A5%CB%A5%B3%C6%B0%B2%E8">ニコニコ動画</a>にあげてみようかな?」という気分になった。開催の目論見どおりだと思うけど、それだけ<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%A4%A5%F3%A5%D1%A5%AF">インパク</a>トが大きかったですよ実際。<a class="keyword" href="http://d.hatena.ne.jp/keyword/HTML5">HTML5</a>飲み会UST in 大阪とかいっぺん<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%CB%A5%B3%A5%CB%A5%B3%C0%B8%CA%FC%C1%F7">ニコニコ生放送</a>でやってみようかしら?</p> <p>さて、当日の様子は以下。<br />まずは電車で会場にたどり着いた。</p> <p><iframe src="https://skydrive.live.com/embed?cid=835E40F28B0F5667&resid=835E40F28B0F5667%21498&authkey=AFqpOrEVA-xDcGI" frameborder="0" scrolling="no" width="319" height="239"></iframe></p> <p>進んでいくとやばそうな行列が。。</p> <p><iframe src="https://skydrive.live.com/embed?cid=835E40F28B0F5667&resid=835E40F28B0F5667%21500&authkey=AFVO_Sgoz5OGgIQ" frameborder="0" scrolling="no" width="319" height="239"></iframe></p> <p>めちゃくちゃ並ぶ。結局受付に辿りついたのは約1時間後だった。<br />午前中がこんなに混んだらしい。午後からはスカスカだったとのこと。</p> <p><iframe src="https://skydrive.live.com/embed?cid=835E40F28B0F5667&resid=835E40F28B0F5667%21503&authkey=ANn13ydr0z_PlUs" frameborder="0" scrolling="no" width="319" height="239"></iframe></p> <p>やっと会場にたどり着いた。もちろん中もすごい人である。</p> <p><iframe src="https://skydrive.live.com/embed?cid=835E40F28B0F5667&resid=835E40F28B0F5667%21505&authkey=ACb79FgirBbI0YI" frameborder="0" scrolling="no" width="319" height="239"></iframe></p> <p>入り口前の<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%C9%A5%DF%A5%CE%A1%A6%A5%D4%A5%B6">ドミノ・ピザ</a>は<a class="keyword" href="http://d.hatena.ne.jp/keyword/%BD%E9%B2%BB%A5%DF%A5%AF">初音ミク</a>仕様になっていた。</p> <p><iframe src="https://skydrive.live.com/embed?cid=835E40F28B0F5667&resid=835E40F28B0F5667%21506&authkey=AICMQ5Mx9kxlEB8" frameborder="0" scrolling="no" width="319" height="239"></iframe></p> <p> なんかラクガキだらけの<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%A8%A5%F4%A5%A1%BD%E9%B9%E6%B5%A1">エヴァ初号機</a>。</p> <p><iframe src="https://skydrive.live.com/embed?cid=835E40F28B0F5667&resid=835E40F28B0F5667%21507&authkey=APsbKt-ttqEeu9Q" frameborder="0" scrolling="no" width="239" height="319"></iframe></p> <p>個人的に一番見たかった自民党街宣車。こんなん持ってくるってなんかわかってるなあ自民党という感じがした。</p> <p><iframe src="https://skydrive.live.com/embed?cid=835E40F28B0F5667&resid=835E40F28B0F5667%21508&authkey=AMda4ZgfCRAsBhI" frameborder="0" scrolling="no" width="239" height="319"></iframe></p> <p>自民党のブース広い。なんか気合が入っていてスタッフの方が盛んにグッズの宣伝してた。</p> <p><iframe src="https://skydrive.live.com/embed?cid=835E40F28B0F5667&resid=835E40F28B0F5667%21509&authkey=AMhc36vxr-vO2vI" frameborder="0" scrolling="no" width="319" height="239"></iframe></p> <p>なんか自民党本部にしか売ってないグッズとか販売してたので、調子に乗って「一揃えください」と言って全部買ったら、スタッフの人えらい喜んでくれていっしょに写真撮った。左の方は神奈川県選出の衆議院議員さん。すごい気さくな方だった。</p> <p><iframe src="https://skydrive.live.com/embed?cid=835E40F28B0F5667&resid=835E40F28B0F5667%21511&authkey=ANjFP4g93DbgMm4" frameborder="0" scrolling="no" width="319" height="239"></iframe></p> <p><a class="keyword" href="http://d.hatena.ne.jp/keyword/%C6%FC%CB%DC%B6%A6%BB%BA%C5%DE">日本共産党</a>のブース。なんかふつーのブースだなあと思ったら脇にひっそりと古い本が飾ってある。みると「蟹工船の初版です」。ある意味わかっていらっしゃるつかみのあるブースでした。</p> <p><iframe src="https://skydrive.live.com/embed?cid=835E40F28B0F5667&resid=835E40F28B0F5667%21513&authkey=ADxOeUyyIAo0CIg" frameborder="0" scrolling="no" width="319" height="239"></iframe></p> <p>ユーザーが熱唱しているブースも有り、</p> <p><iframe src="https://skydrive.live.com/embed?cid=835E40F28B0F5667&resid=835E40F28B0F5667%21521&authkey=ANIcR0bLc7pyrzw" frameborder="0" scrolling="no" width="319" height="239"></iframe></p> <p>巨大なシメジがあり、</p> <p><iframe src="https://skydrive.live.com/embed?cid=835E40F28B0F5667&resid=835E40F28B0F5667%21528&authkey=AHgEGHrplrAJpfE" frameborder="0" scrolling="no" width="319" height="239"></iframe></p> <p>DJが延々アニソンを流している。脈絡はないが会場の盛り上がりがすごい。</p> <p><iframe src="https://skydrive.live.com/embed?cid=835E40F28B0F5667&resid=835E40F28B0F5667%21530&authkey=AFG--IbIWislIWI" frameborder="0" scrolling="no" width="319" height="239"></iframe></p> <p>個人的に興味があった自衛隊コーナー。かっこええ。<br />海自。</p> <p><iframe src="https://skydrive.live.com/embed?cid=835E40F28B0F5667&resid=835E40F28B0F5667%21531&authkey=APGSVp18skljENw" frameborder="0" scrolling="no" width="319" height="239"></iframe></p> <p>陸自。</p> <p><iframe src="https://skydrive.live.com/embed?cid=835E40F28B0F5667&resid=835E40F28B0F5667%21532&authkey=AM62Nsjn725b6UQ" frameborder="0" scrolling="no" width="319" height="239"></iframe></p> <p>陸自の偵察用バイク</p> <p><iframe src="https://skydrive.live.com/embed?cid=835E40F28B0F5667&resid=835E40F28B0F5667%21533&authkey=ANysq0fX1KMvFQE" frameborder="0" scrolling="no" width="319" height="239"></iframe></p> <p>空自。</p> <p><iframe src="https://skydrive.live.com/embed?cid=835E40F28B0F5667&resid=835E40F28B0F5667%21535&authkey=AAjpkI32x4LTCQg" frameborder="0" scrolling="no" width="319" height="239"></iframe></p> <p>一番見たかった10式。カッコイイ!</p> <p><iframe src="https://skydrive.live.com/embed?cid=835E40F28B0F5667&resid=835E40F28B0F5667%21537&authkey=AEj89fGpiYgRc5k" frameborder="0" scrolling="no" width="319" height="239"></iframe></p> <p>もう圧巻である。</p> <p><iframe src="https://skydrive.live.com/embed?cid=835E40F28B0F5667&resid=835E40F28B0F5667%21538&authkey=ABRUOQHKSLeJ0Xo" frameborder="0" scrolling="no" width="319" height="239"></iframe></p> <p>技術部方面。MMD+<a class="keyword" href="http://d.hatena.ne.jp/keyword/Kinect">Kinect</a>だと思う。この人ずっとこんな調子で手ふってたからかなり疲れたに違いない。</p> <p><iframe src="https://skydrive.live.com/embed?cid=835E40F28B0F5667&resid=835E40F28B0F5667%21541&authkey=APbLy7Ub7l6Lb-I" frameborder="0" scrolling="no" width="319" height="239"></iframe></p> <p>技術部〜してみたコーナー。</p> <p><iframe src="https://skydrive.live.com/embed?cid=835E40F28B0F5667&resid=835E40F28B0F5667%21542&authkey=AMDWZaMu6Exu73o" frameborder="0" scrolling="no" width="319" height="239"></iframe></p> <p>ネギ振りキーホルダーみたいのを自作できるコーナーだった。これは面白そう。事前に予約しときゃよかった。。</p> <p><iframe src="https://skydrive.live.com/embed?cid=835E40F28B0F5667&resid=835E40F28B0F5667%21544&authkey=AKn-KcydrpeEo5c" frameborder="0" scrolling="no" width="319" height="239"></iframe></p> <p>なんかすごいもんが飛んでた。。</p> <p><iframe src="https://skydrive.live.com/embed?cid=835E40F28B0F5667&resid=835E40F28B0F5667%21547&authkey=AMYoP2h96nDacAU" frameborder="0" scrolling="no" width="320" height="180"></iframe></p> <p><a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%DB%A5%EA%A5%A8%A5%E2%A5%F3">ホリエモン</a>監獄コーナー。知らないにーちゃんが「オレ入りますよ。撮ってください!」と。絵ズラ的には助かる感じありがとう。</p> <p><iframe src="https://skydrive.live.com/embed?cid=835E40F28B0F5667&resid=835E40F28B0F5667%21545&authkey=AF1n18KwnWZAGRQ" frameborder="0" scrolling="no" width="319" height="239"></iframe></p> <p>政治討論会的なことをやってる</p> <p><iframe src="https://skydrive.live.com/embed?cid=835E40F28B0F5667&resid=835E40F28B0F5667%21548&authkey=ANsX3f8AkFclPfU" frameborder="0" scrolling="no" width="319" height="239"></iframe></p> <p>裏で皇室評論家の武田さんがなんかN●Kダメ的なことをぶっちゃけてた。</p> <p><iframe src="https://skydrive.live.com/embed?cid=835E40F28B0F5667&resid=835E40F28B0F5667%21550&authkey=AL5bmJWoLxXt8_k" frameborder="0" scrolling="no" width="319" height="239"></iframe></p> <p>巨大スクリーンに映し出される生放送の様子。</p> <p><iframe src="https://skydrive.live.com/embed?cid=835E40F28B0F5667&resid=835E40F28B0F5667%21553&authkey=AGuiBX323FW5-sw" frameborder="0" scrolling="no" width="319" height="239"></iframe></p> <p>踊ってみた ブース。開始前だったけど既にすごい人だかり。</p> <p><iframe src="https://skydrive.live.com/embed?cid=835E40F28B0F5667&resid=835E40F28B0F5667%21555&authkey=AJItrOwuwt772KQ" frameborder="0" scrolling="no" width="319" height="239"></iframe></p> <p>電王戦。ここも必ず見ておきたかった。</p> <p><iframe src="https://skydrive.live.com/embed?cid=835E40F28B0F5667&resid=835E40F28B0F5667%21557&authkey=AOGfu3TUYlUGFoc" frameborder="0" scrolling="no" width="319" height="239"></iframe></p> <p>対局できるようになっていて、囲碁、将棋、どうぶつしょうぎが楽しめるようになってた。</p> <p><iframe src="https://skydrive.live.com/embed?cid=835E40F28B0F5667&resid=835E40F28B0F5667%21558&authkey=AEO-YA_smI-IIBA" frameborder="0" scrolling="no" width="319" height="239"></iframe></p> <p>演奏してみた。すごい人だかり。となりには電子楽器体験コーナーも。</p> <p><iframe src="https://skydrive.live.com/embed?cid=835E40F28B0F5667&resid=835E40F28B0F5667%21561&authkey=AE8dE62MUlgHGSs" frameborder="0" scrolling="no" width="319" height="239"></iframe></p> <p>なんか神社があって、みんな行列に並んでお願いごとしてた。</p> <p><iframe src="https://skydrive.live.com/embed?cid=835E40F28B0F5667&resid=835E40F28B0F5667%21564&authkey=AAYmlkge3OsXn2k" frameborder="0" scrolling="no" width="319" height="239"></iframe></p> <p><a class="keyword" href="http://d.hatena.ne.jp/keyword/%C5%B4%C6%BB%CC%CF%B7%BF">鉄道模型</a>。詳しい友達に聞いたら「あえてこの感じがいい。」つくりのようだ。</p> <p><iframe src="https://skydrive.live.com/embed?cid=835E40F28B0F5667&resid=835E40F28B0F5667%21565&authkey=ABtM4H8Ex-GMmF8" frameborder="0" scrolling="no" width="319" height="239"></iframe></p> <p>ライブドローイング ブース。プロの人がライブでなんか描いてた。</p> <p><iframe src="https://skydrive.live.com/embed?cid=835E40F28B0F5667&resid=835E40F28B0F5667%21569&authkey=AHPjJvJq1G4thxE" frameborder="0" scrolling="no" width="319" height="239"></iframe></p> <p>グッズ売り場。Tシャツがけっこう売り切れてた。技術部のやつとか欲しかったな。とりあえずカチューシャ買った。</p> <p><iframe src="https://skydrive.live.com/embed?cid=835E40F28B0F5667&resid=835E40F28B0F5667%21570&authkey=AP1WVFfTbII1QO8" frameborder="0" scrolling="no" width="319" height="239"></iframe></p> <p>歌ってみた。こういうユーザー主導型の人気とテンションがすごかったのはさすがという他ない。</p> <p><iframe src="https://skydrive.live.com/embed?cid=835E40F28B0F5667&resid=835E40F28B0F5667%21571&authkey=AAxNy6v6SilSUFM" frameborder="0" scrolling="no" width="319" height="239"></iframe></p> <p>アニソンのライブもあり、</p> <p><iframe src="https://skydrive.live.com/embed?cid=835E40F28B0F5667&resid=835E40F28B0F5667%21572&authkey=AKjju-wWixlFwdU" frameborder="0" scrolling="no" width="319" height="239"></iframe></p> <p><a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%DC%A1%BC%A5%AB%A5%ED%A5%A4%A5%C9">ボーカロイド</a>のブースも。これってポリッドスクリーンってやつだと思う。前から興味あって動画見てたけど、実際にみてみるとすごい。やってみたくなる。</p> <p><iframe src="https://skydrive.live.com/embed?cid=835E40F28B0F5667&resid=835E40F28B0F5667%21576&authkey=AEahA-RXPf1NCvA" frameborder="0" scrolling="no" width="319" height="239"></iframe></p> <p>うまく撮れなかったけどピラミッド型のスクリーンで擬似ホログラフィー。上部の<a class="keyword" href="http://d.hatena.ne.jp/keyword/iPad">iPad</a>で映写してるんだけどこれも面白かった。</p> <p><iframe src="https://skydrive.live.com/embed?cid=835E40F28B0F5667&resid=835E40F28B0F5667%21578&authkey=AIZKDW_VZmMY2AY" frameborder="0" scrolling="no" width="319" height="239"></iframe></p> <p>ボカロPの制作部屋紹介やら</p> <p><iframe src="https://skydrive.live.com/embed?cid=835E40F28B0F5667&resid=835E40F28B0F5667%21583&authkey=AC50CMb1FmpGYCw" frameborder="0" scrolling="no" width="319" height="239"></iframe></p> <p>制作体験やら</p> <p><iframe src="https://skydrive.live.com/embed?cid=835E40F28B0F5667&resid=835E40F28B0F5667%21584&authkey=AIijtERc0iCteXY" frameborder="0" scrolling="no" width="319" height="239"></iframe></p> <p><a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%DC%A1%BC%A5%AB%A5%ED%A5%A4%A5%C9">ボーカロイド</a>の歴史</p> <p><iframe src="https://skydrive.live.com/embed?cid=835E40F28B0F5667&resid=835E40F28B0F5667%21586&authkey=AFx65ZyQ6C2AnOA" frameborder="0" scrolling="no" width="319" height="239"></iframe></p> <p>等身大フィギュアまで。さすがにコンテンツが厚かった。</p> <p><iframe src="https://skydrive.live.com/embed?cid=835E40F28B0F5667&resid=835E40F28B0F5667%21587&authkey=AJGP9a0bKH_DYHg" frameborder="0" scrolling="no" width="319" height="239"></iframe></p> <p>ボカロ曲のDJブース。印象的だったのはテンションすごくてグルーブ感すごいにも関わらず誰も踊ってなくてみんな延々手を振っていたこと。</p> <p>これはこういうものなんだろうな。なんかクラブとかと較べて異質な感じはしたけど、感じた印象は「これはこれでアリ。」</p> <p><iframe src="https://skydrive.live.com/embed?cid=835E40F28B0F5667&resid=835E40F28B0F5667%21591&authkey=APOzzPnUZoPtP-k" frameborder="0" scrolling="no" width="319" height="239"></iframe></p> <p>フードコート。食べてみたかった「しげるカレー」は速攻で売り切れてた。他のもすごい行列だったので食うのを諦める。空いた時間帯でピザでも食うか。</p> <p><iframe src="https://skydrive.live.com/embed?cid=835E40F28B0F5667&resid=835E40F28B0F5667%21593&authkey=ADEmxv5xXTjpL14" frameborder="0" scrolling="no" width="319" height="239"></iframe></p> <p><a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%BB%A5%B0%A5%A6%A5%A7%A5%A4">セグウェイ</a>試乗会。乗りたかったけど行列にダウン。</p> <p><iframe src="https://skydrive.live.com/embed?cid=835E40F28B0F5667&resid=835E40F28B0F5667%21602&authkey=AHaw0R9L4dAfYJo" frameborder="0" scrolling="no" width="320" height="180"></iframe></p> <p>超ZUNビール。ひろゆきがめっちゃ飲んでたらしいね。</p> <p><iframe src="https://skydrive.live.com/embed?cid=835E40F28B0F5667&resid=835E40F28B0F5667%21596&authkey=ABDbN_oprLOxa6A" frameborder="0" scrolling="no" width="319" height="239"></iframe></p> <p>鉄道ブース。解体オークションの時は入れないくらいの人だった。さすがの盛況ぶり。</p> <p><iframe src="https://skydrive.live.com/embed?cid=835E40F28B0F5667&resid=835E40F28B0F5667%21599&authkey=AHy26qB8PsATfxA" frameborder="0" scrolling="no" width="319" height="239"></iframe></p> <p><a class="keyword" href="http://d.hatena.ne.jp/keyword/%C7%A4%C5%B7%C6%B2">任天堂</a>。わかってらっしゃるブース。マリオのコスプレのユーザーふつうにいたもんね。</p> <p><iframe src="https://skydrive.live.com/embed?cid=835E40F28B0F5667&resid=835E40F28B0F5667%21601&authkey=AL7tyGp3Ky6-W5k" frameborder="0" scrolling="no" width="319" height="239"></iframe></p> <p>初号機の脚組み立て中。なんかレゴ<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%DE%A5%A4%A5%F3%A5%C9%A5%B9%A5%C8%A1%BC%A5%E0">マインドストーム</a>で作ってたからあとでたぶん動く。</p> <p><iframe src="https://skydrive.live.com/embed?cid=835E40F28B0F5667&resid=835E40F28B0F5667%21606&authkey=AJrF1GIA6_c3Dwg" frameborder="0" scrolling="no" width="319" height="239"></iframe></p> <p>整備してみた。延々おねえさんが整備してた。</p> <p><iframe src="https://skydrive.live.com/embed?cid=835E40F28B0F5667&resid=835E40F28B0F5667%21607&authkey=AE1ZWPSkxQBqcKo" frameborder="0" scrolling="no" width="319" height="239"></iframe></p> <p>工場っぽいものがレゴで再現されてた。ほんとどうやってつくるんだこれ。。</p> <p><iframe src="https://skydrive.live.com/embed?cid=835E40F28B0F5667&resid=835E40F28B0F5667%21626&authkey=ANOVIwAUwL2dGVA" frameborder="0" scrolling="no" width="320" height="180"></iframe></p> <p>ニコ動の歴史</p> <p><iframe src="https://skydrive.live.com/embed?cid=835E40F28B0F5667&resid=835E40F28B0F5667%21610&authkey=AGT1rzYIZfCvBBY" frameborder="0" scrolling="no" width="319" height="239"></iframe></p> <p>インフラの説明。仕事柄けっこう読み込んだ。</p> <p><iframe src="https://skydrive.live.com/embed?cid=835E40F28B0F5667&resid=835E40F28B0F5667%21611&authkey=AJnuqzZWg6oFgds" frameborder="0" scrolling="no" width="319" height="239"></iframe></p> <p>会場ブロックの間のスペースにはコスプレの人がわんさかいたんだけど、その人達が面白かった。自宅警備隊の皆さん</p> <p><iframe src="https://skydrive.live.com/embed?cid=835E40F28B0F5667&resid=835E40F28B0F5667%21616&authkey=AMUHka0e0rnwqDA" frameborder="0" scrolling="no" width="319" height="239"></iframe></p> <p>誰か捕まってた。</p> <p><iframe src="https://skydrive.live.com/embed?cid=835E40F28B0F5667&resid=835E40F28B0F5667%21617&authkey=AGrsVfeGyfVW-Ag" frameborder="0" scrolling="no" width="239" height="319"></iframe></p> <p>hello WORK の人。警戒任務についておられる。この人達は本職の警備員の人に紛れるとよくわからなかった。</p> <p><iframe src="https://skydrive.live.com/embed?cid=835E40F28B0F5667&resid=835E40F28B0F5667%21620&authkey=ANddgrsDgb2euqw" frameborder="0" scrolling="no" width="239" height="319"></iframe></p> <p>さっきの初号機。いつのまにかだいぶ出来てた。けど時間の関係で動くトコまではみれなかった残念。</p> <p><iframe src="https://skydrive.live.com/embed?cid=835E40F28B0F5667&resid=835E40F28B0F5667%21622&authkey=AMgMQKryo381mU4" frameborder="0" scrolling="no" width="239" height="319"></iframe></p> <p>さっきの神社では結婚式がおこなわれており、</p> <p><iframe src="https://skydrive.live.com/embed?cid=835E40F28B0F5667&resid=835E40F28B0F5667%21623&authkey=AD9MvQIQO-sVB-E" frameborder="0" scrolling="no" width="239" height="319"></iframe></p> <p>討論ブースでは<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%DB%A5%EA%A5%A8%A5%E2%A5%F3">ホリエモン</a>が登場してた。</p> <p><iframe src="https://skydrive.live.com/embed?cid=835E40F28B0F5667&resid=835E40F28B0F5667%21628&authkey=AEsUa8zoBdbMGdI" frameborder="0" scrolling="no" width="239" height="319"></iframe></p> <p>ダイオウイカとダイオウ<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%B0%A5%BD%A5%AF%A5%E0%A5%B7">グソクムシ</a>から献花が。こういうネタは好き。</p> <p><iframe src="https://skydrive.live.com/embed?cid=835E40F28B0F5667&resid=835E40F28B0F5667%21632&authkey=AGzc5lHZJPkzCUc" frameborder="0" scrolling="no" width="319" height="239"></iframe></p> <p>そろそろ時間なので帰ろうと思い会場入口まで戻ってきたら<a class="keyword" href="http://d.hatena.ne.jp/keyword/%C4%CB%BC%D6">痛車</a>が陳列されてた。午前中はまだなかったよな?もったいない<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%B7%A5%C8%A5%ED%A5%A8%A5%F3">シトロエン</a></p> <p><iframe src="https://skydrive.live.com/embed?cid=835E40F28B0F5667&resid=835E40F28B0F5667%21633&authkey=AHI4QMlTgSmk21A" frameborder="0" scrolling="no" width="239" height="319"></iframe></p> <p>ここまで来るとこれはこういうもんだと納得できるクオリティ。</p> <p><iframe src="https://skydrive.live.com/embed?cid=835E40F28B0F5667&resid=835E40F28B0F5667%21635&authkey=AMuJakzRKmCHrH0" frameborder="0" scrolling="no" width="319" height="239"></iframe></p> <p>もうなんかガチのモーターショーにもこういう一角があっていい。</p> <p><iframe src="https://skydrive.live.com/embed?cid=835E40F28B0F5667&resid=835E40F28B0F5667%21636&authkey=AD__5f6LSw8T9s0" frameborder="0" scrolling="no" width="319" height="239"></iframe></p> <p>痛バイク。もう清々しいですよ。</p> <p><iframe src="https://skydrive.live.com/embed?cid=835E40F28B0F5667&resid=835E40F28B0F5667%21640&authkey=AGYZYBdYQWpzMHo" frameborder="0" scrolling="no" width="319" height="239"></iframe></p> <p>痛ブルドーザー</p> <p><iframe src="https://skydrive.live.com/embed?cid=835E40F28B0F5667&resid=835E40F28B0F5667%21645&authkey=AOMGBShOF_AN2iM" frameborder="0" scrolling="no" width="319" height="239"></iframe></p> <p>痛Zだがこれをみたころにはもうこれはこれでステキという感覚が芽生えてきてた。</p> <p><iframe src="https://skydrive.live.com/embed?cid=835E40F28B0F5667&resid=835E40F28B0F5667%21648&authkey=AK6tiadZwM7RtFo" frameborder="0" scrolling="no" width="319" height="239"></iframe></p> <p> </p> <p>いやほんと、わかったものもわからなかったものも量が多すぎてまとめきれない感じだった。しかしアツい。</p> <p>会場回ってた途中で、「この参加者って一人ひとりが一アクセスなんだよな」と感じた。普段アクセスしているニコ動の画面の中でこれだけのユーザーが回遊しているわけである。</p> <p>なるほどニコ動をリアルで再現というコンセプトを実感できた。そして今後ももっと膨らんでいくだろうという期待感も十分に得られた。</p> <p> </p> <p>まじなんかやってみよう。<br />なにかこのノリに参加してみよう。</p> <p>そう思える一日だった。<br />写真は全部<a href="http://sdrv.ms/12ZnEOV">Skydrive</a>に入れてあります。</p> <p> </p> <p>帰ってから土産物を見てみると、非常に政治色が強い内容だった。<br />まあある意味興味あったのはそっちだしいいか。<br /><br /></p> <p><iframe src="https://skydrive.live.com/embed?cid=835E40F28B0F5667&resid=835E40F28B0F5667%21649&authkey=AJFduDKrrdarKQY" frameborder="0" scrolling="no" width="319" height="239"></iframe></p>bathtimefishYeomanでフロントエンドと<a class="keyword" href="http://d.hatena.ne.jp/keyword/REST%20API">REST API</a>サーバーを同時に開発する方法hatenablog://entry/116962483187526466162013-04-22T12:51:27+09:002013-04-23T16:57:37+09:00先月のHTML5など勉強会で、Yeoman超入門を発表したときに、Yeomanはフロントエンド開発専用にlocalhostサーバー立ち上げるからサーバーサイドとの同時開発はちょっと工夫がいるよね〜みたいな話題があって、参加されてたnode.jsに詳しい方からhttp-proxyつかってapiの部分リダイレクトかけたらいいよみたいな方法を教えてもらった。 なるほどそれは便利だなと思って実際書いてみたら手軽に使える感じにできたので書いておきます。ちなみに今週水曜日にGoogle Developers Liveに出演してYeomanのことを喋らせていただく機会に恵まれたので、その時の参照にも使えるか…<p><a href="http://bathtimefish.hatenablog.com/entry/2013/03/27/145644">先月のHTML5など勉強会で、Yeoman超入門を発表した</a>ときに、Yeomanはフロントエンド開発専用に<a class="keyword" href="http://d.hatena.ne.jp/keyword/localhost">localhost</a>サーバー立ち上げるからサーバーサイドとの同時開発はちょっと工夫がいるよね〜みたいな話題があって、参加されてたnode.jsに詳しい方からhttp-proxyつかって<a class="keyword" href="http://d.hatena.ne.jp/keyword/api">api</a>の部分リダイレクトかけたらいいよみたいな方法を教えてもらった。</p> <p>なるほどそれは便利だなと思って実際書いてみたら手軽に使える感じにできたので書いておきます。ちなみに今週水曜日に<a href="https://plus.google.com/events/c9p1aclqe3fhl6gpo9p5hj4a01g">Google Developers Liveに出演してYeomanのことを喋らせていただく</a>機会に恵まれたので、その時の参照にも使えるかと思って。(ライブのスライドは<a href="http://www.slideshare.net/bathtimefish/yeoman-html5-web20130424-2">こちら</a>)</p> <p> </p> <p>Yeomanは $ grunt server で開発用のWebサーバーを起動することができる。デフォルトで <a href="http://localhost:9000/">http://localhost:9000/ 以降ファイルをセーブするたびに自動的に画面をリロードしてくれたりして<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%C7%A5%D0%A5%C3%A5%B0">デバッグ</a>やDesigning in the Browserな点ですごく便利。</p> <p>フロントエンドのみを開発する場合はこれで十分なんだけど、JSONベースの<a class="keyword" href="http://d.hatena.ne.jp/keyword/REST%20API">REST API</a>サーバーも同時に開発している際はちょっと問題がある。フロントエンド開発用サーバーが<a class="keyword" href="http://d.hatena.ne.jp/keyword/localhost">localhost</a>:9000を専有しているから<a class="keyword" href="http://d.hatena.ne.jp/keyword/REST%20API">REST API</a>サーバーを同じオリジンで立てることができない。</p> <p>つまり別のオリジン例えば <a class="keyword" href="http://d.hatena.ne.jp/keyword/localhost">localhost</a>:3000 とかで立てないといけないんだけど、そうすると同一生成元ポリシーの関係でフロントエンド側からJSONを取得したりすることができなくなる。フロントエンドと<a class="keyword" href="http://d.hatena.ne.jp/keyword/API">API</a>サーバーを同時進行で開発というのはよくあるし、End-to-Endテストしたい場合どうすんの?とか、ちょっと問題になってくるわけです。</p> <p>こういうケースの場合、上記2つのサーバーとは別にプロキシサーバーを立てて、フロントエンドから<a class="keyword" href="http://d.hatena.ne.jp/keyword/API">API</a>サーバーへのリクエストのみを別オリジンの<a class="keyword" href="http://d.hatena.ne.jp/keyword/API">API</a>サーバーに渡してしまおうというのが今回のお話です。まあ上記の理屈がよくわからなくても実際やってみるとなんとなく感覚がわかると思います。<br /><br />以下はYeomanが使える環境が整っている前提。</p> <p>まず準備から。<a class="keyword" href="http://d.hatena.ne.jp/keyword/API">API</a>サーバーをいちいち書くのがめんどくさいので今回はnode.jsの<a href="https://github.com/cyberagent/node-easymock">easymock</a>モジュールを使います。<a class="keyword" href="http://d.hatena.ne.jp/keyword/REST%20API">REST API</a>サーバーの<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%E2%A5%C3%A5%AF%A5%A2%A5%C3%A5%D7">モックアップ</a>が超簡単に立てられるやつ。これをグローバルインストールします。</p> <blockquote>$ npm install -g easymock</blockquote> <p>次にyomanでフロントエンドのスケルトンを作成します。<br />仮に名前を test としましょう。</p> <blockquote>$ mkdir /YOUR PROJECT DIR/test<br />$ cd /YOUR PROJECT DIR/test<br />$ yo webapp<br />Out of the box I include <a class="keyword" href="http://d.hatena.ne.jp/keyword/HTML5">HTML5</a> Boilerplate, <a class="keyword" href="http://d.hatena.ne.jp/keyword/jQuery">jQuery</a> and Modernizr.<br />Would you like to include <a class="keyword" href="http://d.hatena.ne.jp/keyword/Twitter">Twitter</a> Bootstrap for Sass? (Y/n) y<br />Would you like to include RequireJS (for <a class="keyword" href="http://d.hatena.ne.jp/keyword/AMD">AMD</a> support)? (Y/n) y</blockquote> <p>プロキシーサーバー用のnode.jsモジュール <a href="https://github.com/nodejitsu/node-http-proxy">http-proxy</a> をインストールします。</p> <blockquote>$ npm install http-proxy</blockquote> <p>次にこのディレクトリにサーバー用のディレクトリを作成します。</p> <blockquote>$ mkdir -p server/<a class="keyword" href="http://d.hatena.ne.jp/keyword/api">api</a>-server/<a class="keyword" href="http://d.hatena.ne.jp/keyword/api">api</a>/items</blockquote> <p>easymock用のコンフィグファイルを各ディレクトリに配置します。<br />まず、以下のコードを server/<a class="keyword" href="http://d.hatena.ne.jp/keyword/api">api</a>-server/<a class="keyword" href="http://d.hatena.ne.jp/keyword/api">api</a>/config.json という名前で配置します。<br />server/<a class="keyword" href="http://d.hatena.ne.jp/keyword/api">api</a>-server/<a class="keyword" href="http://d.hatena.ne.jp/keyword/api">api</a>/config.json<br /> <script type="text/javascript" src="https://gist.github.com/bathtimefish/5421469.js?file=easymock-config.json"></script> </p> <p>次に以下のコードを server/<a class="keyword" href="http://d.hatena.ne.jp/keyword/api">api</a>-server/<a class="keyword" href="http://d.hatena.ne.jp/keyword/api">api</a>/items/_get.json という名前で配置します。</p> <script type="text/javascript" src="https://gist.github.com/bathtimefish/5421469.js?file=easymock-items-_get.json"></script> <p>ここまでできたら、server/<a class="keyword" href="http://d.hatena.ne.jp/keyword/api">api</a>-serverディレクトリに移動して<a class="keyword" href="http://d.hatena.ne.jp/keyword/API">API</a>サーバーを起動してみましょう。</p> <blockquote>$ cd server/<a class="keyword" href="http://d.hatena.ne.jp/keyword/api">api</a>-server<br />$ easymock<br />Server running on <a href="http://localhost:3000">http://localhost:3000 />Server running on <a href="http://localhost:3000/_documentation/">http://localhost:3000/_documentation/ <p>サーバーが起動するのでWebブラウザで <a href="http://localhost:3000/api/items/">http://localhost:3000/api/items/ にアクセスしてみます。</p> <pre>[ "id": 1, "user": "john", "message": "hello" , "id": 2, "user": "bob", "message": "Hi!" , "id": 3, "user": "mike", "message": "good bye." ] </pre> <p>というJSONが返ってくれば正常に起動しています。違う場合はディレクトリの配置、ファイル名などが違っている場合があるので確認しましょう。</p> <p>この<a class="keyword" href="http://d.hatena.ne.jp/keyword/API">API</a>サーバーはそのまま起動しておいて、別のターミナルウィンドウを開き、プロジェクトのディレクトリに移動します。</p> <blockquote>$ cd /YOUR PROJECT DIR/test</blockquote> <p>app/index.htmlのdiv.containerブロックを以下のように変更します。</p> <script type="text/javascript" src="https://gist.github.com/bathtimefish/5421469.js?file=part-of-index.html"></script> <p>次に app/scripts/app.coffee をapp.coffeeという名前で配置します。</p> <script type="text/javascript" src="https://gist.github.com/bathtimefish/5421469.js?file=app.coffee"></script> <p>フロントエンド開発用のサーバーを起ち上げます。</p> <blockquote>$ grunt server</blockquote> <p>Webブラウザが自動的に開いて以下の様な画面が表示されます。</p> <p><span><img class="hatena-fotolife" title="f:id:bathtimefish:20130422120903p:plain" src="http://cdn-ak.f.st-hatena.com/images/fotolife/b/bathtimefish/20130422/20130422120903.png" alt="f:id:bathtimefish:20130422120903p:plain" /></span></p> <p>Webブラウザとwebappのサーバーをそのままにして、また別のターミナルウィンドウを開いてプロジェクト中のserverディレクトリに移動します。</p> <blockquote> $ cd /YOUR PROJECT DIR/test/server</blockquote> <p>このserverディレクトリに proxyServer.coffee という名前で以下のコードを配置します。<br />proxyServer.coffee</p> <script type="text/javascript" src="https://gist.github.com/bathtimefish/5421469.js?file=dev-api-proxy.coffee"></script> <p>proxyServer.coffeeを起動します。</p> <p>$coffee proxyServer.coffee<br />Starting Server at <a href="http://localhost:8000/">http://localhost:8000/

<p><a class="keyword" href="http://d.hatena.ne.jp/keyword/localhost">localhost</a>:8000 でプロキシサーバーが起動しました。<br />この状態で、Webブラウザで開いているwebapp画面のURLを <a href="http://localhost:8000/">http://localhost:8000/ に変更してみましょう。以下のような表示になるはずです。</p> <p><span><img class="hatena-fotolife" title="f:id:bathtimefish:20130422122005p:plain" src="http://cdn-ak.f.st-hatena.com/images/fotolife/b/bathtimefish/20130422/20130422122005.png" alt="f:id:bathtimefish:20130422122005p:plain" /></span></p> <p>最初にwebappを起動した時とちがって、リストが表示されました。これは <a href="http://localhost:8000/api/items">http://localhost:8000/api/items から取得したデータです。データの取得は app.coffeeの <a class="keyword" href="http://d.hatena.ne.jp/keyword/jQuery">jQuery</a>.getJSON で行なっています。</p> <p>proxyServer.coffeeで、/<a class="keyword" href="http://d.hatena.ne.jp/keyword/api">api</a> のリクエストのみを <a href="http://localhost:3000">http://localhost:3000 へ再リクエストしています。これによってsame originリクエストとなり<a class="keyword" href="http://d.hatena.ne.jp/keyword/ajax">ajax</a>リクエストに対して正常にJSONが返ってくることになりました。<br /><br /></p> <p>ちなみに、app.coffee で $.getJSON('<a href="http://localhost:3000/api/items/',">http://localhost:3000/api/items/', ... とやってポート3000の<a class="keyword" href="http://d.hatena.ne.jp/keyword/API">API</a>サーバーに直接リクエストを送ってみると、、、</p> <p><span><img class="hatena-fotolife" title="f:id:bathtimefish:20130422124134p:plain" src="http://cdn-ak.f.st-hatena.com/images/fotolife/b/bathtimefish/20130422/20130422124134.png" alt="f:id:bathtimefish:20130422124134p:plain" /></span></p> <p>というふうにcross originは許可されてないよと言われてデータが正常に取得できません。この場合は<a class="keyword" href="http://d.hatena.ne.jp/keyword/Chrome">Chrome</a>先生がおっしゃってるように<a class="keyword" href="http://d.hatena.ne.jp/keyword/API">API</a>サーバでAccess-Control-Allow-OriginをHTTPヘッダに追加してレスポンスしてやる必要がありますが、開発するアプリケーションのフロントエンドと<a class="keyword" href="http://d.hatena.ne.jp/keyword/API">API</a>サーバーが同一オリジンならばそもそもこの設定は不要です。</p> <p>下手にやると脆弱性につながる危険性もあるので、上記のようにプロキシをかませる方法で開発を進めたほうがより良いんじゃないかなと思います。これだと設定も何も変えなくてもフロントエンドと<a class="keyword" href="http://d.hatena.ne.jp/keyword/API">API</a>サーバーを本番環境にアップできるのでいいですね。<br /><br /></p> <p>そうそう、このセットアップ以降はYeomanでのフロントエンド開発は <a class="keyword" href="http://d.hatena.ne.jp/keyword/localhost">localhost</a>:8000 で行う。grunt で起動したポートが違うけどファイルのセーブとか監視してくれんの?と思うけど大丈夫。しっかり監視してリロードしてくれます。</p> <p>ただし一度落として $ grunt server で再起動した場合は <a class="keyword" href="http://d.hatena.ne.jp/keyword/localhost">localhost</a>:9000 で上がってくるのでもう一度手動で <a class="keyword" href="http://d.hatena.ne.jp/keyword/localhost">localhost</a>:8000 に変更してやる必要があります。お忘れなく。<br /><br /></p> <p style="border: solid 1px #ddd; border-radius: 3px; padding: 8px;"><strong>追記 2013.4.23</strong><br /><a href="http://bit.ly/13r1xj5">http://bit.ly/13r1xj5 />このプロキシ使う方法を教えていただいた <a href="https://twitter.com/kamiyam">@kamiyam</a> さんがもっと便利な方法を公開してくださいました。途中までやり方はいっしょだけど要のproxyの管理がgrunt taskになっていてよりスマートになってます。こちらのほうがオススメです!</p>
bathtimefish
<a class="keyword" href="http://d.hatena.ne.jp/keyword/AWS">AWS</a> OpsWorksでLayerをカスタマイズしたら<a class="keyword" href="http://d.hatena.ne.jp/keyword/Amazon">Amazon</a> <a class="keyword" href="http://d.hatena.ne.jp/keyword/Linux">Linux</a>でエラーが出たお話hatenablog://entry/64359888276768148452013-04-06T11:40:46+09:002013-04-06T11:40:46+09:00前回AWS OpsWorksでLayerをカスタマイズしてLAMP All in Oneなインスタンスを起ち上げてみた。そのためにいろいろやっててわかった現時点でのハマりどころを書いておく。前回の冒頭に書いたAmazon Linuxを選択肢なかったという話だ。 現時点ではAmazon Linuxでこの設定をすると、デプロイ時にエラーが発生するのを確認している。ためしにdb-master2インスタンスAmazon Linuxで追加し起動してみると下図のようにエラーが発生する。 failure logを参照してみると、どうもphp設定後のapacheの再起動でコケてるっぽい。 mod_php5を…<p><a href="http://bathtimefish.hatenablog.com/entry/2013/04/05/181503">前回</a>AWS OpsWorksでLayerをカスタマイズしてLAMP All in Oneな<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%A4%A5%F3%A5%B9%A5%BF%A5%F3%A5%B9">インスタンス</a>を起ち上げてみた。そのためにいろいろやっててわかった現時点でのハマりどころを書いておく。前回の冒頭に書いたAmazon <a class="keyword" href="http://d.hatena.ne.jp/keyword/Linux">Linux</a>を選択肢なかったという話だ。</p> <p> </p> <p>現時点ではAmazon <a class="keyword" href="http://d.hatena.ne.jp/keyword/Linux">Linux</a>でこの設定をすると、デプロイ時にエラーが発生するのを確認している。ためしにdb-master2<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%A4%A5%F3%A5%B9%A5%BF%A5%F3%A5%B9">インスタンス</a>をAmazon <a class="keyword" href="http://d.hatena.ne.jp/keyword/Linux">Linux</a>で追加し起動してみると下図のようにエラーが発生する。</p> <p><span><img class="hatena-fotolife" title="f:id:bathtimefish:20130405174643p:plain" src="http://cdn-ak.f.st-hatena.com/images/fotolife/b/bathtimefish/20130405/20130405174643.png" alt="f:id:bathtimefish:20130405174643p:plain" /></span></p> <p> </p> <p>failure logを参照してみると、どうも<a class="keyword" href="http://d.hatena.ne.jp/keyword/php">php</a>設定後の<a class="keyword" href="http://d.hatena.ne.jp/keyword/apache">apache</a>の再起動でコケてるっぽい。</p> <p><span><img class="hatena-fotolife" title="f:id:bathtimefish:20130405175000p:plain" src="http://cdn-ak.f.st-hatena.com/images/fotolife/b/bathtimefish/20130405/20130405175000.png" alt="f:id:bathtimefish:20130405175000p:plain" /></span></p> <p><br />mod_php5をデプロイしたあと、apache2 をrestartしようとしてエラーになっている。ん?Amazon <a class="keyword" href="http://d.hatena.ne.jp/keyword/Linux">Linux</a>は<a class="keyword" href="http://d.hatena.ne.jp/keyword/Redhat">Redhat</a>系だからapache2じゃなくて<a class="keyword" href="http://d.hatena.ne.jp/keyword/httpd">httpd</a>じゃね?</p> <p><br />該当するrecipeはどこかと思ってOpsworksのcookbookを眺めてみたら、どうも<a href="https://github.com/aws/opsworks-cookbooks/blob/master/apache2/recipes/mod_php5.rb">apache2::mod_php5</a>が該当するっぽかった。ソースをみると んーなるほど、これだと<a class="keyword" href="http://d.hatena.ne.jp/keyword/Redhat">Redhat</a>系の場合でもservice[apache2]で処理されるな。</p> <p><span><img class="hatena-fotolife" title="f:id:bathtimefish:20130405180541p:plain" src="http://cdn-ak.f.st-hatena.com/images/fotolife/b/bathtimefish/20130405/20130405180541.png" alt="f:id:bathtimefish:20130405180541p:plain" /><br /><br />まあこれくらいだとOpsworks/cookbooksをforkして直せばいいし。</span><span>まあまだベータ版だし、このへんはすぐ更新されそうなところに思える。ボクは<a class="keyword" href="http://d.hatena.ne.jp/keyword/debian">debian</a>派だから<a class="keyword" href="http://d.hatena.ne.jp/keyword/ubuntu">ubuntu</a>がまともだったらまあいいやw</span></p> <p><span><br />ただ、recipeもまだ更新中っぽいから現行のrecipeを組み合わせるといろいろホコリが出てきそうな感じはわかった。こういうところをどうケアしていくのか、OpsWorksの今後の動きが興味深いところであります。<br /></span></p>bathtimefish<a class="keyword" href="http://d.hatena.ne.jp/keyword/AWS">AWS</a> OpsWorks のLayerをカスタマイズして<a class="keyword" href="http://d.hatena.ne.jp/keyword/LAMP">LAMP</a> All in Oneサーバーを起動してみるhatenablog://entry/64359888276768130642013-04-05T18:15:03+09:002013-04-06T11:41:40+09:00前回次の日くらいに続き書くとか言っておきながら春の日差しでぼんやりしててかくの忘れてました。思い出したのでぼちぼち書きます。 前回書いたように現時点ではAWS Opsworksには Apache + MySQL + PHP が1インスタンスで起動できるLayerが用意されていない。ので、ちょっとLayerをいじってそういう構成のLayerを作成しインスタンスを起動するところまでやってみる。まず、Stackの作成。OpsWorksのダッシュボードから Add Stackボタンをクリックして作成する。 名前は適当にtestとする。なんでもいい。Default operating systemはUb…<p><a href="http://bathtimefish.hatenablog.com/entry/2013/03/30/132734">前回</a>次の日くらいに続き書くとか言っておきながら春の日差しでぼんやりしててかくの忘れてました。思い出したのでぼちぼち書きます。</p> <p>前回書いたように現時点ではAWS Opsworksには <a class="keyword" href="http://d.hatena.ne.jp/keyword/Apache">Apache</a> + <a class="keyword" href="http://d.hatena.ne.jp/keyword/MySQL">MySQL</a> + <a class="keyword" href="http://d.hatena.ne.jp/keyword/PHP">PHP</a> が1<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%A4%A5%F3%A5%B9%A5%BF%A5%F3%A5%B9">インスタンス</a>で起動できるLayerが用意されていない。ので、ちょっとLayerをいじってそういう構成のLayerを作成し<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%A4%A5%F3%A5%B9%A5%BF%A5%F3%A5%B9">インスタンス</a>を起動するところまでやってみる。<br /><br />まず、Stackの作成。OpsWorksのダッシュボードから Add Stackボタンをクリックして作成する。</p> <p><span><img class="hatena-fotolife" title="f:id:bathtimefish:20130405153326p:plain" src="http://cdn-ak.f.st-hatena.com/images/fotolife/b/bathtimefish/20130405/20130405153326.png" alt="f:id:bathtimefish:20130405153326p:plain" /></span></p> <p> </p> <p>名前は適当にtestとする。なんでもいい。Default operating systemはUbuntu12.4 LTSを選択する。Amazon <a class="keyword" href="http://d.hatena.ne.jp/keyword/Linux">Linux</a>にしたいところだけど現時点でうまくいかなかったので。理由は次回に書きます。</p> <p><br />さらに、Region, Default Availability Zoneはお好みで。大事なのはDefault <a class="keyword" href="http://d.hatena.ne.jp/keyword/SSH">SSH</a> Keyで自分が使っているAWSの<a class="keyword" href="http://d.hatena.ne.jp/keyword/SSH">SSH</a> Keyを選択すること。これを設定しとかないと<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%A4%A5%F3%A5%B9%A5%BF%A5%F3%A5%B9">インスタンス</a>を起動した後に<a class="keyword" href="http://d.hatena.ne.jp/keyword/ssh">ssh</a>でログインできなくなる。<br /><br />選択したら右下のAdd StackボタンをクリックしてStackを作成する。</p> <p><span><img class="hatena-fotolife" title="f:id:bathtimefish:20130405153710p:plain" src="http://cdn-ak.f.st-hatena.com/images/fotolife/b/bathtimefish/20130405/20130405153710.png" alt="f:id:bathtimefish:20130405153710p:plain" /></span></p> <p>こんな感じでtestという名前のStackができる。次に画面左側メニューのLayersをクリックする。</p> <p><span><img class="hatena-fotolife" title="f:id:bathtimefish:20130405154437p:plain" src="http://cdn-ak.f.st-hatena.com/images/fotolife/b/bathtimefish/20130405/20130405154437.png" alt="f:id:bathtimefish:20130405154437p:plain" /></span></p> <p> </p> <p>Layerの管理画面になるので、Add a layerボタンをクリックする。</p> <p><span><img class="hatena-fotolife" title="f:id:bathtimefish:20130405154743p:plain" src="http://cdn-ak.f.st-hatena.com/images/fotolife/b/bathtimefish/20130405/20130405154743.png" alt="f:id:bathtimefish:20130405154743p:plain" /></span></p> <p>Layer typeは<a class="keyword" href="http://d.hatena.ne.jp/keyword/MySQL">MySQL</a>を選択する。この<a class="keyword" href="http://d.hatena.ne.jp/keyword/MySQL">MySQL</a>レイヤーをベースに<a class="keyword" href="http://d.hatena.ne.jp/keyword/Apache">Apache</a> + <a class="keyword" href="http://d.hatena.ne.jp/keyword/PHP">PHP</a>を組み込むのが良さそうだ。なぜなら<a class="keyword" href="http://d.hatena.ne.jp/keyword/MySQL">MySQL</a>レイヤーでは画面のようにレイヤーの設定でroot passwordが設定可能だから。recipeで設定するよりはこっちのほうが便利だろう。<br /><br />Layer typeを<a class="keyword" href="http://d.hatena.ne.jp/keyword/MySQL">MySQL</a>にし、rootパスワードはまあそれっぽいものが入ってるのでそのままにして右下のAdd layerボタンをクリックする。</p> <p><span><img class="hatena-fotolife" title="f:id:bathtimefish:20130405155309p:plain" src="http://cdn-ak.f.st-hatena.com/images/fotolife/b/bathtimefish/20130405/20130405155309.png" alt="f:id:bathtimefish:20130405155309p:plain" /></span></p> <p>こんな感じで<a class="keyword" href="http://d.hatena.ne.jp/keyword/MySQL">MySQL</a>のlayerができる。これに<a class="keyword" href="http://d.hatena.ne.jp/keyword/apache">apache</a>とかの設定を組み込んでいく。どうやるかというと、<a class="keyword" href="http://d.hatena.ne.jp/keyword/PHP">PHP</a> App ServerというLayer typeのrecipe設定の一部をこの<a class="keyword" href="http://d.hatena.ne.jp/keyword/MySQL">MySQL</a> layerに追加するという方法をとる。こういうことができるのがクラウドマネージメントツールの面白いところだ。</p> <p>まずは<a class="keyword" href="http://d.hatena.ne.jp/keyword/MySQL">MySQL</a> layerの行の右側、action項目のeditボタンをクリックする。</p> <p><span><img class="hatena-fotolife" title="f:id:bathtimefish:20130405155936p:plain" src="http://cdn-ak.f.st-hatena.com/images/fotolife/b/bathtimefish/20130405/20130405155936.png" alt="f:id:bathtimefish:20130405155936p:plain" /></span></p> <p> </p> <p>layerの編集画面になる。まずはBuilt-in Chef recipesのところにあるshowボタンをクリックしてみよう。</p> <p><span><img class="hatena-fotolife" title="f:id:bathtimefish:20130405160250p:plain" src="http://cdn-ak.f.st-hatena.com/images/fotolife/b/bathtimefish/20130405/20130405160250.png" alt="f:id:bathtimefish:20130405160250p:plain" /></span></p> <p> </p> <p>このレイヤーで定義されているrecipeの一覧が表示される。それぞれSetupからShutdownまでのカテゴリに分けられていて、<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%A4%A5%F3%A5%B9%A5%BF%A5%F3%A5%B9">インスタンス</a>を起動して<a class="keyword" href="http://d.hatena.ne.jp/keyword/MySQL">MySQL</a>サーバーをデプロイするためのrecipeが定義されている。ここに<a class="keyword" href="http://d.hatena.ne.jp/keyword/PHP">PHP</a> App Serverで定義されているrecipeの一部を追加してLAMP All in oneなレイヤーを作る。<br /><br />まず、recipeを追加する前に他に必要な設定をやっておく。<br />この下段にSecurity Groupsの項目がある。ここのadditional security groupsからAWS-OpsWork-<a class="keyword" href="http://d.hatena.ne.jp/keyword/PHP">PHP</a>-App-Serverを選択し、リストボックスの右側の+ボタンをクリックする。</p> <p><span><img class="hatena-fotolife" title="f:id:bathtimefish:20130405161056p:plain" src="http://cdn-ak.f.st-hatena.com/images/fotolife/b/bathtimefish/20130405/20130405161056.png" alt="f:id:bathtimefish:20130405161056p:plain" /></span></p> <p> </p> <p>すると下図のような感じでSecurty Groupが追加される。<br />これで<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%A4%A5%F3%A5%B9%A5%BF%A5%F3%A5%B9">インスタンス</a>が起動したあと80などWebサーバーへのアクセスに必要なポートが開くようになる。</p> <p><span><img class="hatena-fotolife" title="f:id:bathtimefish:20130405161257p:plain" src="http://cdn-ak.f.st-hatena.com/images/fotolife/b/bathtimefish/20130405/20130405161257.png" alt="f:id:bathtimefish:20130405161257p:plain" /></span></p> <p>さて、次にいよいよrecipeの追加だ。まずはCustom Chef recipesの欄のconfigure cookbooksボタンをクリックする。</p> <p><span><img class="hatena-fotolife" title="f:id:bathtimefish:20130405162056p:plain" src="http://cdn-ak.f.st-hatena.com/images/fotolife/b/bathtimefish/20130405/20130405162056.png" alt="f:id:bathtimefish:20130405162056p:plain" /></span></p> <p>Stackの編集画面になるので、まずUse Custom Chef cookbooksのスイッチをYesにする。次に現れるRepository URL欄に git://github.com/aws/opsworks-cookbooks.git を入力する。これはAWS OpsWorksのcookbookの<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%EA%A5%DD%A5%B8%A5%C8%A5%EA">リポジトリ</a>だ。入力したら右下のSaveボタンをクリックしてStackの設定を保存する。</p> <p><span><img class="hatena-fotolife" title="f:id:bathtimefish:20130405162817p:plain" src="http://cdn-ak.f.st-hatena.com/images/fotolife/b/bathtimefish/20130405/20130405162817.png" alt="f:id:bathtimefish:20130405162817p:plain" /><br /><br />保存できたら、右側メニューのLayersをクリックしてLayerの管理画面にもどる。そして<a class="keyword" href="http://d.hatena.ne.jp/keyword/MySQL">MySQL</a>レイヤーのeditボタンをクリックしてレイヤーの編集画面に移動する。<br />するとCustom Chef recipesの欄が下図のようにrecipeが追加できるようになっているはずだ。これでAWS Opsworks cookbooksのrepipeがこのレイヤーに追加できるようになったわけだ。<br /></span></p> <p><span><img class="hatena-fotolife" title="f:id:bathtimefish:20130405163243p:plain" src="http://cdn-ak.f.st-hatena.com/images/fotolife/b/bathtimefish/20130405/20130405163243.png" alt="f:id:bathtimefish:20130405163243p:plain" /></span></p> <p>SetupからShutdownのそれぞれのカテゴリにrecipeを追加していく。<br />recipeはそれぞれのカテゴリのテキストボックスにrecipeを入力して+ボタンをクリックすることで登録できる。recipeはひとつずつ+で追加していく。それぞれ以下のrecipeを入力する。</p> <h4>Setup</h4> <p>mod_php5_apache2</p> <h4>Configure</h4> <p>mod_php5_apache2::<a class="keyword" href="http://d.hatena.ne.jp/keyword/php">php</a>, <a class="keyword" href="http://d.hatena.ne.jp/keyword/php">php</a>::configure</p> <h4>Deploy</h4> <p>deploy::<a class="keyword" href="http://d.hatena.ne.jp/keyword/php">php</a></p> <h4>Undeploy</h4> <p>deploy::<a class="keyword" href="http://d.hatena.ne.jp/keyword/php">php</a>-undeploy</p> <h4>Shutdown</h4> <p>apache2::stop<br /><br /></p> <p><span><img class="hatena-fotolife" title="f:id:bathtimefish:20130405164831p:plain" src="http://cdn-ak.f.st-hatena.com/images/fotolife/b/bathtimefish/20130405/20130405164831.png" alt="f:id:bathtimefish:20130405164831p:plain" /></span></p> <p>上記のように入力したらページ右下のSaveボタンをクリックしてレイヤーの設定を保存する。</p> <p>エラーなく保存できたら、Custom Chef recipesは下図のように登録されるはずである。エラーになった場合はrecipe名をタイポしている可能性があるので間違いなく登録し直す。</p> <p><span><img class="hatena-fotolife" title="f:id:bathtimefish:20130405165220p:plain" src="http://cdn-ak.f.st-hatena.com/images/fotolife/b/bathtimefish/20130405/20130405165220.png" alt="f:id:bathtimefish:20130405165220p:plain" /></span></p> <p>ここまでできたら、右側メニューのInstancesボタンをクリックして<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%A4%A5%F3%A5%B9%A5%BF%A5%F3%A5%B9">インスタンス</a>の管理画面にいく。<a class="keyword" href="http://d.hatena.ne.jp/keyword/MySQL">MySQL</a>レイヤーの<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%A4%A5%F3%A5%B9%A5%BF%A5%F3%A5%B9">インスタンス</a>はまだひとつも登録されていないので、Add an Instanceボタンをクリックして<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%A4%A5%F3%A5%B9%A5%BF%A5%F3%A5%B9">インスタンス</a>を登録しよう。</p> <p><span><img class="hatena-fotolife" title="f:id:bathtimefish:20130405165543p:plain" src="http://cdn-ak.f.st-hatena.com/images/fotolife/b/bathtimefish/20130405/20130405165543.png" alt="f:id:bathtimefish:20130405165543p:plain" /></span></p> <p><br /><a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%A4%A5%F3%A5%B9%A5%BF%A5%F3%A5%B9">インスタンス</a>の設定はとりあえずそのままでいい。右下のAdd Instanceボタンをクリックして登録する。<br /><br /><a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%A4%A5%F3%A5%B9%A5%BF%A5%F3%A5%B9">インスタンス</a>のHost NameはStackのHostname themeにしたがって適当な名前をつけてくれる。<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%A4%A5%F3%A5%B9%A5%BF%A5%F3%A5%B9">インスタンス</a>サイズはデフォルトでHigh CPU Mediumになっているのが商売上手な気もするけどw<br /><br />実際にこの<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%A4%A5%F3%A5%B9%A5%BF%A5%F3%A5%B9">インスタンス</a>を起動してそれぞれのアプリケーションがデプロイされるまでには結構な時間がかかるので、smallあたりでさらに起動時間が伸びるよりはいいか。という判断で。まあテストですぐ止めるしいいか。</p> <p><span><img class="hatena-fotolife" title="f:id:bathtimefish:20130405170254p:plain" src="http://cdn-ak.f.st-hatena.com/images/fotolife/b/bathtimefish/20130405/20130405170254.png" alt="f:id:bathtimefish:20130405170254p:plain" /></span></p> <p> </p> <p>これで起動準備がすべて完了した。下図のようになると、いよいよ起動である。</p> <p><span><img class="hatena-fotolife" title="f:id:bathtimefish:20130405170529p:plain" src="http://cdn-ak.f.st-hatena.com/images/fotolife/b/bathtimefish/20130405/20130405170529.png" alt="f:id:bathtimefish:20130405170529p:plain" /></span></p> <p><br /><br />db-master-1欄のstartボタンをクリックして<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%A4%A5%F3%A5%B9%A5%BF%A5%F3%A5%B9">インスタンス</a>を起動する。</p> <p><span><img class="hatena-fotolife" title="f:id:bathtimefish:20130405170631p:plain" src="http://cdn-ak.f.st-hatena.com/images/fotolife/b/bathtimefish/20130405/20130405170631.png" alt="f:id:bathtimefish:20130405170631p:plain" /></span></p> <p><br />起動完了までにはけっこう時間がかかるので気長に待とう。<br />ここでOpsWorksはOSをブートし、<a class="keyword" href="http://d.hatena.ne.jp/keyword/Apache">Apache</a>など必要なソフトウェアをインストール・設定し、サービスを立ち上げるといった一連の動作を自動で行う。<br />起動状況はStatus欄で逐次確認できる。</p> <p><span><img class="hatena-fotolife" title="f:id:bathtimefish:20130405171152p:plain" src="http://cdn-ak.f.st-hatena.com/images/fotolife/b/bathtimefish/20130405/20130405171152.png" alt="f:id:bathtimefish:20130405171152p:plain" /></span></p> <p> </p> <p>しばらくすると、ステータスがonlineとなる。<br />これで起動完了だ。db-master1欄のPublic IPに<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%A4%A5%F3%A5%B9%A5%BF%A5%F3%A5%B9">インスタンス</a>に割り当てられた<a class="keyword" href="http://d.hatena.ne.jp/keyword/IP%A5%A2%A5%C9%A5%EC%A5%B9">IPアドレス</a>が表示される。stopボタン右側の<a class="keyword" href="http://d.hatena.ne.jp/keyword/ssh">ssh</a>ボタンをクリックすると、<a class="keyword" href="http://d.hatena.ne.jp/keyword/ssh">ssh</a>でのアクセス方法が表示される。<a class="keyword" href="http://d.hatena.ne.jp/keyword/ssh">ssh</a>で接続して、<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%A4%A5%F3%A5%B9%A5%BF%A5%F3%A5%B9">インスタンス</a>の状態を確認してみよう。</p> <p><span><img class="hatena-fotolife" title="f:id:bathtimefish:20130405171555p:plain" src="http://cdn-ak.f.st-hatena.com/images/fotolife/b/bathtimefish/20130405/20130405171555.png" alt="f:id:bathtimefish:20130405171555p:plain" /></span></p> <p> </p> <p>とりあえず<a class="keyword" href="http://d.hatena.ne.jp/keyword/ssh">ssh</a>でログインしてps打ったりしてapache2、<a class="keyword" href="http://d.hatena.ne.jp/keyword/mysql">mysql</a>、<a class="keyword" href="http://d.hatena.ne.jp/keyword/php">php</a>などのプロセスが走っているか確認する。ボクはついでに /var/www/info.<a class="keyword" href="http://d.hatena.ne.jp/keyword/php">php</a> を作成して、おなじみphpinfo() を書いてブラウザでアクセスすると正常に表示された。pdo-<a class="keyword" href="http://d.hatena.ne.jp/keyword/mysql">mysql</a>もちゃんとインストールされている。すぐに<a class="keyword" href="http://d.hatena.ne.jp/keyword/php">php</a>アプリケーション開発ができる環境が整ったわけだ。</p> <p><span><img class="hatena-fotolife" title="f:id:bathtimefish:20130405172547p:plain" src="http://cdn-ak.f.st-hatena.com/images/fotolife/b/bathtimefish/20130405/20130405172547.png" alt="f:id:bathtimefish:20130405172547p:plain" /></span></p> <p> </p> <p>このサーバーのデプロイ設定は上記で設定したレイヤーに全て定義されているので、<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%A4%A5%F3%A5%B9%A5%BF%A5%F3%A5%B9">インスタンス</a>を増やせばいくらでも同じ設定のサーバーを起動できるのである。スケールアウトにはもちろん有効だけど、単体運用ベースでも障害復旧やテスト環境の即時起ち上げなどでメリットがありそうだ。自分がよく使うサーバー環境を作っておくといろいろと楽ができそうである。<br /><br />さて、起動のテストはこれで終わりである。終了前には必ずstopボタンで起動している<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%A4%A5%F3%A5%B9%A5%BF%A5%F3%A5%B9">インスタンス</a>を終了させておこう。無駄にお金がかかることになるので。気になる人はstop実行後<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%A4%A5%F3%A5%B9%A5%BF%A5%F3%A5%B9">インスタンス</a>がterminateされたかどうかをEC2の画面で確認しておくといいだろう。OpsWorksはまだベータ版なので念のため確認しといたほうが無難だ。</p> <p><span><img class="hatena-fotolife" title="f:id:bathtimefish:20130405181413p:plain" src="http://cdn-ak.f.st-hatena.com/images/fotolife/b/bathtimefish/20130405/20130405181413.png" alt="f:id:bathtimefish:20130405181413p:plain" /></span></p> <p><br />あと、冒頭に書いたAmazon <a class="keyword" href="http://d.hatena.ne.jp/keyword/Linux">Linux</a>を選択するとうまくいかなかった話は<a href="http://bathtimefish.hatenablog.com/entry/2013/04/06/114046">次回</a>に書きます。</p>bathtimefish<a class="keyword" href="http://d.hatena.ne.jp/keyword/AWS">AWS</a> OpsWorks をようやくさわってみた。hatenablog://entry/64359888276765802082013-03-30T13:27:34+09:002013-03-30T13:27:34+09:00AWS OpsWorks。発表されたときに「ついにきたかー」と思って近々さわってみようと思っていたんだけど全然やれてなくて、でもまあぼちぼち使ってみないとなーと思ってちょっとさわってみた。最初に感想を書いておくと、いまのところRightScaleなどに比べて実用に耐えるものじゃないなと感じた。まだベータ版だし仕方ないかな。chefでできることは全部できる感じだけどいろいろ足りない機能が多い。まあ既にRightScaleを知っているからそう思うのかもしれないけど。今後の機能追加に期待したいところです。 今はそんな感じだけど、いつか実用できるレベルになるはずなので知っとく価値はある。そんなわけで主…<p><a href="http://aws.amazon.com/jp/opsworks/">AWS OpsWorks</a>。発表されたときに「ついにきたかー」と思って近々さわってみようと思っていたんだけど全然やれてなくて、でもまあぼちぼち使ってみないとなーと思ってちょっとさわってみた。<br /><br />最初に感想を書いておくと、いまのところ<a href="https://www.rightscale.com/">RightScale</a>などに比べて実用に耐えるものじゃないなと感じた。まだベータ版だし仕方ないかな。chefでできることは全部できる感じだけどいろいろ足りない機能が多い。まあ既にRightScaleを知っているからそう思うのかもしれないけど。今後の機能追加に期待したいところです。</p> <p><br />今はそんな感じだけど、いつか実用できるレベルになるはずなので知っとく価値はある。そんなわけで主にLayer周りの使い方を知っとこうと思った。いまんとこその辺とAWSなchefのrecipeがわかっとけばまあいいかなーと。LayerはRSで言うところのServer Templateにあたる層かな。</p> <p> </p> <p>OpsworksのStackとかLayerが何なのか?はウェブ上にたくさん記事があるのでまあわかった。現時点では選択できるLayerもまだまだ少ない。けどなんか<a class="keyword" href="http://d.hatena.ne.jp/keyword/Rails">Rails</a> Serverとかnode.js Serverとかイマドキにツボなものが用意されている。なんかわかってるなーな感じ。<br /><br /></p> <p>そんなかんじでダラダラしながらLayerを眺めてみて気づいたんだけど、<a class="keyword" href="http://d.hatena.ne.jp/keyword/PHP">PHP</a> App Serverと<a class="keyword" href="http://d.hatena.ne.jp/keyword/MySQL">MySQL</a>という2つのLayerがあるんだけど、LAMPオールインワンな感じのLayerがなかった。</p> <p><br />これそのまんま使ってLAMP構成しようと思ったら<a class="keyword" href="http://d.hatena.ne.jp/keyword/PHP">PHP</a> App Serverと<a class="keyword" href="http://d.hatena.ne.jp/keyword/MySQL">MySQL</a>で<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%A4%A5%F3%A5%B9%A5%BF%A5%F3%A5%B9">インスタンス</a>1つずつ作ってそれぞれ起動しないといけないじゃん。計2つの<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%A4%A5%F3%A5%B9%A5%BF%A5%F3%A5%B9">インスタンス</a>課金されるじゃん。と。</p> <p><br />んーこれじゃあ小規模なLAMPサーバー自動デプロイしたいってできねーやん。OpsWorksというサービスからして1DB Server + n App Serverっていう構成のほうがニーズ高いでしょうがという意見はわかります。でも人情的にLAMPオールインワンくらい用意してくれても良さそうじゃね?と。</p> <p><br />そう思ったのでちょっとLayerを編集して<a class="keyword" href="http://d.hatena.ne.jp/keyword/PHP">PHP</a> <a class="keyword" href="http://d.hatena.ne.jp/keyword/MySQL">MySQL</a> AapacheというLAMPを1<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%A4%A5%F3%A5%B9%A5%BF%A5%F3%A5%B9">インスタンス</a>にまとめてやろうと思ってやったらできた。ちょっとbeta版くさいハマりかたをしたけどカンタンでした。ついでにLayer周りのいい勉強になりました。機能がシンプルで<a class="keyword" href="http://d.hatena.ne.jp/keyword/GUI">GUI</a>がわかりやすい分RSより敷居は低いかな。</p> <p><br />で、やり方は以下のとおり。<br />。。。といきたいところだけど、今からちょっと外出しないといけないので次回書きます。今日の夜か明日くらい。二日酔いでなければ。</p>bathtimefish東京で呑みましたhatenablog://entry/64359888276765281912013-03-29T00:23:16+09:002013-03-29T00:23:16+09:00今日は東京でみんなと呑みました。すげーたのしかったです。 ボクだけシラフにもどったら後悔しそうな顔をしています。<p><span><img class="hatena-fotolife" title="f:id:bathtimefish:20130328225303j:plain" src="http://cdn-ak.f.st-hatena.com/images/fotolife/b/bathtimefish/20130328/20130328225303.jpg" alt="f:id:bathtimefish:20130328225303j:plain" /></span></p> <p> </p> <p>今日は東京でみんなと呑みました。<br />すげーたのしかったです。</p> <p><br /><br />ボクだけシラフにもどったら後悔しそうな顔をしています。</p>bathtimefish第6回<a class="keyword" href="http://d.hatena.ne.jp/keyword/HTML5">HTML5</a>など勉強会 大阪 で Yeoman RIAビルドツール超入門 を発表してきました。hatenablog://entry/64359888276764658502013-03-27T14:56:44+09:002013-03-27T14:56:44+09:00先日久々に開催した第6回 HTML5など勉強会で「Yeoman RIAビルドツール超入門」という発表をさせていただきました。 Yeoman RIAビルドツール超入門 from Masakazu Muraoka けっこういま仕事でがっつり使っているツールなので、もうちょっと踏み込んだ内容をやろうかなと当初思っていたのだけど、スライドにもあるように直前に1.0beta出てるのしって泡食ったというのと、関西ではまだあんまり知られてなさそうな感じがしたので、まずは基本的なことを紹介してみんなに興味持ってもらったらいいなーという気持ちで超入門にしてみました。 そしたらyeoman使ってる人もいて、後の雑…<p>先日久々に開催した<a href="http://atnd.org/events/37124">第6回 HTML5など勉強会</a>で「Yeoman RIAビルドツール超入門」という発表をさせていただきました。<br /><br /></p> <p><iframe style="border: 1px solid #CCC; border-width: 1px 1px 0; margin-bottom: 5px;" src="http://www.slideshare.net/slideshow/embed_code/17662628" frameborder="0" marginwidth="0" marginheight="0" scrolling="no" width="427" height="356"></iframe></p> <div style="margin-bottom: 5px;"><strong> <a title="Yeoman RIAビルドツール超入門" href="http://www.slideshare.net/bathtimefish/yeoman-ria" target="_blank">Yeoman RIAビルドツール超入門</a> </strong> from <strong><a href="http://www.slideshare.net/bathtimefish" target="_blank">Masakazu Muraoka</a></strong></div> <p><br />けっこういま仕事でがっつり使っているツールなので、もうちょっと踏み込んだ内容をやろうかなと当初思っていたのだけど、スライドにもあるように直前に1.0beta出てるのしって泡食ったというのと、関西ではまだあんまり知られてなさそうな感じがしたので、まずは基本的なことを紹介してみんなに興味持ってもらったらいいなーという気持ちで超入門にしてみました。</p> <p>そしたらyeoman使ってる人もいて、後の雑談タイムで知らない使い方も教えてくれたりしてすごく勉強になった。後片付けとかでバタバタしてて頭回ってなかったけど後でもっとちゃんと話しとけばよかった。でもまあまたどこかでお会いできるかもしれないし、そんときはちゃんとお話したいもんだ。Gruntもすごく詳しそうだったし。</p> <p>そうそうGruntも0.4になって感じ変わったし。grunt-cliとかなりやがったし。どっかでまた掘り下げねばなるまい。<br /><br /></p> <p>スライドはRIAビルドツールという題名にしているので、Webアプリケーション開発者のためのツールというイメージになるかもしれないけど、<a class="keyword" href="http://d.hatena.ne.jp/keyword/Web%A5%C7%A5%B6%A5%A4%A5%CA%A1%BC">Webデザイナー</a>にも有用なツールだと思いますyeoman。<br /><br /></p> <p>レスポンシブなWebサイトのスケルトン(ひな形)を一瞬で作ってくれるし、<a class="keyword" href="http://d.hatena.ne.jp/keyword/CSS">CSS</a>の圧縮とかも自動でやってくれるだけでもいい感じだと思うんです。別に<a class="keyword" href="http://d.hatena.ne.jp/keyword/JavaScript">JavaScript</a>やSassを使わくたって、それだけでも十分に楽できると思う。yeomanを構成するツールたちの独立性がけっこう高いので、自分が使いたいところだけ使うということもやりやすくなってるし。自分の制作フローの一部に組み込みやすいと思います。<br /><br /></p> <p>これもスライドに書いたけど、もっと知りたいという声があったらyeoman勉強会みたいのを企画してもいいなと思ってるくらいです。ハンズオンのほうがいいかな?こういう制作現場で使える的なハンズオンはやる気が出るのでやりたいですねー。</p>bathtimefish試行錯誤しながら<a class="keyword" href="http://d.hatena.ne.jp/keyword/CSS">CSS</a>を書いていたらIE10で表示がおもしろいことになったhatenablog://entry/64359888276759998142013-03-16T22:52:46+09:002013-03-16T23:03:31+09:00仕事でサイトをつくっていて、こんなふうな仕切り線みたいの(何て言うんだろう?)をCSSだけで書いてやろうといろいろ試行錯誤していた。 そしたら途中でIE10だけ表示が面白いことになった。どんなふうになったかというと、まずこんな感じのHTMLを書いて こんなCSSを書いてみた。 制作でメインなfirefoxでは良い感じに表示されるんだけどWebkitではタイトルの文字と三角の部分が微妙にずれてしまう。そっかーインライン要素だから高さの判定が微妙になるのかなと、ブロック要素にしたほうがいいかなとか思った。 ふとIE10ではどんな表示になるかな?とおもって見てみた。するとなんだか面白いことにw以下、…<p>仕事でサイトをつくっていて、こんなふうな仕切り線みたいの(何て言うんだろう?)を<a class="keyword" href="http://d.hatena.ne.jp/keyword/CSS">CSS</a>だけで書いてやろうといろいろ試行錯誤していた。<br /><br /></p> <p><span><img class="hatena-fotolife" title="f:id:bathtimefish:20130316222659p:plain" src="http://cdn-ak.f.st-hatena.com/images/fotolife/b/bathtimefish/20130316/20130316222659.png" alt="f:id:bathtimefish:20130316222659p:plain" /><br /><br />そしたら途中でIE10だけ表示が面白いことになった。<br />どんなふうになったかというと、<br /><br />まずこんな感じのHTMLを書いて<br /></span></p> <script type="text/javascript" src="https://gist.github.com/bathtimefish/5176351.js?file=part-of-index.html"></script> <p>こんな<a class="keyword" href="http://d.hatena.ne.jp/keyword/CSS">CSS</a>を書いてみた。</p> <script type="text/javascript" src="https://gist.github.com/bathtimefish/5176351.js?file=part-of-index.css"></script> <p>制作でメインな<a class="keyword" href="http://d.hatena.ne.jp/keyword/firefox">firefox</a>では良い感じに表示されるんだけど<a class="keyword" href="http://d.hatena.ne.jp/keyword/Webkit">Webkit</a>ではタイトルの文字と三角の部分が微妙にずれてしまう。そっかーインライン要素だから高さの判定が微妙になるのかなと、ブロック要素にしたほうがいいかなとか思った。<br /><br /></p> <p>ふとIE10ではどんな表示になるかな?とおもって見てみた。するとなんだか面白いことにw以下、<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%B9%A5%AF%A5%EA%A1%BC%A5%F3%A5%B7%A5%E7%A5%C3%A5%C8">スクリーンショット</a>を撮って解説してみよう。<br />確認したバージョンはIE 10.0.9200.16484 for Windows8。<a class="keyword" href="http://d.hatena.ne.jp/keyword/Windows7">Windows7</a>版では確認してない。<br /><br /></p> <p>まず普通に表示した。とりあえずボロボロに崩れた。</p> <p><span><img class="hatena-fotolife" title="f:id:bathtimefish:20130316223720p:plain" src="http://cdn-ak.f.st-hatena.com/images/fotolife/b/bathtimefish/20130316/20130316223720.png" alt="f:id:bathtimefish:20130316223720p:plain" /></span></p> <p><br />次に、下にスクロールして仕切り線部分を上に逃してみる。<br /><br /></p> <p><span><img class="hatena-fotolife" title="f:id:bathtimefish:20130316223919p:plain" src="http://cdn-ak.f.st-hatena.com/images/fotolife/b/bathtimefish/20130316/20130316223919.png" alt="f:id:bathtimefish:20130316223919p:plain" /></span><br /><br />ほんでまた上にスクロールを戻してみると、、、<br /><br /></p> <p><span><img class="hatena-fotolife" title="f:id:bathtimefish:20130316223955p:plain" src="http://cdn-ak.f.st-hatena.com/images/fotolife/b/bathtimefish/20130316/20130316223955.png" alt="f:id:bathtimefish:20130316223955p:plain" /></span></p> <p> </p> <p>あれ?なんか三角の部分の大きさが変わってる。しかもバラバラの大きさにw<br />ちなみにスクロールを繰り返して隠したり表示したりするとその度に三角の部分の大きさが変わっていく。なかなか面白い現象だ。<a href="http://www.bathtimefish.com/html5/ie10bug/index.html">サンプルはこちら</a>。<br /><br />この現象は<a class="keyword" href="http://d.hatena.ne.jp/keyword/Firefox">Firefox</a>や<a class="keyword" href="http://d.hatena.ne.jp/keyword/Webkit">Webkit</a>系では起きない。<br /><br />なんなんだろうか?バグといっていいものなのかどうか判断がつかない。<br />たぶん画面の更新ごとにしている計算に関係があるんだろうけど。<br />まあこの書き方だといろんなブラウザで崩れるからどっちみち使えないんだけどIE10だけダイナミックだったので気になった次第。</p> <p> </p> <p>ちなみにもう少しねばったあげく、だいたい安定したものができた。やっぱタイトルと三角の部分をブロック要素にしてheightを指定するとちゃんとなった。</p> <script type="text/javascript" src="https://gist.github.com/bathtimefish/5176351.js?file=part-of-index2.html"></script> <script type="text/javascript" src="https://gist.github.com/bathtimefish/5176351.js?file=part-of-index2.css"></script> <p>まあまともに表示する。もうちょっとスッキリ書けるような気がするけど、まあ今はこれでいいや。<a href="http://www.bathtimefish.com/html5/ie10bug/index2.html">サンプルはこちら</a>。</p>bathtimefishlongdesc属性が復活しそうなので思うところを書いてみた。その2 <a class="keyword" href="http://d.hatena.ne.jp/keyword/HTML5">HTML5</a>との関係な話hatenablog://entry/64359888276759037972013-03-14T14:11:32+09:002013-03-14T14:12:37+09:00昨日のつづき。今日はHTML(5)とかその辺にlongdescがどう影響をあたえるかとか、実際の制作でどうなるんだろねーみたいなことをまたダラダラと考えてみようと思います。 HTMLの現状を含めて考えてみる HTML5というか、広い意味でHTML。longdescによる画像の詳細説明というのがHTMLひいては将来のWeb関連技術にどう影響するか、ちょっと考えてみたい。 基本的にメジャーなブラウザでlongdescがサポートされたらWeb制作において画像のアクセシビリティを高めるための選択肢がひとつ増えることになる。これはHTML仕様がよりアクセシブルになったと言い換えてもいいことだと思う。RI…<p><a href="http://bathtimefish.hatenablog.com/entry/2013/03/13/223046">昨日</a>のつづき。今日はHTML(5)とかその辺にlongdescがどう影響をあたえるかとか、実際の制作でどうなるんだろねーみたいなことをまたダラダラと考えてみようと思います。</p> <h3>HTMLの現状を含めて考えてみる</h3> <p><a class="keyword" href="http://d.hatena.ne.jp/keyword/HTML5">HTML5</a>というか、広い意味でHTML。longdescによる画像の詳細説明というのがHTMLひいては将来のWeb関連技術にどう影響するか、ちょっと考えてみたい。</p> <p>基本的にメジャーなブラウザでlongdescがサポートされたらWeb制作において画像の<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%A2%A5%AF%A5%BB%A5%B7%A5%D3%A5%EA%A5%C6%A5%A3">アクセシビリティ</a>を高めるための選択肢がひとつ増えることになる。これはHTML仕様がよりアクセシブルになったと言い換えてもいいことだと思う。<br /><br />RIAやWebサイトを制作する上でも面白いことができるかもしれない。ここで深くは考えないけど、例えばlongdesc属性値のURLに非同期にアクセスして説明文を取得しておき、ユーザーの操作に応じて<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%C4%A1%BC%A5%EB%A5%C1%A5%C3%A5%D7">ツールチップ</a>的に表示するとか、UXを向上させる目的でも使えそうだ。</p> <p>今<a href="http://www.google.com/glass/start/">どっかの会社がつくってるメガネ</a>でもしWebアプリが動いたら「OK glass, show description of this photo.」などと言うとメガネはlongdesc属性値のURLを辿って説明文を表示するとか。マシンリーダブルである。写真の表示時には説明文までダウンロードしなくていいし。低リソース環境のアプリにやさしい作りができるかもしれない。</p> <p>まあそんなんマジメに検討できるようになるにはもうちょっと未来だろう。もうちょっと直近の影響についてはなんかないだろうか?うーん、たぶんalt属性値の考え方が少し変わるんじゃないかなと思う。たぶん。</p> <p><a class="keyword" href="http://d.hatena.ne.jp/keyword/HTML5">HTML5</a>におけるalt属性値の書き方については、<a href="http://dev.w3.org/html5/alt-techniques/">HTML5: Techniques for providing useful text alternatives</a>にまとめられ中である。現在はEditor's Draft。まだまだ長くなりそうだなーと思いつつ個人的に注視しているTRである。</p> <p>例えばこの中の、<a href="http://dev.w3.org/html5/alt-techniques/#sec2">3.2 Graphical representations: charts, diagrams, graphs, maps, illustrations</a>のExample2.1をみてみよう。現在では下記のようになっている。</p> <p><span><img class="hatena-fotolife" title="f:id:bathtimefish:20130313220436p:plain" src="http://cdn-ak.f.st-hatena.com/images/fotolife/b/bathtimefish/20130313/20130313220436.png" alt="f:id:bathtimefish:20130313220436p:plain" /></span></p> <p>ランプが動かなくなったときの対処法がフローチャート画像として提供されている。そのalt属性に「もしランプが動かなくなったら、まずプラグが入ってるか確認して、入っててもダメなら...なにがし」というふうにフローチャートの内容を説明した文章が設定されている。</p> <p><a class="keyword" href="http://d.hatena.ne.jp/keyword/HTML5">HTML5</a>におけるaltの使い方としては正しいんだけど、ちょっと文章長いよね?めんどいよね^^;と思える。こういうのはalt="ランプが動かなくなった場合の対処方法" としてlongdescに対処法を文章で説明したテキストへのリンクを指定するほうが無理がないように見える。</p> <p>longdescがあるからaltではこういうふうに書かなくてよくなるというわけではなく、「詳細説明の代替テキストが長くなる場合はlongdesc属性を推奨するよ。altで書いてもいいけどね。」程度にこのExample2.1のパターンは補足されるといいんじゃないかと思います。<br /><br />まあ、こんな単純なフローチャートだったらまだaltでいいけどね。並のアプリケーションのフローチャートを掲載したとして、それを文章にしたら本一冊くらいになると思う。それに絶対代替テキストが必要だ!というケースは(そんなケースないだろうけど)altが嫌がらせになるわなw<br /><br /></p> <h3>Web制作の現場的視点もからめて考えてみる</h3> <p><a class="keyword" href="http://d.hatena.ne.jp/keyword/Dreamweaver">Dreamweaver</a>のalt入れるテキストボックスそんなにデカくねーだろと。そのフローチャート画像がアップデートされたとして、またalt入れなおし??。。。なんかそんなサイトメンテしたくなくなる。そういうときにlongdescを使ったら少しマシになるかもしれない。</p> <p>まあ上記は半分ネタなんだけど、実際の制作現場で使えるなというケースもあると思う。例えば、大規模なWebサイト全体をアクセシブルにしようという場合。</p> <p>多くのページに多数のグラフや図案などが掲載されているとして、それらの詳細説明の代替テキストを提供する場合に、なるべく既存の<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%BD%A1%BC%A5%B9%A5%B3%A1%BC%A5%C9">ソースコード</a>をいじりたくない。つーか今の表示をまったく変えずにしてほしい。つーか融通の利かない<a class="keyword" href="http://d.hatena.ne.jp/keyword/CMS">CMS</a>だからややこしいす。というあるある話はけっこうよくあるあるだろう。<br /><br /></p> <p>その時に代替テキストを別ページとして用意し、元ページのimg要素にlongdesc属性をつけて代替テキストページにリンクする。こうすることで元ページの視覚的な表示に難の変更も加えることなく画像の代替テキストに関する達成基準を満たすことができる。</p> <p>別ページで用意する代替テキストの作成作業は、元ページの更新作業と非同期にできるので、人海戦術で作業効率が上がる可能性がある。今までの経験も含めて考えると、大規模公共系サイトにはハマるパターンだと思う。</p> <p>官公庁とか政令市級の公共サイトとか、longdescが普及すると受ける恩恵はけっこうあるんじゃなかろうか。とも思えてくる。<br /><br /></p> <p>もちろん公共だけじゃなくて一般的なWebサイトでも代替テキストを適切に提供することはいいことだ。<a class="keyword" href="http://d.hatena.ne.jp/keyword/HTML5">HTML5</a>は旧バージョンに比べて各要素の意味がしっかりと規定されてよりセマンティックな<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%DE%A1%BC%A5%AF%A5%A2%A5%C3%A5%D7">マークアップ</a>が実現できるようになった。</p> <p>セマンティックな<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%DE%A1%BC%A5%AF%A5%A2%A5%C3%A5%D7">マークアップ</a>はマシンリーダブルなサイトを実現する。マシンリーダブルとはウェブブラウザ、検索エンジンなどのソフトウェア機械がページの情報をより正確に理解できる。ということだ。<br /><br /></p> <p>機械がウェブ上の情報を理解する。そこから今よりももっと便利ですばらしいサービスが生まれる可能性がある。セマンティックに記述されたページは、将来生まれるであろう付加価値の高いサービスの中で、より上質なデータとしてその価値を発揮することができるのである。</p> <p><a class="keyword" href="http://d.hatena.ne.jp/keyword/HTML5">HTML5</a>でのマシンリーダブルな<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%DE%A1%BC%A5%AF%A5%A2%A5%C3%A5%D7">マークアップ</a>は現在でもスクリーンリーダーをはじめとする支援技術が追従していっている。つまり、よりよい<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%DE%A1%BC%A5%AF%A5%A2%A5%C3%A5%D7">マークアップ</a>が実質的に目の不自由な障害者などへの情報提供に実質的に貢献するようになってきていると言っていい。</p> <p>このlongdescやその他<a class="keyword" href="http://d.hatena.ne.jp/keyword/HTML5">HTML5</a>のセマンティックな機能は、ウェブ<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%A2%A5%AF%A5%BB%A5%B7%A5%D3%A5%EA%A5%C6%A5%A3">アクセシビリティ</a>を向上させるとともにマシンリーダブルを実現するというわけだ。その点でもこれからのウェブ制作者が理解して制作で実践していく意義は大きいと思える。<br /><br /></p> <p><em>障害のある方々に微笑んでもらえるかどうかは<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%DE%A1%BC%A5%AF%A5%A2%A5%C3%A5%D7%A5%A8%A5%F3%A5%B8%A5%CB%A5%A2">マークアップエンジニア</a>の腕次第だ!</em><br /><br /></p> <p>と、ちょっと大げさに言っておこうかw<br /><br /></p> <h3>ウェブ制作者としての雑感</h3> <p>長文書いて疲れたしけどもう少しw</p> <p><a href="http://www.w3.org/TR/html-longdesc/">HTML Image Description Extension</a>において、longdesc属性は今のところ次のように紹介されている。</p> <p><blockqote>a longdesc attribute for the img element. This enabled a machine-discoverable description of an image to be linked to the image.</blockqote></p> <p><blockqote>longdesc属性は、機械が判読可能な説明文を画像にリンクさせることができる。<br />マシンリーダブルであり、アクセシブルな機能だと言えると思う。</blockqote></p> <p><blockqote>考えてみれば技術の発達によりマシンリーダブル=アクセシブルというケースは増えてきている気がする。それは技術の発達方向としてよい方向に向いていると思える。<br /><br /></blockqote></p> <p><blockqote>あらゆる立場の人々がひとつのデータに同じようにアクセスする。という「OneWeb」の理想。これを実現するために<a class="keyword" href="http://d.hatena.ne.jp/keyword/W3C">W3C</a>が牽引するウェブ技術は日々進化していってるのだけど、ウェブ制作者にとってはそれは紙とハサミにすぎない。</blockqote></p> <p><blockqote>制作者としてはこの紙とハサミをどう使って、どんないいものが作れるか?ということが大事な気がする。そういう意味でこれらのセマンティックな新機能を率先して試し、実装方法をよく考えて、ひいては仕様の問題点を指摘したり、新しくよりよい提案ができたりするのが制作者ならではの貢献ではないかと考えるのである。<br /><br /></blockqote></p> <p><blockqote>まあボクはまだまだ勉強不足でそこまでいってませんけどね。まあぼちぼち努力しますw</blockqote></p>bathtimefishlongdesc属性が復活しそうなので思うところを書いてみた。その1 ウェブ<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%A2%A5%AF%A5%BB%A5%B7%A5%D3%A5%EA%A5%C6%A5%A3">アクセシビリティ</a>な話hatenablog://entry/64359888276758819062013-03-13T22:30:46+09:002013-03-13T23:55:13+09:00白石さんのおなじみのスレでも紹介されているとおり、HTML Image Description ExtensionがW3CのWorking Draftとして公開された。現時点の仕様をみるかぎりではlongdesc属性を復活させるという内容のようだ。これはちょっとWebアクセシビリティ的に興味があるので思うところを書いておくことにする。 longdesc属性とは? 使ったことない人も多いんじゃないかと思う。つーか知らない人もけっこういるかも、ボクも実際仕事では一度もマークアップしたことがない。longdesc属性はHTML4.01でサポートされていて、画像の詳細な説明を記載した文章へのリンクを示…<p><a href="https://groups.google.com/forum/?hl=ja#!topic/html5-developers-jp/zbhArX--mMU">白石さんのおなじみのスレ</a>でも紹介されているとおり、<a href="http://www.w3.org/TR/html-longdesc/">HTML Image Description Extension</a>が<a class="keyword" href="http://d.hatena.ne.jp/keyword/W3C">W3C</a>のWorking Draftとして公開された。現時点の仕様をみるかぎりではlongdesc属性を復活させるという内容のようだ。<br /><br />これはちょっと<a class="keyword" href="http://d.hatena.ne.jp/keyword/Web%A5%A2%A5%AF%A5%BB%A5%B7%A5%D3%A5%EA%A5%C6%A5%A3">Webアクセシビリティ</a>的に興味があるので思うところを書いておくことにする。</p> <h3>longdesc属性とは?</h3> <p>使ったことない人も多いんじゃないかと思う。つーか知らない人もけっこういるかも、ボクも実際仕事では一度も<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%DE%A1%BC%A5%AF%A5%A2%A5%C3%A5%D7">マークアップ</a>したことがない。longdesc属性はHTML4.01でサポートされていて、画像の詳細な説明を記載した文章へのリンクを示すものである。値にはURLを設定する。<br /><br />画像を説明するための代替テキストとしてはalt属性を使うのが一般的だけど、説明がすごく長くなるような場合、別の文章を用意して、そのリンクをlongdesc属性に設定するというふうに使う。<br /><br />longdesc属性を適切に解釈するユーザーエージェントでは、画像の説明文が必要なときに、何か操作するとlongdesc属性のリンク先から文章を取得して参照できる。といったことが期待されるわけだ。<br /><br />しかしこのlongdesc属性、ほとんどのブラウザが実装していなかった。また、実装しているブラウザはあっても、それを有効活用しているケースがほとんど見られなかったようだ。たぶんそういう理由で<a class="keyword" href="http://d.hatena.ne.jp/keyword/HTML5">HTML5</a>では当初採用されなかったんだろう。<br /><br />しかし<a class="keyword" href="http://d.hatena.ne.jp/keyword/HTML5">HTML5</a>の大方の仕様が安定して、<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%A2%A5%AF%A5%BB%A5%B7%A5%D3%A5%EA%A5%C6%A5%A3">アクセシビリティ</a>について考える余裕ができて、改めて考えたらあってもいいんじゃね?となって上記WDが公開された。ざっくり運びなんじゃないかなと想像しています。<br /><br /></p> <h3><a class="keyword" href="http://d.hatena.ne.jp/keyword/Firefox">Firefox</a>におけるlongdesc属性の実装</h3> <p>上記白石さんのスレでは<a href="https://twitter.com/myakura">矢倉</a>さんが<a class="keyword" href="http://d.hatena.ne.jp/keyword/Opera">Opera</a>(Presto)も実装してるよってレスをつけていらっしゃる。さすがだよこの人HTMLで知らないことってあるんだろうかまじで。恐れ多くも過去2回、おおやけで対談させていただいたことがあるけどほんとすげえ人です。<br /><br />ボクはメインブラウザの<a class="keyword" href="http://d.hatena.ne.jp/keyword/Firefox">Firefox</a>でlongdesc属性がちゃんと解釈されているかをみてみることにする。チェックするサイトは<a href="http://waic.jp/docs/jis2010-as-tests/201205/A/HTMLandXHTML/H45.html">H45: longdesc 属性を用いるのテストファイル</a>にする。確認した<a class="keyword" href="http://d.hatena.ne.jp/keyword/Firefox">Firefox</a>はバージョン19.0.2。<br /><br />これはWCAG2.0の実装法のひとつ<a href="http://waic.jp/docs/WCAG-TECHS/H45.html">H45: longdesc属性を用いる</a> に対応するテストケースだ。サイトにはグラフの画像がひとつあって、longdesc属性が以下のように設定されている。<br /><br /></p> <p><span><img class="hatena-fotolife" title="f:id:bathtimefish:20130313145219p:plain" src="http://cdn-ak.f.st-hatena.com/images/fotolife/b/bathtimefish/20130313/20130313145219.png" alt="f:id:bathtimefish:20130313145219p:plain" /><br /><br />これは<a href="http://waic.jp/docs/jis2010-as-tests/201205/A/HTMLandXHTML/H45-ref1.html">H45-ref1.html</a>に詳細な説明があるようだ。アクセスしてみるとたしかにグラフの内容が文章で説明されている。これをalt属性に設定するとなると、、、うーんたしかにちょっと長くてイヤな感じかな。<br /><br />さて、このlongdescを<a class="keyword" href="http://d.hatena.ne.jp/keyword/Firefox">Firefox</a>は解釈しているか?画像を右クリックして、画像の情報を表示 を選択してみる。<br /><br /></span></p> <p><span><img class="hatena-fotolife" title="f:id:bathtimefish:20130313145624p:plain" src="http://cdn-ak.f.st-hatena.com/images/fotolife/b/bathtimefish/20130313/20130313145624.png" alt="f:id:bathtimefish:20130313145624p:plain" /></span><br /><br />すると以下のように画像に関する情報を表示するダイアログが現れる。</p> <p><span><img class="hatena-fotolife" title="f:id:bathtimefish:20130313145838p:plain" src="http://cdn-ak.f.st-hatena.com/images/fotolife/b/bathtimefish/20130313/20130313145838.png" alt="f:id:bathtimefish:20130313145838p:plain" /></span></p> <p><span><br />赤線の箇所、「詳細説明」という行にlongdesc属性が指定されている。<a class="keyword" href="http://d.hatena.ne.jp/keyword/Firefox">Firefox</a>はlongdesc属性を認識しているようだ。<br /><br />次に、画像を非表示にしてページをリロードしてみる。結果は下記のようになった。<br /></span></p> <p><span><img class="hatena-fotolife" title="f:id:bathtimefish:20130313150223p:plain" src="http://cdn-ak.f.st-hatena.com/images/fotolife/b/bathtimefish/20130313/20130313150223.png" alt="f:id:bathtimefish:20130313150223p:plain" /></span><br /><br />グラフの画像が非表示になり、alt属性に設定されている「会員数の遷移グラフ」というテキストが現れた。特にlongdesc属性の設定値は表示されないようだ。個人的にはここに詳細説明へのリンクボタンでも表示されたら親切なんじゃないかなと思うけど、そのへんはどう考えられているのかな?<br /><br />ちなみに、<a class="keyword" href="http://d.hatena.ne.jp/keyword/Firefox">Firefox</a>のアドオンに<a href="https://addons.mozilla.org/ja/firefox/addon/longdesc/">Longdesc</a>というのがある。名前そのまんまなんだけど、これを入れると右クリックしたときのコンテキストメニューに、longdesc属性値のURLにとぶボタンを表示してくれる。</p> <p><span><img class="hatena-fotolife" title="f:id:bathtimefish:20130313175310p:plain" src="http://cdn-ak.f.st-hatena.com/images/fotolife/b/bathtimefish/20130313/20130313175310.png" alt="f:id:bathtimefish:20130313175310p:plain" /></span></p> <p><br />こんな感じで画像を右クリックすると「View Image Longdesc: ....」というメニューが表示されて、クリックするとリンクに飛ぶことができる。<br /><br /><a class="keyword" href="http://d.hatena.ne.jp/keyword/Firefox">Firefox</a>の標準機能じゃないけど、これを使ったらlongdescの意義も多少みえる気がしますね。<a class="keyword" href="http://d.hatena.ne.jp/keyword/Chrome">Chrome</a>にも<a href="https://chrome.google.com/webstore/detail/longdesc/haohljalgapbacpkfefnmhiadanhejmb?hl=en-GB">同じようなエクステンション</a>がありました。<br /><br /></p> <h3>WAガイドラインからlongdesc属性をどうみるか?</h3> <p>Web Accessibility(長いのでWA)的にlongdesc属性はどう見たらいいか?<br />以下、個人的な見解です。と前置きした上で書いておく。<br /><br />WCAG2.0を眺めると、以前<a href="http://bathtimefish.hatenablog.com/entry/2013/03/01/011900">Webフォントのことで書いた</a>とおり、ざっくり「テキストデータは最強アクセシブルじゃね?」的な考え方を読み取ることができる。img属性で画像を掲載する際は、alt属性値で説明するとか、画像のすぐそばに画像の説明文を記載するなどしてスクリーンリーダー等が読み上げられるようにするのが良いとされる。<br /><br />WCAG2.0の実装方法として、前者は<a href="http://waic.jp/docs/WCAG-TECHS/H37.html">H37: img 要素の alt 属性を用いる</a>、後者については、以下が該当するとかんがえられる。<br /><br /><a href="http://waic.jp/docs/WCAG-TECHS/G73.html">G73: 非テキストコンテンツのすぐ隣に別の場所へのリンクを置き、その別の場所で長い説明を提供する</a><br /><a href="http://waic.jp/docs/WCAG-TECHS/G74.html">G74: 短い説明の中で長い説明のある場所を示して、非テキストコンテンツの近くにあるテキストで長い説明を提供する</a><br /><a href="http://waic.jp/docs/WCAG-TECHS/G92.html">G92: 非テキストコンテンツに対して、それと同じ目的を果たし、同じ情報を提供する長い説明を提供する</a><br /><a href="http://waic.jp/docs/WCAG-TECHS/G94.html">G94: 非テキストコンテンツに対して、それと同じ目的を果たし、同じ情報を提供する、簡潔な代替テキストを提供する</a><br /><br />上記のように複数の方法がある。実装経験から言うと、どれでも選べばいいという感じじゃなくて、コンテンツに応じて一番適したものを選択するのがいいと思ってる。<br /><br />例えば、風景写真を掲載して、そのすぐ横に風景描写を詳細に説明した記事があるコンテンツの場合は、G73適合とみなす。画像のみで近くに説明を書きたくないレイアウトの場合はH37に応じてalt属性値を書く。といった感覚だ。<br /><br />上記の他にWCAGにはlongdesc属性をつかった実装方法がある。<br /><br /><a href="http://waic.jp/docs/WCAG-TECHS/H45.html">H45: longdesc属性を用いる</a><br /><br />がそれだ。<br />しかし、日本のWAガイドライン<a href="http://waic.jp/docs/jis2010/understanding.html">JIS X8341-3:2010</a>を策定しているウェブ<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%A2%A5%AF%A5%BB%A5%B7%A5%D3%A5%EA%A5%C6%A5%A3">アクセシビリティ</a>基盤委員会はこの<a href="http://waic.jp/docs/jis2010-as-understanding/201205/H045.html">H45について達成不可能という見解</a>を示している。現時点でブラウザやスクリーンリーダーがlongdescをほとんどサポートしていないというのが理由だ。</p> <p>このページには現在、2012年5月のテスト結果が記載されている。その結果をみるとスクリーンリーダーの<a class="keyword" href="http://d.hatena.ne.jp/keyword/JAWS">JAWS</a> 9.0 for Windows、ホームページリーダー3.04がlongdescの存在を読み上げるということらしい。<a class="keyword" href="http://d.hatena.ne.jp/keyword/UA">UA</a>のlongdesc対応が普及してないからH45は事実上達成不能という見解だ。</p> <p><br />ごもっとも。いくら仕様があっても実装がなければユーザーが使えない。使えないものが達成基準には成り得ない。上記の<a class="keyword" href="http://d.hatena.ne.jp/keyword/Firefox">Firefox</a>で検証したように詳細説明にアクセスできないんだったらlongdesc使ったからアクセシブルになったって言えないよね?ということだ。<br /><br />こういうわけで、Web制作者の観点ではlongdesc属性を使っても意味がない、だから使わなくていいという感覚だったんだけど、このWDが公開されて<a class="keyword" href="http://d.hatena.ne.jp/keyword/HTML5">HTML5</a>でもlongdescがサポートされるかもとなると、ちょっと考え方を改めないといけないかなと思うわけです。<br /><br />勧告される頃には全てのブラウザ(<a class="keyword" href="http://d.hatena.ne.jp/keyword/UA">UA</a>)が実装するだろうから。<br />あと、longdescが普及するとWAICのH45に対する見解も変更されると考えられるから。<br /><br /></p> <p><br />、、、とまあlongdesc属性という現役のころも<a class="keyword" href="http://d.hatena.ne.jp/keyword/%C0%E4%CC%C7%B4%ED%D7%FC%BC%EF">絶滅危惧種</a>で、滅んだと思ったら虫の息を吹き返した超マイナー属性でも、書こうと思ったら意外と長くなるもんでした。我ながらびっくり。</p> <p>まだ書きたいことはあるんだけど、ダラダラしすぎてもアレなんで残りはまた明日書こうと思います。</p>bathtimefish



Source: http://bathtimefish.hatenablog.com/feed