T-Mobileのプロモーション動画を紹介します。
このプロモーションは、空港の搭乗口で一般のカップルが出会ったところに突如一人の女性が歌を歌いながら花を差し出すところからスタートする。
そして、盛大なWelcome Backショーがスタートする！
詳しくは動画で楽しんでください。
■The T-Mobile Welcome Back
仙台空港でもこういったイベントをやれば、復興だけでなく名物にもなって良いと思います。
T-Mobileのプロモーション動画(空港編)
Posted by ミクリ
on 2011 年 7 月 17 日
No comments
7/13夏のIT祭「花テック」にデータセクションが出展した！
Posted by ミクリ
on 2011 年 7 月 16 日
1 comment
7月13日に行われた夏のITイベント「花テック」において、私の所属するデータセクション株式会社が出展者として参加させてもらいました！
時間がない中で撮った何枚かの写真とともにイベントを振り返りたいと思います。
少しでも雰囲気が伝われば幸いです。
■花テックとは？
TechWaveが主催のITテクノロジーイベントです。スマートフォンやandroid,iPhoneアプリ、ITサービスなど様々なIT系技術が出展されました。
このイベントの大きなテーマは「人×テクノロジー」。リアルとバーチャルが花やしきでつながる最高の祭です。
「花テック」ガイドブック #hanatech 【@maskin】
http://techwave.jp/archives/51682537.html
今回は浅草「花やしき」を貸し切りにして、2時間30分で乗り物乗り放題、酒とソフトドリンク飲み放題のノンストップで開催されました。
 |
| 送信者 2011/07/13[花やしき]花テック |
 |
| 送信者 2011/07/13[花やしき]花テック |
 |
| 送信者 2011/07/13[花やしき]花テック |
 |
| 送信者 2011/07/13[花やしき]花テック |
 |
| 送信者 2011/07/13[花やしき]花テック |
■参加のきっかけは？
最近いろいろと話題にあがるTechWave。ひょんなことから飲み会に参加させてもらったり、主催者がネットエイジつながりの知り合いだったりと、運命的に引き寄せられ参加することにしました。
要は、完全に「ノリ」です。
■出展の目的は？
参加目的はひとつ。
「企業のブランディング活動」です。
データセクションのいう社名を多くの人に知ってもらうために出展させていただきました。
■出展物は？
出し物は、2つです。
1. ソーシャルメディア再認識シート
ソーシャルメディアは、いまやライフスタイルのひとつとして標準化されつつあります。
そんな「生活の当たり前」は、実はすごい膨大な情報が流れているんです。
それを再認識してもらうために、様々なソーシャルメディアの「数字」をA4用紙に書きまくりました。
・日本のインターネット人口は世界三位
・日本のインターネット普及率は78.20%
・facebookは2年で1億人突破
※YouTubeのDid you know?やソーシャルメディア革命を引用
ただ、あんまり見てくれませんでした。。。
2.花テックソーシャルグラフ
この花やしきというスモールワールドで人と人が短時間につながれる場所を提供したいと考え、「リアルソーシャルグラフ」を作ろう！と計画しました。
大きな模造紙にみんなが名刺を貼ってマジックペンで線をつなげていく、まさに祭にふさわしい手作り感満載の催し物です。
 |
| 送信者 2011/07/13[花やしき]花テック |
 |
| 送信者 2011/07/13[花やしき]花テック |
 |
| 送信者 2011/07/13[花やしき]花テック |
 |
| 送信者 2011/07/13[花やしき]花テック |
 |
| 送信者 2011/07/13[花やしき]花テック |
 |
| 送信者 2011/07/13[花やしき]花テック |
 |
| 送信者 2011/07/13[花やしき]花テック |
 |
| 送信者 2011/07/13[花やしき]花テック |
 |
| 送信者 2011/07/13[花やしき]花テック |
怒濤の2時間30分が終わり、振り返ってみればたくさんの人のつながりを視覚化することができました！
参加者、そしてTechWave関係者のみなさん、ありがとうございました！
 |
| 送信者 2011/07/13[花やしき]花テック |
T-Mobileのプロモーション動画(ピアノ編)
Posted by ミクリ
on 2011 年 7 月 15 日
No comments
[レビュー]新聞、雑誌風にデザインするJavaScriptフレームワーク「treesaver.js」
Posted by ミクリ
on 2011 年 3 月 21 日
2 comments
「Treesaver.js」は、ウェブサイトをリッチにデザインできるJavaScriptで作られたフレームワーク。
Treesaver.js
http://www.treesaverjs.com/
普段CSSやJavaScriptなどを触らない人にとっては、ちょっとした努力で相当リッチなデザインが構築できる。
本家デモ画面
http://demo.nomadeditions.com/real-eats/
Treesaver.jsはフレームワークであるため、多彩なデザインが構築できるらしいのだが、今回は最小限の機能のみを実装することにした。
自作デモ画面
http://lab.mikuriya.biz/treesaver/
では、簡単な解説をする。
※詳しくはHTML内のコメントに
■resourses.html
フレームワークの中核となる骨組み部分の定義を記述するファイル。
画面左にタブを置くかどうかや、画面下にメニューを設置するか、画面中央のコンテンツ部分の段組みはどうするか、などなど。
■style.css
まんまスタイルシート。段組みの幅やフォントなどを定義する。
■toc.html
画面左タブを開いた時に表示されるコンテンツを定義する。また、タブと画面中央は連動しているため、タブのひとつをクリックした時に画面中央に何を表示するかも定義しなくてはならない。
■index.html,page01.html,page02.html
画面中央に表示するメインコンテンツを記述する。
適当にclass=articleで囲っとけば、あとはresources.htmlで定義した骨組みでTreesaver.jsが自動的にきれいにしてくれる。
ざっと解説したが、巷でよくあるJavaScript tipsとは違い、ウェブサイトをまるまる格好良くしてくれるので、修得すればかなり役立つと思う。
あとは自力でよろしく。
[HT-03a]「Google App Inventor」でサンプルプログラムを開発する
Posted by ミクリ
on 2010 年 9 月 20 日
No comments
前回は、App Inventorの動作環境のセットアップについて解説した。
今回は、実際にサンプルプログラムを作成してみる。
ただ、ここで紹介する内容は、
App Inventorのチュートリアルに書かれているものなので、
役に立つことと言えば「日本語で解説している」ことくらいだ。
■準備
すでにApp Inventorの開発環境が整っていることが条件。
整っていない場合、以下からセットアップをしてください。
http://blog.mikuriya.biz/archives/664
■今回作るもの
猫の描かれたボタンをクリックすると、「ニャー」と鳴くアプリケーション。
■App Inventorの開発手法のおさらい
・デザイン面は、ウェブ上で編集する。
・処理面は、Java Web Startによってローカル環境で編集する。
では、ここからがサンプルアプリケーションの作成手順です。
■はじめる前に
ChromeだとJava Web Startがうまく起動しなかったため、
Firefoxで開発を行なった。
このアプリは、画像ファイルと音声ファイルを使用する。
画像ファイル「kitty.png」
音声ファイル「meow.mp3」
■AVD(Android Virtual Device)を開く
前回セットアップしたAndroid SDKのtoolからandroid.batを起動する。
 |
| 送信者 blog画像 |
■Virtual Deviceを起動する
これも前回セットアップしたAVDを選択し、StartからLaunch。
Launch Optionsもデフォルトのまま起動する。
 |
| 送信者 blog画像 |
 |
| 送信者 blog画像 |
 |
| 送信者 blog画像 |
■App Inventorでプロジェクトを作成する。
App Inventorの画面右上の「My Projects」へ移動する。
 |
| 送信者 blog画像 |
本来は開発したAndroidアプリのプロジェクトが一覧に表示されるが、
何も作成していないので、殺風景な感じ。
「New」からプロジェクト名を設定する。ここでは「HelloPurr」と記入する。
OKをクリックすると、開発画面へ自動的に移動する。
 |
| 送信者 blog画像 |
■スクリーン名を変更する
Viewerに「Screen1」と書かれている部分をクリック。
PropertiesのTitleを「Pet the Kitty」に修正する。
 |
| 送信者 blog画像 |
■ラベル(タイトル)を追加
スクリーン上にテキストを挿入する場合は「Palette – Basic – Label」を使用する。
ドラッグ＆ドロップでLabelをViewer上に持ってくる。
その後、以下のオプションを変更。
PropertiesのBackgroundColorをBlue
PropertiesのFontSizeを20
PropertiesのTextをHello Kitty!
PropertiesのTextColorをYellow
 |
| 送信者 blog画像 |
■ボタンの追加
猫の描かれたボタンを作成するためにまずはボタンを作成する。
「Palette – Basic – Button」をドラッグ＆ドロップでViewer上に持ってくる。
その後、以下のオプションを変更。
PropertiesのFontSizeを20
PropertiesのTextをThis is Pet!
 |
| 送信者 blog画像 |
■ボタンに画像を挿入
ボタンに猫の画像を埋め込みたいので、まずは先ほど作成したボタンをクリック。
PropertiesのImageがNone…になっているので、
クリックして猫の画像を設定する。
 |
| 送信者 blog画像 |
すると、ボタンに猫の画像が挿入される。
 |
| 送信者 blog画像 |
■ボタンクリックで音楽を流す準備
猫の描かれたボタンをクリックすると、
「ニャー」と鳴くアプリケーションであるため、
音声ファイルを定義しておく必要がある。
先述した「開発手法のおさらい」にも書いたが、
「どれをクリックするとどれが動く」といった処理系は、
ブラウザ上で設定できないため、
ブラウザ上では、とりあえず「このアプリでは音声ファイルを使用するよ」とだけ定義する。
「Palette – Media – Sound」をドラッグ＆ドロップでViewerに設置する。
Viewerの下にSoundマークが設置されるので、
それをクリックしPropertiesのSourceに音楽ファイルを指定する。
 |
| 送信者 blog画像 |
 |
| 送信者 blog画像 |
■Open the Blocks Editorを開く
ひとまず、これでデザインや材料準備は終了した。
ここからJava Web Startによる処理部分の開発にはいる。
画面右上の「Open the Blocks Editor」をクリックすると、
jnlpファイルをダウンロードする画面がでるので、
Java Web Start Launcherで開くを選択。
※冒頭で説明したが、必ずAVDを開いておくこと。
 |
| 送信者 blog画像 |
たまに「Could not create the Java virtual」というエラーがでて、
起動に失敗することがある。
なんか起動の順番が重要っぽいので、
その場合は、ブラウザやらAVDやら一通り閉じて、
AVD起動→Firefox起動→Open the Blocks Editor→Java Web Start起動
をやってください。
■Open the Blocks Editorで処理部分の編集
猫の描かれたボタンをクリックすると、
「ニャー」と鳴くアプリケーションなので、
今回の処理は、
「ボタンをクリックと猫の音声ファイルが再生される」部分だ。
画面上部のMy Blocksをクリックする。
 |
| 送信者 blog画像 |
Button1をクリックすると、なんかパズルみたいなのがいろいろでてきた。
 |
| 送信者 blog画像 |
「ボタンをクリックと猫の音声ファイルが再生される」処理なので、
Button1.Clickをフィールド上に設置。
 |
| 送信者 blog画像 |
「ボタンをクリックと猫の音声ファイルが再生される」処理なので、
Sound1からSound1.PlayをButton1.Clickにパズルのようにはめる。
 |
| 送信者 blog画像 |
 |
| 送信者 blog画像 |
これで、処理部分が完成した。
■動作チェック
処理部分が完成したので、AVDでアプリの動作確認を行なう。
Open the Blocks Editorの画面右上「Connect to phone」をクリック。
 |
| 送信者 blog画像 |
AVDにアプリが登場！
 |
| 送信者 blog画像 |
これで終了だ。
最大の難所は、やはりJava Web Startを立ち上げられるかどうかだろう。
それができれば、誰でも簡単にandroidアプリが開発できる。
[HT-03a]Androidアプリをマウスで開発「App Inventor For Android」セットアップ編
Posted by ミクリ
on 2010 年 9 月 19 日
No comments
「App Inventor For Android」がベータ版としてついに公開された。
早速、サンプルアプリを作成し、操作を実感してみた。
YouTubeにアップされているレッスン動画を見れば、
簡単にセットアップが完了したが、メモとして残す。
セットアップさえ終われば、サンプルアプリも簡単に作成できるので、
今回は重要な点と環境設定の手順のみを解説する。
■App Inventorで準備すること
・App Inventor For Androidが利用できるユーザーであること
・Javaをインストールすること
・Android SDKをインストールすること
・Android携帯を持っている人は、USBでPCと接続できていることを確認すること
・App Inventor Extras Softwareをインストールすること
■App Inventorの開発手法
・Androidアプリのデザインは、ウェブ上(ブラウザ)で作成する
・Androidアプリの処理部分は、Java Web Startで作成する
では、ここから詳細な解説をおこなう。
■App Inventorの開発環境セットアップ
まず、Java6を普通にインストールする。
http://www.java.com/ja/
 |
| 送信者 blog画像 |
最新版のAndroid SDKをインストールする。
（現時点での最新版は、android-sdk_r07-windows.zip）
これは、Android携帯のエミュレータとか入っている開発キット。
インストールは、zip解凍して適当なディレクトリに設置するのみ。
http://developer.android.com/sdk/index.html
 |
| 送信者 blog画像 |
App Inventor Extras Softwareをインストールする。
(installer softwareのリンクをクリックしインストーラをダウンロード)
よくわからないけどドライバとか入ってるっぽいのでインストールする。
インストーラなので「次へ」を連発すればインストールされる。
http://appinventor.googlelabs.com/learn/setup/setupwindows.html
 |
| 送信者 blog画像 |
Android SDKにてSDK Platformパッケージをインストールする。
まず${ANDROID_SDK_HOME}/tools/android.batを起動する。
 |
| 送信者 blog画像 |
Android SDK and AVD Managerというのが開くので、
Installed PackagesタブからAndroid SDK Tools, revision 7を選択し、
「Update All」をクリックする。
指示に従ってそのままインストールを開始（少し時間がかかる）。
 |
| 送信者 blog画像 |
忘れないうちに、先に自分で作成したアプリを動作させる環境だけセットアップしておく。
Virtual DevicesタブからNewをクリック
 |
| 送信者 blog画像 |
Nameは自由に、Targetは自分が開発したいAndroidのバージョン、
SD Cardは想定されるSD Cardのサイズ。
(特に決まってないならバージョンは2.2、SD Cardは16MiBで進める)
 |
| 送信者 blog画像 |
作成したAVD(Android Virtual Device)を選択し、Startボタンで起動する。
 |
| 送信者 blog画像 |
Launch Optionsでは特にチェックを入れず、そのままLaunchをクリックする。
 |
| 送信者 blog画像 |
ついにAVDが起動した。
 |
| 送信者 blog画像 |
これで一通りのセットアップが完了だ。
これで駄目だったら、以下の参考URLで動画見て勉強してください。
■参考URL
これを手順どおりにやっただけなので、動画だしこっちを見た方がよいかも。
Lesson 1(環境設定): http://www.youtube.com/watch?v=NtK5ccqUt6Q
Lesson 2(サンプル開発): http://www.youtube.com/watch?v=t5o3bTMVDVw
