SPICY SPACE BLOG

愛犬家WEBエンジニアの日常。

Macユーザーがハンディカムを買ったらまずするべきこと

娘が産まれたので、ハンディカムを購入しました。 

 

デジ一も持ってるし、ギリギリまで本当に要るのかどうか迷って買い渋っていたのですが、
どうしても退院して家に娘がくるところをキレイな映像で残したくて
退院当日の朝、電気屋に走って買ってしまいました。
電気屋から直接産婦人科に向かったため、もちろん説明書を読む暇はありませんでした。
撮影自体は、録画ボタンを押せば撮れるので簡単だったのですが、
数日後、改めて説明書を読んで驚愕するのは、この時知る由もないのでした。。。
 

動画形式がMP4じゃない!

デフォルトではmacに取り込める形式になっていないんです。
もちろん動画はiPhotoに取り込んで管理するつもりだったのですが、無理でした。
 
AVHCDという、SonyPanasonicが共同開発した形式で、
ハンディカムだけで動画のトリミングなど簡単な編集ができるようになっているものです。
ブルーレイディスクに焼くのに適した形式とのことですが、うちにはそもそもブルーレイレコーダーが無い。
macAVCHD→MP4へ変換するソフトを探してみましたが、有償のものしかなさそうです。
 

まとめ

とにかく買ったら速攻で動画の保存形式をMP4にするべし。
さーて撮影した動画取り込むか!ってときに困るから。
 

Knockout.jsの勉強がてら、結婚式のゲスト管理ツールを作ってみた。

概要

JSのフレームワークについて勉強したいと思っていたところ、会社の先輩からKnockout.jsがシンプルでいい感じという話をきいたので、勉強がてら作ってみました。

【Wedding Guest】
http://wedding-guests.azurewebsites.net
-結婚式のゲスト管理をスマートに!-
面倒なExcelでのゲスト情報管理をブラウザだけで完結!
簡単にゲスト、グループの追加/削除や順番変更が行えます。
全体の人数や、新郎側ゲストと新婦側ゲストの割合がリアルタイムに更新されます。

Windows Azure Webサイトにて公開しています。
MS Community Championというアプリコンテストに参加すると、MSDNサブスクリプションをもらえるというおいしいお話もあり、ついでに応募してます。

感想

Knockout.js

  • データバインディング便利すぎ。
  • リアルタイムに情報を更新するようなことが、簡単に実装できてしまうことに感動。
  • Angular.jsとかBackbone.jsとかと比べて機能がシンプルで少ないので、学習コスト低め。

Windows Azure

  • Herokuに比べてインスタンスの立ち上げに時間が結構かかる
  • IaaSの側面が強い

新しい技術についていくのって大変。 JSerには必須のスキルっぽいなぁ。

はてなブログのカスタマイズが予想外に簡単だった件

育児・育犬ブログを作ってみた


くぴらむ日記

もともとFC2でやっていた育犬ブログをはてなブログに移行しました。

もともとFC2でやっていたのはカスタマイズできる範囲が広いから。

しかし、公式iOSアプリの使いにくさなど不満点がけっこうあったので、移行を決めました。

 

移行先候補だったサービス

カスタマイズ性重視だったので、以下のサービスを考えていました。

wordpress

 

メリット:wordpress使えるサーバ契約すれば、自作テーマ作るなり煮るなり焼くなり、どうにでもできる。

デメリット:月額が発生する。

 

tumblr

メリット:無料でカスタマイズできて、固定ページや独自ドメインも無料!とにかく無料!

デメリット:コメント欄がデフォルトでついていない。Disqusとかいうプラグインがあるみたいだけど、何となくSNSログインが前提ぽくて元々のブログ読者のワンコ飼主さんたちには嫌われそう。

 

はてなブログに決定した理由

テンプレートタグを覚えなくていい!

wordpresstumblr、FC2もそうなのですが、HTMLを編集できるため1からテンプレートを作るとなると、各サービスが独自に定義しているテンプレートタグを学習する必要がありました。

はてなブログでは、割りきってHTMLの変更は不可(ヘッダの下、記事の後など部分的に挿入することは可能)なので、テンプレートのタグを覚えずCSSのカスタマイズのみで済んでしまいます。

 

土台が用意されている

 カスタマイズしやすいよう、シンプルな土台がgithubで提供されています。


Hatena-Blog-Themes/boilerplate at master · hatena/Hatena-Blog-Themes · GitHub

Boilerplate は、はてなブログのデザインCSSカスタマイズの土台に適したデザインテーマです。 

 こいつをささっと自分好みに直すだけでOK!

 

まとめ

  • オリジナルのテーマでブログがやりたい!
  • でもwordpressのカスタマイズとか、面倒なものはやりたくない!

そんな人は、はてなブログでさくっと見た目だけいじるのがオススメです。

FuelPHPプロジェクト作成してHerokuで公開するシェルを作りました。

タイトルが全てです。

FuelPHPプロジェクト作成してHerokuで公開するシェルを作りました。

 

sp-ice/createHerokuFuelApp · GitHub

 

 

処理内容は以前の記事で書いたものです。


HerokuがPHPに正式対応したのでFuelPHP動かしてみた - SPICY SPACE BLOG

 

あとは、vagrant + chefでローカル環境も一緒にたてれるようにしたいなぁ。

レッドハッカソン広島に参加してきました

前々からエンジニアとして一度行ってみたかったハッカソン。広島で開催されるとのことで、参加してきました。

 
レッドハッカソン広島
 

会場

会場のPort.incさん。
広島中区のコワーキングスペースです。シックな内観で落ち着いた空間でした。
 
f:id:sp_ice:20141014194057j:plain
※お昼に写真撮り忘れたので夜の写真です。
 
f:id:sp_ice:20141014194746j:plain
開始直前に会場入りしましたが、皆さん既にPCを用意してやる気充分な感じが伝わってきました。
 
f:id:sp_ice:20141014194953j:plain
机にはペンに名札に模造紙、そしてお菓子が準備されていました。
お菓子食べながら開発できるなんて…なんて親切!ヽ(´ー`)ノ
 

内容

さてここからは作業に集中したので写真はありませんが、「広島を盛り上げるWEBサービス」というテーマで、午前中はアイデアソン、そして午後は開発、最後にプレゼンという風な感じで進んでいきました。
 
僕らのチームは神楽に特化したサービス「神楽リクエスト(仮)」ということで、広島の神楽団と、全国の神楽ファンとのマッチングサービスを開発、提案しました。

f:id:sp_ice:20141015124516j:plain

※一応グローバルに公開してますが、本当にモックアップなので画像だけ…
 

結果

…なんと!5チーム中1位頂きました〜!
f:id:sp_ice:20141014201447j:plain
 
という自慢がしたかっただけの記事です。ごめんなさい。
 
カグリクチームの皆さん、至らないとこだらけでしたが、本当にありがとうございました〜!楽しかったです。
 

まとめ

 ハッカソン初参加でしたが、意外と技術者以外の方が多くて驚きでした。
内容的には開発よりアイデアソン寄りでしたが、他業種の方とアイデア出しができて、普段と違った視点で見れて面白かったです。
 
今回はモックしか作れませんでしたが、今度はガッツリ開発したい!
 

File APIとCanvasで画像をリサイズしてアップロード

以前自分の結婚式のために作った画像投稿サイトで、クライアント側で画像のリサイズを行う投稿フォームを作ったときのことを書きます。


自分の結婚式に写真投稿サイト作ってみた話。 - SPICY SPACE BLOG

 

HTMLで画像投稿する必要性

結婚式の来場者に、式中の写真をスマホから投稿してもらうサイトなので、

スマホで撮影した2MB近い画像を、3G回線でアップロードするにはムリがあります。

かといって撮った写真を別アプリでリサイズしてからアップして下さいっていうのはユーザーに負担をかけすぎなのでナシ。

そもそもスマホアプリとして作るというのも検討しましたが、iOSの場合、アプリを一般公開しないといけないですし、まぁ結婚式の準備と平行してiOSAndroid両対応のアプリを作る余裕は全くありませんでした(笑)

ということで、Webサイト上でスマホの写真をリサイズする必要がありました。

 

実装方法

スマホのブラウザでファイルのアップロード

iOS6以降、Android2.2以降で<input type="file">でカメラの起動 or カメラロールの写真選択が可能となっています。

FileAPI

HTML5 では、File APIを介してローカルファイルにアクセスできます。

<input type="file">で指定した画像ファイルを読み込んで処理することが可能です。

参考サイト:JavaScript でのローカル ファイルの読み込み - HTML5 Rocks

ブラウザ対応状況は2014年9月時点でこんな感じです。

f:id:sp_ice:20140902121830j:plain

引用サイト:ファイル アクセス - HTML5 Rocks

 

今回の実装

  1. <input type="file">のchangeイベントを登録。
  2. 写真がアップされたら、写真のEXIF情報からOrientation(回転)情報を取得、スマホで撮った写真が正しい向きになるよう調整。
  3. 取得した写真をリサイズしてcanvasに描画。
  4. canvas上の描画データをbase64エンコードし、<input type="hidden">でテキストとしてフォーム送信。

  

実際の動きはコチラをご覧下さい。

http://da20140329.herokuapp.com/snap/post

 

ぶつかった問題

すんなりうまく行くことなんて無いのが世の常です。。。

問題① iOSで画像が潰れるバグ

こちらのサイトで詳細に説明されています。

iOSの制限として、2Mピクセルを超えるJPEG画像はサブサンプルの対象となり、情報が間引かれてしまいます。

この画像をCanvasに対してdrawImageなどしてリサイズする場合、不都合が起きます。サブサンプルされる場合とされない画像で描画の結果が異なってしまいます。

回避策として、一旦小さなCanvasに元画像の一部をコピーし、それを張り合わせて対象のCanvasにdrawImageすることで対応しました。またその際、サブサンプルされている画像とそうでないものを描画結果から判別し、サブサンプルされているものには縮尺を補正してあげるようにしています。

引用サイト:iOS6でメガピクセル画像をCanvasに描画するとおかしくなってしまう件と、その対処 - snippets from shinichitomita’s journal

 

なんとこの現象を回避するためのライブラリ「ios-imagefile-megapixel」を公開してくださっていたので、今回利用させて頂きました。

 

問題② canvasのリサイズが汚い

今回、canvasのリサイズは問題①で使用したライブラリ「ios-imagefile-megapixel」が受け持ってくれていたのですが、

drawImageメソッドで幅、高さを指定することで実現しています。

context.drawImage(image, dx, dy, dw, dh)

このリサイズの結果が汚い!↓の記事に画像の比較がありますが、canvasの画像処理はそんなに性能がよくありません。

 参考サイト:琴線探査: HTML5 Canvasで画像のリサイズするならコレ!「JS-Image-Resizer」

こちらの記事の中で紹介されている「JS-Image-Resizer」も試してみたかったのですが、問題①対策のライブラリとマージする時間がなかったため、諦めました。。。

通常のcanvasでのリサイズよりかなりキレイな仕上がりになるようです。

 

問題③ canvasの描画データをbase64エンコードするときに ブラウザが落ちる 

機種変前に使用していたiPhone4が手元にあったので、こちらで試してみたところ、ブラウザが落ちてしまいました。

どこで落ちているのか、少しずつコメントアウトしながら検証した結果、

var imgData = resCanvas1.toDataURL();

 ↑ここでした。toDataURLはcanvasで描画したデータを、Base64エンコードした文字列で取得するメソッドです。

ここのjsの処理がiPhone4のスペックでは足りないようです。

結婚式に来ていただくゲストに「このサイト、落ちちゃうんだけど…^^;」なんて言わせたくありません…

iPhone4ならもしかしてまだ使っている人もいるかも、Androidの古い機種はもっとスペック低いんじゃないか…という心配から、

せめてiPhone4で落ちない程度の画像サイズにするという結論に至りました。

その結果、300✕400に収まる画像サイズまで落として描画することにしました。ただでさえcanvasのリサイズで汚くなっているのに、このサイズはRetinaディスプレイで見るともう悲惨です。

ここは本当に妥協してしまったので、もう少し対応機種を絞れば良かったかなぁというのが反省点です。

 

まとめ

 

なんとか無理矢理使ってみたけど問題は山積みです。

  • iOSで画像が潰れるバグ
  • canvasのリサイズは性能が悪い
  • スペックの低いスマホ端末ではブラウザが落ちる

現状では、フォーム投稿時のサムネイルに使う程度なら有用かと思います。

どうしてもスマホからWebで画像アップロードするときは、対応機種を絞ればこの方法でも行けそうです。

それにしても画像を投稿するコンテンツはどう考えてもネイティブアプリで作った方がいいですね。リサイズなんて当たり前にできますし、アプリをインストールする敷居もどんどん下がってますしね。

【ペット見守りシステム開発日記②】JavaScriptでArduinoとシリアル通信

前回までのあらすじ

外出先から室温の確認と、エアコン操作をするための開発日記。
前回はArduinoで室温取得とエアコン操作を実装。


ペット見守りシステム構築日記①】Arduinoでエアコン操作してみた - SPICY SPACE BLOG

 

外出先からArduinoを操作するには

最近注目してるブラウザ間通信を実現できるWebRTCという技術を使えば、ブラウザから自宅の遠隔管理ができるかも!
 
iPhoneではまだサポートされてないのが痛いところだけど、固定IPやダイナミックDNSを使わなくてもいいところが魅力。
 
ということで、まずはローカルPCのブラウザからArduinoとシリアル通信ができるよう実装してみます。
 
 
 

jsとarduinoの橋渡し

Serialport-server by shokai

ライブラリを使いました。

「Serialport-server」はWebSocketでjsからシリアル通信の橋渡しをしてくれる仮想サーバーです。

こんな便利なもの作ってくれている人がいるなんて!しかもgemでインストールできるようにしてくれてるなんて!すばらしい。

gem install serialport-servermacなら一発でインストールできるはず、と書いてあったんですが、

OS X 10.9だとERROR: Failed to build gem native extensionのエラーが発生してしまいました。Apple Developerサイトから「Command Line Tools (OS X Mavericks) for Xcode」をインストールすることで、無事インストールできました。

 

インストールできたら、serialport-server /dev/tty.デバイス名を実行することでサーバを起動できます。

デバイス名はArduino IDEツール->シリアルボードから確認できます。

f:id:sp_ice:20140901004305p:plain

 

 

Arduino側は前回記事のソースを利用します。

js側のソースはこんな感じ

 

できました!

とりあえず、ローカルPCのブラウザからエアコンON/OFFができるようになりました

 

arduinoでエアコンON/OFFでけたー。これで夏に愛犬を留守番させるのもすこし安心。

 

まとめ

すごい人が作ったツールはすごい(当たり前)

次回は外出先からの操作の実装!