つい最近、iPhoneのAppStoreに、「Opera Mini」が登場しました。 開こうとするサイトを、一旦Operaのサーバを経由し、圧縮したデータを取得することで、 Safariよりも高速なブラウジングが出来るようです。 そもそも「Opera Mini」というのは、携帯端末でのOperaを指すようで、 今回リリースされたのは、そのiPhone版ということのようですね。 ただ、Safariではブラウザ判別の基準として、 ユーザエージェント内の「iPhone」という文字列をチェックしていましたが、 「Opera Mini」のそれには「iPhone」が含まれず、PC表示となるサイトがあるようです。 うちのほるめすメモ帳 - 暫定も例外でなく、 Safariと同様に見せるためには、「Opera Mini」の判別をする必要があります。「Opera Mini」のユーザエージェントの内容。 その通り「Opera Mini」という文字列が含まれるので、それを利用します。
<script type="text/javascript"> //モバイル端末の判定 var agent = navigator.userAgent; document.write( "ユーザエージェント：" + agent + "<br>" ); if( agent.search(/Opera Mini/) != -1 ){ // iPhone }else{ // PC } </script>この判定では、結局他の「Opera Mini」もiPhone側に属してしまうので、生ぬるい感じです。 僕は別に他のそれらがiPhoneとしてヒットしようが良いのですが、 もしそこまでこだわって制御するのであれば、結局IPチェックするしか無いのかなと思います。 うーん、まだSafariからOperaに乗り換える理由が生まれないかなぁ。 軽くなっている気はするけれど、ブックマーク移行できないし、 デフォルトでiPhone仕様のサイトをそのまま表示出来たら嬉しいね。
2010年4月15日木曜日
JavaScript 「Opera Mini」を判別してCSS切り替え
2010年2月13日土曜日
男4人で軽四日帰り京都旅に行ってきました
今月の末に行く九州温泉卒業旅行では、レンタカーを借りて移動します。 その時の練習のために、どうせなので高速道路に乗って京都まで行くことにしました。 京都に行くのは、運転してもしなくても初めて。 京都に午後0時に着き、午後5時には京都を発ち、午後7時には家に着く「予定」でした。 と、一口に書いてしまえば簡単なのですが、初心者マークが故の過ちで高速を下りてしまい、 大阪は天王寺から3時間も掛けて到着(間違わなければ高速で1時間のはず)、この時すでに午後2時。 「時間が無い！」と急ぎながら、京都駅近くの市営駐車場に車を停め、歩き回ることにしました。これが京都駅正面。色使いがそれとなく古都っぽい。
こちらは京都駅裏側。なにかこう、奇抜なデザインですね。
セブンイレブンも古都っぽい色使いで。 他のコンビニや「すき家」も、一部ではこういう色のお店がありました。
まずは、食べていなかった昼食を。 京都だからとソバですが、残念ながらチェーン店なので風情半減。 しかもこの時すでに午後2時半。食べ終わると午後3時前。 来るのに3時間掛かったので、 慣れたことも含めて午後4時に京都を発てば、午後7時に家に着くだろうと。 ということは、あと1時間しかない！ さらに急いで、「京都らしいもの」を探しに行きました。
マップを見て、京都駅から一番近かったところが「本願寺」でした。 ここは東本願寺。 「今、いのちがあなたを生きている」ちょっとわかりません。
はとまめ。 何かと思えば、中でおじさんが鳩のエサを売ってました。
東本願寺の御影堂。 予想以上に大きく、「流石京都なんだなー」って思ったり思わなかったり。 友達が写りこんでいるので、一部モザイクです。
こちらは、東本願寺から歩いて10分ほどのところにある、西本願寺。その阿弥陀堂。 これだけの年代物がまだ建っているのが凄いですね。 と、ここで午後3時40分。 お土産は高速のパーキングエリアで買うことにし、彷徨いながらも車へ戻りました。 改変予定通り、午後4時に駐車場を出発。 午後4時半頃には桂川PAに到着、ソフトクリームがおいしかったです。 帰りは順調に行くと思ったのもつかの間、午後5時半頃に再び遭難。 今度は曲がり損ねて尼崎へ到着。兵庫じゃん。 大阪市内へ戻るも、一方通行の罠にかかりあっちへこっちへ。 再度高速に乗り、天王寺に戻ると午後6時半。家に帰ると午後8時。 今日車で走ったのは、トータル8時間半。 その分疲れも溜まったものの、都会の高速の恐ろしさを知ったし、車で1県2府走ったし、 細い道もたくさん走ったし、みんなとワイワイ楽しめたし。 京都に2時間しか居られなかったのは残念だけど、充分に経験を積めました。 ちなみに、今日の功労賞はiPhoneとナビ係の友達。 「eneloop stick booster」で4回充電しながらも正しい道を導いてくれました。 GoogleMapがあったからこそ、京都への道を間違えてもたどり着くことができました。 でも、できればカーナビがあったらうれしいかな。
2010年2月1日月曜日
「eneloop stick booster」が届きました
この投稿で話していた「eneloop stick booster」をようやく入手しました。 昨年12月発売予定から、今年1月23日発売に延期になっていたのですが、 学校近くのソフマップでは売り切れどころか販売していた形跡もなく、 最後の手段としていたAmazonでも「Amazon販売側」は売り切れている始末。 しばらく待てば「Amazon販売」も復活するかと思ったのですが、1週間待っても戻らず、 仕方無く「マーケットプレイス側」で発注しました。これがパッケージ。 「放電専用」と書かれている通り、中に単3エネループを入れて使用する「供給専門」です。
中には注意書きが。 iPhoneOS2.2以前の場合は、正しく充電出来ない問題があるようです。 確かに、当時の非公式充電器でも問題になっていたような気がしますが、 アップデートで改善していたんですね、知らなかった。
実際に挿してみた感じ。 ちゃんと充電は出来ているようです。 フル充電eneloop込みで、「500mA 90分」供給出来るようで、 USB2.0で充電するのと同じパワーのようです。(Wikipedia参照) 90分充電出来れば7,8割ぐらいまで復活しそうです。 これで遠出の時でも気にせずiPhoneを使い倒せるようになりました。
2009年12月6日日曜日
iPhone 軽い動作のPDFリーダーアプリ「GoodReader」が人気そうなので買ってみた
昨日、PDF一括変換ツール「PDF Designer」で作成したPDFを、 手軽に読むために「Google ドキュメント」にアップロードしたのですが、 ロードして表示してみると文字の表示がガサツだったり、 そもそもきちんとロード処理が行われなかったりしたので却下。 僕の環境が悪いのかどうかわからないので、どうしようも無いんですよね。 というわけで、非常に人気があるらしい「GoodReader」を購入しました。 goodiware.com :: products :: GoodReader iTunesで「GoodReader」を開くリンク GoodReaderにPDFを読み込ませる方法は複数ありますが、 今回は、Safariで開いているPDFをダウンロードします。GoodReaderをインストールしてある状態で、 SafariでダウンロードしたいPDFを開き、アドレスの頭に「g」を付けて開きます。
すると、Safariが閉じられGoodReaderが実行されます。
今回の場合はこのようなプロンプトが表示されます。 「すでにダウンロードが始まっているので、状況を見るか？」と聞かれているのですが、 軽いモノならすでにダウンロードが終わっているはずなので、「Not now」を選択。 その後、「My Documents」を開きます。
さっきダウンロードしたPDFがいるので、選択すると表示されます。 今回は画像が含まれていないのでロードが軽く、1ページ開くのに1秒かかるかかからないか程度です。
iPhoneなのである程度直感で解りますが、 具体的というか、画面のどこにどの動作が割り振られているかを見るためには、 右上「Help」の「Show tap zones」を選択します。
こんな感じ。 もちろんドラッグ&フリックでも操作出来ます。 人気なだけあって、結構軽くて軽快ですね。 PCからしか見られないプロパイダメールも、PDFに変換してしまえば楽そう。
PDF一括変換ツール「PDF Designer」
先日横浜に行った際に、研修内で課題範囲のテストがあったので、 iPhoneからそのソースを見たいなぁと思ったのですが、結局用意が間に合わず。 テスト自体に問題は無かったのですが、このまま放置するのもアレなので、 テキストファイルを一括でPDF化するソフトウェアを探してみました。 サラッと見てみた感じ、どうやら「PDF Designer」というソフトウェアが良さそうです。 papy's softwarelibrary - PDF作成 機能や役割によって複数種ありますが、今回は「Text Edition v1.0」を利用しました。 ダウンロードし解凍した先の、「pdft.exe」を実行すると、 印刷する際の細かい設定を行うことが出来ます。 まだ全て触って試してはいないので、設定の内容は省きますが、 ソースを印刷するので「行番号」は欲しく、設定しました。設定後、pdft.exe」へファイルを、ドラッグ&ドロップすると処理開始。
この場合、ファイルを複数D&Dしたので、ファイル名の昇順で表示されます。 この並びのままPDFにまとめられるので、必要な場合は並び替えましょう。 問題無く完了すると、ファイルと同フォルダに「先頭ファイル名.pdf」が作成されます。
こんな感じ(今回必要だったソースとは違いますが)。 これをiPhoneで読むのは、また別のお話。
2009年12月3日木曜日
欲しい本と欲し「買った」本
是非とも学校に一冊置いて欲しいね。 エラーっていうのは、読むなり調べるなりしないと絶対に解決しませんし。
で、この本買いました。 多分アプリのうまい使い方とかが載ってるんでしょうけど。 --iPhone--
2009年11月29日日曜日
iPhone ページ内検索ブックマークレット
思いついて調べるとiPhoneでもブックマークレットっていけるんですね。 よく考えてみれば、JavaScriptを実行するだけだからいけるのか。 ということで、 iPhoneのSafariで表示しているページ内を検索するブックマークレットを作成しました。 iPhoneのSafariには検索がないので、調べ物する時には困るんですよね。 現物は以下から。 iPhone用ブックマークレット ほるめすメモ帳 ソースよりも、利用方法から。上のページにアクセスし、「ページ内検索ブックマークレット」下のソースをコピーします。
コピーしただけではブックマークに追加されないので、 適当にページをブックマークに追加したのち、コピーしたソースに書き換えます。
ページ内検索したいページに移動し、さっき作ったブックマークを選択すると、 入力ダイアログが表示されるので、検索したい文字列を入力してOK。
検索し存在すると、その文字列が黄色で強調され、件数とともに終了します。 見やすいソースはこちら。
javascript: var t=window.prompt('検索する文字列を入力して下さい。',''); if(t!=null&&t!=''){ var re=new RegExp(t,'ig'); var b=document.body.innerHTML; b=b.replace(re,'<span id=\'sebml\' name=\'sebml\' style=\'color:#000;background-color:#FF0;\'>'+t+'</span>'); document.body.innerHTML=b; var sebml=document.getElementsByName('sebml'); if(sebml.length==0){ alert('一致する文字列はありません。'); } else{ alert(sebml.length+'件検索しました。'); } } void(0);あ、ちなみにiPhone以外でも使用出来ます。 ブラウザに標準であるので使わないと思いますが。
2009年11月22日日曜日
iPhone SafariでYouTubeの動画が見られなくなってます
iPhone YouTube動画再生テスト この投稿を書いた際には再生できていたのですが、 今日ふと見てみると再生できないようになっていました。前回のGoogleのCMも、
YouTube動画テストページの動画も無理です。
自前の動画に関しては、動画の「編集と設定」の「シンジケーション」で、 「この動画を携帯電話とテレビで利用できるようにする。」となっているので、再生できるはずなのですが・・・。 iPhone用に変換して再生しているはずなので、 その変換が行えないほどの仕様変更でも行われているのでしょうか？
2009年11月16日月曜日
新しく発売されるeneloop周辺機器が欲しい
三洋電機から、eneloopの新しい携帯バッテリー、 「eneloop stick booster」が発売されるようです。上のリンクによれば、発売日は2009年12月1日。 市場予想価格は2000円前後で、大きさは太めのボールペン程度のようです。 iPhoneも充電出来るとのことなので、 本当なら、安価で軽量な携帯バッテリーを常に持ち運べますね。
2009年10月24日土曜日
iPhone用にBluetoothヘッドセット購入
iPhoneは一応電話なので、対応しているイヤホンのボタンから、 音楽の再生/停止や電話に出たりなど出来るのですが、 以前からイヤホンの調子が悪くて、その機能が使えないままでした。 さらに、イヤホンを挿したまま根本をグリグリした結果、 根本付近が崩壊し、中のコードが見えてしまう始末。 どうせだからと、Bluetoothのヘッドセットを買うことにしました。 購入したのは、SonyEricssonの「HBH-DS205」です。 SONY ワイヤレスヘッドセット DS205 HBH-DS205
届いて箱を出してみたの図。 たかがヘッドセットなのに箱が大きいなぁと開けてみると、 なるほど、専用充電器が大きいんですね。
円筒状のものがレシーバーです。 こいつを服に付ければ、煩わしいコードともオサラバです。 iPhoneとのペアリングも、説明書通り行えば問題無く出来ました。
Bluetoothで音楽を聴いてみたの図。 ヘッドセットで聴いている間は、下に接続対象が表示されるようです。 右下のBluetoothアイコンをタップすると、スピーカーと切り替えができます。 まだ外に出て歩いたりしていないのですが、 ズボンにiPhoneを入れて聴いても、音ズレも音飛びもありませんでした。 普通のイヤホンとの違いは無い感じがします。 でも、外に出て電波やら他のBluetoothが居たら途切れたりするんだろうなぁ。 PS3にも繋げてみましたが、こちらも問題なし。 あくまでもヘッドセットなので、音楽などは聴けません。 ただ、ボイスチェンジャーなどで遊べます、一人で。
2009年10月23日金曜日
ほるめすメモ帳にCSSを反映しました
usamimi.infoに借りた「ほるめすメモ帳 - 暫定」には、 作っているサンプルやメモなど、地味に少しずつまとめています。 iPhoneでも見やすいようにシンプルに書いていたものの、 そろそろ縦に長く伸びてきた事とPCからでは質素に見えてしまうので、 PCとiPhoneでCSSを切り替えて反映してみました。 作ってみたものはこれです。 ほるめすメモ帳 - 暫定 PCとiPhoneとのCSSの切り替えは、 以前調べたOS判別を利用し、<HEAD>内で行っています。<script type="text/javascript"> if( navigator.userAgent.search(/iPhone/) != -1 ){ document.write('<link href="css/iphone.css" rel="stylesheet" type="text/css"/>'); }else{ document.write('<link href="css/pc.css" rel="stylesheet" type="text/css"/>'); } </script>PC版CSSでは、以下の様にグループ分けしています。グループ分けを行い、「float」を行うことで、 左右にグループを表示することが出来ますが、 IE以外でのブラウザでは、そのままでは表示がおかしくなります。 この問題を解決するために1日も悩んでしまいました。 原因は、floatを行うことによる高さ(height)の消失です。 また、対策として「clearfix」という処理があります。 詳しくは以下の参考サイトで。
今回は、一番上のサイトのサンプルをそのまま使用させて頂きました。 ただ、仕様が厳密に違うのか、横幅(width)などが綺麗に反映されなかったので、 .clearfix:after時に、横幅と背景色を指定し直しています。 「:after」などに関しては、以下のページが参考になりました。 CSS: 宣言 Webページの世界は奥が深いんだなぁと、 Webプログラミングする時以上に実感しましたね。
2009年9月19日土曜日
iPhone YouTube動画再生テスト
昨日学校で、先生と動画のお話になったので、思い立ってメモ。 動画の形式がどれだけあって、どんなのがどれに対応してるかなんて分かりませんが、 ひとまずYouTubeにアップロード出来る形式であれば、 iPhoneではYouTubeを介した動画の再生が出来るようです。 自分のデジカメで撮影してみた動画(.mov)を、 そのままYouTubeにアップロードしてみました。 YouTube - デジカメ動画投稿テスト ただアップロードしただけで、これだけ綺麗に観られるとは・・・。 これをiPhone用のページを作り、貼り付けました。 YouTube動画テストページ iPhoneで開いてみた感じはこちら。PCのように動画のサムネイルが表示されるのではなく、 ビデオカメラのアイコンと再生ボタンが表示されます。 これをタップすると、動画再生のページ(？)に移動し、ロードが始まります。
ある程度ロードが終わると、自動的に再生が始まります。
元動画がかなり綺麗なだけに、これを観るとそれなりにがっくりします。 おそらく、YouTube側でiPhone用の動画に変換しているのだと思いますが、 Googleで検索を掛けてもあまり引っかからないので分からないです。 3GとWi-Fiでは、画質が違ったりするのでしょうか。 なお、YouTubeを利用せずにiPhoneで動画を再生する方法を探していると、 以下のサイトを発見しました。 iPhoneでWeb上の動画を再生させる方法 - 強火で進め
2009年9月7日月曜日
iPhone Blogger投稿一覧に更新日表示
以前この投稿で作成した、 Blogger投稿表示一覧に更新日を付加して更新しました。 以下がそのページです。 ほるめすメモ帳inBlogger - 投稿一覧 iPhone、PCSafari、Firefoxでどうぞ。(IE6,7不可、IE8はリスト表示のみ)
更新日も記事の情報として、APIで取得できます。 var blogUpdated = post.getUpdated().getValue().getDate(); 実際には、以下のように出力されるので、少しいじる必要があります。 Sat Sep 05 2009 20:39:09 GMT+0900 上の「blogUpdated」はDate型なので、「toString()」で型変換し、 それを更に「.split(' ');」によって分割しています。 更に更に、曜日と月が英語のままではわかりづらいので、 Switch文でこつこつと日本語に入れ替えてあげ、 それを欲しい順番に連結して完成です。 <li class="group"></li> これで出来た日付を、 上のタグに入れそのまま使うと、全投稿に表示されるので、 「ループ初回or前投稿と日付が違う」場合に表示するようにしました。なお、あくまでも更新日なので、 下の記事が上の記事よりも新しい日付が出ますが、 そもそもFeedに作成日時が無いようなので、対応のしようがありません。 少し気持ち悪いですが、仕方ないです。 投稿にも、投稿された順番があるので、並べ替えずにこのままで良いです。 以下が今回のソースです。 <body>以下のソースが前回の投稿にあるので、それと照らし合わせて使用します。 ▼続きを読む/たたむ
2009年8月28日金曜日
iPhone BloggerAPI+iUIでBlogger投稿一覧表示
ひとまず表示は出来たのでメモ。 ほるめすメモ帳inBlogger - 投稿一覧 今回はiPhone、PCSafari、Firefoxで表示しました。 IE等はただリストで表示されるだけです。iPhoneで表示した場合です。 上バータイトルがすり切れているのは、ただ単に長すぎるからです。 実際の処理としては、BloggerAPIとiUIを混ぜ合わせただけなのですが、 色々と困ったことがあったのでまとめます。
document.createElementから、 必要なタグを生成して差し込もうとしましたが、 <ul>を差し込む場合、selected="true"が追加されませんでした。 objul:ulタグとすると、objul.selected="true";では処理がされなかったワケです。 原因はおそらく、ulタグにselectedが標準でない(iUI用に勝手に作成した)ためです。 仕方がないので<ul selected="true"></ul>とだけ元から作成しておき、 document.getElementsByTagName("ul").item(0)で呼び出しました。これはPCSafariで表示した図。 なぜか上バータイトルが表示されません。
これはFirefox。 下の方に表示されているのは「Firebug」と言われるデバッグツールですね。 今回JSで処理したので、実際に処理が通っているのか、 表示がきちんとされているのかをチェックするために使用しました。 投稿の一覧表示自体は出来ましたが、これを今度各投稿を表示しないといけないですね。 以前に試してみましたが、途中でエラーが発生してそのまま停止してました。 諸々起こりそうな問題としては、かなりロードに時間がかかるかもしれないこと。 当然今回と同じようにJSで投稿を「同htm内」にロードしないといけないので、 今回表示する際(iPhoneでは10秒ほど)以上に時間がかかります。 さらに僕はiPhone3Gなので、メモリを大量消費した際の他の動作も気になります。 と言うような感じで、実は思ったよりiPhoneへの負担の大きいページが完成しそうです。 以下が今回の<body>以下のソースです。 ▼続きを読む/たたむ
2009年8月27日木曜日
ある程度iUIを把握しました
まずは現物。 iUIテストページ iPhoneからで無くとも、SafariやFirefoxからもそれっぽいイメージを感じる事が出来ます。トップページはこんな感じ。 この画面に表示されているものが、ソースとして一括りで書かれている感じです。 上バー「iUIテストページ」は、以下のソースを入れておくと自動で生成されます。
<div class="toolbar"> <h1 id="pageTitle"></h1> <a id="backButton" class="button" href="#"></a> </div>上バー以下のソースはこちら。<ul id="home" title="iUIテストページ" selected="true"> <li class="group">テスト中ページ</li> <li><a href="#pages">ページテストまとめ</a></li> <li class="group">その他リンク等々</li> <li><a href="http://holmes21.blogspot.com/" target="_self">ほるめすメモ帳inBlogger </a></li> <li><a href="index.htm" target="_self">ほるメモいんぶろ - 投稿一覧</a></li> <li><a href="http://google.co.jp/" target="_self">Google</a></li> </ul>根本はリスト表示で、CSSでの整形のおかげでiPhoneらしいUIが表示されているのです。 <ul>にselected="true"を宣言しているものが、トップページ表示となります。 <li class="group"></li>が区切り(仕切り？セパレータ？)となり、 文章を含むことが出来ます。 リンクは2種類、ページ内部とそれ以外があります。 <li><a href="#pages"></a></li> →これが同htm内の他のグループへ遷移するための表示方法。 <li><a href="index.htm" target="_self"></a></li> →これがそれ以外、別htmや外部サイトへ遷移するための表示方法。 target="_selfが重要で、無いと何も起こりません。 中に<a>を含まないことで、普通の表示も出来ます。ここで説明を終えたので、以下はせっかく撮ったスクリーンショットを。
このパネル表示は上と違い、<div>で書かれます。
<div id="ppanel" class="panel" title="パネル表示"> <h2><div>を使用する。<br> class="panel"とする。<br> titleはページ名になる。</h2> </div>同じようにidにはグループ名を用意し、 classには"panel"とすることでパネル表示になります。 画面では背景が途中で切れていますが、iPhone側では全体に表示されます。 あと、ここでは使用していませんが、テキストボックスやON/OFFスイッチも配置できます。 iPhoneやSafari上では遷移されて表示されるものは、 全て1ファイルにまとめて書かないといけないことから、 普通に作成するサイト構成とはだいぶ変わっています。 同iUI内で表示したいモノはページ1つに全て収めないといけないので、 ブログページを作るのであれば初めから全てロードしておく必要があるわけですね。 なるほどなるほど。
2009年8月24日月曜日
iPhoneにスケールを合わせる1行
ひとまず、昨日使用出来るようになったusamimi.infoにindexページを作成。 本当にリンクのみですが、ひとまずはこのままで。 さてそのindexページですが、問題が一つ。 iPhoneで覗いて見ると、このように表示されます。ページの余白まで見てしまい、文字が小さく表示されます。 この小ささでは、ピンチイン(2本指で広げる動作)をしてズームしないと、見るのが難しいです。 そこでこの1行。
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"/><meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0 " />こちらのサイトを参考にしました。 meta の viewport - ZeBeVogue別館 <meta>タグでname「viewport」を宣言すると、iPhone専用になります。 widthで宣言している「device-width」は、携帯端末用に用意された値らしく、iPhoneでは320pxになります。 300など、普通の数値を割り当てても良いですが、ここでは手っ取り早くしています。 「initial-scale」は初期拡大率で、これもそれ以外でもOKです。 「maximum-scale」は最大拡大率、その反対の「minimum-scale」もありますが、 拡大を許可する「user-scalable」が0なので、拡大縮小が出来ません。 この1行を<head>内に書くだけで、見やすさがグンと上がります。もうこれだけで、リンク集とかに使えるさっぱりしたページになりますね。
投稿
