まずは現物。 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月27日木曜日
ある程度iUIを把握しました
2009年8月15日土曜日
GoogleAPI試用ページ AJAX APIs Playground
前の記事の後に少し検索してみると、こんな記事を発見。 ASCII.jp：Google APIがブラウザーで試し放題！ なんとも、Google自身がAPIを試用するためのページを作っているというのです。 AJAX APIs Playground 少しだけ試してみました。ページを開いて左上「Pick Sample」の中の「Blogger API」を選択。 さらにその内部「Blogs / List Blogs」で、Bloggerの記事一覧サンプルを開きます。 ページ下「Output」、右上「Edit Code」の内容が切り替わるので、実際に書き換えてみます。
「Edit Code」内17行目に、Bloggerのフィードのアドレスの変数が定義されているようなので、このブログのフィードである「http://holmes21.blogspot.com/feeds/posts/default」と入れ替えて「Output」右の「RunCode」で実行します。
すると、「Output」でこのブログの記事一覧が表示されます。 これを活用すれば何とはなしに出来る気がしてきました。 流石Google、いい仕事してますね。
2009年5月19日火曜日
インラインフレームテスト
昨日、Seesaaブログのほうでは使用出来るのを確認しましたが、こっちではまだ確認していないのでテストです。 と言っても、普通のHTMLタグなので普通にいけるとは思うのですが。 ちなみに、以下のサイトで簡単に作る事ができます。 Web便利ツール/インラインフレーム作成ツール - TAG index Webサイト 使用出来ました。
2009年5月6日水曜日
SyntaxHighlighter テストその2
今回は「改行の変換」を「いいえ」でやってみたいと思います。 記事内を＜pre＞タグで包むと自動整形してくれるようです。 結果的にこういったモノが出れば成功なんですが・・・。 090506_sh_test この記事を書く際にはこちらを参照しています。 SyntaxHighlighter2.0用 貼り付けコード作成 - SQLの窓と銀プログラマ 以下SyntaxHighlighter挿入。
javascript:window.clipboardData.setData('Text',document.title+'\n'+document.URL);
void(0);
とりあえずテンプレート内に必要なモノ全て入れて試してみました。 やっと動作してくれるようになりましたね！ これだけの作業なのに神経使います・・・ ゆっくり考えれば出来ることなのに焦っちゃうっていう。 もっと論理的に考えられるようにしないといけません、精進します。 中に出てくる緑の矢印は改行を表しているんですね、初めて知りました。 というか、このテンプレート本文の幅狭いなー。 今度はこれを解消してみることにします、それか別テンプレートに変更ですね。
2009年5月5日火曜日
JavaScript テスト
今度はボタンを作ってのJavaScriptテストです。
完全に「script」タグを無視してくれます。
やっぱり無理なのかな、ちょっと調べてみます。
とりあえずわかりかけてきました。
ブログ記事のソースを開いてみてみると、
「script」タグ内に＜br /＞が混入しているのが原因のようです。
これは、ブログの「設定」→「フォーマット」の「改行の変換」が「はい」になっているためです。
ブログを書く時には当然見やすさ重視なので、改行を挟みつつ文章を書いていきますが、この設定が「はい」では、自動的に＜br /＞が挿入されるようになっています。
これを「いいえ」にするとJavaScriptは使用出来ましたが、他の記事の改行が崩れてしまうので、「はい」のままで使用します。
対処法としては、「script」の始めから締めまで1行で書ききってしまうのが考えられます。
それでも無理ですね・・・ 「改行の変換」が「はい/いいえ」で何か差があるのか見てみることにします。 調べてみた結果ですが、 この記事の中身丸ごと比較対象しても＜br /＞が入っている以外全く差がありませんでした。 ということは、「はい」の状態の時に、何かいらない処理が走ってるって事なのかな－。 案外検索したら出てくるのかも、引き続き調べてみます。
SyntaxHighlighter 実装テスト
SyntaxHighlighterの実装テストです。 ソースは、ブラウザに貼り付けて実行するだけでページ名とアドレスを取得するものです。
javascript:window.clipboardData.setData('Text',document.title+'\n'+document.URL);
void(0);
どうやら使わせてはもらえないようですね。 どうも【script】タグが無効化されている模様。追記(5/6):使えるようになりました。
投稿
