トップトップ 新規新規 一覧(更新)一覧(更新) 一覧(名前)一覧(名前) 検索検索 ヘルプヘルプ RSSRSS

iPhoneAppLauncherサンプル1の変更点

[通常ページへ戻る]　[通常差分表示]　[Wikiスタイルで差分表示]　[Wikiスタイルで差分表示(削除の表示無し)]

表記

= 変更なし
+ 追加
- 削除
同一行で追加削除があれば変更。

変更点

  1:= {{set_theme iphoneapplauncher}}
  2:= //de:iPhoneアプリ等のランチャー
  3:= {{anchor top}}
  4:= 
  5:= {{div_s style,text-align:right;font-size:x-small}}
  6:= {{permalink 固定リンク,iPhoneAppLauncherサンプル1@@}} [[(RedirectShortURL)|tp:20100107-171939]]
  7:= {{div_e}}
  8:= 
  9:= 
 10:- iPhoneアプリラウンチャーのサンプルページ。当然iPhoneで見ないと意味ないです(^^;)
 10:+ iPhoneアプリランチャーのサンプルページ。当然iPhoneで見ないと意味ないです(^^;)
 11:= 
 12:- 作った経緯はこちらに書いてあります([[2010/01/08 01:46　iPhoneアプリのラウンチャーを作る - IO -|AppleなBBS]])。このページについて、何かあればタブ6のコメントフォームにどうぞ
 12:+ 作った経緯はこちらに書いてあります([[2010/01/08 01:46　iPhoneアプリのランチャーを作る - IO -|AppleなBBS]])。このページについて、何かあればタブ6のコメントフォームにどうぞ
 13:= 
 14:= {{anchor mokuji}}
 15:= {{tab_s [1],[2],[3],[4],[5],[6]}}
 16:= 
 17:= 
 18:= 
 19:= {{div_s color,white,page1}}
 20:= 
 21:= 通常アイコンボタン
 22:= 
 23:= ,{t},{BORDERS:none}
 24:= ,{c},{BORDER|CENTER|FSIZE:xx-small},{BORDER|CENTER|FSIZE:xx-small},{BORDER|CENTER|FSIZE:xx-small},{BORDER|CENTER|FSIZE:xx-small},{BORDER|CENTER|FSIZE:xx-small}
 25:= ,"{{button bb2c,app:beebee2seeopen,http://ana.na.coocan.jp/iphone/upimage/bb2c.png}}{{br}}BB2C","{{button ipmap,app:maps,http://ana.na.coocan.jp/iphone/upimage/ipmap.png}}{{br}}マップ","{{button googlema,app:googleapp,http://ana.na.coocan.jp/iphone/upimage/googlemobileapp.png}}{{br}}GoogleM","{{button youtube,app:youtube,http://ana.na.coocan.jp/iphone/upimage/youtube.png}}{{br}}YouTube","{{button 1passwordpro,app:onepassword,http://ana.na.coocan.jp/iphone/upimage/1passwordpro.png}}{{br}}1Passw"
 26:= ,"{{button ekitan,app:ekitan,http://ana.na.coocan.jp/iphone/upimage/ekitan.png}}{{br}}駅探","{{button fring,app:fring,http://ana.na.coocan.jp/iphone/upimage/fring.png}}{{br}}fring","{{button natsulion,app:natsulion,http://ana.na.coocan.jp/iphone/upimage/natsulion.png}}{{br}}夏Lion","{{button bcphoto,app:bcphoto,http://ana.na.coocan.jp/iphone/upimage/photoshare.png}}{{br}}PhotoShare","{{button skype,app:skype,http://ana.na.coocan.jp/iphone/upimage/skype.png}}{{br}}Skype"
 27:= ,"{{button twitbird,app:twitbird,http://ana.na.coocan.jp/iphone/upimage/twitbirdpre.png}}{{br}}TwitBird","{{button evernote,app:evernote,http://ana.na.coocan.jp/iphone/upimage/evernote.png}}{{br}}Evernote","{{button ixpenseit,app:ix,http://ana.na.coocan.jp/iphone/upimage/ixpenseit.png}}{{br}}iXpenseIt","{{button pastebot,app:pastebot,http://ana.na.coocan.jp/iphone/upimage/pastebot.png}}{{br}}Pastebot"
 28:= 
 29:= 
 30:= 
 31:= 
 32:= {{br}}
 33:= 
 34:= 
 35:= 
 36:= {{oritatami iconbmake1,簡単に作り方説明}}
 37:= 
 38:= {{div_s display,none,iconbmake1}}
 39:= 
 40:= {{span color,red,作り方説明}}
 41:= 
 42:= *Wikiページを新たに作る
 43:= **このWikiは開かれたWikiですので自由にページを作って利用して貰って構いません。ただし、テストとして一時的に試しただけ(少しの回数しか利用されてない)、宣伝やスパムに利用している、それらのように思われるページは一定の経過を見た後に管理者権限により削除する事があります
 44:= ***ソースはサーバに自動保存されているので、削除後復元する事は可能
 45:= *Wikiページソースを編集する (最初は何もない状態)
 46:= *単にボタンだけで良いなら、以下の文を書き入れるだけ (FSWikiLiteの当方拡張プラグインであるbuttonプラグインを利用している)
 47:=  {{button ボタンを表す任意の名前,app:アプリのURLスキーム(「:」は書かず)}}　・・・文字のみボタン
 48:=  　もしくは
 49:=  {{button ボタンを表す任意の名前,app:アプリのURLスキーム(「:」は書かず),アイコン画像URL}}　・・・アイコンボタン
 50:=  
 51:=  例：{{button pastebot,app:pastebot,http://ana.na.coocan.jp/iphone/upimage/pastebot.png}}
 52:= *これをリンクしたい分書き入れればよい (ただしURLスキームを持たないアプリはリンク不可能で作れず、全てのアプリをリンクするというわけにはいかないので注意)
 53:= **ボタン画像のアップロードには[当サイトのもの|http://ana.na.coocan.jp/iphone/image.cgi@@]を利用して貰って構いません
 54:= {{br}}
 55:= 
 56:= *単にボタンを並べるだけでなく、このページのように名前付きで整列させるにはもう少し手を加える必要がある
 57:= *このページではFSWikiLiteの、拡張されたテーブル書式を使って整列表示させている (FSWikiLiteの書式について、簡単な説明は当方設置の[こちらページ|http://ana.na.coocan.jp/fswiki-l/wiki.cgi?p=ANA%2DNOTE+Help+%28%BD%F1%BC%B0%CA%D4%29@@]を参照)
 58:= *ようはテーブルのセル(項目)にボタン(とボタン名)を書き入れて表示させているという事
 59:=  ,セル(ボタン),セル(ボタン),セル(ボタン),セル(ボタン)
 60:= 
 61:= {{br}}
 62:= 
 63:= *テーブルの枠を消したり、表示位置を変えたり等に拡張された書式を利用している (拡張したテーブル書式についての説明は当方設置の[こちらページ|http://ana.na.coocan.jp/fswiki-l/wiki.cgi?p=%A5%C6%A1%BC%A5%D6%A5%EB%B3%C8%C4%A5%A5%D7%A5%E9%A5%B0%A5%A4%A5%F3%A5%C6%A5%B9%A5%C8@@]を参照)
 64:= *具体的には以下のような感じで書けばOK
 65:=  ,{t},{BORDERS:none}
 66:=  ,{c},{BORDER|CENTER|FSIZE:xx-small},{BORDER|CENTER|FSIZE:xx-small},{BORDER|CENTER|FSIZE:xx-small}
 67:=  ,"buttonプラグイン{{br}}アプリ名","buttonプラグイン{{br}}アプリ名","buttonプラグイン{{br}アプリ名"
 68:= *それぞれについて少し説明
 69:= **一行目の「,{t},{BORDERS:none}」はテーブル全体に対しての設定で、ボーダー(枠)を無しにしている
 70:= **二行目の「,{c},{BORDER|CENTER|FSIZE:xx-small}」はテーブルの各セル「列」に対しての設定で、各列毎に設定可能 (逆にいうと、作りたい列の分だけ書く必要がある・上の例では三列)
 71:= ***表示位置やフォントサイズ等複数指定をする場合は「|」で分けて書く
 72:= ***「BORDER」はセルのボーダーラインを無くし、先頭行の場合はタグを「TH」から「TD」に変更する
 73:= ***「CENTER」はセル内の表示位置を中央寄せにする
 74:= ***「FSIZE:〜〜〜」はセル内の文字サイズ指定
 75:= **三行目からが実際のテーブルセルに表示されるもの。カンマ、セル内容、カンマ、セル内容・・・と作りたいセル分書く。四行、五行・・・と複数行作って並べる事も勿論可能
 76:= ***通常ならカンマとセル内容だけで構わないが、(今回のプラグイン構文等のように)セル内容でカンマを使っている場合はダブルコーテーション( " )でセル内容を挟んで書く必要がある(そうじゃないとテーブルのセルを分けるカンマの扱いになってしまうため)
 77:= ***buttonプラグインの書き方は上で説明した通り(ちなみに、buttonプラグインは「ボタン文字,URL,ボタン画像URL(もしくは#からの色コード),ロールオーバー画像URL(もしくは#からの色コード)」を指定可能)。「{{void {{br}}}}」は改行プラグインで、ボタンの下にアプリ名を表示させるのにこれで改行している
 78:= 
 79:= {{br}}
 80:= 
 81:= *このページのように背景を黒くして、ページタイトルやヘッダフッタ表示を消したい場合は、以下のものをWikiソースの最初に書き入れる
 82:=  {{set_theme iphoneapplauncher}}
 83:= **これはページ単位でCSSテーマ(ここでは「iphoneapplauncher.css」)を設定するプラグインで、、、説明は面倒なので省きます(^^;)。CSSテーマはサーバに直接アップロードする必要があり、自由に作って利用する事は出来ません。作ったものを使いたいという場合は、CSSを当サイト管理者(IO)の方でチェックした後に管理者によってアップロードします
 84:= 
 85:= *更に更に、このページのようにタブで切り替えしたいという場合は以下な感じで (タブ3つの場合・実際設置する際は当然説明文省きプラグインのみ書く)
 86:= 
 87:=  {{tab_s [1],[2],[3]}}　・・・選択タブになる部分 (Wikiソースの頭の方に書く事になるかと)。[1]等でなく任意の文字でもOK(ジャンル名とか)
 88:=  
 89:=  {{div_s color,white,page1}}　・・・ここからタブ1の内容。「color,white」は文字色で、CSSに合った見やすいカラーにする
 90:=  
 91:=  タブ1の文とかボタンとかテーブルとか書き入れる
 92:=  
 93:=  {{div_e}}　・・・タブ1の内容はここまで
 94:=  
 95:=  {{div_s color,white,page2}}　・・・ここからタブ2の内容
 96:=  
 97:=  タブ2の文とかボタンとかテーブルとか書き入れる
 98:=  
 99:=  {{div_e}}　・・・タブ2の内容はここまで
100:=  
101:=  {{div_s color,white,page3}}　・・・ここからタブ3の内容
102:=  
103:=  タブ3の文とかボタンとかテーブルとか書き入れる
104:=  
105:=  {{div_e}}　・・・タブ3の内容はここまで
106:=  
107:=  {{tab_e 3}}　・・・Wikiソースの一番最後に書く。数字(ここでは3)はタブ数に合わせること
108:= 
109:= 
110:= 
111:= //設置説明折りたたみ部分終了
112:= {{div_e}}
113:= 
114:= 
115:= 
116:= 
117:= {{div_e}}
118:= 
119:= 
120:= 
121:= 
122:= 
123:= {{div_s color,white,page2}}
124:= 
125:= デカいアイコンボタン(iPhoneで見ると画面に一つだけ表示されると思う)。不慣れな利用者用に分かりやすく
126:= 
127:= {{anchor app001,最初のアプリへ,g}}
128:= 
129:= {{oritatami appanc,リスト表示／非表示}}
130:= 
131:= {{div_s display,none,appanc}}
132:= 
133:= *{{anchor app001,1Password(Pro),g}}
134:= *{{anchor app002,AirSharing,g}}
135:= *{{anchor app003,YouTube,g}}
136:= *{{anchor app004,マップ,g}}
137:= 
138:= 
139:= {{div_e}}
140:= 
141:= {{br 5}}
142:= 
143:= 
144:= 
145:= {{anchor app001}}
146:= 
147:= {{br 4}}
148:= 
149:= ,{t},{CENTER|BORDERS:none}
150:= ,{c},{BORDER},{BORDER|CENTER|FSIZE:large},{BORDER},{BORDER},{BORDER}
151:= ,"{{anchor app004,http://ana.na.coocan.jp/iphone/sozai/blue_larrow_64.png,p}}","{{button 1passwordp,app:onepassword,http://ana.na.coocan.jp/iphone/upimage/1passwordpro_b.png}}{{br}}1Password(Pro)","{{anchor app002,http://ana.na.coocan.jp/iphone/sozai/blue_rarrow_64.png,p}}"
152:= ,,"{{anchor top,http://ana.na.coocan.jp/iphone/sozai/blue_uarrow_64.png,p}}"
153:= 
154:= {{br 4}}
155:= 
156:= 
157:= 
158:= {{anchor app002}}
159:= 
160:= {{br 4}}
161:= 
162:= ,{t},{CENTER|BORDERS:none}
163:= ,{c},{BORDER},{BORDER|CENTER|FSIZE:large},{BORDER},{BORDER},{BORDER}
164:= ,"{{anchor app001,http://ana.na.coocan.jp/iphone/sozai/blue_larrow_64.png,p}}","{{button airsharing,app:airsharing,http://ana.na.coocan.jp/iphone/upimage/airsharing_b.png}}{{br}}AirSharing","{{anchor app003,http://ana.na.coocan.jp/iphone/sozai/blue_rarrow_64.png,p}}"
165:= ,,"{{anchor top,http://ana.na.coocan.jp/iphone/sozai/blue_uarrow_64.png,p}}"
166:= 
167:= {{br 4}}
168:= 
169:= 
170:= 
171:= {{anchor app003}}
172:= 
173:= {{br 4}}
174:= 
175:= ,{t},{CENTER|BORDERS:none}
176:= ,{c},{BORDER},{BORDER|CENTER|FSIZE:large},{BORDER},{BORDER},{BORDER}
177:= ,"{{anchor app002,http://ana.na.coocan.jp/iphone/sozai/blue_larrow_64.png,p}}","{{button youtube,app:youtube,http://ana.na.coocan.jp/iphone/upimage/youtube_b.png}}{{br}}YouTube","{{anchor app004,http://ana.na.coocan.jp/iphone/sozai/blue_rarrow_64.png,p}}"
178:= ,,"{{anchor top,http://ana.na.coocan.jp/iphone/sozai/blue_uarrow_64.png,p}}"
179:= 
180:= {{br 4}}
181:= 
182:= 
183:= 
184:= {{anchor app004}}
185:= 
186:= {{br 4}}
187:= 
188:= ,{t},{CENTER|BORDERS:none}
189:= ,{c},{BORDER},{BORDER|CENTER|FSIZE:large},{BORDER},{BORDER},{BORDER}
190:= ,"{{anchor app003,http://ana.na.coocan.jp/iphone/sozai/blue_larrow_64.png,p}}","{{button ipmap,app:maps,http://ana.na.coocan.jp/iphone/upimage/ipmap_b.png}}{{br}}マップ","{{anchor app001,http://ana.na.coocan.jp/iphone/sozai/blue_rarrow_64.png,p}}"
191:= ,,"{{anchor top,http://ana.na.coocan.jp/iphone/sozai/blue_uarrow_64.png,p}}"
192:= 
193:= {{br 4}}
194:= 
195:= 
196:= 
197:= 
198:= 
199:= 
200:= 
201:= 
202:= {{br 10}}
203:= 
204:= {{div_e}}
205:= 
206:= 
207:= 
208:= 
209:= 
210:= 
211:= {{div_s color,white,page3}}
212:= 
213:= 名前のみボタン。沢山置けそう
214:= 
215:= {{button BB2C,app:beebee2seeopen}} {{button マップ,app:maps}} {{button GoogleMobile,app:googleapp}} {{button YouTube,app:youtube}} {{button 1PasswordPro,app:onepassword}} {{button 駅探,app:ekitan}} {{button fring,app:fring}} {{button 夏ライオン,app:natsulion}} {{button PhotoShare,app:bcphoto}} {{button Skype,app:skype}} {{button TwitBird,app:twitbird}}
216:= 
217:= 
218:= 
219:= {{div_e}}
220:= 
221:= 
222:= 
223:= 
224:= 
225:= 
226:= {{div_s color,white,page4}}
227:= 
228:= リスト
229:= 
230:= 
231:= {{listlink 五十音順,n,#8a9bb1}}
232:= {{div_s class,listlink}}
233:= *[1PasswordPro|app:onepassword]
234:= *[BB2C|app:beebee2seeopen]
235:= *[fring|app:fring]
236:= *[GoogleMobile|app:googleapp]
237:= *[PhotoShare|app:bcphoto]
238:= *[Skype|app:skype]
239:= *[TwitBird|app:twitbird]
240:= *[YouTube|app:youtube]
241:= *[駅探|app:ekitan]
242:= *[夏ライオン|app:natsulion]
243:= *[マップ|app:maps]
244:= {{div_e}}
245:= 
246:= {{br}}
247:= 
248:= {{oritatami iconbmake4,簡単に作り方説明}}
249:= 
250:= {{div_s display,none,iconbmake4}}
251:= 
252:= {{span color,red,作り方説明}}
253:= 
254:= *このリスト絡みだけの説明。全体的な作り方はタブ1のところの説明を参考に
255:= 
256:= *単にリスト化したいなら、FSWikiLiteのリスト書式でリンクを書くだけでよい。すなわちこんな感じで
257:=  *[1PasswordPro|app:onepassword]
258:=  *[BB2C|app:beebee2seeopen]
259:=  *[fring|app:fring]
260:= 
261:= *バー化したい場合は「div_s」「div_e」プラグインを使い、CSS(「iphoneapplauncher.css」)に用意してあるクラス定義でリストを囲む。具体的には以下のようにする
262:=  {{div_s class,listlink}}
263:=  *[1PasswordPro|app:onepassword]
264:=  *[BB2C|app:beebee2seeopen]
265:=  *[fring|app:fring]
266:=  {{div_e}}
267:= 
268:= *タイトル等もバーっぽくしたいなら「listlink」プラグインを書く。背景色は#からの色コードで。表示文を「color:文字色;表示文」にすれば文字色指定も可能。ちなみにnのところをURLにするとリンクになる
269:=  {{listlink 表示文,n,背景色}}
270:=  {{listlink 五十音順,n,#8a9bb1}}
271:= 
272:= 
273:= //設置説明折りたたみ部分終了
274:= {{div_e}}
275:= 
276:= 
277:= 
278:= 
279:= 
280:= {{div_e}}
281:= 
282:= 
283:= 
284:= 
285:= 
286:= 
287:= {{div_s color,white,page5}}
288:= 
289:= プルダウンメニュー
290:= 
291:= %%,[BB2C|app:beebee2seeopen%%],[マップ|app:maps%%],[GoogleMobile|app:googleapp%%],[YouTube|app:youtube%%],[1PasswordPro|app:onepassword%%],[駅探|app:ekitan%%],[fring|app:fring%%],[夏ライオン|app:natsulion%%],[PhotoShare|app:bcphoto%%],[Skype|app:skype%%],[TwitBird|app:twitbird%%]
292:= 
293:= 
294:= {{br}}
295:= 
296:= {{oritatami iconbmake5,簡単に作り方説明}}
297:= 
298:= {{div_s display,none,iconbmake5}}
299:= 
300:= {{span color,red,作り方説明}}
301:= 
302:= *このプルダウンメニュー絡みだけの説明。全体的な作り方はタブ1のところの説明を参考に
303:= 
304:= *まずリンク書式についておさらい。FSWikiLiteでリンクは以下のように書く
305:=  [リンクさせる文字|リンク先URL]
306:= *それを当方で独自拡張してあり、アプリリンクに対応させた
307:=  [リンクさせる文字|app:URLスキーム]
308:=  [fring|app:fring]
309:= *Wiki書式だけで移動用プルダウンメニューを作れるようにも独自拡張していて、それは以下のようになっている
310:=  %%,[リンクさせる文字|リンク先URL%%],[リンクさせる文字|リンク先URL%%] ・・・
311:= *で、これもアプリリンクに対応させた。具体的には以下のような感じになる
312:=  %%,[マップ|app:maps%%],[GoogleMobile|app:googleapp%%],[YouTube|app:youtube%%]
313:= 
314:= 
315:= 
316:= //設置説明折りたたみ部分終了
317:= {{div_e}}
318:= 
319:= 
320:= 
321:= 
322:= 
323:= 
324:= {{div_e}}
325:= 
326:= 
327:= 
328:= 
329:= 
330:= {{div_s color,white,page6}}
331:= 
332:= コメントフォーム
333:= 
334:= {{form form/ipcomm01,formrec/normal05,iPhoneAppラウンチコメ1,iPhoneAppLauncherサンプル1,iPhoneAppLauncherサンプル1#page6}}
335:- *{{new 1262944312}}そのような事からすると、ラウンチャーとしてバリバリ使えるというには程遠いですね。。。まあでも全く無いよりはマシという事で(^^;)、私自身は自分専用のラウンチャーページを作って活用したいと思ってます(そのフィードバックは[[ランチャー]]のページに随時していきます) - IO (2010年01月08日 18時51分52秒){{br 2}}
335:+ *{{new 1262944312}}そのような事からすると、ランチャーとしてバリバリ使えるというには程遠いですね。。。まあでも全く無いよりはマシという事で(^^;)、私自身は自分専用のランチャーページを作って活用したいと思ってます(そのフィードバックは[[ランチャー]]のページに随時していきます) - IO (2010年01月08日 18時51分52秒){{br 2}}
336:= *{{new 1262944078}}難点としては、全てのアプリが立ち上げられるわけではなく、URLスキームを設定してあるものに限られる事(URLスキームを持っているアプリは多くはない事)。それとURLスキームを見つけ出すのに、ネットから情報を探すか、ipaBacklistのような所有アプリのURLスキームを洗い出すツールを使わなければならない事でしょうか - IO (2010年01月08日 18時47分58秒){{br 2}}
337:= *{{new 1262943508}}ご意見どうもです。よく使うのはホームの最初の方に置いといてタップした方が早いので、そんな感じですかね。それと私のようにホームに入りきれない程アプリ入れてるなら、Spotlightでアプリ名入れて探して立ち上げるという事から解放されるのがありがたく(探せればまだいいんですが、入れてあったか分からなかったり、入れてあっても呼び出し名が違って出て来ない事も) - IO (2010年01月08日 18時38分28秒){{br 2}}
338:= *{{new 1262876900}}普段は使わないけど、入れてあるツールとかに利用できるかな。 - gan (2010年01月08日 00時08分20秒){{br 2}}
339:= *{{new 1262870138}}ただ、ページを作るのにWikiの編集の仕方を多少知らないとダメですね。専用のフォームから簡単に作れるようにする事も可能ですが、結局作ったページのメンテナンスにはWikiソースをいじらなければならず。私の方で分からないところを代わりに作ったり教えたりする事は可能ですので、言って貰えれば手伝います - IO (2010年01月07日 22時15分38秒){{br 2}}
340:= *{{new 1262869956}}この仕組みを使って各人専用のアプリ起動ページを作り、それをホーム画面に追加して利用して貰って構いません - IO (2010年01月07日 22時12分36秒){{br 2}}
341:= *{{new 1262869529}}まだ試し中。これで多数のiPhoneアプリがあっても少しはたちあげやすくなるかも - IO (2010年01月07日 22時05分29秒){{br 2}}
342:= 
343:= {{br 3}}
344:= 
345:= {{div_e}}
346:= 
347:= 
348:= 
349:= 
350:= {{anchor bottom}}
351:= 
352:= {{tab_e 6}}