子供の夏休みの自由研究を手伝おう！

でも、子供の夏休みの自由研究に、何を題材にしたらいいかわからない……

と毎年夏休みが来る度に、悩みを抱えている親御様は少なくないのではないでしょうか。

そこで今回は「プログラミング」を題材にした自由研究についてご紹介します。

弊社は毎年夏休みの時期になると、プログラミングを使った夏休みの自由研究のコースを提案しております。

去年は「micro:bit」、「障害物回避戦車」、「オリジナルデジタル時計」の三種類のコースを実施いたしました。

実際の授業の様子とともに、それぞれがどのようなものを作るかを紹介します。

>>プログラミングを使った自由研究ができる夏の1DAYプログラミング開催中

1.micro:bit

1-1.micro:bitとは

micro:bitは2017年にイギリスで開発されたマイクロコンピューターです。

プログラミングをして、 LEDを光らせて、音を出したりすることで、自由な発想でゲームを作ったりすることができます。

中央に25個のLED、左右に二個のボタンスイッチ、加速度センサー、磁力センサー、無線通信機能等がついており、このような機能をプログラミングに組み込んで作品を作ります。

1-2.授業の様子

日本語のブロックを組み合わせいてプログラミングをしていきます。

プログラミングの基礎や各センサーの使い方を実際に動かしながら学びます。

理解が深まったら、弊社が用意したゲームを製作します。

降ってくる隕石をボタンを押して避けるゲームです。

早く完成した人は、作ったゲームにアレンジを加えて、自分だけのオリジナルゲームを作ります。

2.障害物回避戦車

まず、戦車の基礎となるパーツを組み立てます。

戦車の核である機能のモーターもここで組み立てるのですが、パーツが細かくて子供達は、なかなか苦戦している様子でしたが、講師と一緒に丁寧に組み上げていました。

次に、モーターやそれぞれのギア、センサーががどのような役割を果たしているかを学びます。

そして、センサーに反応した障害物を避けるような動きを戦車にさせるために日本語のブロックでプログラミングを組んで行きます。

戦車が障害物を避けるような挙動をしてくれることを確認できたらあとは仕上げです。

最後に、戦車のパーツが入っていた箱の型紙を使って、戦車を覆います。

この戦車の外観を決める工程に、子供達のそれぞれの個性が出ていたように思います。

戦車の大砲の大きさがそれぞれ違っていたり、型紙に貼る迷彩柄の紙の色が違っていたり、羽根が生えていたり、豊かな発想でとても楽しんでいるように見受けられました。

3.オリジナルデジタル時計

時計のディスプレイの色、アラームの音の、高さや長さ等を制御するプログラミングを組みます。

音楽は自分の好きな曲の楽譜をgoogleで調べて、それをプラグラミングで再現したりするなど、こだわっている子供たちもいました。

外観は戦車と同様に自分なりのデコレーションを施すことで、煌びやかで、可愛らしい作品に仕上がっていました。

4.提出用レポート

自由研究は提出するレポートの作成に苦労することが多いと思います。

作品を作る過程や完成した写真を撮ったり、苦労したこと、こだわった部分等を書くと思いますが、それをまとめる作業は骨が折れることでしょう。

しかしながら、弊社はレポートを作成するまでお手伝いさせていただきました。

レポートのテンプレートをあらかじめ準備しているので、決められた項目に記入したり、授業の様子や、実際に組みあげたプログラムの写真を貼ることで簡単に作成できます。

>>プログラミングを使った自由研究ができる夏の1DAYプログラミング開催中

5.まとめ

いかがでしたでしょうか。

いずれの三種類のどのコースも子供たちが大いに楽しんでくれていたように思いました。

夏休みの宿題である自由研究は「やらされている」感で楽しめない子供達が少なくないと思います。

ですが、プログラミングを使った自由研究は、子供たちが各々の発想と工夫で、楽しみながら、自分なりの作品を創造してくれることに間違いありません。

自由研究にしても何にしても、子供達には常に楽しんでもらいたいと僕は思います。

今年の夏も、そんな子供たちが楽しんでくれような、自由研究コースを弊社で実施します！

小学校でのプログラミング必修化まであと1年を切りました。

この夏の自由研究でプログラミングを学んでおけば、必修化まで残りわずかでも間に合います！

是非この夏に、お子様の未来を豊かにするプログラミングを親子で体験してみてください。

全国放送のTV局3局の取材が入るなど大注目だった一昨年。連日満席で大盛況の内に終わった昨年。

作った作品を持ち帰れるのはもちろん、レポートの提出用紙までサポートする充実の内容となっております。

お申し込み、詳細は弊社サイトの自由研究コースをご覧ください。

ご予約がいっぱいで埋まる前にお申し込みはお早めに！

平成から令和へ。時代はどんどん新しくなっていきます。果たして令和はどんな時代になっていくのでしょうか。

1.令和に込められた意味について

これまでの元号は中国の古典から出典されていました。

令和（れいわ）は日本最古の歌集の万葉集から出典されており、初めて日本の古典からの出典となりました。

「時、初春の令月(れいげつ)にして、氣淑く風和ぎ、梅は鏡前の粉を披き、蘭は珮後の香を薫す。」 

出典：万葉集の梅の花32首

安倍首相は4月1日、会見で以下のように談話を発表しました。

厳しい寒さの後に春の訪れを告げ、見事に咲き誇る梅の花のように、一人ひとりの日本人が、明日への希望とともに、それぞれの花を大きく咲かせることができる。そうした日本でありたい、との願いを込め、「令和」に決定いたしました。

出典：https://nlab.itmedia.co.jp/nl/articles/1904/01/news090.html

ちなみに平成は「天地、内外ともに平和が達成される」を意味していました。

やはり、どんな時代も平和の追求ということですね。

2.令和はこんな時代に！？

2-1.令和2年(2020年) 東京オリンピック

やはりなんといっても最初のビッグイベントは東京オリンピックです。

2020年7月24日から8月9日まで東京で開催されます。実に1964年以来2回目の開催です。

滝沢クリステルさんのプレゼンの「おもてなし」がとても印象的で、2013年の流行語大賞にもなりました。

開催が今から待ち遠しいですね。

2-2.令和9年(2027年) リニア中央新幹線開業

「歴史をつなぎ、未来をつくる。」

令和9年は超電導リニアがいよいよ、開業予定です。時速500kmで品川・名古屋間で2027年に開業予定です。

公式サイト（https://linear-chuo-shinkansen.jr-central.co.jp/）もかっこいいです！

2-3.令和27年(2045年) シンギュラリティ

シンギュラリティ、それは2045年と予測されている、人工知能が人間の能力を超える技術的特異点のことです。

人間がAIやナノテクノロジーなどとの融合により人間の成長曲線が無限大になる点、特異点に到達することです。パラダイムシフトとも言いかえることができるでしょう。

特異点とはy=1/xのとき、xが1のときはyは1。xが0.1のときはyは10。xが0.001のときyは1000。

ではxが0.000000・・・・・と、0になった時、y=+∞と無限大になります。
このように一般のところと比べて異常な形態を示すところを特異点と呼びます。

2045年問題とも言われ、2000年問題とは比べものにならないくらいの注目を集めています。

シンギュラリティについてはコチラ。

2-4.令和32年(2050年) 宇宙エレベーター

まるでSF映画のような構想の「宇宙エレベーター建設構想」がどんどん現実味を帯びてきているようです。

日本で開発されたカーボンナノチューブという素材を使い、総延長9.6万kmのケーブルを繋ぎ、エレベーターを運行させる計画です。

東京スカイツリーを手がけた大手ゼネコン大林組が実現すると発表しています。

2050年ともなると、AIが人間の知能を超え、宇宙にはエレベーターで行けて・・・と、もうとんでもない世界が広がっていますね。

2-5.他にも・・・

他にも、空飛ぶ車や農業の自動化、血管に入り込むナノロボットなど、様々な新技術が現時点で予測されています。

話題のVR(仮想現実)も現実と区別がつかないほどリアルになると言われています。

3.「令和」を生きる私たちや子供達に必要な事

経済産業省は令和12年（2030年）には約41万人〜79万人IT人材が不足すると推測しております。

参考：経済産業省『IT人材の最新動向と将来推計に関する調査結果～報告書概要版～』

シナリオにそってその数は変わるものの、今後あらゆる職業や業種にITやプログラムが必要となってきます。

よく、AIに奪われる仕事についてのニュースや記事も目にしますが、あらゆる業界と親和性が高いプログラミングについて、今後ますます必須スキルとなる見込みです。

AIやビッグデータ、IoTなどの技術で今日常にある、あらゆるものがこれからすごい速度で進化していきます。

平成が始まる前には、スマートフォンやドローン、自動運転の車などもはや当たり前になりつつあるものが存在しかったように・・・。

もし今あなたが、「プログラミングを覚えたい！」「けど何から手をつければいいのか全くわからない」と思っていたら、ぜひ一度体験教室に遊びに来てください。お子様向けクラスはコチラです。

これからの令和以降の時代は子供達はもちろん、私たち大人にとっても、ITスキルがますます欠かせないものとなっていきます。

是非一度、弊社プログラミング教室にて、プログラミングを体験してみてください。

みなさんこんにちは！

今日は、もともとエクセルすら触った事もなく、がっつり文系だった私が、不動産営業をやめて転職し、20代のうちにプログラミングを始めて、プログラマーという職種を経験しておいて良かった事を改めて振り返ってみます。

挫折率90％とも言われるプログラミングですが、習得した先の可能性はすごいです。小学校でも2020年からプログラミングが必修となり、その子たちが大人になり働く2030年頃にはますます必須スキルとなります。

2045年にAIが人間を超えると言われているシンギュラリティ（技術的特異点）も控え、プログラミングを始めとしたITスキルはますます需要が高まっていきます。

シンギュラリティについてはコチラ。

1.市場価値を高める武器ができる。スキルを組み合わせて希少性を高め差別化された「自分」を創出できる。

真っ先に思い浮かぶのがこれですね。

突然ですが、「あなたは何ができますか？」

こう聞かれてすぐに答えられますか？

真っ先に答えられるのは意外と難しいですよね。

これがエンジニアならものすごく分かりやすいんです。

始めて会った人でも、すぐにその人がどんなスキルを持っているのか等すぐにわかります。

「〇〇株式会社で、▲▲のゲームのAWSを使ったインフラ構築とlaravelを使ってサーバーサイドの処理を4年間担当していて、今はリードエンジニアやっています。」

これだけでその人がどんなエンジニアなのかざっくりわかる感覚です。

しかもエンジニアの場合、フロントエンド、バックエンドやアプリなどと区分がいろいろとありますが、スキルの組み合わせの可能性が凄いです。

同じ年数経験を積んでも、誰一人まったく同じエンジニアにはならないでしょう。

例えばCTOはフルスタックエンジニアでいて、インフラやセキュリティやネットワークなどなんでも出来る技術者のスペシャリストです。

役職にかかわらず、ある人はフロントエンド×UX/UIデザイン。ある人はサーバーサイド×上流工程のインフラ構築やDB設計。ある人はディレクター×WEBマーケッター×デザインなど。あらゆるスキルを掛け合わせて市場価値を高める事が可能なのが魅力的な業界ですよね。

例えば私の場合、スタートアップの経営者なので”広くほどほどに詳しく”といったスキルが求められていると思っています。

営業×ファイナンス×マネージメント×経営戦略×マーケ×経理×人事労務×広報×教育×ディレクション×プログラミング　といった感じですかね。

どれも専門家程精通していないとしても、”知らない”では済まされないし、ただの怠慢となってしまいます。

いろんな職種の方とやりとりする事が、とても多いのでその時にある程度知らないと話にならないというのもあります。

経営はちょっと特殊な仕事ですが、プログラマーの場合、3年後、5年後なりたい自分を思い描いてスキルを出来る限り細分化し、勉強するといいと思います。

例えば上流工程もやりたい人は、プログラマーの仕事をしながら資格試験をうけてみるのも手段としてはいいと思います。

2.アイディアを目に見えた形にする事ができる。”今ないものは自分で作ればいい”を実感。

子供の頃から兎に角もの作りが好きだった私にとっては、これは本当に魅力的です。

中学校の頃から曲を書いて編曲しMTRという機械でレコーディングしていました。ジャケットなども作って、それを友達に買ってもらったりCD屋さんにもっていって置いてくださいと頼んだり笑　

プログラマーになってからも、アプリを自分で企画して作ってだしたり、ブログ作って書いたりと、もの作りは好きですね。

しかしふりかえると数えきれない程たくさん失敗してまいりました笑

少々脱線してしまいましたが、クリエイティブな仕事が好きな人にとっては、実際にプログラムを書いて、思っていたように動くということはとても魅力的ですよね。

3.物事を論理的、構造的に捉える思考が身につく。

もともと理屈っぽい部分はあるのですが、プログラマーになってからすごく思考する習慣がつきました。

実はこれが一番私を成長させてくれていると感じています。

日常で問いや批判的思考（クリティカル・シンキング）を意識して考えるようになりました。そもそも前提はあってるの？という思考です。

並んで入ったラーメン屋さんがあまり美味しくなかった時、そもそも行列ができているから美味しく感じてしまっているだけなのではないか(バンドワゴン効果)など様々な仮説を立てデータをもとに検証したりすることです。

一見するとかなりひねくれてそうですが、この思考の習慣がとても大切です。

プログラムの機能やバグなど、普段ユーザーとして使うアプリも、そもそもこの機能いらなくない？誰か使ってるの？とひとりでツッコミをいれながら検証してみると多くの発見があるはずです。

サービスについて改善していくときもこの考えはものすごく大切です。プロダクトやプログラミングだけでなく、会社という組織や事業そのものにも当てはまります。

4.優秀な人達と知り合う事ができて一緒に仕事ができる。

これは結果論になってしまいますが、最新の情報や技術が要求されるIT業界で活躍されている方は尊敬できると思える方が多いです。

仕事において環境はとても大切です。

仕事でやりがいもって成長するために大切な要素は、1に人、2に人、3に人だと思います。

社内外問わず、年齢問わず、凄い！と思える人と働けるのはとても有難い事だと思います。

5.ビジネスとしての可能性が無限。レバレッジ効かせる事ができる。

イニシャルコストがほとんどかからないのが魅力的ですよね。

オフィスなくてもPCひとつあれば事業を起こす事ができるというのはとんでもない事です。

更にすごいのがレバレッジを効かせる事ができる点です。

例えば飲食店やマッサージ屋さんなど、店舗型ビジネスの場合は多店舗展開しないと上限が限られていますよね。しかしアプリやWEBサービス、SaaSなどの事業スキームなら上限はなし。

ビジネスとして夢があるのは間違いないです。最低限必要なのはパソコン1台とプログラミングスキルのみなのですから。

6.仕事に対する考えが大きく変える事ができた。日々の成長が楽しい。

これめちゃくちゃ大切です！

できない事がどんどんできていく成長の実感と、日々の進捗はとてもモチベーションに関係しています。

実際に30年間、1万2千件のレポートを分析したモチベーションについての研究があります。

ハーバードビジネススクール教授のテレサ・アマビールの「マネージャーの最も大切な仕事」という本に興味深い研究結果が載っています。

やりがいのある仕事の進捗がもっともインナーワークライフを向上させる強力な要因であることがわかりました。

では、やりがいのある仕事は何か。

自分の仕事が何かや誰かにとって価値のあるものだと自分が認識する事

と定義しています。

毎日やる事が違って、出来る事が増えていき、成長や進捗を感じられるエンジニア職に人気があるのも頷けます。

出来る事が増えていってそれが形になっていくのを実感できるので、楽めるんですよね。

仕事に対して純粋に楽しい！とかやりがいがある！と思えたのは今思えば大きな転機でした。

7.チャンスが無限大！

もうこれですね、本質は。

そもそもプログラミングと出会っていなかったら、今起業できていたかもわかりません。

メディアもそうです。とくダネやNスタ、モーサテなど地上波のテレビに出れていないと思います。

書籍の出版についてもそうです。詳細はコチラ。少なくともプログラミングと出会っていなければ、unityなど技術書を書くことは100％あり得ません。

刺激的ないい仲間達とも出会ってきています。

お仕事についても日々とても有難いお話を沢山いただきます。

そもそもITエンジニアの仕事って様々な業種と相性がいいですよね。

教育(EdTech)、金融(FinTech)、食品(FoodTech)、医療（MedTech）、不動産（RealEstateTech）など、どんな業界とも新しいイノベーションを起こせる可能性があります。

プログラミングを覚えて、これだけの可能性が生まれるならやらない理由がないですよね。

目的にもよりますが、業務でプロになる事を考えるなら英語やるより全然効率がいいんじゃないでしょうか。なんとなく英会話はじめるくらいなら、確実にプログラミングにした方がいいと思います。

あなたの夢を叶える教室

もし今あなたが、「夢ややりたいことが見つからない」、「何かを頑張らないといけないのはわかっているけど、何から手をつければいいのか全くわからない」と思っていたら、ぜひ一度体験教室に遊びに来てください。お子様向けクラスはコチラ。

弊社プログラミング教室では、完全少人数で授業を行なっています。

お子様がいらっしゃる方は、将来の可能性がグンと広がるプログラミングの体験教室に是非一度いらっしゃってください。まずはscrathやロボットで論理的思考について学んでいきます。

大人の方は作ってみたいアプリをつくったり、基本から一緒に勉強したりやりたいことに合わせて学んでいきます。

難しそう、理系じゃないけど大丈夫なのかな、と思っている方も大丈夫です。

まずは、未経験の状態から一度やってみてから判断してみてください。きっとその広がる世界に感動されると思います。

プログラミングを身につけて、一緒に「夢で満ちあふれた明るい未来を」創っていきましょう！

今回は前回のiOSアプリの申請までの手順「中編」の続きをお送りします。

内容としては前回の続きの6.App Store Connectにアップロード、7.App Store Connectで申請、までやっていきたいと思います。

6.App Store Connectにアップロード

appleへアプリの申請をするために、xcodeで先ほど作ったProvisioning Profileを設定して、projectをarchiveして、App store connect( 旧：itunes connect)にアプリをアップロードします。

6-1.Bundle IDの設定

まず、xcodeを起動します。

projectの「TARGETS」>「General」>「identity」の以下の項目に入力します。

Display Name : アプリの名前（apple storeやホームに表示される名前）

Bundle identifier : 後でApp store connectで設定したものと同じものにします。

違うものに設定してしまうとarchiveの後のvalidateでエラーが出てしまいます。

Version : 最初に提出するものなので「1.0.0」に設定します。

例えば、次にアップデートで提出するときは「1.0.1」のような数字にすることが望ましいとされています。

Build : これも最初に提出するものなので、「1.0.0」にします。

これは必ずしも上記のVersionと一致している必要はありません。

アップロードした後にバグに気が付いて再申請しなければならないときは、もう一度アプリをビルドしなければなりません。

このときにBuildのバージョンを上げる必要があります。

Versionはアプリとしてバージョンを上げるときに一緒に上げる必要があります。

6-2.App Store Connectにアプリを新規登録

App Store Connectでアプリを簡単に登録します。

しかしながら、xcodeでアプリをアップロードしなければ提出することはできないので、ここでする登録は簡単な初期設定だけです。

まず、App Store Connectにアクセスします。

「マイ　App」>「＋」>「新規App」をクリックします。

以下の項目に入力していきます。

名前：アプリの名前

プライマリ言語：全世界に向けて公開するならば英語、日本限定で公開する場合は日本語を設定します。

SKU：在庫管理番号なので、例えば「Hoge001」等に設定します。

Bundle ID：xcodeで設定したものと同じもので、前回にApp IDで設定したものが候補として出てきます。

すべて記入したら「作成」ボタンを押します。

6-3.Archive

xcodeを起動します。

「Simulators,Device」>「Generic iOS Device」を選びます。

「Product」>「Archive」を実行します。

成功すると一覧が表示されます。

次に「Validate App」を実行します。

App Store distribution optionsで「Upload your app’s symbols to receive symbolicated reports from Apple」をチェックして「Next」 で次に進みます。

Select certificate and iOS App Store profilesでcertificateとprovisioning profileを選択します。

アプリの情報が表示されたら「Validate」を選択します。

「App ” ほげ” successfully validated.」となれば成功です。

6-4.Upload

次は「Distribute App」ボタンを押します。

select a method of distributionで「iOS App Store」を選択します。

select a destinationで「Upload」を選択して「Next」で次に進みます。

App Store distribution options で「Upload your app’s symbols to receive symbolicated reports from Apple」をチェックして「Next」 で次に進みます。

Select certificate and iOS App Store profilesでcertificateとprovisioning profileを選択します。

アプリの情報が表示されるので「Upload」を選択します。

uploadingは少し時間がかかります。

「App “ほげ” successfully uploaded.」が表示されたら成功です。

7.App Store Connectで申請

App Store Connectでアプリの情報を登録して申請します。

7-1.スクリーンショットの登録

iphoneとiPadのそれぞれの画面の大きさに合わせて画像を設定します。

このスクリーンショットは実際にiphoneやipadが写っていないとあとでリジェクトされるので注意が必要です。

7-2.バージョン情報登録

以下の項目に入力していきます。

プロモーションテキスト：現在のアプリの機能をユーザーに知らせます。

概要：App Storeに表示されるアプリの説明文

キーワード：アプリに関係するキーワード一つ以上

サポートURL：App storeに表示されるwebページやブログ

マーケティングURL：オプション

7-3.ビルド

「＋」をクリックして先ほどアップロードしたアプリを選択します。

「+」が出てこないのはアップロードがうまくいってないかアップロードに時間がかかっているためです。

7-4.一般情報

下記の項目を入力します。

App Store　アイコン：1024×1024のアイコン画像を登録します。

バージョン：アプリのバージョンをつけます。

年齢制限指定：編集をクリックして質問に答えます。

Copyright：著作権

通称代表連絡先：韓国のApp Storeで公開する場合

Routing App Coverage File：オプション

7-5.App Reviewに関する情報

下記の項目を入力します。

サインイン情報：Appleが機能を審査するときにサインインできるデモアカウントの情報を入力しなければなりません。

連絡先情報：リジェクト等の通知を受け取るときのアドレスを記入します。

メモ：審査をしてもらうときに必要な情報を記入します。

添付ファイル：著作権の使用許可を得ているなどの情報をここに入れます。

上記に問題がなければ「保存」>「審査へ提出」します。

輸出やコンテンツ配信権、広告等についての質問について聞かれるので、これに回答していきます。

問題なく答えられたら、「送信」ボタンを押して、ステータスが審査待ちになったら、appleからの返信を待ちましょう。

リジェクトされたら問題結センターで該当箇所を明示してくれるので、都度修正して、appleに承認されるまでがんばりましょう。

今回は前回のiOSアプリの申請までの手順「前編」の続きをお送りします。

内容としては前回の続きの4.iOS App IDsの登録、5.Provisioning Profileの作成、までやっていきたいと思います。

目次

1. 1.概要
2. 2.アカウントの準備
3. 3.iOS Certificateの作成
4. 4.iOS App IDsの登録
5. 5.Provisioning Profileの作成
6. 6.App Store Connectにアップロード
7. 7.App Store Connectで申請

4.iOS App IDsの登録

Certificateを作ったので、Provisioning Profileを作るために次に必要なものはApp IDsになります。

一度作ると削除できないので要注意です。

4-1.App IDの作成

Apple Developer の Certificates Identifiers & Profilesにアクセスします。

identifiersの「App IDs」> 「＋」を押してAPP IDの新規登録を行います。

「App ID Description」>「Name」にアプリの名前を入力します。

「@, &, *, ‘, “」 などが使えない文字です。

「hogehogeapp」 等の適当な名前をつけます。

4-2.Explicit App IDの作成

アプリのBundle IDを作成します。

これは他のどのアプリとも同じではいけない、一意のものでなければなりません(一意でないとビルドできません)。

また、ドメインは一意なものなので、ここで使うものはリバースドメインが推奨されています。

例.hogehoge.jpというドメインがあるとして、先ほど決めたアプリの名前がhogehogeappだとすると

jp.hogehoge.hogehogeapp

というように決めます。

ドメインがなければ一意のものであればなんでも大丈夫です。

4-3.Wildcard App ID

これはテストをするときなどに、いちいち一意のBundle IDを作らなくていいように、末尾に*を付けて管理するためのものです。

4-4.App Servicesの作成

アプリ内でサービスをなにか使っていた場合にチェックする箇所です。（「Game Center」と「In-App Purchase」 にはデフォルトでチェックがしてあります。）

申請ないようにない機能があるアプリは後の作業のビルドやアップロードで拒否されるので注意してください。

全部できたら「Continue」を押して次に進みます。

確認画面が出てくるので間違いがなかったら「Register」「Done」 押してApp IDsの一覧画面に戻ります。

一覧画面から登録したApp IDsの情報を確認できたら、App IDsの作成は完了です。

5.Provisioning Profileの作成

これまでの手順でCertificateとApp IDsが作れたのでApp IDとCertificateと端末のUDIDを繋げるためのProvisionig Profileを作ります。　

provisionig profileもcertificateと同様に開発用と配布用の二種類に分かれていますが、今回は配布用について解説します。

5-1.UDIDの確認

実機テストをする端末のUDIDをiTunesを使って確認します。

macとiphoneをケーブルでつないでiTunesを起動します。

「♫ミュージック」の隣のiphoneのアイコンをクリックします。

次に「概要」の「シリアル番号」をクリックします。

そうすると「UDID」がわかるのでこれをコピーします。

Apple Developer の Certificates Identifiers & Profilesにアクセスします。

「Devices」>「All」>「+」でデバイスの新規登録を行います。

「Register Device」の「Name」 を入力して「UDID」に先ほどのUDIDをペーストします。

登録できたら一覧に表示されます。

5-2.Provisioning Profileの作成

「Provisionig Profile」>「All」>「+」を押してProvisionig Profileの新規登録を行います。

今回は配布用なので「Distribution」>「App Store」にチェックを入れて「Continue」を押して次に進みます。

Select App ID.の画面ではApp IDのプルダウンに先ほど作ったApp IDが出てくるのでそれを選択して「Continue」で次にいきます。（前もって作っておかないとでてきません）

Select certificates.の画面ではApp IDと同様に先ほど作ったものが表示されるのでそれを選択して「Continue」で次に行きます。

Name this profile and generate. の画面では配布用だとわかりやすいように名前を入力しましょう。

「Continue」を押して無事に作成されたら「Download」でmacに落とします。

「Done」を押して一覧に表示されている確認しましょう。

「hogehoge.mobileprovision」というファイルがあるのが確認できたらそれをダブルクリックして「キーチェーンアクセス」に登録します。

次回はここからの続きのiOSアプリの申請までの手順「後編」をお送りします。

先日iOSアプリを登録して申請したので、備忘録も兼ねてそれまでの手順をわかりやすく説明します。

最初に申請までの大まかな流れを説明して、それぞれの作業の詳細にフォーカスしていきます。

今回は「3.iOS Certificateの作成までお送りします。」

目次

1. 1.概要
2. 2.アカウントの準備
3. 3.iOS Certificateの作成
4. 4.iOS App IDsの登録
5. 5.Provisioning Profileの作成
6. 6.App Store Connectにアップロード
7. 7.App Store Connectで申請

 1.概要

1-1.アカウントの準備

iOSのアプリのリリースを行うためには以下の二種類にアクセス権限があるApple IDが必要です。

1.Apple Developer

2.App Store Connect

組織と個人の場合で権限の設定が異なるので要注意です。

1-2.iOS Certificateの作成

Apple Developerで製品用の証明書を作ることがこの作業のゴールです。

そのためにMacでキーチェーンアクセスを用いCertificateSigningRequest.certSigningRequest を作る下準備が必要です。

最終的にios_production.cerを作成してそれをキーチェーンアクセスに反映するのがゴールです。

1-3.iOS App IDs の登録

ここでは以下の三種類の設定をします。

1.アプリの名前

2.Bundle ID

3.App Serviceの設定

1-4.Provisionig Profileの作成

hoge.mobileprovisionを作るのがゴールです。

Provisionig ProfileはApp IDとiOS Certificateが必要になるのでこれら二つを先に作ってあることが前提となります。

1-5.App Store Connectにアップロード

1.Bundle identifier

2.iOS Certificate

3.Provisioning Profile

これまでに作成したこれらを基にアプリをアップロードします。

1-6.App Store Connectで申請

スクリーンショットやアイコン画像などのリリースする際にApp Storeで必要な情報をApp Store Connectに登録します。

無事に登録して提出できて、ステータスが申請待ちになったら終了です。

2.アカウントの準備

2-1 Apple developer 

組織のApple Developer Progrmに登録している場合はadmin以上の権限を持つユーザーにadminn以上の権限を割り当ててもらいましょう。

以下のURLで作業するときに必要なIDです。

https://developer.apple.com/account/

2-2 App Store Connect

 アプリをリリースするための情報を登録する時や審査に提出するときに必要なIDです。 

組織のApple Developer Progrmに登録している場合はApp Manager等のマイ Appに登録するための権限が必要です。

個人の場合はAgentが既に割り当てられているので特にすることはありません。

以下のURLで作業するときに必要なIDです。

https://itunesconnect.apple.com/

3.iOS Certificateの作成

Certificate (証明書) には開発用と製品用の二種類があります。

今回の目的はアプリを審査に提出することなので、製品用のCertificateを作成します。

3-1.証明書作成の下準備

証明書を作るための下準備としてCertificateSigningRequest.certSigningRequestをMacで作らなければなりません。

Macの「キーチェーンアクセス.app」を起動させます。

次にキーチェーンアクセスのメニューから「証明書アシスタント」> 「認証局に証明書を要求」を選択

  証明書アシスタントに以下を入力

ユーザーのメールアドレス：開発者のメールアドレス

通称：開発者の名前（無記入でなければなんでもいいです）

CAのメールアドレス：（ディスクに保存するので必須ではありません）

要求の処理：「ディスクに保存」と「鍵ペア情報を指定」にチェック

鍵のサイズ : 2084ビット / アルゴリズム : RSA であることを確認して、続けるを押すと

CertificateSigningRequest.certSigningRequest がデスクトップに保存されます。

3-2.Certificateの作成

ブラウザはSafariが推奨されています。

Apple Developer の Certificates Identifiers & Profilesにアクセスします。

「Certificates」>「All」>「＋」を選択します。

Add iOS Certificateで製品用の「App Store and Ad Hoc」を選択します。

Continueを押して「Chooes File…」から先ほど作成したCertificateSigningRequest.certSigningRequestを選びます。

DownLoadします。

3-3.キーチェーンアクセスに登録

製品用の「ios_distribution.cer」がダウンロードできていたらダブルクリックしてキーチェーンアクセスに反映させます。

キーチェーンアクセスに新しく登録されているのと、Certificates, Identifiers & ProfilesのページにCertificationができているのが確認できたら終了です。

次回はiOSアプリの申請の手順の中編をお送りします。

2019年4月16日、執筆させていただいた本「作って学べる Unity 超入門」が技術評論社様より発売されました。

途中で挫折しないように楽しく進められるように構成されておりますので、是非お手にとってご覧ください。

全国の書店又は以下ページよりお買い求めいただけます。

amazon
https://www.amazon.co.jp/dp/4297103788
技術評論社
https://gihyo.jp/book/2019/978-4-297-10378-1

弊社プログラミングスクールでも授業を行なっているUnityの入門書です。Unityコース詳細はコチラをご覧ください。

本の概要

はじめてゲーム開発にチャレンジする方にオススメの1冊です。

全4種類のサンプルゲームを作成しながら，楽しくUnityの使い方を学ぶことができます。

C#の文法についても解説しているので，プログラミングの経験がない方でも安心して学習できるようになっています。

さまざまなサンプルゲームを作成しながら、Unityの基本操作を学べます。

こんな方にオススメ

・ゲーム開発にチャレンジしてみたい方

・プログラミングをやってみたい方

マルチプラットフォーム対応しているため、Unityを 使 う と、PCだけでなく、iOS、 Android、XboxやPS4のゲームもつくれます。

アクションやスクロールゲームのような2Dゲームも、本格的なシューティングゲームなどの3Dゲームもつくれます。

話題のVR、ARアプリをつくることもできます。

スマホでゲームアプリをリリースしてみたい方、なにから始めればわからない方にオススメです。

内容紹介

Chapter1 Unityについて知ろう

Chapter1では、Unity(ユニティ)がどのようなものであるかや、Unityでゲーム作りを行うための開発環境の整え方やUnityの画面の見方について解説していきます。

Unityについての解説と、実際にインストールしてUnityの画面を確認していきます。

Chapter2　玉転がしゲームをつくろう

Unityをインストールしたら、早速開発にとりかかります。

まずは定番の玉転がしゲームをつくりながら、Unityの簡単な機能の使い方やオブジェクトの配置の仕方、ゲームの世界を映し出すカメラの設定等を覚えていきます。

Chapter3　スクリプトの基本をマスターしよう

Unityではプログラミング言語 C#が採用されています。

パソコンに、人間がわかる言葉で指示を出すことをプログラミングといいます。

プログラムを記した指示書である「スクリプト」をパソコンが読み込むことで、そのプログラムが実行されます。

で は、 ど の よ う に 書 け ば パ ソ コ ン は 指 示 を 理 解 で き る の で し ょ う か。

Chapter3では、プログラミングの基本的なルールや方法を学んでいきます。

ちなみに、このゆるキャラ「ゆうも」の動くLINEスタンプはコチラです。
LINEスタンプ　うごくゆうも

Chapter4　ピンボールゲームをつくろう

Chapter4では、ボールを発射し、そのボールを落とさないようにフリッパーを弾いて遊ぶ「ピンボールゲーム」をつくります。

Chapter3で学んだスクリプトを実際にプログラミングし、ゲームをつくっていきます。

Chapter5　キャラクターゲームをつくろう

Chapter5ではUnityの大きな特長である「Asset Store」を使い、広大なステージをキャラクターが冒険することができるキャラクターゲームをつくっていきます。

Chapter6　シューティングゲームをつくろう

Chapter6ではこれまでに学んできた様々なUnityの機能を活かしながら、シューティングゲームを開発していきます。

残り時間やヒット数などのパラメーターを表示しつつ、奥行きのある3Dシューティングゲームを作っていきます。

自動的に登場する敵やその制御、衝突時に発生させるパーティクル等、Unityの可能性を感じることができると思います。

実際にUnityで開発したアプリ

「あなたは大丈夫？知らないと恥ずかしいビジネスマナー」

マナーといえば、人と対面している場面を想像してしまいがちですが、 現代では電話やメールはもちろん、LINEやfacebookをはじめとしたSNSでもありとあらゆる場所で顔を合わせないコミュニケーションが存在しています。

取引先の方、同僚、友達。更にこれから出会う方々に失礼なことを言ってしまわない為にもゲーム感覚で楽しくマナーを学べるアプリです。

社会人の方や、就活中の方をはじめとして、あらゆる方、あらゆる場面を網羅し、対応しています。

こちらのアプリはUnityで作っているのですが、2Dで開発しています。3Dのイメージが強いUnityですが、このようなクイズゲームも作れます。

iOSバージョンのダウンロードはこちら

Google Playバージョンのダウンロードはこちら

Unityで作られたアプリに関しては、別記事にて詳しく説明していますので、まだ読んでいない方は是非、下記リンクよりそちらの記事も読んでみてください。

あの有名アプリも？！Unityのすすめ

本格的に学びたい方は、Unityコースを

もっと本格的にUnityを学びたい方は弊社プログラミングスクールのUnityコースの体験教室を是非一度受けてみてください。

詳細はコチラから

子供から大人まで、幅広く生徒さんが通われています。2時間/月からOKで、空きがあれば予約して受けられる自由な通塾スタイルです。仕事で使われる方、ゲーム作りにチャレンジしたい方、また本格的なプログラミングに挑戦してみたいお子様にもオススメです。

システム開発のご案内

弊社ではシステム開発のご依頼をお受けしております。詳細につきましては、こちらのお問い合わせよりお願いします。

著者プロフィール

鈴木 道生（すずきみちお）

株式会社Knocknote代表取締役。大学卒業後，営業を経験した後，システムエンジニアとしてソーシャルゲームの開発，スマホアプリやPepperアプリの企画及び開発，高校生を対象にしたプログラミング講師などの業務に携わる。2017年1月に創業。経営理念は「夢で満ち溢れた明るい未来を」。現在はプログラミング教育事業，ITソリューション事業を展開している。

株式会社Knocknote：https://knocknote.jp
プログラミング教室「Knocknote Education」：https://tetraup.com/education/

ぜんかいはえんざんブロックについてせつめいしました。

こんかいはそのえんざんのブロックをつかってかんたんなけいさんきをつくっていきたいとおもいます。

かんせいひんがこちら。かんたんけいさんき

かんたんけいさんきのしくみ

まずはどんなしくみのものかをかんがえてみます。

ねこにすうじをおしえたら、ねこがかってにこたえをだしてくれるものにします。

つくりかた

まずはねこをよういします。

ねこをクリックしたら、ねこがすうじをきいてくるものにしたいとおもいます。

こんかいは「〜ときいてまつ」をつかいます。

これはねこがしゃべってきいてくるもので、したにこたえるわくがでてきます。

まずはねこのなかに

「イベント」から「このスプライトがおされたとき」をだします。

これは、どんなときでもこのスプライトがクリックされたときにこうどうされます。

このしたに「しらべる」から「あなたのなまえはなんですか？ときいてまつ」をだします。

これをしたにつけましょう。

この「ときいてまつ」はいれたスプライトがしゃべって、したにこたえるワクがでてくるブロックです。

ここには「さいしょのかずは？」とうっていれてみます。

いまねこをクリックするとねこが「さいしょのかずは？」ときいてきます。

「△+□」の△にはいるぶぶんを「さいしょのかず」というなまえでつくります。

△のぶぶんにへんすうをつくります。

へんすうとはどんなすうじでもはいるハコのようなものです。

へんすうをひとつよういします。「さいしょ」のへんすうをつくりました。

「『さいしょ』へんすうを◯にする」をだして、したにつけます。

「しらべる」から「こたえ」をだします。

「『さいしょ』へんすうをこたえにする」にします。

いちど、じっけんしてみます。

ねこをクリックするとすうじをきかれますが、それにたいして、すうじをこたえてあげると、さいしょのへんすうにはいります。

ではもういちどしつもんをしてもらいます。

したに「しらべる」から「あなたのなまえはなんですか？ときいてまつ」をいれます。

「つぎのかずは？ときいてまつ」にかえます。

「△+□」の□にはいるぶぶんを「つぎのかず」というなまえでつくります。

へんすうをもうひとつつくって、つぎのかずをつくります。

へんすう「つぎ」をつくって、「『つぎ』へんすうを◯にする」をだしてしたにつけます。

「しらべる」から「こたえ」をだして、『つぎ』へんすうをこたえにする」にします。

これで2つのへんすうをよういできました。

ねこがかんがえてからこたえをだすようにします。

「みため」から「うーん…と2びょうかんがえる」をだして、したにつけます。

さいごにけいさんをします。こんかいは「たしざん」なので、「えんざん」から「◯+◯」をだします。

「へんすう」から「さいしょ」と「つぎ」をだします。

+にひとつずついれます。

「みため」から「こんにちは!という」をだします。

そのまま「さいしょ　＋　つぎ」を(こんにちは!)のぶぶんにいれます。

そしてしたにつけます。

これでかんせいです。

ねこをクリックしてみます。

ねこにかずをきかれます。かずをいれてみます。

※ここでは英字(えいじ)にゅうりょくでないとききません。

こんかいは2にしてみます。かずをいれたらEnterキーかみぎのチェックをおします。

すると、「さいしょ」のへんすうのところにいれたかずの2がでてきます。

「つぎのかずは？」ときかれるので、かずをいれてみます。

3をいれて、Enterキーかみぎのチェックをおします。

つぎのへんすうのぶぶんにかずが3とはいります。

すると、うーん？と2びょうかんがえたら、こたえの5といいます。

もういちどためしてもおなじことができます。

やりなおしたいばあいはもういちどねこをクリックします。

ですがこのままでは、かずのリセットがめんどうなので、はたがおされたら、じどうでかずがリセットできるようにしたいです。

「イベント」から「はたがおされた」をだして、「へんすう」から「へんすうさいしょを０にする」と「へんすうつぎを０にする」をしたにつけます。

すると、さいしょのかずとつぎのかずが０になり、はたをおすとさいしょからになるようになりました。

わかりやすくしよう

すこしくふうしてみます。

ぜんかい(No.004)でせつめいしたのですがことばをたすことのできるブロックをつかってことばになるようにしてみたいとおもいます。

「えんざん」から「りんごとバナナ」とかいてあるものをだします。

「りんご」のぶぶんに「さいしょ　＋　つぎ」をいれて、「バナナ」のぶぶんに「だね!」をいれてみます。

そして、「という」にもどします。

「さいしょ　＋　つぎ　と　だね!　という　」というブロックになりました。

では、ためしてみます。

まずは2をいれて、3をいれると、うーんとかんがえたあとに、「5だね!」とはなします。

「りんご　と　バナナ」をうまくつかうとすきなセリフをいわせることができます。

ほかのけいさんもできるようにしよう

ほかのけいさんもできるようにしてみましょう。

ねこをふやして、「ひきざん」や「かけざん」ができるようにします。

まずはねこをふやすには、みぎしたのねこをみぎクリックします。

「ふくせい」をクリックします。

ねこが2ひきにふえました。わかりやすくねこのいろをかえます。

まずはひきざんをつくります。

ふやしたねこをクリックして、コスチュームをクリックします。

バケツをもっていろをかえます。こんかいはむらさきいろにしました。

むらさきねこのなかをすこしかえます。

さいごのブロックの「さいしょ　＋　つぎ」をひきだして、「えんざん」から「◯ー◯」をだして、いれかえてみます。

「さいしょ　-　つぎ」にしてもとのばしょにもどします。

これで、むらさきねこがひきざんのねこになりました。

おなじようにねこをふやして、「わりざん」や「かけざん」をつくってみてください。

かんせいひんがこちらです。かんたんけいさんき

まとめ

いかがでしたでしょうか。
今回はScratchで作る「かんたんけいさんき」をご紹介しました。

Scratchでのゲーム制作やプログラミングに、少しでも興味がありましたら無料体験を受講されてみてはいかがでしょうか。
また当教室ではオンラインでのマンツーマンレッスンを行なっておりますので、海外含む遠方の方からも喜びの声を多数いただいております。

>>キャンペーンはコチラ

体験授業や入会金などが無料になる、お得なキャンペーンも実施していますので、この機会に体験教室に是非ご参加ください。

皆さんは電子工作と聞くと何を思い浮かべるでしょうか？
昔ながらのイメージで、「はんだごてを使って、基盤にパーツを付けてラジオを組み立てる」なんて思いつく方も多いのではないでしょうか。
もちろんそういった電子工作もありますが、近年はシングルボードコンピュータという、家庭で使っているようなパソコンほど性能は良くは無いが、一定の動作をさせる分には十分な性能もち、価格が非常に安いコンピュータを使った電子工作が盛んになっています。各社から様々な種類が発売されており、各コンピュータで様々な特色を持っています。

今回はそんなシングルボードコンピュータの中でも、より始めやすく他のシングルボードコンピュータにも負けない拡張性を持った【micro:bit】の始め方をご紹介していきます。

>>メディアで話題！micro:bitも学べる『１DAYプログラミング夏季講習』はコチラ

micro:bitとは

イギリスのBBC（英国放送協会）が主体となって作った、情報教育向けの非常に小さいサイズのマイクロコンピュータです。イギリスでは11歳〜12歳の子供全員に無償で配布されており、授業の中で活用が進んでいるようです。
ウェブブラウザ上でプログラミングができ、プログラミング用のソフトを新たにダウンロードする必要がありません。本体の値段も2000円くらいから販売されているので、初心者でも手軽にプログラミングが始められます。

機能

micro:bitは小さいサイズながらも様々な機能を持っています。

LED

表面中央にLEDが5×5の計25個付いています。１つずつ点けたり消したりをプログラミングできるので、LEDを使い文字や数字やゲーム画面を表示させます。
また、LEDは点滅させるだけでなく、光センサーとしても機能し、明るさを調ぶことができます。

ボタン

表面の左にはAボタン、右にはBボタンが付いています。このボタンを使い、プログラムの実行をしたりゲームの操作をします。

端子

表面下部には外部機器と繋げるための端子が、リング付きの大きいもので5個、小さいもので20個、計25個付いています。繋げられるものはモーターや追加のLED、センサーなど。様々なものが繋げられるので作品の可能性は無限大にあります。

温度センサー

温度センサーも付いていて、micro:bit自体の温度を計ることができます。

加速度センサー

加速度センサーはmicro:bitが振られたり、傾けたり、落としたりといった動きを調べられます。

コンパス

コンパスはmicro:bitがどの方向を向いているか調べられます。

無線

無線はmicro:bit同士で接続しないで通信ができる機能です。他のmicro:bitにメッセージを送ったり、同時に遊べるゲームを作って遊ぶこともできます。

Bluetooth

Bluetoothを使うとmicro:bitとスマホやタブレットと接続できるようになります。micro:bit側からスマホやタブレットを操作したり、その逆もできるようになります。

USBインターフェース

USBインターフェースを使いコンピュータと接続します。作成したプログラミングをmicro:bitに送るのに使います。

>>メディアで話題！micro:bitも学べる『１DAYプログラミング夏季講習』はコチラ

使い方

次に実際の使い方のお伝えしていきます。

電源を入れる

まずは電池ボックスとつなげて電源を入れます。購入時の状態ではミニゲームがはいっていますので、遊んでみて操作に慣れましょう。

接続させる

マイクロUSBケーブルを使ってコンピューターと接続させます。これでプログラミングをmicro:bitに送る準備ができました。

プログラミング

2種類用意されているプログラミング方法のどちらかを使いプログラミングを書いていきます。
Microsoftから提供されている「MakeCodeエディター」を使って、ブロックまたはJavaScriptでプログラミングできます。
また、「Pythonエディター」はPythonを使い、上記の方法より高度なプログラミングができます。
初めは初心者にもわかりやすいビジュアルプログラミングができる、「MakeCodeエディター」を使うのが良いでしょう。
画面の左側にシミュレーターがついているので動作を確認しながらプログラミングしていきましょう。

プログラムを送る

エディター画面のダウンロードボタンをクリックし、作成したプログラミングをmicro:bitで読み込み可能なデータ形式に変換しダウンロードしてください。ダウンロードができたらそのデータをmicro:bitに送ります。
Windowsではエクスプローラを開き右クリックし、[送る]でMICROBITを選んでください。
Macではファインダーを開きドラッグ＆ドロップをしてください。

プログラムを動かす

プログラミングの書き込みが終わると自動でプログラムが動き出します。
作成したプログラムで遊んでみましょう。

>>メディアで話題！micro:bitも学べる『１DAYプログラミング夏季講習』はコチラ

まとめ

いかがでしたでしょうか。実際にやってみると、簡単に動かせることがおわかりいただけると思います。作成したプログラミングを本体で動かすだけでも色々なことができるのですが、拡張パーツなどをつけると無限大に可能性が広がっていくので是非お試しください。

TETRA UPが毎年開催する「プログラミングを使った自由研究」では、プログラミングが初めてのお子さんでも丁寧にサポートします。

是非この夏に、お子様の未来を豊かにするプログラミングを親子で体験してみてください。

全国放送のTV局3局の取材が入るなど大注目だった一昨年。連日満席で大盛況の内に終わった昨年。

作った作品を持ち帰れるのはもちろん、レポートの提出用紙までサポートする充実の内容となっております。

お申し込み、詳細は弊社サイトの自由研究コースをご覧ください。

ご予約がいっぱいで埋まる前にお申し込みはお早めに！

※「micro:bit」は Micro:bit教育財団の登録商標です。

みなさんJavaScriptをご存知ですか？

JavaScriptはWebページを動的に作ることができる言語です。

ユーザーの動きに合わせてコンテンツを表示したり、UIを変更したりする際に使われいて、WebサイトやWebアプリケーションを作る際には欠かせないものです。

JavaScriptには様々なフレームワークがあるため、一体どれから勉強すればいいのかわからない方も多いかと思います。

そんな方のために、今回はJavaScript入門者におすすめな「Vue.js」の使い方をご紹介したいと思います！

簡単なチュートリアルもあるのでよろしければ挑戦してみてください！

Vue.jsってどんなフレームワーク？

Vue.jsはとにかく「シンプル」なフレームワークです。

他のJavaScriptのフレームワークに比べて文法の制約が少なく、学習コストが低いです。そのためJavaScript入門者には非常におすすめなフレームワークになっています。

Vue.jsは初めから備わっている機能は必要最低限で、必要なものがあればパッケージを追加でインストールする必要があります。

ですが入門したてのうちは高度なパッケージが必要になることはあまりないと思うので、少しづつ慣れながら機能を増やしていけば特に問題はないかと思います。

逆に初めから大規模な開発で使う目的でJavaScriptのフレームワークを学びたい方にはあまりVue.jsはおすすめできません。

そのような方には、少し学習コストは高くなりますが、ReactやAngularJSがおすすめです。

vue-cliでなぞなぞアプリを作ろう

vue-cliをインストールしよう！

vue-cliとはVue.jsの開発を手軽に始めるための環境が備わっているシステムです。

これをインストールすることですぐにVue.jsを使うことができます。

vue-cliをインストールするためにはnpmとnodeが必要なので、もしインストールしていない方は別途インストールする必要があります。

ターミナルやコマンドプロンプトで以下のコマンドを実行し、バージョンが確認できればインストール完了です

$npm install -g vue-cli  
$vue --version
2.9.6

$vue init webpack <プロジェクト名>でプロジェクトを作成します。

今回はnazonazo_appというプロジェクト名で作成したいと思います。

$vue init webpack nazonazo_app

Project name #<エンター>
? Project description #<エンター>
? Author #<エンター>
? Vue build #standalone
? Install vue-router? #Yes
? Use ESLint to lint your code? #Yes
? Pick an ESLint preset #Standard
? Set up unit tests #No
? Setup e2e tests with Nightwatch? #No
? Should we run `npm install` for you after the project has been created? (recommended) #npmかyarn

プロジェクト作成の際に色々聞かれると思いますが、プロジェクト名やAuthorはエンターを押してデフォルトのまま、あとは上記の通りに設定してインストールしてもらえばいいかと思います。

最後のインストーラーの選択はお好みのものを選んでもらって構わないです。

ではTo get startedに従ってローカルサーバーに立ち上げてみましょう！

表示された http://localhost:8080  にブラウザでアクセスすると以下の画面が出てくるかと思います。

これでvue-cliを使う準備は完了です！

2-2. ファイルを編集してみよう！

では早速vue-cliを編集していきます！

vue-cliをエディタで開くと「src」というディレクトリがあり、そこを開くと以下のようなディレクトリ構成になっているかと思います。

このcomponentsディレクトリに入っているコンポーネントがVue.jsでは非常に便利なものになっています。

VueのコンポーネントはHTML要素をインスタンス化し、再利用可能にします。

また今回の内容には含まれていませんが、routerを使うことでコンポーネント間を簡単に遷移できます。

vue-cliをインストールした段階で入っている「HelloWorld.vue」はローカルサーバーにアクセスした際に表示されるトップページに使われています。

では試しにHelloWorld.vueを開き<template></template>の中身を全て削除してみましょう。

そうするとトップページが以下のようになるかと思います。

HelloWorld.vueに書いてあった内容がごっそり抜けてしまいました。

これでトップページにHelloWorld.vueがコンポーネントとして使われていることがわかりました。

なぞなぞを出題しよう！

ではいよいよなぞなぞアプリを作っていきましょう！

今回はHelloWorld.vueを編集してアプリの画面を作ります。

vue-cliのコンポーネントは

<template></template>

<script></script>

<style></style>

の３つに分かれていて、<template></template>の中にHTML、<script></script>の中にJavaScript、<style></style>の中にcssを書いていきます。

ちなみにstyle で、<style lang=”scss”>と指定するだけでsassが使えるようになるので、sassに慣れている方は使ってみてください。

SASSについてまとめている記事はこちら

ではまず<script></script>の中身を以下のように編集していきます。 

<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      hide_answer: true,
      true_or_false: null,
      your_answer: null,
      selected_question: null,
      questions: [
        {
          question:"リンゴとみかんと桃をトラックの荷台に積んで走っている。 このトラックが急カーブで落としたものは?",
          correct_answer:"スピード",
          explain:"カーブはスピードを落とさないと危ないから"
        },
        {
          question:"幼稚園、小学生、中学生、高校生、大学生、専門学生、大学院生。 一番大きいのは?",
          correct_answer:"幼稚園",
          explain:"幼稚園以外の選択肢は人間"
        },
        {
          question:"登山した人が必ずすることは？",
          correct_answer:"下山",
          explain:"山を登ったら山を下るから"
        }
      ]
    }
  },
  methods:{
    trueOrFalse: function(){
      if(this.selected_question.correct_answer == this.your_answer){
        this.true_or_false = "せいかい！！！"
      }else{
        this.true_or_false = "はずれ"
      }
      this.hide_answer = false
    }

  },
  mounted: function(){
    var random = Math.floor( Math.random() * this.questions.length );
    this.selected_question = this.questions[random]
  }
}
</script>

dateの中では変数を定義しておきます。

hide_answer: true →trueの時に解答を表示しないようにします。

true_or_false: null →解答が正解かはずれかを出力します。

your_answer: null  →入力された回答がバインディングされます。

selected_question: null →questionsからランダムに選択された問題が代入されます。

questionsにはなぞなの問題文、答え、解説を入れておきます。

trueOrFalseメソットは「答える」ボタンが入力された時に発火します。

dataの中の値を参照するときはthisをつけます。このメソットでは、入力された回答と問題の答えが一致してるかを確認し、一致していれば「せいかい！！！」を表示し、正しい解答と解説を表示します。

一致していないときは「はずれ」を表示し、同じく正しい解答と解説を表示します。

mountedの中に書かれた処理はページが読み込まれるたびに実行されます。

mountedの中ではquestionsからランダムに問題を選んで、selected_questionに代入しています。

<style></style>の中身は以下のように編集します。

<style scoped>
input{
  border: solid 1px black;
}
.hide{
  display: none;
}
</style>

デフォルトのcssとほぼ変わりないですが、

.hide{
  display: none;
}

で正誤と正しい解答・解説を隠しているところが重要なポイントです。

最後に<template></template>の中身です。

<template>
  <div>
    <p>問題</p>
    <p>{{selected_question.question}}</p>
    <p>回答</p>
    <input type = "text" v-model = "your_answer"><br>
    <input type="button" value="答える" @click="trueOrFalse()">
    <div :class = "{hide:hide_answer}">
      <p>{{ true_or_false }}</p>
      <p>答え：{{ selected_question.correct_answer }}</p>
      <p>解説：{{ selected_question.explain }}</p>
    </div>
  </div>
</template>

templateではます、テキストボックスに入力された値で「v-model」でdataの中にあるyour_answerをリアルタイムで書き換えています。

これはVue.jsで大活躍する「双方向データバインディング」という機能です。データの変更をUIにリアルタイムで反映させることができるため、動的なWebページを作る際に非常に便利です。

@clickではボタンがクリックされた時にtrueOrFalseメソットが呼び出されるようになっています。

その下にある「:class = “{hide:hide_answer}”」は少し見慣れない書き方ですが、これもVue.jsの便利な機能です。

これは「dataにあるhide_answerがtrueの時、hideクラスが付与される」という意味です。

hide_answerの初期値はtrueになっており、hideクラスが付与された状態のため、ページが読み込まれた時点では正誤や解答・解説は隠れている状態です。

「答える」ボタンが押された時にtrueOrFalseメソットによってhide_answerがfalseになるとhideクラスが外れるため、正誤と解答・解説が表示されるようになるという仕組みです。

Javascriptでは　{{}} の中身に変数を入れることでhtmlに埋め込むことができます。

<script></script>に書いたmounted内の処理のおかげでページを読み込むたびにランダムで問題が選択されるので何度かリロードしてみてください。

これでなぞなぞアプリの完成です！

最後に

いかがでしたでしょうか。Vue.jsとvue-cliを使えば少ないコードで簡単なwebアプリを作ることができます。

vue.jsには他にも便利な機能がたくさんあるので、これを機にVue.jsに挑戦してみてはいかがでしょうか？