メモ

iPhone4Sを買って1年以上たちますが、その間、その前に使っていたiPod touch（retina）は机の中に眠っていました。 これはもったいないぞ！　iPod touchはかなり高機能なハンドヘルドコンピュータですから、何かに活用したい、再利用したい！ よく考えれば最近でこそ旧機種の下取りなんてのもありますけど、古いiPhoneなんかをもてあましている人は結構多いはず。 そんなわけで余ったiPhone / iPod touchの活用を考えてみた。 （１）デジタルフォトフレームにする フォトストリームなんかで自動的に最新の写真が同期されるのは結構便利。 でもちょっと小さいかなぁ～。 （２）音楽専用にする iPhoneで音楽聞いてると結構電池の減りも気になったりして。 原点に立ち返って（笑）、音楽はiPod touchで聞くようにするというのも1つの手かなと。iPhoneの電池や容量が節約できます。 古い機械はどうしても電池が消耗している物なんで、この辺はちょっと難点かな。 （３）卓上カレンダーにする 今回はここに行き着きました。 最近紙の卓上カレンダーは使ってないんですね、個人的には。 予定は基本的にGoogleカレンダーに書き込むので、それが見られないとしょうがないので。 もちろんPCでもiPhoneでもiPadでも見られるんだけど、電話がかかってきた時にとっさに見ようと思うとちょっと不便。 そこでどうせ眠っているiPod、もう電池の消耗なんかも気にしないで、常時コンセントにつないじゃって、画面も付けっぱなしにしておけば良いんじゃないかと。 付けっぱなしにしておけば見たくなった時にすぐに見られます。 紙と違ってGoogleカレンダーに書き込めば自動的に同期するというスマートさ。コレダ！ ちなみに、今回は有料ながら月・週・日の表示切り替えが左右のフリックだけでできて、予定の確認もしやすいAgendaというアプリをチョイスしました。 基本的に電話がかかってきた時に片手で操作しやすいと言うことが大前提で、せっかくならある程度見た目の良い物ということで。 これは相当便利な予感です。

画面の縦幅（天地）サイズによって、各要素の大きさや位置を調整したい場合があります。 これ、いろいろやり方はあるのでしょうが、僕はjQueryの「$(window).height()」で画面サイズを取得して、それに併せて各要素の位置やサイズを計算で設定するようにしています。 この場合、ページ読み込み時に調整用の処理を実行するのはもちろんですが、ウインドウサイズが変更された場合も再調整する必要があります。 「$(window).bind("resize", 関数名);」としてリサイズ時の対応をしていたのですが、これだとiPhone/iPadの縦横向き変更時のイベントがとれていないことが発覚。 iPhone/iPadの向き変更のイベントは「$(window).bind("orientationchange",関数名);」とするようです。 処理が同じなら「$(window).bind("load orientationchange resize ",関数名);」で、読み込み時も含めてOKかと。

iOS6 beta2をiPhone4Sに入れていた。beta3が出たというのでそのうち入れようと思っていたら、一度beta導入すると、通常のOSアップデートと同じで自動的に更新が端末にダウンロードされるようで、母艦につなぐことなくバージョンアップ終了。 …でも、どこが変わったのか分からない。 若干安定したような気もしないでもないが。 とりあえずメインの電話に入れてあっても、困っていない。

タダ地図が見てみたかっただけです、えぇ。 あまり情報もなく、結構ハマったのでメモ。 ちなみにWindowsでやってみました。 ※最初にやっておくこと ・iTunesは最新に！ ・バックアップを取る ・自己責任を覚悟する（←大事） ●まずデベロッパ登録する これは当たり前ですがiOSのデベロッパを登録しないとだめです。 デベロッパ登録のときに入力する情報は、全部半角にしないと文字化けしたりして手間取ります。 ●デバイスを登録する デベロッパサイトで開発機として端末を登録します。iTunesにデバイスをつなぐと情報画面で表示できる20文字のIDを入力して登録すれば大丈夫。 ちゃんとiOSアプリを作るときは、いろいろ手続きがあるのですが、iOS6 beta2を入れるだけならとりあえず端末登録だけでOK。 （あらかじめこれをしておかないと、iOS6をインストール後、エラーが出て何もできなくなり、一度iOS5.1.1に戻すはめになります） ●デベロッパサイトからiOS6のファイルをダウンロードしてくる 端末毎にファイルが分かれてます。 ダウンロードしたファイルを解凍するとdmgという拡張子のファイルが出てきます。これはMac用のファイルなので、Windowsではそのまま扱えません。 僕はHFSExplorerというフリーウェアをインストールして解凍しました。ipswという拡張子のファイルがインストールに必要なファイルなので、これが出てくればWindowsでもインストールできます。 ●端末をパソコンにつないで復元する 端末をパソコンにつないで、（Windowsの場合は）Shiftを押しながら復元ボタンを押します。（iTunesは最新にしておく必要があります） そうすると復元に使うipswファイルを選ぶダイアログが開くので、デベロッパサイトから手に入れたiOS6のipswを選択します。 後は自動で終わるのを待つのみ。 不具合が気になったりして戻すときは普通に復元して、iOS6導入前に戻すのが良いと思います。 エラーが出て戻せない現象が発生しましたが、Appleのサポート情報にでている下記のページの通りの手順で戻せました。 ●iOS：アップデートまたは復元ができない http://support.apple.com/...

iPhone、iPod touchのRetinaはきれいなのですが、サイトを最適化する場合、縦横それぞれ半分の解像度で作るのが今でも一般的のようです。 それでも、文字はなめらかになるのですが、画像はどうしても拡大表示したようなゴツゴツしたものになってしまう。まぁ、気にしなければいいのですが、他がなめらかなだけに気になってしまうわけです。 で、試しに、実際に指定するサイズの倍の解像度で画像を作っておいてはどうかと思ってやってみたらきれいにできました。 どういうことかというと、 縦表示のサイト（横320ピクセル×縦480）でサイトを作るとして、 横幅いっぱいに表示したい画像は普通なら、横320ピクセルで作りますが、 これを横640で作ります。 で、そのまま表示するとはみ出しますので、htmlやcssの方で320ピクセル表示（50%表示）にします。 PC用のブラウザでは画像を半分に縮小しますので、ブラウザによっては逆に荒れますが、 iPhoneの場合、これでピクセル等倍になってくれるようです。

iPadを買って長らく、これは趣味用であり、仕事には使わないと決めてました。 ところがふとしたことからUQ WiMax契約、打ち合わせ中にホームページ見るのに使い始めたらもう止まらず。やっぱり便利だし、作ったホームページがきれいに見えるのがうれしい！ というわけで、最近は仕事にも全開で使ってます。 個人的なおすすめアプリをメモメモ。 ■■Pocket Informant HD Pocket Informant HDはちょっと高い。高いけど便利だからヨシ！ カレンダーでのスケジュール管理とToDoの管理ができます。 カレンダーはGoogleカレンダーと同期できるし、ToDoはToodledoとかいうサービスと連携するようです。（こっちの連携はあまり実用上関係ないが） 画面は、 １．当日の予定 ２．一週間の予定 ３．ToDoの一覧 が選べます。 １は当日のタイムスケジュールが左に表示され、右側にはToDoがでます。 ２は一週間分のスケジュールとToDoが表示され、左側には５ヶ月分くらいのカレンダーがでます。 一週間の表示方法は、月曜始まりの７日分、当日始まりの７日分、月曜始まりでウィークデーのみの５日分が選べます。 ３は単純なToDoの一覧で、カレンダーの内容は表示されません。 僕は次の日の予定も見たいし、やり残しているTodoが無いかもチェックしたいので、２をメインに使ってます。 ローカライズされていないので、メニュー等全て日本語でないところが若干とっつきにくいですが、日本語の入力は問題なく、操作もそれほど複雑ではありません。 iPadのアプリって85円とかで買えるものも多いので1000円超えるとすごく高い気がしてしまいますが、紙の手帳買うことを考えたら安いし便利。 中途半端なものを買うより、ちょっと高くても高機能なものが良いとお思いますね。 ・・・お試しができれば一番良いんですけど。 ■■その他 ベタですが、Evernote、SugarSync、Dropboxは便利で使ってます。 プライベートはSugarSync、仕事用のデータはDropboxと分けて使っているます。 Evernoteは、打ち合わせで紙にとったノートをスキャンして入れてます。 まだiPadで直接メモをとるような気分にはな...

便利に使ってるSplashTop Remoteですが、調子良いみたいで、アプリのランキングでも上位に来てますね。 過去のSplashTopRemoteについての記事一覧 はこちら まぁ導入も超簡単だし、ブラウザ見るくらいなら普通に便利です。 もっとも、ブラウザや動画閲覧以上のこと（Word使ったりとか）をしようとすると不便があるでしょうね。 で、iPad版が便利だったので、iPhone版をiPodに入れてみました。 iPhone版はさすがに画面サイズの問題で文字なんかはそのままでは読めませんね。 でも、動画表示なんかは十分です。 iOSでできないことをPCにさせて、SplashTopで見るって、なんとなく電気の無駄遣いのような気もしますが、僕の場合、メインのマシンは居間にはないので、ちょっとだけ見に行きたいときに動かなくて良いのは楽ちんです。風呂やトイレからメインマシンにアクセスしたいときとかね。（笑） ところで、まだ試してないのですが、この間のバージョンアップでインターネット経由でのアクセスができるようになったとか言うことらしいです。 今度試してみます。

ChainLP、相変わらず便利に使っています。 表示用のアプリとしては、iPod（iPhone）ではiBooksを、iPadではi文庫HDを使っています。 理由は、i文庫HDは見開きの方向が変えられるので、縦書き表示に適していること。 i文庫（HDでは無い方）も使ってみたけど、いまいちだったので、iPodはサクサク軽快動作のiBooksを採用。 i文庫HDは良いアプリだけど、1つ不満があるとすると、元画像の解像度によって、画像がぼやけたりする場合があること。 ピクセル等倍で無い場合は、縮小（あるいは拡大）をしますが、scansnapでスキャンした画像は微妙にピクセル数がみな異なるので、ページによって文字がぼやけて見づらいときがあるのです。 で、最近では、横1024ピクセル×縦1536ピクセル設定でやってます。 これだと、縦長の本はだいたい見開き表示にしたときに50%表示になります。（縦がiPadの短辺768ピクセルの倍なので） もちろん等倍でやっても良いのですが、今後もっと解像度の良い環境で見る可能性もあるし、どうも等倍よりも50%表示の方が綺麗に見えるようです。（本文ボールド化やシャープの設定次第でしょうが） ガンマ補正とかは元の画像の状態にも寄るので、何度かやってコツをつかむしかないですね。 一言で言えば、キツメに補正する方が読みやすい、ということかな。特にKindleの場合、黒を強くしないと読みづらいようです。

半分以上雑談ですが、iPhoneやAndroid端末とプルダウンメニューについて。（ドロップダウンともいいますが） タッチで操作する機械は、マウスオーバーというものが無いです。 指を乗せたら即クリックとして動作するわけですね。 そういうことを何度もご説明しても、クライアント様にご理解頂けない場合があります。私が説明ベタなんでしょう、きっと。 結局、最終的にはナビゲーションとサイト全体の構成について見直すことにしてとりあえずiOSに対応したいという作業を受けました。 で、いろいろやっていて気づいたのですが、jQueryのhoverは、iOSでマウスオーバー的な動作をするのですね。具体的には一回タッチでマウスオーバー、もう一度同じ場所タッチでクリックになります。 今回はこれを以てiOS対応とするということで決着しました。（今後ずっとhoverがこの動作という保証はない） が、この対応はおかしいですよね。 これはAndroidでは期待した動作をしません。すぐに移動しちゃいます。 （長押しすると右クリック的に動作するらしくサブメニューが出ますが、別の機能メニューもでてしまいますし、そもそもそんな操作分かるわけ無い） 結局は、 ●プルダウンメニュー等、マウスオーバーを前提としたナビゲーションは廃止する →ゴール ●プルダウンが最悪使えなくても、全てのページに回れるようにする →例えばANAとかそうなってると思います。 ●端末毎に振り分ける →こういう対症療法はとりたくない。端末の種類が増えるとどう振り分けて良いか… というか、Windows7のタッチデバイスがあると、無理でしょ（？） ●タッチデバイスを切り捨てる →潔い！　カッコイイ！　でもそうは行かないですよねぇ、これからは。 ということで、メニューの作り方はサイト全体の構成にも影響しますので、これから作るものはタッチでも操作しやすいことも考えないといけないと、そういうわけです。 --

今更「事始め」もなかろうというものですが、とにかく始めたのです。 もともとスマートフォンがスマートフォンたるゆえんは、PCに準じた使い方ができるということだと理解しているので、専用サイトを作るということには矛盾を感じます。 しかし、これだけ世の中が騒ぎ出すとそうも行かない。 しかも今回はiPhoneアプリのプロモーションですから、まぁ必然性はあります。 今回はPC向けのページは別に用意してあるので、新しくiPhoneだけを対象としたページを作るようにという依頼でした。（iPod touch含む） Androidなどには対応しなくて良い、完全に専用ページなので、楽といえば楽。 参考サイトは「meet i」です。 ■ページのサイズを決める iPhoneの画面サイズの話。 Retina（iPhone4）ディスプレイ：横640×縦960 iPhone3G：横320×縦480 です。 画面のサイズが倍違います。 １～２年すればRetinaに最適化しても良いような気がしますが、まだ古い機種も多いはず。 なので今回サイトの横幅は横320を基本にします。 Retinaで見たときには2倍に拡大した状態になりますが、テキスト部分やCSSのグラデーションはきれいに再現されますので、概ね問題有りません。 ■iPhoneでの初期表示サイズの設定 iPhoneのSafariは何も設定しないと、横幅980ピクセルとして動作します。 横幅980ピクセルのページなら画面いっぱいに表示されます。 横幅700ピクセルのページなら左右あわせて280ピクセルの余白ができます。 PC版サイトを表示するなら、まぁ妥当な設定でしょうね。 最近は横に長いサイトが多いので、980ピクセルなら少し余白が出るくらいだと思います。 今回は専用ページなのでぴったりあって欲しいのでそのように設定します。 metaタグ用にviewportというものが用意されていますので、それを使って設定します。 具体的にはこんな感じ↓ <meta name="viewport" content="width=320"> これで横幅320が基本になります。 ※viewportにはその他にも設定できる項目がありますが、詳しくはぐぐって...