当然のことながら普段コーディングはPCで行っています。 ところが、電車の中などちょっとした隙間時間にコーディングができるといいなと思うことがあります。 ちょっとアイデアを思いついた時や、バグに気づいて修正したいときなどがしばしばあります。 もしかしたら、ゼロからプロジェクトを作りたいこともあるかもしれません。

iPhoneアプリで、GitHubのクライアントはいくつかあります。 そのうちのいくつかはエディタ機能を備えているものもあります。 しかし、試した範囲ではとても使いたくなるようなエディタではありませんでした。 やはり、iPhoneで楽しくコーディングしたいものです。 iPhoneのような小さい画面でも楽しくコーディングできるようなインタフェースはありえるのではないでしょうか。

無いものは自分で作ろうの精神で作ってみました。 今のところ、GitHub限定です。 色々なライブラリを組み合わせて、Webアプリとして作りました。 特に、ace editorの恩恵が大きいです。 aceは、基本的にはiPhone/iPadでも動くようになっています。 それをさらに使いやすくするため、表示領域を大きくしたり（パフォーマンスの問題は残るのですが） 「コマンドモード」を導入して、vimのようにカーソル移動ができるようにしました。 カーソルキー問題は、Androidではないでしょうから、iPhone特有の問題かもしれません。

作ったWebアプリの名称は、CodeOnMobileです。 mobile codingにしてしまうと、モバイル向けアプリのコーディングの意味になることが多いので、 coding on mobile (devices)から命名しました。

Webアプリは、

http://codeonmobile.axlight.com/

からアクセスしてください。

その前に、GitHubのプロジェクトページ

https://github.com/dai-shi/codeonmobile

を見てみるとよいでしょう。簡単なスクリーンキャストを載せてあります。 ちょっと長いですが、辛抱強く見ていただけるとうれしいです。

それでは、モバイルでのコーディングを楽しみましょう。

モバイルファーストの次はオフラインファーストってことで、前から作ってみたいと思っていたアプリを作ってみました。

アプリ自体は「メモ」アプリで特に目新しいものではありません。機能も単純です。

ですが、BMEANスタックで作ったことが新しいかと思っています。 BMEANとは、

• Breeze
• MongoDB
• Express
• AngularJS
• Node.js

を利用するソフトウエアスタックです。

今回、「Railsより簡単にTwitterクローンを作るためのnode.jsのライブラリ」を目指したsocial-cms-backendを改良してBreezeをサポートする機能を追加しました。そのため、サーバ側のコードはほとんど書かずにアプリを作ることができます。また、HTML5のキャッシュマニフェストを使うために、connect-cache-manifestも利用しています。

アプリは、OpenShiftを使って配置しました。ぜひ、一度お試しください。

http://notesappsample-nodeangularapp.rhcloud.com/

左上にLoginがありますが、Loginしなくても使用できます。 その場合、localStorageにデータが保存されます。 LoginするとSyncが使えるようになり、サーバ側にデータを保存することができるため、複数のデバイスでデータの同期ができます。

iPhoneのWebアプリにもなります。「ホーム画面に追加」してください。スプラッシュイメージがうまく表示されないのですが、これは深追いしていません。

ソースコードはこちらです。よろしければ見てみてください。細かいところは、Breezeとsocial-cms-backendがやってくれるので、だいぶシンプルになっていると思います。

https://github.com/dai-shi/notes-app-sample

iPhoneのWebアプリというのは「ホーム画面に追加する」でインストール、というかブックマーク、するものです。HTML5でもそこそこアプリっぽく作れます。

さて、HTMLのタグで、ズームなどは無効にできます。例えば、次のようにします。

<meta name="viewport" content="width=device-width initial-scale=1, user-scalable=no" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />

ところが、これだけだと、縦にはスクロールできてバウンスしてしまいます。コンテンツの高さがちょうどぴったりだとしてもです。記憶違いでなければ、Androidではそのようなことはなかったような。

検索したところ、stackoverflowがわんさかヒットしました。比較的よくまとまっているかなと思ったのは次の３つ。

http://stackoverflow.com/questions/9651215/how-to-disable-bouncing-in-html5-fullscreen-iphone-app

http://stackoverflow.com/questions/10357844/how-to-disable-rubber-band-in-ios-web-apps

http://stackoverflow.com/questions/7768269/ipad-safari-disable-scrolling-and-bounce-effect

結局、JavaScriptを使わないとできないようですね。fullscreenのサイズで作っておくと、Safariで表示したときは表示エリアが狭くなるのでスクロールが必要です。そこでちょっとだけ工夫をしました。参考までにコードを載せておきます。

document.addEventListener('touchmove', function(e) {
  if (window.innerHeight >= document.body.scrollHeight) {
    e.preventDefault();
  }
}, false);

コンテンツの内部でスクロールやドラッグをしたい場合はさらに工夫が必要かと思いますが、それはまた機会に考えることにします。

mobile-bookmark-bubbleというのはiPhoneなどのMobile Safariで「ホーム画面に追加」を促すポップアップを出すライブラリです。

依存ライブラリもなく比較的ポータブルに実装されているのですが、 angular.jsで使おうとすると、デフォルトの#ハッシュで抑制する機構がうまくありません。

解決法は色々あると思いますが、おそらく最も手軽な$rootScopeを使う方法を実装してみました。$rootScopeなのでリロードするとリセットされますが、それはそれでいいケースもあるでしょう。

コードはこちら。

angular.module('MyModule', []).run(['$rootScope', '$timeout', function($rootScope, $timeout) {
  $timeout(function() {
    var bubble = new google.bookmarkbubble.Bubble();
    bubble.hasHashParameter = function() {
      return $rootScope.bookmarkbubble_shown;
    };
    bubble.setHashParameter = function() {
      $rootScope.bookmarkbubble_shown = true;
    };
    bubble.showIfAllowed();
  }, 1000);
}]);

（よく考えたら、$rootScopeに入れる必要はなくて、$timeoutの外でフラグ変数を持っていればいいだけか。$rootScopeに入れておくと、HTML側からフラグを操作できることがメリットになるのか、ならないのか。）

あまり参考にならないかもしれませんが、備忘メモでした。

普段、Webアプリを開発するときはPCでChromeやFirefoxを使うのですが、その後iPhoneのMobile Safariで表示させると、Chromeと比べてレイアウトがずれることがありました。

ボックスの高さをemで指定してもそれに収まる行数が変わってしまうのでなぜかと思っていたのですが、やっと分かりました。

行間のデフォルト値が違うんですね。まあ、当たり前というかなんと言うか。 というわけで、CSSでline-heightを指定することで解決しました。

以前紹介した、 InkというCSSフレームワークを使ってたのですが、<p>を使うとline-heightが指定されるので、気付くまでに時間がかかりました。<div>で書いていたところだけサイズが違っていたので。

それだけですが、備忘メモとして残しておきます。

RSS Pipesの補完機能としてのRSSリーダーを、HTML5 Canvasのみを使ってどこまでスマホアプリが作れるのか挑戦中です。

まだ、スクロールの処理を実装しています。KineticJSでできるだけ簡単にやろうと考えて、ドラッグ＆ドロップのイベントをつかってやりました。

スマホで使うには、やはり慣性スクロールが重要です。正しい呼び方は知りませんが、あの指を離してもしばらくスクロールしているあれです。

まじめに物理シミュレーションをしようかとも思ったのですが、使いやすければいいだろうということで感覚的にパラメータ調整しました。KineticJSではここらあたりが限界でしょうか。

ちなみに、iPhoneの複数のアプリでスクロール操作を試してみましたが、アプリによって挙動が違うことに気づきました。例えば、Safariではスクロールが止まるのが早いですが、Twitterではしばらくスクロールしています。今まであまり意識していなかったので気づかなかったです。

あと、スクロール途中にタッチして止めることが相当重要だとうことを再認識しました。

コードは少し長くなってしまったので載せません。あまり特記するポイントはないです。バウンスするところと組み合わせるのがすこしやっかいでした。

全コードはこちらです。

https://github.com/dai-shi/canvas-rss-reader/

実行サンプルはこちらから。

http://canvas-rss-reader.herokuapp.com/

うまくいったらライブラリ化したいと思いつつも、今は決めうちのコードになっています。

なんかたった一日ですごいことになっています。 経緯を簡単にまとめておきます。

3/4にGunosy RSSを開発して公開しました。

Gunosy RSSフィード 生成Webサービス

リツイートが数件あったけど、あまりRSSリーダーを使う人はいないのかな、と思ってました。

それが、3/12の夜あたりから、ブログで取り上げられたようです。

私がiPhone用のGunosy公式アプリを削除した理由

GunosyのRSSフィードを生成してRSSリーダーに登録して読むと超快適

GunosyをRSSで利用する方法が凄い！RSSを利用している人はこのほうがGunosyも鍛えられるかも！

GunosyをRSSで読む方法「Gunosy RSS」

GunosyをRSSリーダーで読む方法をまとめてみた

その後、Gunosyから公式見解が。

RSSでGunosyを利用する際の懸念点

それを受けて、各ブログの反応。

GunosyをRSSで利用する人は要注意！Gunosy開発チームよりデメリットの公式発表がありました！

RSSでGunosyを利用する方法に関して重大な懸念点があると公式に表明がありました

GunosyをRSSで取得して読むと「鍛えられない」と公式がファイナルアンサーで、あなたは選択を迫られるわけだ

Gunosyの中の人がGunosyをRSSで利用することをおすすめしない理由

GunosyをRSSで利用することは公式にオススメできないそうです！ じゃあどうする？

さて、どうしましょう。

追記。

GunosyをRSSに登録する方法と、それによるメリット/デメリット