iPhoneAppLauncherサンプル1

作り方説明

• Wikiページを新たに作る
  • このWikiは開かれたWikiですので自由にページを作って利用して貰って構いません。ただし、テストとして一時的に試しただけ(少しの回数しか利用されてない)、宣伝やスパムに利用している、それらのように思われるページは一定の経過を見た後に管理者権限により削除する事があります
    • ソースはサーバに自動保存されているので、削除後復元する事は可能
• Wikiページソースを編集する (最初は何もない状態)
• 単にボタンだけで良いなら、以下の文を書き入れるだけ (FSWikiLiteの当方拡張プラグインであるbuttonプラグインを利用している)

 {{button ボタンを表す任意の名前,app:アプリのURLスキーム(「:」は書かず)}}　・・・文字のみボタン
 　もしくは
 {{button ボタンを表す任意の名前,app:アプリのURLスキーム(「:」は書かず),アイコン画像URL}}　・・・アイコンボタン
 
 例：{{button pastebot,app:pastebot,http://ana.na.coocan.jp/iphone/upimage/pastebot.png}}

• これをリンクしたい分書き入れればよい (ただしURLスキームを持たないアプリはリンク不可能で作れず、全てのアプリをリンクするというわけにはいかないので注意)
  • ボタン画像のアップロードには当サイトのものを利用して貰って構いません

• 単にボタンを並べるだけでなく、このページのように名前付きで整列させるにはもう少し手を加える必要がある
• このページではFSWikiLiteの、拡張されたテーブル書式を使って整列表示させている (FSWikiLiteの書式について、簡単な説明は当方設置のこちらページを参照)
• ようはテーブルのセル(項目)にボタン(とボタン名)を書き入れて表示させているという事

 ,セル(ボタン),セル(ボタン),セル(ボタン),セル(ボタン)

• テーブルの枠を消したり、表示位置を変えたり等に拡張された書式を利用している (拡張したテーブル書式についての説明は当方設置のこちらページを参照)
• 具体的には以下のような感じで書けばOK

 ,{t},{BORDERS:none}
 ,{c},{BORDER|CENTER|FSIZE:xx-small},{BORDER|CENTER|FSIZE:xx-small},{BORDER|CENTER|FSIZE:xx-small}
 ,"buttonプラグイン{{br}}アプリ名","buttonプラグイン{{br}}アプリ名","buttonプラグイン{{br}アプリ名"

• それぞれについて少し説明
  • 一行目の「,{t},{BORDERS:none}」はテーブル全体に対しての設定で、ボーダー(枠)を無しにしている
  • 二行目の「,{c},{BORDER|CENTER|FSIZE:xx-small}」はテーブルの各セル「列」に対しての設定で、各列毎に設定可能 (逆にいうと、作りたい列の分だけ書く必要がある・上の例では三列)
    • 表示位置やフォントサイズ等複数指定をする場合は「|」で分けて書く
    • 「BORDER」はセルのボーダーラインを無くし、先頭行の場合はタグを「TH」から「TD」に変更する
    • 「CENTER」はセル内の表示位置を中央寄せにする
    • 「FSIZE:〜〜〜」はセル内の文字サイズ指定
  • 三行目からが実際のテーブルセルに表示されるもの。カンマ、セル内容、カンマ、セル内容・・・と作りたいセル分書く。四行、五行・・・と複数行作って並べる事も勿論可能
    • 通常ならカンマとセル内容だけで構わないが、(今回のプラグイン構文等のように)セル内容でカンマを使っている場合はダブルコーテーション( " )でセル内容を挟んで書く必要がある(そうじゃないとテーブルのセルを分けるカンマの扱いになってしまうため)
    • buttonプラグインの書き方は上で説明した通り(ちなみに、buttonプラグインは「ボタン文字,URL,ボタン画像URL(もしくは#からの色コード),ロールオーバー画像URL(もしくは#からの色コード)」を指定可能)。「{{br}}」は改行プラグインで、ボタンの下にアプリ名を表示させるのにこれで改行している

• このページのように背景を黒くして、ページタイトルやヘッダフッタ表示を消したい場合は、以下のものをWikiソースの最初に書き入れる

 {{set_theme iphoneapplauncher}}

• これはページ単位でCSSテーマ(ここでは「iphoneapplauncher.css」)を設定するプラグインで、、、説明は面倒なので省きます(^^;)。CSSテーマはサーバに直接アップロードする必要があり、自由に作って利用する事は出来ません。作ったものを使いたいという場合は、CSSを当サイト管理者(IO)の方でチェックした後に管理者によってアップロードします

• 更に更に、このページのようにタブで切り替えしたいという場合は以下な感じで (タブ3つの場合・実際設置する際は当然説明文省きプラグインのみ書く)

 {{tab_s [1],[2],[3]}}　・・・選択タブになる部分 (Wikiソースの頭の方に書く事になるかと)。[1]等でなく任意の文字でもOK(ジャンル名とか)
 
 {{div_s color,white,page1}}　・・・ここからタブ1の内容。「color,white」は文字色で、CSSに合った見やすいカラーにする
 
 タブ1の文とかボタンとかテーブルとか書き入れる
 
 {{div_e}}　・・・タブ1の内容はここまで
 
 {{div_s color,white,page2}}　・・・ここからタブ2の内容
 
 タブ2の文とかボタンとかテーブルとか書き入れる
 
 {{div_e}}　・・・タブ2の内容はここまで
 
 {{div_s color,white,page3}}　・・・ここからタブ3の内容
 
 タブ3の文とかボタンとかテーブルとか書き入れる
 
 {{div_e}}　・・・タブ3の内容はここまで
 
 {{tab_e 3}}　・・・Wikiソースの一番最後に書く。数字(ここでは3)はタブ数に合わせること

• 1Password(Pro)
• AirSharing
• YouTube
• マップ

作り方説明

• このリスト絡みだけの説明。全体的な作り方はタブ1のところの説明を参考に

• 単にリスト化したいなら、FSWikiLiteのリスト書式でリンクを書くだけでよい。すなわちこんな感じで

 *[1PasswordPro|app:onepassword]
 *[BB2C|app:beebee2seeopen]
 *[fring|app:fring]

• バー化したい場合は「div_s」「div_e」プラグインを使い、CSS(「iphoneapplauncher.css」)に用意してあるクラス定義でリストを囲む。具体的には以下のようにする

 {{div_s class,listlink}}
 *[1PasswordPro|app:onepassword]
 *[BB2C|app:beebee2seeopen]
 *[fring|app:fring]
 {{div_e}}

• タイトル等もバーっぽくしたいなら「listlink」プラグインを書く。背景色は#からの色コードで。表示文を「color:文字色;表示文」にすれば文字色指定も可能。ちなみにnのところをURLにするとリンクになる

 {{listlink 表示文,n,背景色}}
 {{listlink 五十音順,n,#8a9bb1}}

作り方説明

• このプルダウンメニュー絡みだけの説明。全体的な作り方はタブ1のところの説明を参考に

• まずリンク書式についておさらい。FSWikiLiteでリンクは以下のように書く

 [リンクさせる文字|リンク先URL]

• それを当方で独自拡張してあり、アプリリンクに対応させた

 [リンクさせる文字|app:URLスキーム]
 [fring|app:fring]

• Wiki書式だけで移動用プルダウンメニューを作れるようにも独自拡張していて、それは以下のようになっている

 %%,[リンクさせる文字|リンク先URL%%],[リンクさせる文字|リンク先URL%%] ・・・

• で、これもアプリリンクに対応させた。具体的には以下のような感じになる

 %%,[マップ|app:maps%%],[GoogleMobile|app:googleapp%%],[YouTube|app:youtube%%]