新規にプロジェクトを作成します。操作はこちら。

プロジェクト名は kotohajime_01 、アプリケーション種類はWebアプリケーションにします。

と、ビルダーの画面はこんな感じになると思います。

今回作るのはプログラム事始めの基本、「Hello World」。

画面上に配置されたテキストボックスの内容を Hello World に書き換えます。

画面の詳細やコードの解説は次に譲るとして、ガシガシと作っていきます。

画面上部の【デザイン】と言うボタンを押してデザインモードに切り替え、

画面上にテキストボックスを配置しましょう。

ちなみに、配置したテキストボックスを選択した上で、右下のレイアウトパネルの制約を図のように変更すると、ブラウザのサイズに関わらず必ず画面の真ん中に配置されます。

この時点で1度、テスト起動してみましょう。

キーボードの【F11】キーを押してみてください。Macの場合は【Command】＋【F11】。

デバッグビルドが開始され、ブラウザが立ち上がり、こんな画面が出ているはずです。

確認したらブラウザは1度閉じて下さい。

続いてasファイルの準備です。まずはasファイルを入れるフォルダーを作ります。

Flex ナビゲーターパネルの【src】フォルダーを右クリックして【新規】->【フォルダー】を選択。

フォルダー名は ori_as

フォルダーが出来たら、その中にasファイルを作ります。
【ori_as】フォルダーを右クリックして【新規】->【ActionScript クラス】を選択。

ファイル名は Com_kotohajime 、OKを押す前に一作業必要です。

インターフェイスの【追加】ボタンをクリックし、必要な記述を自動入力してもらいます。

追加するインターフェイスは IMXMLObject 。実際の操作は画像と同じようにしてみて下さい。

asファイルに必要なコードを追加します。

こんな感じ。

package ori_as
{
 import mx.core.IMXMLObject;

 //↓追加
 import mx.events.FlexEvent;
 //↑追加

 public class Com_kotohajime implements IMXMLObject
 {

 //↓追加
 public var view:kotohajime_01;
 //↑追加

 public function Com_kotohajime()
 {
 }

 public function initialized(document:Object, id:String):void
 {

 //↓追加
  view = document as kotohajime_01;
  view.addEventListener(FlexEvent.CREATION_COMPLETE , CreationComplete_View);
 //↑追加

 }

 //↓追加
 public function CreationComplete_View(e:FlexEvent):void
 {

 }
 //↑追加

 }
}

まだまだ未完成ですが、先にmxmlの方を仕上げます。

kotohajime_01.mxml に戻り、【ソース】ボタンを押してソース編集モードに切り替えてから、mxmlの編集を行います。

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"	xmlns:controller="ori_as.*">

	<controller:Com_kotohajime id="viewController"/>

	<mx:Text text="文字" horizontalCenter="0" verticalCenter="0" id="txtTarget"/>

</mx:Application>

変更点としては

・mx:Application タグに xmlns:controller=”ori_as.*” と言う属性を追加

・<controller:Com_kotohajime id=”viewController”/> タグを追加

・mx:Text タグに id=”txtTarget” と言う属性を追加

となります。

ここまで来たら Com_kotohajime.as に戻って、テキスト変換の記述を追加します。

package ori_as
{
 import mx.core.IMXMLObject;

 //↓追加
 import mx.events.FlexEvent;
 //↑追加

 public class Com_kotohajime implements IMXMLObject
 {

 //↓追加
 public var view:kotohajime_01;
 //↑追加

 public function Com_kotohajime()
 {
 }

 public function initialized(document:Object, id:String):void
 {

 //↓追加
  view = document as kotohajime_01;
  view.addEventListener(FlexEvent.CREATION_COMPLETE , CreationComplete_View);
 //↑追加

 }

 //↓追加
 public function CreationComplete_View(e:FlexEvent):void
 {

 view.txtTarget.text = "Hello World";

 }
 //↑追加

 }
}

変更点としては、

・CreationComplete_View の中に view.txtTarget.text = “Hello World”; を追加

という感じです。

さあ、実際に起動してみましょう！

キーボードの【F11】キーを押してみてください。

先ほど「文字」としか表示されていたのが、

今回は「Hello World」に書き換わっているはずです。

とりあえず作業としてはこんな感じ。

解説は長くなるので、次のエントリーに続きます。

今回のプロジェクトファイルはこちら

• 「それはWebの技術なのか？」＝Airのイメージが強すぎる
• 「ってか、Flashで良いじゃん！」＝ごもっとも。AdobeもFlashって言う名前に統合します。が！違うんだ！
• 「いや、PHPで良いし」＝コレは誤解！
• 「HTMLとJSで良いし」＝コレも誤解！
• 「SilverLightがあるから良いモン！」＝Macユーザーは置いてけぼりですか？

と言うお言葉がまだまだあるようなので、コレを払拭していきたいなと。
もっと言えばFlexを広めていきたいなと。

なので、誰に頼まれた訳でもないんですが、ちょっとしたFlex講座。
WCANで楽だって話もしたんで、そのフォローも含めてお話しします。

それはWebの技術なのか？

システム開発用の技術。確かにこの認識に間違いはありません。
ですが、Flexと言う技術そのものが何をするのかをご理解頂ければ、ここのところの誤解は多少解けるかもしれません。
そもそもFlexとは、SWF(Flash Playerで実行可能なファイル)を作る物なのです。
Flash PlayerがWebと言う環境で磨かれ、通常はWebブラウザのプラグインとして動いて来たため、Webに特化した機能がいくつもあります。
また、Flash Playerの性能を余す所無く使い切る為にはActionScriptが必須ですが、ActionScriptを利用するSWFの開発環境としてはFlexがもっとも効率的なのです。
従って、Flexは「Webに特化した技術である」と言えると思います。

ってか、Flashで良いじゃん！

FlexとアプリとしてのFlashの違いについてもよく質問されます。
Flashは本来タイムラインアニメーションを作る事に特化したアプリであり、ASも元々タイムラインアニメを色々と制御する事が目的でした。
所がFlash Playerの性能がどんどん上がるにつれてASも徐々に進化し、タイムラインアニメの制御だけではもったいなくなってきた。
じゃあ、ASの編集に特化したSWF作成環境作ろうぜって言うのがFlexなのじゃないかなと。
現にFlashでのAS開発ってものすごい大変なんですよ。プログラムエディターとしては申し訳程度にしか機能が付いてないので、タイムラインの制御挿入には十分ですが、ちょっと手の込んだもの作ろうとするとかなり大変。アプリケーションっぽい物作ろうと思うと、かなりの労力と工夫が必要です。
Flashはあくまでアニメーションに特化した物であり、Flash Playerで動くアプリを手軽に作るにはやっぱりFlexとなります。

いや、PHPで良いし

PHPは元々サーバ側でHTMLを生成するための技術でしたが、サーバサイドテクノロジーであるPHPもものすごく進化しています。
・複数のユーザーからの命令を個別に処理して対応する
・保存された資材（データベースや画像素材）を柔軟に活用できる
Webサーバのこれらの利点を手軽に利用したい。PHPの進化理念はこの部分にあるのではないかと。
で、PHPはあくまでサーバの中で動く物なので、サーバ内に保存された各種資材を整理、統合、活用する事に集中させた方が効率的で、実行結果としてのHTML生成にパワーを使わせない方が良い気がしませんか？
全ての負担をサーバサイドに任せるのではなく、整理、統合結果を判りやすくアウトプットする役目は、クライアント（要は皆さんが使ってるパソコン）に任せても良い気がしませんか？（勿論諸手を挙げて賛成とは行かない部分もあります）
そう、PHPとFlexはそれぞれ役割を切り分ける事が可能なのです。と言うより、Flash Playerはどう頑張ってもサーバを動かす事は出来ません。
サーバ＝PHP
クライアント＝SWF
この組み合わせって、実はとっても理想的な組み合わせなのです。PHP得意な人にこそ、Flexつかってほし～な～

HTMLとJSで良いし

これまたその通りなんです。何故かというとSEOと言う部分があるから。
GoogleによるSWF内のクロールは既に始まっていますが、さりとてHTMLにはどう頑張っても敵わない所は否めません。
なので、検索対象となるページに関してはHTMLで作り、メールフォームやアンケート等、ユーザビリティを配慮しつつ間違いがあってはいけないコンテンツはFlexで、アニメーションはFlashでと言う布陣がやっぱり望ましいのです。
バナーローダーやRSSリーダー程度なら、Flexが一番良いと思うのですが、いかがでしょう？
また、環境依存度が低いのもFlexと言うかSWFの特徴の一つ。習得の時間はあれども、いったん基本を掴めばHTMLベースで作成するよりも短期間で出来るのも大きな利点だと思います。

とまあ、なんでもかんでもFlexでという気はありません。Flexが一番輝く場所を知ってもらいたい。その一心です。
なので、次回からは簡単な使い方や導入の仕方なんかを備忘録代わりにここにあげていくつもりです。
興味のある方はFlexBuilderの体験版をダウンロードして、待っててください！

メインページ
固定ページ→home.php→index.php

単体記事ページ
single.php→index.php

カテゴリーページ
category-slug.php*1→category-ID.php→category.php→archive.php→index.php

タグページ
tag-slug.php→tag-ID.php→tag.php→archive.php→index.php

著者ページ
author.php→archive.php→index.php

日付別ページ
date.php→archive.php→index.php

検索結果ページ
search.php
index.php

404ページ
404.php
index.php

*1はwordpress 2.9から

詳細はhttp://wpdocs.sourceforge.jp/

さて、ささやかなクリスマスプレゼントとして用意した携帯用待ち受けフラッシュですが、
QRコードを公開する時間が少なかったので、此処で紹介です。

クリスマスには当然、何か起こりますよ！！

PDFデータはこちらにご用意しましたのでご活用ください。

開発規模としても大きな物で、弊社取り扱い案件の中でも最大級の部類に入ります。
まずは納品先のご紹介。

ローラアシュレイジャパン

Wikipedia

イギリスに本拠地を置くブランドで、ファッションを始め、カーテンや家具なども取り扱っています。

システム概要

カーテンと家具に関わる倉庫、縫製工場、店舗、本部をつないだ大規模システムの内、弊社は店舗見積・発注システムと縫製工場及び本部側のシステムを担当しました。
見積制作や顧客管理、在庫確認はもちろん、必要な布地のサイズや縫製・納期までの期日確認、工場への縫製指示、配送依頼までをシームレスに活用可能です。
パソコン操作に不慣れな方にも配慮し、極力簡単なオペレーションで操作できるよう、インターフェースにも配慮しています。
また、デザインブランドである以上、お客様と一緒に確認する事も考慮し、デザインレベルも高く設定し、クライアントイメージを損なう事のないアプリケーション開発に成功しました。

クライアントアプリ　契約画面

クライアントアプリ　帳票画面

システム構成

全システムの統括DBはOracle11gで構成されており、工場側はPHPのみ、店舗側はPHPとFlexで構成されています。

店舗システムアーキテクチャ

工場側及び店舗側サーバではZend FrameWorkを利用し、高機能且つ高速なレスポンスを短時間で実現する事が出来ました。このあたりは実装担当の吉田から、後々色々なエントリーが出てくると思います。

店舗側クライアントアプリはFlexによるAirアプリの形で提供させて頂きました。
インターフェースに関しては前述の通り「お客様と一緒に見る」かつ「ブランドイメージに合わせる」と言う高レベルなオーダーでしたが、Flash PlayerベースであるFlexのおかげで十分にお応えできました。
実装においてもタグベースのmxmlやCSSの編集のしやすさに何度も助けられました。
mxmlはFlashの自由度とHTMLの簡便性の良い所を上手く活用できます。
全ページの一部だけをCSSで一括編集出来るのは魅力ですね。

システム面でも利点が多く、サーバとの連携がオブジェクトという形で出来るRemoteObject（サーバ側はZend AMFを使用）、クライアントDBに高速且つ軽量なSQLite、各機能をモジュール単位で開発可能なModuleLoader、Flashでは不可能だった外部ファイルの書き出し等々、色々な機能、サービスが短時間で直ぐに実装できます。
カスタマイズももちろん可能で、弊社独自の汎用性の高いモジュールもいくつか開発しました。

バージョン管理機能も用意されているので、機能追加、修復などの反映が直ぐに出来るのも、店舗使用のシステムとしては心強い味方です。

広域とは言えない通信環境下での安定且つ高速動作の面でも、SQLiteとFlexの高親和性によるアドバンテージは大きく、狭小な通信回線下であっても大容量データをスムーズに扱う事が出来ます。
今回の案件でFlex自体がWebテクノロジーの良い部分を上手く取り入れている物だと再確認が出来ました。

弊社はこれまでモバイル、PCを問わず、Flashをメインに業務を進めてきました。
その理由はデザイン的にもシステム的にも、短期間で高クオリティの物が制作可能だからです。
今回のローラアシュレイ様の案件では、デザイン・システム共に弊社の実力を遺憾なく発揮できたと同時に、多くの物を学び得る事が出来ました。

これからのスーパーエレメンツのFlex・Air開発にご期待ください！！

既に面識のある方もいるかとも思いますが、大半の方が初めてかと思います。

スーパーエレメンツでディレクターをしています、中村と申します。以後お引き立ての程、よろしくお願いします。

･･･さて、堅苦しい挨拶はここまでとしまして、まずはこのサイトの「説明」から。

「あれ？ちょっと前までクリエーターの相互援助とかって書いてなかったっけ？」
そう思われた方もいらっしゃるでしょうね。実に痛い所を突かれましたｗ
はい、実はこのサイト、公開当初はクリエーター相互援助サービスを目指して居たんですが、色々と敷居の高い問題に直面したあげく、紆余曲折がありまして･･･

ただ、完全にその部分を放棄したわけではありません。
その精神の一部ではありますが、弊社サービスの「ギガモバ」に受け継がれています。
携帯Flash作りの参考になるポイントもいくつかありますので、ご活用頂ければ幸いです。

とはいえ弊社も携帯Flash以外にも幅広く取り扱っておりまして、その中で得た経験や知識が、日々お世話になっている皆様に少しでもお役立て頂ければと思い、このサイトにて出来る範囲で公開していこうかと考えています。
当初の予定とはだいぶ方向性がずれてしまいましたが、インターネットの基本精神である「助け合い」に少しでも貢献できればと思います。

今後ともこのサイト、弊社共々変わらぬご愛顧の程、よろしくお願いします。