▲
TOP

【最新版】iOSアプリの申請までの手順「中編」

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

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

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アプリの申請までの手順「前編」

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

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

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

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アプリの申請の手順の中編をお送りします。

【作って学べる Unity 超入門】執筆した本が発売されました！

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/

【Scratch】「かんたんけいさんき」のつくりかた

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

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

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

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

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

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

つくりかた

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

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

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

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

まずはねこのなかに

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

そしてしたにつけます。

これでかんせいです。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

わかりやすくしよう

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

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

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

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

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

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

では、ためしてみます。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

まとめ

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

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

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

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

【電子工作にも】micro:bitの使い方

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

今回はそんなシングルボードコンピュータの中でも、より始めやすく他のシングルボードコンピュータにも負けない拡張性を持った【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教育財団の登録商標です。

【超入門】vue-cliでJavaScriptデビュー！

みなさん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>の中に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 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に埋め込むことができます。

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

最後に

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

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

【簡単】WordPreess（ワードプレス）を30分でインストールする方法【初心者向け】

本記事はWordPress（ワードプレス）を勉強してみたい、WordPress（ワードプレス）を自分のパソコンで動かして検証してみたいといった方向けの記事です。

WordPress（ワードプレス）のインストールが上手く行かず、データベースの設定や他のソフトウェアのインストールなど最初の設定で躓いてしまう方も結構多いと思います。

しかし、今回ご紹介する方法を使えばつまずくことなく、素早くWordPress（ワードプレス）をインストールできるでしょう。

自分のパソコンにインストールすればレンタルサーバーなしでもWordPress（ワードプレス）を使えるので、お金を全くかけず簡単に環境を構築することができて便利です。

WordPress(ワードプレス)とは

WordPress（ワードプレス）とは、ブログのようなサイトを手軽に制作出来るソフトウェアです。

WordPress（ワードプレス）を使うことでブログのように記事を更新したり、記事を管理するウェブサイトを簡単に作成することが出来るようになります。

WordPress（ワードプレス）に必要なもの

WordPress（ワードプレス）のインストールには欠かせないものが4つあります。

WordPress（ワードプレス）

WordPress（ワードプレス）システムの本体です。これがなければWordPress（ワードプレス）ではありません。

Apache（サーバーソフトウェア）

Apacheはコンピューターをサーバーとして扱えるようにしてくれます。
サーバーとはURLを入力した時に記事を提供してくれるコンピューターです。
WEBブラウザはこのサーバーから記事を取ってきて表示させる役目を担っています。

MySQL（データベース）

記事やコメントのデータや管理者情報などを入れるものです。WordPress（ワードプレス）はこれを使ってデータを管理します。

PHP

これも欠かせません。PHPはプログラミング言語です。PythonやRuby、C++など世の中にはいろんなプログラミング言語が存在しますが、今のところWordPress（ワードプレス）はPHPでしか動かないので必須です。

以上の4つがWordPress（ワードプレス）をインストールする上で必ず欠かせないものです。どれか一つでも欠けると動作しなくなってしまいます。

WordPress（ワードプレス）をインストールする

WordPress（ワードプレス）のインストールは以下のたった３つの手順でできます。

XAMPPをインストールする
MySQL（データベース）に管理人を作る
bitnami for XAMPP でWordPress（ワードプレス）をインストールする

XAMPPをインストールする

XAMPPはWordPress（ワードプレス）には欠かせない Apache（サーバーソフトウェア）＋ MySQL（データベース）＋ PHP
をまとめてインストールしてくれます。個別にインストールするのは設定が厄介なのでそれを解消してくれるXAMPPがおすすめです。

このページから XAMPP をダウンロードします。

WordPress（ワードプレス）をダウンロードする

ダウンロードが終わったら XAMPP のセットアップを起動します

WordPress（ワードプレス）のセットアップを開始する

WordPress（ワードプレス）のコンポーネントを選択する

WordPress（ワードプレス）を保存するディレクトリを指定する

XAMPP のセットアップを終了する

ここまでで XAMPP のインストールは終了しました。

もし、コントロールパネルが起動しない場合は Windows なら Windows + R キーを押して「XAMPP」と入力して起動できます。Mac ならアプリケーションから「XAMPP」を起動します。

データベースに管理人を作る

次に WordPress（ワードプレス）用に管理人を作成します。 XAMPP のコントロールパネルを使用します

Apache と MySQL を起動してから、MySQL の管理画面を開く

以上で管理人の追加は終了です。

bitnami for XAMPP でWordPress（ワードプレス）をインストールする

最後にWordPress（ワードプレス）をインストールすれば完成です。
XAMPP を使って WordPress（ワードプレス）をインストールする bitnami for XAMPP を使います。
<a href=”https://bitnami.com/stack/xampp”>このページ</a>からダウンロードします。

// ダウンロードしたらセットアップを始めます。
// セットアップは「はい→はい→はい」を押して先ほど作成した管理人の名前とパスワードを入力しましょう。
完成すると http://localhost/wordpress/ で自分のWordPress（ワードプレス）サイトが表示されます。

ここまでで完了です。
もしうまく行かない場合は XAMPP コントロールパネルで Apache（サーバーソフトウェア）と MySQL（データベース）が起動されているか確認してみましょう
それでもうまく行かない場合は最初から手順をやり直してみるかセットアップを一度終了してからもう一度試してみてください。

まとめ

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

WordPress（ワードプレス）を簡単にインストールすることができたでしょうか？

インストールが完了すれば<strong class=”marker”>WordPress（ワードプレス）を使って勉強したり、自身のサイトの制作などをすることができます。</strong>

ただし、WEBに公開して大多数の人に見てもらいたい場合にはさらにレンタルサーバーを使ったり、AWSやAzureなどのクラウドサービスを利用するか自身でサーバーを構築するなどの手順を踏む必要があります。

勉強や検証したいだけなら自分のパソコンで十分ですので是非いろいろ試してみてください。

【夏休み】自由研究のおすすめは電子工作！！

「お父さんが子どもの頃は、ラジオを自分で分解したり組み立てたりして遊んだもんだ」なんて話を、筆者(20代後半)が子供の頃は、父や近所のおじちゃん達からよく聞かされたりしていました。

また小学校の同級生のなかでも、クラスに1人か2人はPCを組み立てていたり、キットやパーツのセットが毎週発刊されて徐々に完成させていくロボットを作っている友人がいました。

ラジオの組み立てから、PCや簡単なロボットの組み立てと、電子工作も時代とともに進化しているんですね。最近の電子工作の特徴は、「マイコン」というものを中心にして進めていくのが主流となってきています。

またマイコンを通じてインターネットに繋いで情報のやり取りも簡単にできるようになり、「IoT : Internet of Things（モノのインターネット）」という言葉が飛び交うようになりました。

そこで今回は最新の「電子工作」事情についてご紹介します。

>>マイコンを使った電子工作が学べる夏の1DAYプログラミング開催中

電子工作とは

電子工作と聞いて、どんなイメージが思い浮かびますか？　中学校の技術の授業などで電子部品を使った物作りをやってから一度も電子工作なんてやっていないという方なら、一部のマニアが夢中になってはんだ付けをやっているイメージが強いかもしれません。

趣味でやるにしてはちょっと敷居の高い感じがありますよね。

冒頭でも触れたように、最近の電子工作は「マイコン（マイクロコンピュータ）」というものを中心にして行われることがほとんどのようです。

マイコンを回路に組み込んで、プログラムを書くことで、これまでの電子工作ではできなかった複雑な制御が簡単にできるようになってきています。

少し学べば誰でもセンサーを組み合わせて便利な道具やロボットのようなものを作ることができるんです。

インターネットに繋いで情報のやり取りを行うようにすれば、さらにできることの幅をぐんと広げられます。

冒頭でも少し触れた最近よく聞く「IoT（モノのインターネット）」がこの領域になりますね。

パソコンじゃダメなの？

ここで、「マイコン」と「パソコン」の違いについてみてみましょう。

そもそもマイコンとは、micro computer（マイクロコンピュータ）の略で「超小型コンピュータ」を意味するもので、最近ではさまざまな機器の制御用としてのmicro controller（マイクロコントローラ）として用いられることが多くなり、多くの家電品に使われているようです。

パソコンはというと、ワープロ、動画編集、様々なアプリケーションソフトなどで、汎用的に便利に使うことが出来るものです。

実はパソコンでも、「LEDを点滅させる」「部屋の温度を測定し表示させる」などは可能です。

ですが実際に行うには逆に設定や他の機器と繋げるとなると面倒なことが多くなったり、温度測定のためにわざわざパソコンを用いるとコストがかなりかかってしまいます。

一般的に電子工作を行うには、使いたい電子部品の制御を行う箇所だけでなく、電源を供給する仕組み、電子部品やいろいろなパーツを制御するためのインタフェースや論理的な回路、さらに制御内容によってはプロセッサの装備などのたくさんの部品をつなぎ合わせる必要があります。

要するに、パソコンは何でもできるけど、工作に用いるにしては大きすぎるしコストがかかりすぎるから、必要最低限の機能を備えた小さなマイコンを工作には用いようといういことなんですね。

マイコンのいろいろ

ここでよく知られているマイコンを3つ紹介しましょう！

Raspberry Pi

ケンブリッジ大学のEben Uptonが、スマートフォンやタブレットの大東により、子ども達がプログラミングを学ぶための手軽なパソコンがなくなっていることに危機感を覚えて開発されたのが、Raspberry Piです。2012年の発売以来800万個以上を売り上げ、わずか4年のイギリス製としては最高の売り上げを誇るコンピュータとなっているようです。

出典：https://www.raspberrypi.org/products/raspberry-pi-3-model-b-plus/

Ardino

Ardino LLC社とArdino S.R.L.社が開発および提供するマイコン。ArdinoもRaspberry Piと同様に初心者でも比較的簡単に使えることから世界的にヒットし、現在ではインタラクションデザインの分野だけでなく、電子工作や教育など幅広い分野で活用されています。

出典：https://store.arduino.cc/usa/arduino-uno-rev3

IchigoJam

手のひらにのせられる大きさの、プログラミング専用こどもパソコンで、IchigoJamにテレビとキーボードをつなげば、すぐにプログラミングを始められます。インターネットへの接続や難しい設定は必要ありません。

出典：https://ichigojam.net/about.html

初心者向けプログラミング言語BASICを使っているので、事前にプログラミングの高度な知識や技術を学ぶ必要はなく、気軽にプログラミングを体験できます。

また、抵抗などの部品を基盤にはんだ付けして組み立てて、電子工作を体験することもできます。

>>マイコンを使った電子工作が学べる夏の1DAYプログラミング開催中

電子工作を体験してみよう！

電子工作といっても、初めてだと何をどうすればよいのか･･･、電子回路なんかも難しそう･･･。経験の無い分野だけにそう感じて苦手意識を持ってしまう方も多いかと思います。

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

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

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

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

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

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

【初心者必見】Sassのコンパイルの使い方【導入】

プログラミングの基本といえばHTML / CSSですよね。

比較的浅い勉強時間でもとりかかりやすい言語ですし、共同でページを制作する場合も多いかと思います。

しかし、CSSは使い回せる部分が多いために、作業チーム内でも共通のルールを用いないとちぐはぐな命名になったり、CSSが競合したりしてしまいます。

そこでとってもおすすめなのが、“Sass”という言語です。

Sassは導入時にかかる労力のコストよりも、使いこなせれば導入後の生産性が爆発的に上がります。

ですが、色々な機能があるためにせっかく導入しても返って使いこなせない方もいらっしゃるかと思います。

本記事では、まだSassを導入してない方から、導入してはみたもののよく分からない！という方にぜひ一読してほしい記事になっております。

なお単純な導入手順については、「Sass 導入」と調べるとWindowsでもMacでもわかりやすい手順記事がたくさんあるので、ここでは省略させていただきます。

導入した後の設定などについて事細かに説明させていただきます！

1.Sassの中でも種類がある？

2.Sassを自動コンパイル設定にしよう

2-1.Linuxから制御する

2-2.エディター側のプラグインから制御する

Sassの中でも種類がある？

SassとはCSSを拡張した言語のことですが、Sassを使用したファイルには、

sass(SASS記法)
scss(SCSS記法)

の2つの拡張子が使用できます。

違いとしては入れ子の書き方の違いとセミコロンの有無程度なので、

ご自分の使いやすい方をチョイスして拡張子に設定しましょう。

ちなみに主流はscssで、筆者もscssを使用しています。

Sassを自動コンパイル設定にしよう

Web上では、.sassや.scssの拡張子は認識できないので、一度.cssに戻す作業が必要です。この事をコンパイルといいます。

コンパイル自体はLinux側から直接行えますが、上書きするたびにコマンドを打つのではだいぶ非効率的ですよね。

なので、オートコンパイル(自動コンパイル)設定は必ずしておきましょう。

オートコンパイルを設定する方法をいくつか説明していきます。

Linuxから制御する(推奨)

こちらは一番スタンダードな方法です。

1.まず作成したSassファイルかディレクトリに移動する

2.以下のコマンドを打つ

(ファイルの場合)
$sass –watch style.scss:style.css

(ディレクトリごとの場合)
$sass –watch ディレクトリ名

赤字の部分がオートコンパイルのためのコマンドです。

デメリット

しばらく放置してまた作業を再開する時、コマンドを打ち直してコンパイルを始める必要があります。

また、コンパイルにエラーが出ているかどうかはエラーログが出ているかどうか確認しなくてはいけません。

エディター側のプラグインから制御する

筆者は楽なのでこちらの方法でコンパイルしています。

Atomですと、「sass-autocompile」などが有名です。

こちらのプラグインはcommand+sなどでセーブすると、同時にコンパイルをしてくれます。

また、圧縮した.min.cssの拡張子にするかなども、プラグインの設定で選べます。

先述したLinuxでのデメリットは、小さいようで毎日作業する上ではかなりの面倒臭さを感じるので、こちらに切り替えています。

デメリット

複数人で作業する際に、WinやMac間、どの手段でコンパイルかの差によって余計な競合をしてしまう可能性があります。

一人で基本的に作業する方にはあまり関係ありませんが、注意していただきたいところです。

ファイルの構成の仕方

SassとCSSの一番の違いであり、Sassの長所を大幅に活かせる方法に必要なのが、

大元のSassファイル(style.sassなど)で@importをすることです。

以下のようなファイル構成でファイルを作ったとします。

ファイル自体の細かい説明は後ほどいたします。

上の画像のような構成の場合は、以下のようにstyle.scssに書き込みます。

@import 'foundation/vars';
@import 'foundation/base';
@import 'foundation/mixin';

この状態でstyle.scssをコンパイルすると、
_base.scss,_mixin.scss,_vars.scssの中身がcssにコンパイルされた状態でstyle.cssにまとまるという訳です！

@importされるファイルの名前

先ほどの画像をみて、「ん？foundationディレクトリの中の_base.scssって名前なに？」と思った方もいらっしゃるかと思います。

@importされる側のファイルの最初には 「 _ (アンダーバー) 」をつけましょう。

ディレクトリごとで自動コンパイル設定をしている場合、_base.scssなどのcssファイルは必要ないのに排出されてしまいますので、防ぐために行います。

ファイルの命名例

命名の仕方はもちろん自由ですが、毎回どんなコードを書くときでも使うものを例としてあげていきます。

_vars(variable).scss

変数を格納するために使います。

変数が一番役に立つのはカラーコードです。

#333やwhiteなどで表せるコードならば必要ありませんが、複雑なカラーコードの場合は、$pinkや$redと振って表せるので、とても役に立ちます。

_mixin.scss

sassで使える便利な機能の一つに@mixinというものがあります。

筆者はレスポンシブで主に使います。

使い方は以下の通りです。

_mixin.scss

//スマホでの切り替えポイントを記述する
@mixin break-sp {
  @media (max-width: (480px)) {
    @content;
  }
}

@contentで、break-spという関数を読み込んだ時に、@content内の中身だけを書き加えるように設定しています。

他のscssファイル

.hoge{ padding:0;
  @include break-sp{
    padding:10px;
  }
 }

↓　コンパイル後

.hoge{ padding:0;
  @media (max-width:480px){
    .hoge{
      padding:10px;
    }
  }
}

こんなに簡単にレスポンシブが書けるなんて、なんて画期的なんだろうと最初は惚れ惚れしました…。

可読性もグンと上がりますし、これだけでsassを導入する価値を感じます。

_reset.scss

CSSを最初に設定し直してあげるためのファイルです。

_base.scss (_setting.scss)

ベースとなる部分をまとめて書くファイルです。

_resetとは別で、共通部分などのコードを書くようにしましょう。

Sassのメリット3選

前述した以外でも使う頻度の高いコードや、Sassならこれだけ短縮できる！などの大きなメリットをお話ししたいと思います。

ネスト(入れ子)の可読性

Sassの書き方としては大前提ですが、BEMを導入している方にはSassとの相性がバッチリで特にオススメです。

BEMが気になった方は、以下の記事を一度読むのがオススメです。

BEM を使うべき5つの理由（なぜ BEM が G.R.E.A.T といえるのか）

複数人で作業するときも競合しない

冒頭にも触れましたが、cssファイルは複数人が同時にいじると高い確率で競合します。

しかしSassなら、@importされるファイルを増やして@importすれば競合することはまずないです。

for文やif文を使える

この3つの中でダントツに使い勝手がよく、コードを短縮できる技です。

例えば、marginを付与するクラスを10px単位で作るとすると、

@for $i from 1 through 5{
  .margin#{$i * 10} {
    margin:#{$i * 10}px;
  }
}

↓　コンパイル後

.margin10 {
  margin: 10px;
}

.margin20 {
  margin: 20px;
}

.margin30 {
  margin: 30px;
}

.margin40 {
  margin: 40px;
}

.margin50 {
  margin: 50px;
}

こんな風にクラスが生成できます。

cssでphpのような文章が書けるなんて夢みたいですよね…。

なお、Sassはcalc()を使わずとも四則演算に対応してくれます。

まとめ

以上でまとめた以外にも、@extendなどの機能もあります(筆者はあまり使わないので紹介しませんでした)。

気になる方はとことんSassについて調べてみてどんどん知識を蓄えてみましょう！

この機会にSassを導入して使いこなしてみてはいかがでしょうか？

【Scratch】えんざんブロックのいみ

こんかいは　えんざんのブロックのいみを　ひとつずつ　見ていきましょう。

そのまえに　スクラッチのとくちょうとして　
ブロックエリアにある　ブロックをクリックすると、　そのブロックのうごきを　じっさいにやってくれる　きのうがあります。

たとえば「うごき」の「10ほうごかす」をクリックするとねこがすこしずつうごいてくれます。

このきのうをつかって　えんざんのブロックのいみを　かくにんしていきます。

えんざんブロックのいみ

まずは　カテゴリの　「えんざん」を　クリックしましょう。

「えんざん」とは　「けいさんをする」ことを　むずかしくした　ことばです。

ことばのとおり　このカテゴリには　けいさんにかんけいした　ブロックが　あつまっています。

たす・ひく・かける・わる

いちばんうえから

とありますが、これは「けいさんしき」につかうものです。

＋　たす

-　ひく

*　かける

/　わる

のいみです。

じっさいに　たしかめてみます。

まずはブロックをだします。

「『3』+『2』」すうじをいれてみましょう。

そしてそれをクリックしてみます。

すると「5」とふきだしでしゃべります。

ほかのブロックでもおなじことができます。たしかめてみてください。

〇から〇までのらんすう

は　ひだりのすうじから　みぎのすうじの　なかから　ランダムで　すうじを　えらんでくれます。

このがぞうでは　1・2・3・4・5・6・7・8・9・10のなかから　ランダムですうじを　えらんでくれるものです。

クリックすると、いろんなすうじをしゃべってくれます。

ばしょをランダムにしたいときやすうじをランダムにしたいときによくつかいます。

ふとうごう・とうごう

とあります。

いちばんしたはみたことあるひとがおおいとおもいます。

これら３つはみぎとひだりのすうじをくらべるものです。

はひだりがおおきく　くちを　あけています。

ですので、すうじをおくときは「おおきい > ちいさい」となります。

はみぎがおおきくくちをあけています。

ですので、すうじをおくときは「ちいさい < おおきい」となります。

この２つのきごうは　ふとうごう　といいます。

はみぎひだりがおなじときにつかいます。

よく「3+2=5」などに「=」がつかわれます。

これは「3+2」と「5」がおなじすうじということです。

このきごうは　とうごう　といいます。

かつ・または・ではない

は、　「もし〜なら」などの　あいだに　はさむときに　べんりにつかえます。

たとえば、マウスのポインターにふれた　と　マウスがおされた　をいっしょに　つかいたいときは

「かつ」をつかうと、　「マウスのポインターにふれた『かつ』マウスがおされた」

となります。

そのほかのブロック

ほかのブロックは　すうじをよくいれますが、　これらは　「もじ」のために　つかうブロックです。

はけいさんしきとおなじようにつかえます。

それぞれすうじをいれるとわかりやすくなります。

たとえば、「『10』を『3』でわったあまり」にしてみましょう。

クリックすると「1」としゃべりました。

これは10÷3＝3あまり1なので、1とだけしゃべります。

「ししゃごにゅう」ということばをしっていますか？

「ししゃごにゅう」とはかんじでこうかきます。「四捨五入」

すうじがはいっています。4と5です。

これらのいみは4をすてて、5をいれるということばです。

1,2,3,4はすてて、5,6,7,8,9のすうじはくりあげます。

これは『0.5』などのすうじをいれるとわかりやすいです。

「『0.5』をししゃごにゅう」にしてクリックすると、「1」としゃべります。

0.6,0.7,0.8,0.9もおなじように「1」としゃべります。

「『0.1』をししゃごにゅう」にしてクリックすると、「0」としゃべります。

0.1,0.2,0.3,0.4もおなじように「0」としゃべります。

◯のぜったいち

これは-(マイナス)のついているかずを-(マイナス)のぬいたかずをひょうじしてくれます。

「『-10』のぜったいち」にしてクリックすると「10」としゃべります。

ぜったいちのほかに

「きりさげ」「きりあげ」「へいほうこん」「sin」「cos」「tan」「asin」「acos」「atan」「In」「log」「e^」「10^」

とはいっていますがすうがくのむずかしいぶぶんなので、こんかいはせつめいしません。

これらがえんざんのブロックのいみです。

いままでつくったものにくわえて、アレンジできます。

ぜひちょうせんしてみてください。

まとめ

いかがでしたでしょうか。
今回はScratchの「演算ブロックの意味」をご紹介しました。

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

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

【最新版】iOSアプリの申請までの手順「中編」

目次

4.iOS App IDsの登録

4-1.App IDの作成

4-2.Explicit App IDの作成

4-3.Wildcard App ID

4-4.App Servicesの作成

5.Provisioning Profileの作成

5-1.UDIDの確認

5-2.Provisioning Profileの作成

【最新版】iOSアプリの申請までの手順「前編」

目次

1.概要

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

1-2.iOS Certificateの作成

1-3.iOS App IDs の登録

1-4.Provisionig Profileの作成

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

1-6.App Store Connectで申請

2.アカウントの準備

2-1 Apple developer

2-2 App Store Connect

3.iOS Certificateの作成

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

3-2.Certificateの作成

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

【作って学べる Unity 超入門】執筆した本が発売されました！

本の概要

こんな方にオススメ

内容紹介

Chapter1 Unityについて知ろう

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

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

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

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

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

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

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

システム開発のご案内

著者プロフィール

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

【Scratch】「かんたんけいさんき」のつくりかた

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

つくりかた

わかりやすくしよう

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

まとめ

【電子工作にも】micro:bitの使い方

micro:bitとは

機能

LED

ボタン

端子

温度センサー

加速度センサー

コンパス

無線

Bluetooth

USBインターフェース

使い方

電源を入れる

接続させる

プログラミング

プログラムを送る

プログラムを動かす

まとめ

【超入門】vue-cliでJavaScriptデビュー！

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

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

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

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

なぞなぞを出題しよう！

最後に

【簡単】WordPreess（ワードプレス）を30分でインストールする方法【初心者向け】

目次

WordPress(ワードプレス)とは

WordPress（ワードプレス）に必要なもの

WordPress（ワードプレス）

Apache（サーバーソフトウェア）

MySQL（データベース）

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

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

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

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

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

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