[3219] WebデザイナーでもiPhoneアプリを!

投稿:  著者:  読了時間:23分(本文:約11,400文字)


《仕事の都合でPDFのJavaScriptを再び学習中》

■明日もデザインで食べていこう![30]
 WebデザイナーでもiPhoneアプリを!──はじめてのTitanium Studio(1)
 秋葉秀樹

■クリエイター手抜きプロジェクト[308]Adobe Photoshop CS3/CS4/CS5編
 画像をアスキーアートにする
 古籏一浩

--PR------------------------------------------------------------------
★吉田印刷所が電子書籍販売サイト「印刷の泉」をオープンしました
https://www.ddc.co.jp/estore/ ≪≪≪

刷 ●オリジナルの電子書籍・デジタルコンテンツを自由に販売可能
の ●販売価格は50円〜設定可能なので小さなコンテンツでも対応可能

★デザイン・印刷・製本・DTPなどの印刷関係コンテンツ専門のサイトです
-----------------------------------------------------------------PR---




━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
■明日もデザインで食べていこう![30]
WebデザイナーでもiPhoneアプリを!──はじめてのTitanium Studio(1)

秋葉秀樹
< http://bn.dgcr.com/archives/20120305140200.html >
───────────────────────────────────
こんにちは、秋葉です。今回から数回にわたって、Titanium Studioを使って簡単なiPhoneアプリを作ってみたいと思います。iPhoneアプリの導入から、簡単なプログラムを使って、最後はiPhoneのカメラで撮影した写真をサーバに投稿して地図に配置します。

前提として、最後は実機のカメラ使うのですが、iPhoneのシミュレータだと撮影ができないので、撮影以降はiPhone実機を使わないといけません。そのためにはiOS Developer Program(有料)に参加している必要があります。

ひとまず簡単なデモなら、iPhoneシミュレータだけでOKです。つまりアプリを実機で試す前までは、わざわざお金を払って勉強する必要はありません。数回にわたってやってみようと思った方は、自己責任でiOS Developer Programに登録してください。

最後の回あたりでは簡単なPHPプログラムの紹介もして、サンプルアプリを通じて、全体の流れがわかるまでの理解を深めましょう。

本記事はWebデザイナーの方向けなので、プログラム言語が分からない方を対象としています。

iPhoneのアプリは、Xcodeという開発環境で開発しプログラム言語はObjective-Cという言語が必要です。これらの言語や環境は、Webデザイナーにとって最初の敷居が高いため、始めるにはなかなかの覚悟がいるのですが、Titanium StudioはJavaScriptを使って開発できるので、それに多少慣れて方にとってはスキルを活かせるメリットがあります。

しかも、Titanium Studio自体が開発環境になっているので、他の環境をあまり必要としません。コードヒントも充実しているので、スクリプトを学習して少しでも慣れてきたらその便利さが分かるでしょう。

私はMacを使っているので、その流れで解説します。前提として、iPhoneシミュレーターがインストールされているとして、今回の記事では実機は使わずにシミュレーターを使って表示の確認を行っていきます。

◎導入

まずは公式サイトにアクセスして、アプリケーションをダウンロードします。
< http://www.appcelerator.com/products/titanium-studio/ >
から右上のボタン(Download Titanium)

さらにアカウントを作ります
→ < http://akibahideki.com/digicre/20120305/fig-01.png >

さて、テスト実行までに大まかな流れですが、まずはここまで進むことを目標にしましょう。

1)ダウンロード/インストール
2)新規プロジェクト(Create Projectボタンを押す)
3)プロジェクトの種類を選択(Titanium Mobile Projectを選択)
4)新規プロジェクトの設定(名前、App idを決める)

では、ここまでの流れを細かく見てみましょう。

1)ダウンロード/インストール

進んでいくとダウンロードが可能なので、そのままインストールまで行います(このあたりの手順は他のダウンロード→インストールとそんなに変わりありません)。インストールが終わったらまずはアプリを起動します。

2)新規プロジェクト(Create Projectボタンを押す)

アプリを一つ作るたびに「プロジェクトを作る」という考え方を覚えておきましょう。

ここで新規プロジェクトを作ると、Titanium Studioで作るアプリのデータなどがどこに保存されるか、指定をします。プロジェクトの場所はプロジェクトごとに変えることも出来ますが、慣れないうちは同じフォルダの中で複数のプロジェクトを作っていってもいいでしょう。

画面左にCreate Projectボタンがあるので、それをクリックし、設定画面に入ります。
→ < http://akibahideki.com/digicre/20120305/fig-02.png >

3)プロジェクトの種類を選択(Titanium Mobile Projectを選択)

ここで図の通り色々な種類のプロジェクトがあるので、「Titanium Mobile Project」を選択して進みます。
→ < http://akibahideki.com/digicre/20120305/fig-03.png >

4)新規プロジェクトの設定(名前、App idを決める)

初めて使う人は、おそらくここでスムーズに進まないことがあります。図ではあえてAndroidのSDKをインストールしていないので、画面の上部に「Missing the Android SDK」と表示されているのが分かるでしょう。 Android SDKがインストールされていない、あるいはTitanium Studioが認識していないとこう出ます。

iPhoneアプリ開発には、iOSのSDKをインストールしていないとこの先に進めません。

インストール手段は色々と記事にされていますが、何となく一番やりやすかったのが、この新規プロジェクトの設定ウインドウ内「Set-up/Configure SDKs」のリンクをクリックしてiOSの欄にある「Configure」ボタンを押してみると、背面のウインドウ「Dashboard」内に、SDKをダウンロードできるボタンが見えます。

このあたりの流れに従って進めていってください(ダウンロードにはある程度時間がかかります。コーヒーでも飲んで待ちましょう)。私の経験上ですが、SDKをダウンロードしてインストールしたら、Titanium Studioも再起動したほうが良さそうです。

さて、無事SDKもインストールが出来たら、もう一度新規プロジェクトを設定します。先ほどのプロジェクトの画面でProject nameに「test_project」としてApp Idに「test_id」としておきましょう。

本来はもっと色々な設定があるのですが、今回はこの2つだけ入力して「Finish」ボタンを押します。新規プロジェクトのフォルダが作られたりしています。
→ < http://akibahideki.com/digicre/20120305/fig-04.png >

ウインドウの中にコードを記述できるタブ「app.js」が見えると思います。これがTitanium Studioでアプリを作るために、私たちがコードを打ち込むJavaScriptファイルとなります。
→ < http://akibahideki.com/digicre/20120305/fig-05.png >

さていよいよ実行してみましょう! 画面上部の緑色の再生ボタン、あるいは上部メニュー「Run」→「Run」を押して実行させます。すると初回は「どのシミュレータを使いますか?」と聞かれますので、iPhone Simulatorを選択しましょう。
→ < http://akibahideki.com/digicre/20120305/fig-06.png >

画面の下に文字が色々と表示されますが、しばらく待っているとiPhoneシミュレータが起動して、Titaniumで最初から用意されているアプリが立ち上がると成功です。
→ < http://akibahideki.com/digicre/20120305/fig-07.png >

マシンの種類などにもよりますが、30秒近くかかったかもしれません。これは最初だけ、アプリに必要なファイルを書き出すので、2度目からはここまで時間はかからないでしょう。

2度目以降にうまく実行できない、あるいはエラーが起こるといった場合、プロジェクトのフォルダを見て、「build」以下のファイルをすべて削除するとうまくいくケースがあります。
→ < http://akibahideki.com/digicre/20120305/fig-08.png >

ここまでできたらまずは一安心。Titanium Studioでは学習しやすいように、新規プロジェクトを立ち上げると、基本のプログラムがもうすでに用意された状態で学習が始められるような親切設計になっています。

アプリを見てみましょう。画面下のタブにはtab1、tab2が用意されていて、どうやら2画面をタブによって切り替えられるようなアプリのようになっています。私たちはここから改造していったらいいんですね。

◎プログラムをちょっと触ってみよう

ここからはJavaScriptをはじめ、プログラム未経験の方のための解説となります。app.jsを見ましょう。

●タブを調べてみる

5行目、
var tabGroup = Titanium.UI.createTabGroup();

とありますが、これはアプリ下部(※)に出ているタブをまとめる機能だと思ってください。タブの場合、まずはグループを作って、その中に個別のタブを追加するという流れが一般的です。
※(iPhoneの場合は下部、Androidの場合は基本上部に表示されます)

var tabGroup とは「変数を宣言しますよ」というもので、その中にタブのグループが代入されています。

15行目に var tab1 = Titanium.UI.createTab({ ...とありますが、これが、個別のタブ設定です。

さらに38行目にもvar tab2 = Titanium.UI.createTab({ ...とありますので、結局2つのタブを作っているわけです。

2つタブの設定ができました。ところがこれではまだ表示されません。

59行目以降のプログラムを見ると、
tabGroup.addTab(tab1);
tabGroup.addTab(tab2);

// open tab group
tabGroup.open();

となっています。タブグループにaddTab、つまり追加して、そのグループをopenすることで使えるようになる、といった流れとなります。

●文字を入れ替えてみる

21行目を見てみましょう。

var label1 = Titanium.UI.createLabel({
color:'#999',
text:'I am Window 1',
font:{fontSize:20,fontFamily:'Helvetica Neue'},
textAlign:'center',
width:'auto'
});

今度はタブではなく、ラベル(つまり文字を表示する場所のような)の設定をしています。Titanium.UI.createLabelの中には、それぞれ文字を表示する設定がしてあります。

なんとなく、WebデザイナーとしてはCSSを彷彿させられる気がしますが、多分みただけで「意味」はわかると思います。つまりCSSが分かっている方ならなんとなく理解できるレベルですね。

text:'I am Window 1'の中の文字を変更しましょう。
「はじめてのiPhoneアプリ」と入れ替えましょう。
どうせなら、色も変えましょう。

var label1 = Titanium.UI.createLabel({
color:'#f00',
text:'はじめてのiPhoneアプリ',
font:{fontSize:20,fontFamily:'Helvetica Neue'},
textAlign:'center',
width:'auto'
});

colorとtextだけ変更しました、コマンド+Sでapp.jsを保存します。実行しましょう。
→ < http://akibahideki.com/digicre/20120305/fig-09.png >

さて、次回はこのプログラムを少しずつ変えていき、カスタマイズしていきましょう。

【あきば・ひでき】hidetaro7@gmail.com
< http://www.akibahideki.com/blog/ >

テクニカルディレクター・デザイナー。DTP黎明期からグラフィックデザインを学び、東京都営団地下鉄など交通広告を多数手がける。同時に音楽活動も活発に行い、西日本半全国ツアーなどを展開、某専門学校のテーマソングを作詞作曲、編曲から楽器全てを演奏してレコーディングするなど、マルチなクリエイティブ活動も。最近では東京と大阪の教育施設などで講師業をも務める。HTML CSS JavaScript Flash ActionScript 3DCG Movie DTP GraphicDesign......多種スキルを持つ。Web標準技術だけに執着せず、すべてのメディアで説得力のある表現にチカラを注ぎたい、そんな仕事をしたい。

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
■クリエイター手抜きプロジェクト[308]Adobe Photoshop CS3/CS4/CS5編
画像をアスキーアートにする

古籏一浩
< http://bn.dgcr.com/archives/20120305140100.html >
───────────────────────────────────
今回のスクリプトは、何10年も前からある「画像をアスキーアートにする」ものです。1970〜80年代初頭までは、画像を文字にしてラインプリンタで出力して表現するという手法がありました。

当時のラインプリンタは、改行とは別にプリンタヘッドを左端に戻すことができ、それを利用して文字を重ね打つことで濃淡を表現していました。今でも文字がメインの掲示板などでは、アスキーアートが使われていたりします。

以下のスクリプトは、もっとも単純なもので画像をグレースケールに変換し、その値に応じて対応する文字として出力します。


// 画像をW×Hの文字で表現する
(function(){
// サイズ
var w = 64;
var h = 64;
// 文字で輝度を表現する
var chr = [ " ",".","・","+","%","#","*","■"];
var imgFile = File.openDialog("画像ファイルを選択してください", "*");
if(!imgFile){ return; } // キャンセルされたら何もしない
var ascFile = File.saveDialog("保存するテキストファイル名を入れてください");
if (!ascFile){ return; }
var flag = ascFile.open("w"); // 書き込みモードで開く
if (!flag){
alert("ファイルが書き込めないようです");
return;
}
ascFile.encoding = "utf-8";
preferences.rulerUnits = Units.PIXELS; // 単位をピクセルに設定
app.open(imgFile);
var docObj = app.activeDocument;
docObj.resizeImage(w, h); // 指定されたサイズにする
docObj.changeMode (ChangeMode.GRAYSCALE);
for(var y=0; y<h; y++){
var txt = "";
for(var x=0; x<w; x++){
// ピクセル輝度を読み出し文字数で除算
var g = Math.floor(getPixel(x,y) / (256/chr.length));
txt = txt + chr[g]; // 対応する文字を連結
}
ascFile.writeln(txt);
}
docObj.close(SaveOptions.DONOTSAVECHANGES);
//---------------------------------------------
// ピクセルの輝度を取得する(8bitモード専用)
//---------------------------------------------
function getPixel(x,y){
docObj.selection.select([[x,y],[x+1,y],[x+1,y+1],[x,y+1],[x,y]]);
var data = docObj.channels[0].histogram;
for (var i=0; i<256; i++) { if (data[i] > 0) return i; }
}
})();

アスキーアートのサイズを変えるには

var w = 64;
var h = 64;

の値を調整してください。wの部分が横幅、hの部分が縦幅になります。また、濃淡に関しては以下の行にある文字を変更してください。なお、必ずしも8段階や16段階である必要はなく、以下のchr=[]の[]内に書かれた文字数に合わせて自動的に調整されます。つまり好きな段階の濃淡表現を行うことができます。

var chr = [ " ",".","・","+","%","#","*","■"];



【古籏一浩】openspc@alpha.ocn.ne.jp
< http://www.openspc2.org/ >

仕事の都合でPDFのJavaScriptを再び学習中。最新のリファレンスとかはないけど、それでも非常に多機能。PDFのJavaScriptが動作するビューアーは限られますが、意外なことにブラウザであるGoogle Chromeが対応してました。全部ではありませんが。

・毎度おなじみASCII.jpの連載
「Navigation Timing APIでサイトパフォーマンスを調査」
< http://ascii.jp/elem/000/000/675/675568/ >

・クリエイター手抜きプロジェクト【2011年分まで用意しました】
< http://www.openspc2.org/projectX/ >

・Google API Expertが解説するHTML5ガイドブック【増刷だそうで】
< http://www.amazon.co.jp/dp/4844329278/ >

・JavaScriptテクニックブック【これも増刷】
< http://www.amazon.co.jp/dp/4903111520/ >

・改訂5版JavaScriptポケットリファレンス
< http://www.amazon.co.jp/dp/4774148199 >

・10日で覚えるHTML5入門教室
< http://www.amazon.co.jp/dp/4798124184 >

・ハイビジョン映像素材集
< http://www.openspc2.org/HDTV/ >

・PIXTA【PIXTAでも映像素材を販売中】
< http://pixta.jp/movie/ >

・Adobe Illustrator CS3 + JavaScript 自動化サンプル集
< http://www.openspc2.org/book/PDF/Adobe_Illustrator_CS3_JavaScript_Book/ >
吉田印刷所の「印刷の泉」でも購入できるようになりました。

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
■編集後記(03/05)

・テレビシリーズ「V」のファースト・シーズン12話を見た。20年以上前にテレビで放映された「V」のリメイクである。世界の主要都市上空に出現した巨大宇宙船、それはエイリアンの来訪であった。人間とそっくりの外形をもつ彼らは、圧倒的な科学力を見せつけながら人類との平和的な交流を提案する。彼らはビジター(Visitor)と呼ばれ人類の期待と信頼を集めるが、もちろん平和的ポーズはまやかしで、はるか以前から着々と進めてきた地球侵略の最終段階なのである。ビジターのリーダーは若く美しい女性の外見を持つが、トカゲ型エイリアンが人間の皮をかぶっているのだ。ドラマを見ている人はみんな知っている(笑)。人類はエイリアンに征服されてしまうのか、それとも撃退できるのか。その攻防戦の物語はおもしろくないはずはない。ところが、かなりイージーなところもある。人類の側でビジターに対抗するのはいまのところFBI捜査官、神父、テロリスト、先行して地球に侵入していたビジターの反逆者(=人類の味方)らで、いくらなんでも少な過ぎるだろう。彼らレジスタンスのかなりラフで目立つな行動や、傍受されるのが必至の携帯電話が連絡手段というのでは、すべてビジターに筒抜けになってもおかしくないだろう。ドラマとして非常にわかりやすいが、そんなご都合主義の展開があっていいのか、なんて思うことも度々。いいビジター、悪いビジターが容貌でほぼわかってしまうのはいいけど。
旧作をかなり熱心に見た覚えはあるが、結末を知らないのは途中で飽きてしまったのかもしれない。今回もなんだかそうなりそうな気がするが、2シーズン・10話で終わるらしいので我慢しようかなあ。気持ちよい終わり方してくれるのだろうか。途中で打ち切られたという話もあるので心配。(柴田)
< http://wwws.warnerbros.co.jp/v-visitor-dvd/mainsite/# >
V公式サイト

・まさか宝塚で聞けるとは。ショーの一場面。お姫様らしき人が悪い魔法使いのような人に囚われる。ライトセーバーを振り回し、奪回しようとする娘役トップ。勇ましいお衣装で、立ち回りをする......たぶん。すぐに記憶が飛んだ。曲のイントロを聞いて、そっくりだわーと思い、メロディーが始まった途端、吹いてしまった。笑いが止まらず、後頭部を背もたれにぶつけてしまった。きれいな場面が目の前に展開されているのに、フンドシ姿の高田延彦の、太鼓を叩いている光景がオーバーラップ。筋肉質の男性がずらっと並んでいるところが目に浮かぶ。「男の中の男たちよ、出てこいや!」先日の後記で、さいたまスーパーアリーナに行きたかったと書いた理由の、ランペイジ・ジャクソンが入場曲に選んだ、PRIDEのテーマソングが宝塚で使われた。このギャップ。まわりは誰一人反応してなくて不思議。このショーではアニメーションが使われていたり、昭和歌謡(人は誰もただひとり〜←合唱コンクールで歌った。グッバイマイラブ〜←アンルイスが頭の中に出てきた)を歌ったり、イギリスの駅からの旅でジャングルに行ったりと結構個性的。これでサヨナラ(トップたちの退団公演)でいいのか、いやまあ印象的だよな忘れないよな、でもサヨナラならオーソドックスな方が......と気になる作品。事前にエヴァンゲリオンの曲が二曲使われると聞いてて、そっちの心の準備はできていたのだが、まさかのPRIDEテーマ。あと、男役圧巻の大階段を使った黒燕尾で、ファイナルカウントダウン。またこのようなショーは見たいけれど、オリジナル曲、クラシック、ジャズ、ムード、民族音楽のように、記憶が固まっていないものの方がいいかも、なんて思ったりもした。同じような曲ばかりで、似たようなショーになるよりは面白いんだけどね。いや、かなり。もう一回観たかった。/蝶野の昔のテーマまでやってたのか。あとPe'z。グループは知らないのに曲は知ってる。/あいてすぐに見てたら、宝塚未体験のMさん誘ったのに〜。宝塚大劇場の楽は今日。(hammer.mule)
< http://www.daily.co.jp/gossip/takara/photo/p5_0004789741.shtml >
このシーン。左が退団する娘役トップ。左下にライトセーバーがちらっと
< >
こっちがオーバーラップ。男の中の男たちよ、出てこいや!
< >
こっちの元動画が見たい......涙
< >
太鼓かっこいい〜! ナレーションうるさい
< >
観に行った。IT系イベントでこれやりたい。寒くなる?
< >
曲だけ聞くならこれ。いい曲だ。大好き。
< >
The Last Man Standingも好き。アニメかっこいい。
< >
きれいなのが見つからない。ロングバージョン
< http://chiebukuro.toremaga.com/dir/detail/q1382717983/ >
ほかに原曲があるシーンはありますでしょうか?
< http://ja.wikipedia.org/wiki/%E9%BD%8B%E8%97%A4%E5%90%89%E6%AD%A3 >
1971年横浜市生まれ。東京農業大学農学部で化学を専攻中に劇団の演劇助手の募集に応募
< http://koala.diarynote.jp/201202040004096959/ >
「作っているモノが古城の精密なジオラマか、萌えアニメのフィギュアかの違いで、あのふたりのやっていることは同じ」
感想面白い。あれAKBだったのか。今回どっちもイギリスだなぁと思ってはいたけれど。いやほんとスタンダードから離れてはいるものの、面白いです。
< http://www.kobe-np.co.jp/photo-gallery/takaraduka/p5_0004789778.shtml >
AKBか......
< http://kageki.hankyu.co.jp/news/detail/776737610c01e9f8b0fb5a02d1514322.html >
演出助手の募集について