5分でできる!? Firefoxでスマホアプリを作る方法

はじめてのプログラミング 後半戦が開始

鈴木顕照氏（以下、鈴木）：後半戦も頑張っていきましょう。

青島りこ氏（以下、青島）：はーい、元気出して。

鈴木：引き続き元気出して頑張っていきましょう。部長の鈴木です。

青島：部員代表の青島です。よろしくお願いします。

鈴木：よろしくお願いします。後半戦はりこちゃんと一緒にやっていきます。もちろんコーチはこの方。

中島俊治氏（以下、中島）：ん？　こっち？　ヨッ！

鈴木：中島コーチです。よろしくお願いします。

中島、青島：お願いします。

鈴木：後半戦が始まる前に注意点を1つだけ言っておきます。生放送限定でございます。録画が無いので気をつけてください。それでは後半戦を始めていきたいんですけれども、後半戦は実習は無いようです。

青島：おおっ座学。

鈴木：座学というか、ちょっとおもしろいものを見せてくれるっていうことなんで。

青島：えーっ楽しみですねー。

鈴木：なので今回りこちゃんは、リアクション要員です。

青島：わかりました。がんばります。

鈴木：ただリアクションするだけですね。

中島：ちょっとネットとお電話を用意しないとね。

鈴木：そういうことですね。

中島：たぶん喜んでくれますよ。

鈴木：タイムスケジュールをもう1回確認しておきましょう。タイムスケジュール、ドンッ！　今ここです。

中島：ちょっと楽しすぎるというか、そんな打ち合わせなかったよね（笑）。

鈴木：③、④との間にミニコーナーがあります。後半戦も頑張っていきましょう。ということでテーマを見ていきましょうか。

中島：3番目ですね。

青島：予想が当たるかな？

鈴木：きょうから君もWebミュージシャン①②ときてますから。

青島：私の予想は③。

3つ目のテーマ「スマホアプる！」

鈴木：きょうから君もWebミュージシャン③なのかどうか、見ていきましょう。 3つ目のテーマこちら。

青島：あ！　スマホアプる！　違いましたね。

鈴木：違うね。「スマホアプる！」でございます。

青島：先ほどMさんから「専門用語はあるのでしょうか」とコメントくださってましたが。

鈴木：専門用語は無かったんですね。Nさんが仰ってるのは、JASRACさんのアレなんですよ。うちは放送してるんでね、ちょっと難しい場合があるんですね。

中島：インターネットの場合は送信可能化権とか、公衆送信権とか、著作権と著作権の隣接権とか、いろいろあるんですよね。なので法律の相談をしてもいいですか。ダメ？

鈴木：ダメです（笑）。そういうのじゃないです。ただ思いのほか皆さん全然セーフだったので良かったです。

中島：そこまでツールができてないっていうだけの話ですけどね。

鈴木：それでは3つ目のテーマ「スマホアプる！」。中島コーチにやっていただきましょう。それではよろしくお願いします。

中島：Oさんが書いてらっしゃいますが「スマホアップル」と。リンゴのことです。やっぱりかじり部ですから、リンゴ。最後の1つ手前の授業ですから、リンゴでスマホでアプる（笑）。スマホのアプリです。言いたいことは。

私たちはアプリケーション、さっき言ってたいい意味でのお金儲け、あとマネタイズとよく言いますよね。お金をどうやって収益を上げるか。いろんな方法があります。

その中でスマートフォンのアプリという、それでもって収益を上げる方法がありますし、それからよく言われるのが、検索エンジンで例えばランクをアップして儲けていく。

人を集客するよりもスマートフォンのアプリをつくって、それをみんなで楽しんでもらって、それで認知度を上げていく、なんてこともあったりします。

よく映画のスマートフォンのアプリあったりして、逃げる逃げないとか、何かありましたよね。なんだとは言いませんけど。そういったものに使うと、言い方は悪いですがプロモーションの手段としても使えるでしょうし、それから最近は自治体とかが町おこしで、例えばどこどこに行った、どこどこの洞窟に行ったら一条の光が差し込んできて……それはさっきのか（笑）。

青島：聞いたことがあると思った（笑）。

中島：ピンポイントでどこどこを回ったら特典がもらえますよとか、ありますよね。そういったアプリケーションをつくることもできます。なぜならスマートフォンを2つ持ってきましたが、これなんかはやっぱりGPSが付いてるから、ということです。スマートフォンの機能を使って、アプリケーションをつくって、みんなで何したい？

鈴木：お、か、ね、儲け。

中島：ただ最近は、つくれば売れるっていうものじゃないです。それなりのいろんなプロモーションが必要になります。そこはそういったスタートアップの先生とかにお任せするとして、私たちはアプリケーションをつくりましょう。

アプリをつくってFirefoxのスマホに入れてみよう

中島：アプリケーションをつくるとして、いろんなやり方があります。詳しいことは次のコーナーで話をするんですが、HTML5が私の今のポジション。

ですのでHTML5流にアプリケーション、スマホのアプリをつくるとしたらどうしようか？　それで昨日一昨日とずっと考えてて、毎日朝方、夜が明けるまで考えてました。寝不足です。

2つあるんですよ。その1つ目。Firefoxのスマートフォンです。Firefox OSと書いてあります。HTML5、JavaScript、それでこれで全部できてるんですよ。これにHTML5のアプリケーションをインストールすることができます。あんまりこういうのってやってないと思うんですよ。

こういったスマホ持っている人ってあまりいない。これは開発用で、今aのつく会社様がちゃんとしたものを出してます。もうちょっと上のやつです。これは開発者用です。これにアプリケーションをつくって入れてみましょう。っていうことをやってみます。

結構これは新興国では使われてるみたいです。世界で売るとひょっとしたら売れるかもしれない。さっきのアプリケーションもこれですからね。

青島：もう横で見てました。私もやりたいって思いながら。

中島：後でゆっくりやらさせてあげます。ということで今からやっていきますので、見ててください。今日はFirefoxのアプリケーションやりますから、ちょっと興味を持ってもらうといいかなと思っています。まず1つ目いきましょう。

じゃあデスクトップのほうを覗いてください。

鈴木：中島コーチのデスクトップです。

中島：今日使っていくもの。Firefoxになります。何で？　ブラウザですよね？　Firefoxは昔はNetscape Navigatorといって使っていたネットスケープ社の流れを汲んでいる結構おもしろい会社です。

いろんなことに挑戦してる、最近ではテレビとかと協力しながら、スマートフォンをつくったりとか、いろんなことをやっています。とりあえずFirefoxを起動しちゃいます。

Firefoxが大好きな人がいらっしゃったらこの狐さんいいですよね。実はただブラウザで見るだけじゃなくて、こういうアプリケーションをつくることができる。

じゃあ今からつくりますので、誰か時間をタイマーで計っといてください。途中で失敗したらごめんね。何が起こるか分からない世界ですから。

青島：先生が何分でつくれるか。

中島：そう当ててください。

鈴木：じゃあちょっと予想しましょう。一番近かった人にプレゼントをあげましょう。ステッカーとかじりブラシ全部セット。

中島：プラス自腹で？

鈴木：自腹で僕が（笑）？。

中島：ウソウソ（笑）。

鈴木：一番近かった人にプレゼントあげますよ。ステッカーとかじりブラシセットで。

青島：先生が何分でつくれるか。

鈴木：皆さん予想してください。

中島：誰か時計を計っといてね。

鈴木：あ、ミドちゃんが。ミドちゃんが計ってくれる。

青島：向こうにいるミドちゃんが計ってくれます。

鈴木：皆さん予想タイムをタイムラインに。

青島：じゃあ私も書きます。

鈴木：初めての人も予想タイムを書いといてくださいね。書いて損はないですからね。

青島：そうですね。当たったらラッキーって。

鈴木：Pさん30分、Qさん10分。

中島：30分だったらもう終わっちゃうんだけど。8分とかね。

鈴木：Rさんは8分。これメモしとかないと忘れちゃうよね。これメモをミドちゃんに頼んでいいかな。

青島：ミドちゃんのお仕事が増えちゃいますよ。

中島：これ終わってからでもいいんじゃない。

鈴木：すごい細かい人もいますね。Sさん15分、Tさん3分15秒、おおーどんどん来ますね。

中島：あの、1分は無理（笑）。

鈴木：Uさん3分30秒、Vさんが3分48秒。

青島：Wさん「コーチなら5分でいける」（笑）。

中島：ハードル高い。

青島：私も3分って書いたんですよ。

鈴木：そろそろ締め切ろうかな。ガンガン来ますね。5分多いですね。どうでしょうかね。さぁさぁさぁ。

中島：Xさん、7分だって。

鈴木：いいですね。そろそろ締め切りたいと思います、ガンガン来るんですよ、まだね。じゃあ締め切りはもうちょっと先にしようかな。「一生続けてください」どういうことですか、これは（笑）。

中島：それ大事かもね。ずーっとやっていく。アプリというのは完成がないですからね。

青島：確かに。

鈴木：奥が深いなぁ。

中島：深いですね。Web2.0の再来、3.0。

鈴木：もう締め切りますよ。もういいですか。皆さん。ガンガン来るんですよ。

青島：もう終わらないですね。

鈴木：もう締め切るよ。はい、締め切りました！　じゃあやりましょうか。

FirefoxのブラウザでWeb開発ができる

中島：いきまーす。

青島：お願いします。

中島：誰かスタートってお願いします。

鈴木：はい。時間を計ってもらえますか。準備オッケーですね。さあいきましょう。ヨーイ、スタート！

中島：そんなに慌てないでやりますので。ブラウザを開いてます。Mozillaさんです。Firefoxというブラウザを使います。Firefoxのブラウザということでよろしいですね。そうすると上側にツールってありまして、Web開発っていうのができるんですよ。

その中に、WebIDEが存在しています。ちょうどぎりぎり見えてますね。WebIDE、これが開発環境になります。押しますよ。いきますよ。せーの、よいしょ！

鈴木：どうだ？

青島：読み込み中。

中島：たぶんちょっとエラーが出るかもしれません。ほら来た（笑）。実はちょっとここらへんにこれを設定しておきます。ちょっと待ってね。

鈴木：ミドちゃん、今どれぐらい？

青島：今1分だそうです。Yさん「深いなぁ」とコメントくださってます。

中島：これでもいけたかな、もう1回か。なんかやっぱり住んでますね。よいしょ。

鈴木：ちなみに2回以上時間を投稿した人は無効にします。ダメです、そういうのは。厳しいですか？

青島：はい。厳しい。

鈴木：じゃあ一番最初の投稿だけ。

中島：おっしゃ！　来た！　まだ時間入ってますよね。じゃあ今からつくります。さっき何をしたかというと、スマートフォンと同期を取ったんですよ。

今つながってるんですよ。この中に直接インストールするんですね。グイッグイッこちら「アプリを開く」とあります。「新規アプリ」いきますよ。ぽいっ。

ハローワールド。いちばんシンプルなやつできます。それでプロジェクト名、アプリケーションに名前をつけたいので何がいいですかね。

青島：はい！　「中島コーチ」がいいです。

中島：ちょっと待って。「なかしまぁコーチ」、でいい？

青島：かじり部限定ですからね。中島コーチが見られるのは。

中島：実は前々回の一番最初のBMI。何でしたっけ？　BMIって。

青島：Body……。

鈴木：Body？

青島：Max。Ikemen.。

鈴木：わー（笑）。

青島：わかんないです（笑）。

鈴木：すごい妄想が膨らんでる。

中島：そうしているうちにデスクトップにとりあえずファイルを置くことにします。保存しておきます。

鈴木：ボディマックスイケメン、これはおもしろいね（笑）。

青島：意味わかんない。ボディマッチョにしますよ。ボディマッチョなイケメン。

鈴木：そういうのが好きなんですね。

青島：いやー残念ながらそうでは無いですが。

BMIのアプリが完成！

中島：いろいろトラブルが起こって今大変です。「なかしまぁコーチ」だけにさせてもらいます。よいしょ。あ、来た来た、良かった。「なかしまぁコーチ」のアプリができあがりました。今何分ですか？

鈴木：何分？　3分！

中島：まだ3分。

鈴木：3分52秒。

中島：これだけ失敗しながらもできてるんですね。実はここにもう、ファイルを準備してくれています。アイコンを入れる場所とか、JavaScriptとか、HTMLとか、あとお約束事のいろんなファイルの規約を入れる場所があって、大事なindex.html。あれ？　アプリケーションって、index.htmlあるの？　押します。

ほら、どっかで見たことがあるアプリ。何か出てきてますよね。うん。HTMLファイルなんですよ。場所わかるかな、大丈夫かな、このツールのこの場所です。ここがエディターになっています。だからテキストエディターとか無くても、実はできるんですよ。

ここに私達が一番最初につくった何かありましたよね。BMIってありましたよね。このアプリのソースを持ってきます。ソースどこだっけ？　ソースはmiで開いちゃえ。

青島：よいしょ。

中島：よいしょ、ありがとう。今ね、テンパってるからね。全部コピっちゃいました。今HTML5でつくったやつ。それをそのままこのエディターの中に。この中を丸ごと選択する。これcommand+Aです。それで1回消しちゃいます。

消えたら、command+Vで、よいしょ。もう入っちゃいました。これは前々回つくったやつです。できあがりました。保存します。command+Sで保存しちゃいます。もう保存できました。アプリできちゃった。

青島：えーっ、すごーい！

中島：でもまだです。このパソコンの中です。

青島：ちなみに今、2020『できた』がちょうど来てますよ。

中島：嬉しいなぁ。

青島：目標達成してしまった。

中島：じゃあここからが大変なんだけど、この画面見えるな？　私の画面といけるのか。こちらの技術力に期待しますけど。

鈴木：画面をつくれるかな？

青島：先生の画面を映しつつ。先生の手のひらを映す。

中島：難しいかな。さっきはうまくいったんですけどね。

鈴木：あっもう決まった！

中島：素晴らしい。なんかすごいですね。こちらの技術力はね。はい、じゃあこんな感じで。今からいきますから、見ておいてください。いきますよ。えっと、これ。

鈴木：これが入った瞬間が静止タイムとします。

中島：ありがとう。いきますよ。せーの、ポチ。

青島：おっ、増えました！　あっ出た！

鈴木：来た！

中島：アプリケーションができあがりました。この中にインストールが終わっちゃいました。ありがとうございました。これでアプリケーションができあがり。最後の完成品がここ。見えますか？　さっき2つあったのが3つになってて。

1つ目がその「なかしまぁ」というアプリのできあがりになりました。ちゃんとアプリになってるはず。よいしょ。アプリケーションのできあがりです。ここでじゃあコールしていただいて、そこまでということで。

鈴木：はい、終了でーす！

青島：カンカンカーン！

鈴木：「ずるい」とか言ってますよ。皆さん。

中島：なんで？

鈴木：「コピるのはずるい」。

中島：いやいや、それは（笑）。アプリをつくるのね。でも何分ぐらいでしたか？

5分55秒でアプリができた！

鈴木：さぁタイムを発表しましょう。

青島：はい教えてください……おおっすごい！

中島：まじ!?

鈴木：タイムを発表したいと思います。アプリをつくろうのタイムは、5分55秒でした！

青島：すごーい。

（拍手）

中島：HTML5ですからね。

青島：さすが！　

中島：ちゃんと時計を見ながらやってました。嘘です（笑）。

鈴木：当選者の発表は後ほどエンディングの時にしたいと思います。

中島：おもしろいですよね。5分55秒ってダジャレじゃないとたぶんつくんないですよね。いるのかな、どうかな。

鈴木：一番近い方にプレゼントしたいと思います。これはサービスなので、皆さんあまり熱くならないように（笑）。

中島：結構熱くなってますよね。そうかみんなそれがいいのか。

青島：私も外れてしまいました。3分って書いたのに。

鈴木：というところですね、スマホアプる。以上ですか。

中島：ところがですね、私たちはこれをFirefoxのスマートフォンで、これは開発者用のツールでスマホなんですよ。開発用だからちょっと一般的じゃない。

諸外国ではFirefoxのスマートフォンがいっぱいあるんですが、申し訳ないですけど私たちが使うとしたら、iPhoneとかAndroidになりますよね。

本当はそちらもやればいいんですが、そこら辺は例えば他の授業を受けてらっしゃる、講師やってらっしゃる誰でしたっけね？　ちょっとツインテールの方ね。岡本先生だったかな。

ジャスティスさん。という人がいらっしゃいます。授業は本当に個性的な先生が多いですよね。

鈴木：多いですよ。プログラミングの授業は、おもしろい先生がいっぱいいらっしゃいますからね。

中島：私まぎれて一緒に遊んでますもんね。

鈴木：そうですね。トップ走ってますからね。

中島：マジですか。そんなことはない。私は後塵を排してますけどね。やっぱりiPhoneとAndroidをどうすればいいか。その時に．HTML5というカテゴリーでどうしたらいいか、っていうことでご紹介だけしておきたいと思います。

よく使うものが、こんなの私は使ってます。とりあえずFirefoxさんさようなら。ありがとうねー。

鈴木、青島：さようなら～。アプリできました、ありがとう。

アプリ開発プラットフォーム1「monaka」について

中島：実はJSくんの中で、さっき見ていただいたやつの中のエディターの中に、一番最後に「monaka」って入れていると思います。お腹じゃなくてもなかです。こっち見ないでくださいね。

鈴木：後でお腹をカメラで映しましょうか。

青島：皆さん気になってますからねぇ。

中島：ばれてないからやめとこ。「monaka」をクリックしてください。そうするとこういったページが出てきます。

別に紹介とかじゃなくて、みんな使っているので是非みんなもどうですかという話です。岡本先生がいらっしゃる会社のツールになっています。ちょっとログインしてみますね。

電力使用量っていうのは最初のときにやったグラフの作成で、これはかじり部じゃなかったかな、その前の時にやったんですけど、実はスマートフォンのアプリがこれでできちゃうんですよ。

さっきのを思い出しながら見て欲しいんですが。開きます。これはIDEと言いまして開発環境でして、ここ見えますかね？ ほら諸々HTMLになってるんですよ。JavaScriptも入っています。

いろいろ入れてますけども、これはこの前にやった電力の量を円グラフで表示するアプリケーションです。

これは全部HTML5です。HTMLとCSSとJavaScriptだけでできています。これをそのまま入れました。それで保存しちゃいます。もう保存してますけど、そうするとこちら見てもらえますか。

鈴木：こっちいきますか。iPhone。

中島：なるべく大きくするようにします。こちらで大きくするようにしましょうかね。個人的なアプリケーションが何入っているかなんていうチェックは絶対にしないでください。

鈴木：チェックはしないでくださいね。これはフリですよ。

中島：いやいや（笑）。この中の一番上のところに四角いカタカナの「ロ」みたいなアプリがありますよね。それを押しちゃいます。これはMONAKAが提供しているアプリケーションでして、こんな感じで、あっ見えてる見えてる。

アプリケーションが見えてて、一番上が電力使用量になってまして、押します。同期してるんですよ。Wi-Fiで同期しているので。ちょっと待って。

青島：あれ？

中島：「プロジェクトの取得に失敗しました」って出ちゃった。仕方がないなぁ。ちょっと何か起こったのかな。同期がしにくかったですね。すいません。本当はできるはずなんだけど、今はできないんでごめんなさい。仕方がないから、あれ？

青島：他のやつもできなくなってますね、今。

中島：「プロジェクトの取得に失敗しました」は、たぶんログアウトしちゃったのかな。本当はここでデバッグができるっていうことをお見せしようと思ったんですよ。ちょっとごめんなさいね。

見えなくなっちゃったんで、もし時間があってできたら、またすることにしますが、言いたいことはそのmonakaという仕組みで、スマートフォンのアプリケーションがつくれますよということをご紹介しておきます。

鈴木：ありがとうございました。3つ目のテーマ「スマホアプる！」以上でございます。続いてはこちらのコーナー参りましょう。もっともっと！　かじり部。

青島：イェーイ！

（拍手）

鈴木：テロップが違ーう！

青島：課題添削になってる。

鈴木：もう1回、来い！

青島：できた！

（3人で一本締めをする）

鈴木：なんで一本締めだよ（笑）。