[3118] サンド・ストーム〜砂嵐のなかで

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


《はじめて「Macいいな〜」と思いました。なんかずるい。(笑)》

■私症説[30]
 サンド・ストーム〜砂嵐のなかで
 永吉克之

■講師だって、最初は初心者だもの[番外]
 Dreamweaver CS5.5 をチェック(4)Phone Gap連携でAndroidアプリ作成
 森 和恵

■イベント案内
 Tokyo Photo 2011

■公募案内
 第1回デジタルえほんアワード



━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
■私症説[30]
サンド・ストーム〜砂嵐のなかで

永吉克之
< http://bn.dgcr.com/archives/20110922140400.html >
───────────────────────────────────
例えば、瓶入りのコーヒーがなくなりそうだと思ったら、その時点で新しいコーヒーを買っておくのが常識だと思うのだが、どういうわけか私にはそれができない。だから、飲もうとしたときに切れているのを思い出して買いに行く......ほどの行動力はないので、一日をコーヒーなしで過ごすことになる。

先月、私がデジクリを休載した原因も、この「コーヒーがなくなってから買いに行くの法則」に適っている。

7月23日。一台しかないパソコンがぶっ壊れてぶっ潰れた。サポート期間は17世紀に終わっていたが、とりあえずサポセンにすがろうとしたら、機種が古うて部品がないから修理は無理ですわ、ここはひとつ、新しいの買うたらどないでっか、大将。と言われて、たった6年しか使っていないマシンを買い換えたわけである。

人間で6歳といえば、小学校1年生。人生最初の学び舎で、我が子がどれだけ成長してくれるか、親ならば誰しも抱く期待を、その門出で奪われてしまったのである。アプリケーションが充実し、さあこれからという時の惨劇であった。

冷蔵庫だって、もう20年は使っているが、もんのすごく汚くなった以外は、買ったときと変わらない勢いで24時間労働に耐えている。電子レンジだって、どろっどろに汚れていて、魚とか野菜とかいろんな食材の臭いが混ざったガスを放っているが15年以上ちゃんと仕事をしている。インターフォンもそうだ。ボタンを押しても反応しなくなって久しいが、我が命果つるまで使い続ける所存である。

彼らと違って、あたら若い命を散らした私のパソコンは、「まさに蜉蝣(かげろふ)のやうな奴であつた」と未来永劫に語り継がれることであらう。

                 ●

壊れる数ヶ月前から、マシンがときどき奇妙な動作をするようになっていた。急にファンの音が大きくなったり、何かを引っ掻くような音を発したり、「○○は地球を征服しにきたエイリアンだから殺せ」という命令の電波を私の脳に送ってきたりしていたのだった。

とはいえ、作業に支障はなかったので、まあ今年いっぱいは持つざんしょと楽観していたところ、運命の7月23日、ガリガリ君を齧りながらデジクリの原稿を書こうとしていたら、突然画面が真っ暗になって、くいだおれ太郎の顔が真ん中にアップで出現し、パワーボタンを押してもコードを抜いても消えなくなってしまった。キーボードを見ると文字が全部タガログ語に変わっている。ガリガリ君もうまか棒に変わっていた。

そんなわけで、新しいマシンを買いに行かなくちゃ行かなくちゃと思っているうちに8月を素っ飛ばして9月になり、中旬近くになってやっと手にしたというのが事の顛末である。

                 ●

パソコンのことはどうでもいい。奇しくも、マシンがいかれた翌日の7月24日は、テレビのアナログ放送が終了する日。私は地デジへの対応はなーんにもしていなかったので、パソコンに続いてテレビが逝去してから一月半、のどかな日々を過ごしたのであった。

朝起きてから仕事に出るまで、時計代わりにテレビをつけっ放しにしていた習慣が抜けず、朝はとりあえずテレビをつけないと何だか手持ち無沙汰で視線の落ち着く先がないので、ある時、仕方なく砂嵐を見始めた。

砂嵐をしばらく眺めていると、鍋の中で沸騰した水の泡が次々と立ち上っていくのを側面から見ているような気がしてくる。さらに見続けていると、泡と泡の隙間が黒く見えてきて、それがまるで黒い鳥の大群が舞っているような壮観な光景に変わる。リーダー格の鳥が向きを変えると同時に、群れもいっせいに向きを変える、という行動を繰り返している。

そうやって2時間ほど砂嵐を見つめていたら、それぞれの粒子と粒子の隙間に、ときどき人の顔のようなものが無数に浮かんでくることに気がついた。いったい何だろうと、テレビに顔を近づけてさらに3時間睨んでいると、そのひとつがどうも山本さんの顔らしいことがわかった。

山本さんを見るのは久しぶりだった。八百屋がうまく行かず店を畳んだとは聞いていたけれど、こんなところで働いているとは思わなかった。また5時間ほど砂嵐を眺めていたら山本さんから電話が入った。

「なんでそんな所にいるんですか?」
「いやもう、この歳で仕事といやぁ砂嵐くれぇしかねえもんでね」
「やってて楽しいですか?」
「楽しかねえけど、しようがねえ。年金だけじゃやっていけねえからね。ま、そりゃいいんだけど、永吉さん、ちーとテレビの裏に回ってカバーを外してやっちゃもらえませんかね」

カバーを外すと、中から汗まみれの山本さんが出てきた。
「しばらくここで休憩させておくんなさい」
「抜けても大丈夫なんですか?」
「人ならいっぱいいるから大丈夫。それにサボりながらでねえとやってられませんや、こんな仕事。ああ、まだ2時間もある」

高齢になるほど仕事の選択肢が少なくなり、特殊な技術や資格を持っていない人はきつい肉体労働をするしかなくなる。真面目を絵に描いたような人物だった山本さんがサボっているところを見るのは、少しショックだった。

【ながよしかつゆき】thereisaship@yahoo.co.jp
ここでのテキストは、ブログにも、ほぼ同時掲載しています。
無名芸人< http://blog.goo.ne.jp/nagayoshi_katz >

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
■講師だって、最初は初心者だもの[番外]
Dreamweaver CS5.5 をチェック(4) 〜 Phone Gap連携でAndroidアプリ作成

森 和恵
< http://bn.dgcr.com/archives/20110922140300.html >
───────────────────────────────────
こんにちは。森和恵です。前々回に引き続き、Dreamweaver CS5.5 の「JQueryMobile」連携機能を紹介します。

標準出力のソースをカスタマイズする応用と、Phone Gap連携でAndroidアプリを作成する手順をお話します。

前回の状態と同じく、Dreamweaverを起動し、サイト定義をして準備しておきます。では、さっそく、手順を確認しましょう。

 |【前回】〜JQuery Mobile簡単書き出しが超便利〜
 |< http://bn.dgcr.com/archives/20110728140100.html >

●公開されている最新版のJQuery Mobileを使う

今回は、code.jquery.comでCDN(Content Delivery Network)公開している関連ファイルを参照します。Dreamweaverに内蔵されているバージョンは、1.0a3ですが、現在(2011年9月21日)は、1.0b3(Beta 3)までアップしています。バグ修正などもかなり行われているため、ソースコードレベルでカスタマイズを行う場合は最新版のほうがよいでしょう。

1)[ファイル]-[新規]メニューをクリックします。
 次に[サンプルから作成]-[モバイルスターター]-[jQuery Mobile(CDN)]
 を選びます。
 |【画面】< http://r360studio.com/dgcr/dgcr-extra7-1.jpg >

2)6〜8行目を確認すると、JQuery Mobile 1.0a3が参照されています。jQuery公式サイトのダウンロードページから、下記のソースを差し替えます。

 |【画面】< http://r360studio.com/dgcr/dgcr-extra7-2.jpg >
 |【参考】Download | jQuery
 |< http://jquerymobile.com/download/ >
 |"Copy-and-Paste Snippet for CDN-hosted files"の部分をコピペ

3)後から、Phone Gap連携でAndroidアプリに変換するため、ファイル名 index.html で保存します。

 |Phone Gapで変換されるためには、サイト内に index.htmlが必要

4)各ページの<h1>内テキストをタイトルに書き換えたり、<h4>内テキストをコピーライトに書き換えたり、data-role="page"・data-role="header"・data-role="footer" に data-theme="e"を指定してテーマをオレンジに変更したり、data-role="content"内にコンテンツを追加したり、必要のない4ページ目を削除します。

 |【画面】< http://r360studio.com/dgcr/dgcr-extra7-3.jpg >

 |4ページは、以下の範囲を削除します。
 |<div data-role="page" id="page4">〜</div>
 |また、1ページ目の下記リストを削除します。
 |<li><a href="#page4">4 ページ</a></li>
 |詳しくは前回の記事を参考にしてください。

 |2ページと3ページには、それぞれテキストと写真画像を使いました。
 |画面サイズの伸縮に対応するために<img>のサイズ指定は、
 |幅のみ%(width="80%")を指定しました。

 |【参考】この時点でのindex.htmlは、下記です。
 |< http://r360studio.com/dgcr/dgcr-extra7/index-step1.html >

●「Back」ボタンの手動表示

JQuery Mobile 1.0b3(Beta 3)では、ページ推移時に左上に自動表示されていた「Back」ボタンが表示されなくなりました。

 |【参考】jQuery Mobileがついにβ版へ到達|Publickey
 |< http://www.publickey1.jp/blog/11/jquery_mobile8.html >

自前で、戻るボタンを作りましょう。戻るボタンは、<a>タグにJQuery Mobileのボタンオプション属性をつけます。今回は以下のようなコードを2・3ページのdata-role="header"に配置しました。

<a data-role="button" data-transition="slide" data-rel="back" data-icon="arrow-l">戻る</a>

 |【画面】< http://r360studio.com/dgcr/dgcr-extra7-4.jpg >

 |data-role="button" は、<a>をボタンに整形します。
 |data-rel="back"は、ブラウザの戻るボタンの動作指定します。
 |data-transition="slide"は、推移時にスライドアニメーションを指定し
 |ます。
 |data-icon="arrow-l"は、先頭に左向きの矢印<を追加します。
 |【参考】jQuery Mobile 1.0b1 日本語リファレンス
 |< http://dev.screw-axis.com/doc/jquery_mobile/ >

 |【参考】この時点でのindex.htmlは、下記です。
 |< http://r360studio.com/dgcr/dgcr-extra7/index-step2.html >

●リストボタンのカスタマイズ

トップページのリストボタンを角丸デザインにするために、<ul data-role="listview">に data-inset="true" を追加します。

 |【画面】< http://r360studio.com/dgcr/dgcr-extra7-5.jpg >
 |JQuery Mobile コードを入力する際、
 |Dreamweaverが対応していますので、
 |コードヒントに属性が表示されます。

独自アイコンを指定することもできます。

16x16pxの8bit PNG画像を準備し、下記のようにクラスセレクタ .ui-icon-○○○を作成します。

 |【画面】< http://r360studio.com/dgcr/dgcr-extra7-6.jpg >
 |クラスセレクタ名の○○○は任意の名前をつけます。
 |【参考】ボタンにアイコンを加える
 |< http://jqm.namikawa.asia/docs/buttons/buttons-icons.html >

各リストボタンの<li>にdata-icon="○○○"を追加します。
 |【画面】< http://r360studio.com/dgcr/dgcr-extra7-7.jpg >
 |クラスセレクタ名の○○○属性値に指定します。

 |【参考】この時点でのindex.htmlは、下記です。
 |< http://r360studio.com/dgcr/dgcr-extra7/index.html >

●Phone Gap連携

Phone Gap は、スマートフォン向けアプリのフレームワークです。HTML+Javascriptで、アプリの開発を行うことができます。

 |【参考】Phone Gap 日本語コミュニティ
 |< http://phonegap-fan.com/ >

Dreamweaver 5.5 は、Phone Gapと連携することができます。

1)初めて利用する場合は、Android SDKのインストールを行います。[サイト]-[モバイルアプリケーション]-[アプリケーションフレームワークの設定]メニューをクリックします。[簡易インストール]をクリックします。

 |【画面】< http://r360studio.com/dgcr/dgcr-extra7-8.jpg >
 |出荷当初にバグがあったので、
 |簡易インストールを行う前に、最新版にアップデートしてください。
 |【参考】Dreamweaver CS5.5 11.5.1 アップデーター
 |< http://www.adobe.com/jp/support/dreamweaver/downloads_updaters.html >
 |Mac版 Dreamweaverの場合は、iOS用の画面も表示されます。
 |私は既にAndroid SDKをインストールしていましたので、
 |インストール先のフォルダの指定のみを行いました。

2)次に今回作成するアプリの設定を行います。[サイト]-[モバイルアプリケーション]-[ネイティブアプリケーション設定]メニューをクリックします。[バンドルID]・[アプリケーション名]・[作成者名]・[ターゲットのパス]などを指定し、[保存]をクリックします。

 |【画面】< http://r360studio.com/dgcr/dgcr-extra7-9.jpg >
 |[バンドルID]には、com."開発社名"."アプリ名"の書式で任意に名づけ
 |ます。
 |[アプリケーション名]には、表示されるアプリ名をつけます。
 |[作成者名]には、開発者の名前を指定します。
 |[ターゲットのパス]には、出力先のフォルダを指定します。
 |その他、今回は指定しませんでしたが、アイコン画像などが指定できます。

3)次にファイルの書き出しを行います。[サイト]-[モバイルアプリケーション]-[ビルト及びエミュレート]-[Android]メニューをクリックします。エミュレーターが起動します。また、指定した出力先に[com."開発社名"."アプリ名"_Android]の名前でフォルダが作成されます。

 |【画面】< http://r360studio.com/dgcr/dgcr-extra7-10.jpg >
 |エミュレーターの起動までには、多少時間がかかります。
 |今回のデータの場合、約2分かかりました。
 |また、25MBを超えるデータを書き出すことはできません。

4)出力されたフォルダ内のbinフォルダの"アプリ名"-debug.apkファイルを、Android携帯のSDカード内の任意のフォルダにコピーし、アプリをインストールします。

 |【画面】< http://r360studio.com/dgcr/dgcr-extra7-11.jpg >
 |Android携帯にファイルマネージャーをインストールし、
 |SDカード内のファイルを操作します。
 |私が所有しているREGZAには標準のファイルマネージャーが無かったので
 |Androidマーケットから、「アストロファイルマネージャ」を使いました。
 |apkファイルが見えれば、タップしてインストールを行います。

 |【参考】アストロファイルマネージャ
 |< https://market.android.com/details?id=com.metago.astro&hl=ja >

5)アプリケーションを実行します。

 |【画面】< http://r360studio.com/dgcr/dgcr-extra7-12.jpg >


...ということで、今回の報告は終わりです。
難しいと思っていた、Androidアプリを簡単に作ることができて、驚きです。今回はWin版Dreamweaverだったので、Androidのみの出力ができましたが、Mac版ならiOS用のアプリも作れます。はじめて「Macいいな〜」と思いました。なんかずるい。(笑)

さて、次回は、先日登壇したWDFのイベントの模様をレポートする予定です。
ではまた次回。(^θ^)

 |【参考】WDF
 |< http://wdf.jp/vol02/ >
 |金沢のWebディレクターさんのイベントです。
 |対クライアントとのコミュニケーションについてお話ししてきました。

※記事へのご意見・ご要望は下記より受付ま〜す。お手柔らかに。
< http://bit.ly/gIHFfu >

【森和恵 r360studio 〜 Web系インストラクター 〜 】
<site: http://r360studio.com > <twitter: http://twitter.com/r360studio >
<mail: r360studio@gmail.com >
<サイト制作の教科書 r360study: http://www.facebook.com/r360study >

近況:10月に大阪で電子書籍セミナーに登壇します。EPUB2.0 形式の作成工程をご覧いただく、デモを担当します。時間があれば、今回のPhone Gap連携のデモもするかもしれません。
※使い方を選べば、Android用の電子書籍アプリもできますもんね。(^.^) お近くの方は是非ご参加くださいませ。

本格化する電子書籍出版 
スマートフォン・タブレット向け電子書籍制作セミナー
< http://www.sansokan.jp/events/eve_detail.san?H_A_NO=12241 >

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
■イベント案内
Tokyo Photo 2011
< http://www.tokyophoto.org/ >
< http://bn.dgcr.com/archives/20110922140200.html >
───────────────────────────────────
Tokyo Photo 2011は今年で3回目を迎える、写真作品の国際アートイベントである。国内外有数のギャラリーが集まり、写真作品の展示・販売を行なう。写真の見本市としてはアジア最大級。世界から500点以上の写真作品が集まる。

会期:9月22日(木)〜9月25日(日)9/22招待者のみ 9/23〜9/25一般公開 23日/24日11:00〜20:00 25日11:00〜18:00 最終入場は閉会の30分前
会場:東京ミッドタウンホール A(東京都港区)
チケット:当日1,300円 前売り1,000円
「日英・日仏による二つの特別企画」も同時開催。
・「Chris Shaw: Before and After the Night Porter」
・「日本とフランス、共に明日に向かって」チャリティー写真展

◇トークショー 各日15時より約45分間程度
9月23日(金)篠山紀信×田中杏子(Numero TOKYO 編集長)
9月24日(土)サイモン・ベーカー(テート・モダン キュレター)×クリス・ショウ(イギリス人写真家)
9月25日(日)サイモン・ベーカー

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
■公募案内
第1回デジタルえほんアワード
< http://www.digitalehonaward.net >
< http://bn.dgcr.com/archives/20110922140100.html >
───────────────────────────────────
株式会社デジタルえほんとNPO法人CANVASは、「デジタルえほん」分野の開拓および発展のため、「第1回デジタルえほんアワード」を開催する。子どもたちに夢を与え、想像力を喚起し、現実の世界をより豊かにさせる「絵本」が、デジタルにおいてもさらに子どもたちを魅了する「デジタルえほん」であることを願った企画だ。

「デジタルえほん」とは──タブレット、電子書籍リーダー、電子黒板・サイネージ、スマートフォンなどテレビやパソコン以外の新しい端末を含む子ども向けデジタル表現を総称して「デジタルえほん」としている。

募集内容:「デジタルえほん企画部門」と「デジタルえほん作品部門」
応募期間:2011年9月16日(金)〜2012年1月20日(金)
応募資格:個人/法人・各種団体を問わず誰でも応募できる
応募方法:第1回デジタルえほんアワード、応募の案内を参照
< http://digitalehonaward.net/award/oubo.pdf >

審査基準:以下の3つの要素に基づき、審査を行なう。
たのしい(こどもたちを魅了し、夢中にさせる楽しさ)みたことがない(これまで出会ったことのない新しい表現)世界がひろがる(こどもたちの想像力・創造力を育み、世界を広げてくれるしかけ)

賞典:
【デジタルえほん企画部門】グランプリ(1作品)賞金100万円 or デジタルえほん化/準グランプリ(1作品)賞金10万円/審査員特別賞
※グランプリの受賞者が賞金100万円を選択した場合の条件=企画作品を実際に開発し「デジタルえほん」化する。賞金をどう使うかは自由。
※賞金をもらっても実現するための手段がないという場合は、デジタルえほん社がプロジェクトチームで開発し「デジタルえほん」化する。
【デジタルえほん作品部門】グランプリ(1作品)賞金30万円/準グランプリ(1作品)賞金10万円/審査員特別賞

発表:2012年1月末開催の「審査会」を経て、2012年2月25・26日に開催される「ワークショップコレクション < http://www.wsc.or.jp >」(主催:NPO法人CANVAS)にて結果発表及び表彰式を行なう。

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
■編集後記(9/22)

・文化庁国語調査で、「ら」抜き言葉が15年前に比べて9.4ポイントも増加し、10歳代では7割以上が使用していることがわかった、という新聞報道。「来られる」VS「来れる」は、もちろん前者が正しいが、40歳代でも後者が逆転した。「食べれない」も95年度調査比で8ポイント増の35.2%とか。情けない。悪しき慣行がますますその勢力圏を拡大している。情勢はややきびしいが、断固その誤りを正すべく反撃を続ける所存である。また、「雨模様」「すべからく」「号泣」などは意味を取り違えている人のほうが比率が高く、「情けは人のためならず」も半数が意味を正しく理解していない。「姑息」を「一時しのぎ」と正しく回答したのは15%にとどまり、71%が「ひきょうな」と誤ったのは理由がある。「姑息」と形容された菅前首相の行いは確かに「一時しのぎ」ばかりで「ひきょう」だったが、後者のほうのイメージが強かったからではないか、というのがわたしのこじつけ。全国民がうんざり・げんなり・あきあき(同じことが続いてすっかりいやになり、気力がなくなるさま)したこの2年間だった。関連語に「懲り懲り」という形容動詞がある。ひどい目にあって、二度とやるまいと深く思うさまを表す語だ。わたしがまた何をいいたいか、お分かりでしょうね。(柴田)

・コーヒーや洗剤は買い置きするのに、パソコン関係では備えないところがあるなぁ。高かったり、すぐに性能の良い安いのが出るし、消えなかったり(捨てるのに面倒がかかる)するから、つい。/CS5.5は見送る予定なのだが、森さんのを読んでいると使いたくなってきた。/ゾンビランド。ホラー映画は観ない。怖いから。夢に出てくるから。これはコメディタッチで怖くないからと言われ、少しだけなら観てみるかという気持ちになったのが二ヶ月ほど前だったかな。時間がなかったので、最後の遊園地のシーンになってから、テレビ前に移動。確かに怖くない。だってゾンビに見えないから。とても元気に走り回っている。どう見ても人間だし、メイクや服装に関心するぐらい冷静に観られた。精神的にどうこうという背景があるのかもしれないが、途中からなのでわからない。メインのタラハシー役ウディ・ハレルソンが、ナチュラル・ボーン・キラーズの人だと知ったのは観終わった後。彼はやたらと「トゥインキー(Twinkie)」と言う。何やらわからないが探しているらしい。映画の内容より「トゥインキー」が気になる。特典映像では、お笑い芸人の髭男爵が、そのトゥインキーについて語るシーンがあった。あちらでは有名なお菓子らしい。腐らないという伝説まであるとか。食べた山田ルイ53世は、思わず「あっま」「あっまー」「あまっ」と連呼。濃厚な味らしい。日本では「トゥインキー」は販売されていないのだが、あちらの甘いお菓子を想像して、そりゃ日本では受けないだろうと納得した。「ダイ・ハード」や「WALL・E」にも出てきたらしい。しかしその「あっま」が気になり、検索をかけたら、同じようにゾンビランドで興味を持った人たちが。(hammer.mule)
< http://d.hatena.ne.jp/tochigami/20100803 >
なぜかは分かりませんが「トゥインキー」で検索してくる方がここ数ヶ月たくさんいるようなので
< http://d.hatena.ne.jp/tochigami/20110218 >
全国1000万の「ゾンビランド」ファンの方々が毎日毎日毎日毎日"トゥインキー"の検索キーワードで
< http://ameblo.jp/ujyo-s/entry-10798558663.html >
『ゾンビランド』32のルール...それよりもトゥインキーにやられました...
< http://yaplog.jp/sotabearuki/archive/1135 >
潤沢なほどのオイリーにも関わらず、全体を包む究極のぱさつき感
< http://noraneko22.blog29.fc2.com/blog-entry-394.html >
なぜか賞味期限を過ぎても痛まないという噂が昔から囁かれており
< http://springroll.exblog.jp/16163182/ >
ダイ・ハードとトゥインキー
< http://www.notmartha.org/tomake/hostesssushi/ >
トゥインキー寿司