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に挑戦してみてはいかがでしょうか？

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

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

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

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

目次

1. WordPress（ワードプレス）とは
2. WordPress（ワードプレス）に必要なもの
3. WordPress（ワードプレス）をインストールする
4. 実際に使ってみる
5. まとめ

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（ワードプレス）のインストールは以下のたった３つの手順でできます。

1. XAMPPをインストールする
2. MySQL（データベース）に管理人を作る
3. 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局の取材が入るなど大注目だった一昨年。連日満席で大盛況の内に終わった昨年。

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

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

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

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

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

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

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

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

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

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

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

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

目次
1. 1.Sassの中でも種類がある？
2. 2.Sassを自動コンパイル設定にしよう
3. 2-1.Linuxから制御する
4. 2-2.エディター側のプラグインから制御する
5. 3.ファイルの構成の仕方
6. 4.@importされるファイルの名前
7. 5.ファイルの命名例
8. 6.Sassのメリット3選
9. 6-1.ネストの可読性
10. 6-2.複数人で作業しても競合しない
11. 6-3.for文やif文などを使える
12. 7.まとめ

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が気になった方は、以下の記事を一度読むのがオススメです。

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

冒頭にも触れましたが、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を導入して使いこなしてみてはいかがでしょうか？

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

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

たとえば「うごき」の「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の「演算ブロックの意味」をご紹介しました。

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

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

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

やじるしキーでうごかすほうほうをしょうかいします。

今回はふたつほうほうがあるのでそれぞれしょうかいします。

「キーがおされたなら」をつかったうごかしかた

まずはうごかしたいキャラクターをよういします。

「イベント」から「スペースキーがおされたなら」を出しましょう。

「スペース」のところを「みぎむきやじるし」にかえます。

その下に「うごき」から「xざひょうを10ずつかえる」を入れます。

これで→のキーをおすと、みぎにいきます。

もう一つ「イベント」から「スペースキーがおされたなら」を出して、「ひだりむきやじるし」にかえます。

下に「うごき」から「xざひょうを10ずつかえる」をいれます。

ひだりにいってほしいので、「xざひょうを『-10』ずつかえる」にします。

これで←キーをおすとひだりにいくようになります。

おなじく「イベント」から「スペースキーがおされたなら」を出して、「うわむき」にかえます。

こんどは「うごき」から「yざひょうを10ずつかえる」をだします。

くみあわせてみると↑キーをおすとうえにいきます。

「イベント」から「スペースキーがおされたなら」をだして、「したむき」にかえます。

「うごき」から「yざひょうを10ずつかえる」をだします。

したにいくので「yざひょうを『-10』ずつかえる」にします。

くみあわせてみると↓キーをおすとしたにいきます。

これがひとつめのやり方です。

カクカクとうごくのがとくちょうです。

なめらかではなくゆっくりうごかしたいときにつかえます。

もし〜ならをつかったうごかしかた

もうひとつはもし〜ならをつかったほうほうです。

まずはキャラクターをよういします。

「イベント」から「はたがおされたとき」をだします。

「せいぎょ」から「もし〜なら」と「ずっと」をだします。

「ずっと」のなかに「もし〜なら」をいれます。

「しらべる」から「スペースキーがおされた」をだします。

もしスペースキーがおされたならができました。

これを「みぎやじるしキー」がおされたにかえます。

「うごき」から「xざひょうを10ずつかえる」をだして、はさみます。

はたをおして、→キーをおすとみぎにいきます。

ひだりもつくってみましょう。

「もし〜なら」をもうひとつだしましょう。

「しらべる」から「スペースキーがおされた」をだします。

「スペースキー」を「ひだりむきやじるしキー」にかえます。

「もし〜なら」のあいだにひだりむきやじるしキーをいれます。

「xざひょうを10ずつかえる」をだして、「xざひょうを『-10』ずつかえる」にかえます。

これをずっとのなかにいれます。

すると、←キーをおしたらひだりにすすみます。

うえとしたのいどうもつくりましょう。

「もし〜なら」をひとつだして、あいだに「スペースキーがおされた」をだします。

「スペースキーがおされた」を「うわむきやじるしキー」にかえて、「もし〜なら」にいれます。

「うごき」から「yざひょうを10ずつかえる」をだしてあいだにはさむ。

そして、ずっとのなかにはさみます。

はたをおして↑キーをおすと、うえにいきます。

「もし〜なら」をだして、「しらべる」から「スペースキーがおされた」をだしてあいだにいれます。

「うごき」から「yざひょうを10ずつかえる」をだして、「yざひょうを『-10』ずつかえる」にかえて、あいだにはさみます。

これも「ずっと」のなかにはさみます。

これで↑↓→←でどのほうこうにうごかせるようになりました。

つかいわけかた

このふたつはおなじようにみえて、とてもちがうかんがえかたのものです。

「イベント」の「キーがおされたとき」をつかったものは、いつでもどんなときでもいどうできます。

また、「すべてをとめる」でとまりません。

ぎゃくに「イベント」の「はたがおされたとき」からはじまるものは、はたをおされたときにうごきます。

「すべてをとめる」をつかうと、とまります。

これがやじるしキーでうごかすほうほうです。

本記事は先に設定編をご覧になることを推奨します。
記事はこちらから↓

目次
1. 1.コードで使う部分
2. 2.同ページのカスタムフィールドを出力する場合
3. 2-1.条件などなくそのまま出力する
4. 2-2.条件分岐して出力する
5. 3.別のページからカスタムフィールドを出力する場合
6. 3-1.特定の投稿タイプから出力する
7. 3-2.特定のタクソノミーから出力する
8. 4.まとめ

コードで使う部分

設定編で設定したフィールドグループのうち、使用する項目は以下の部分のみです。

なんともわかりやすいですね。

この“フィールド名”を指定することによって、簡単に出力ができます。

同ページのカスタムフィールドを出力する場合

まず基本の使い方を述べますので、どのページで出力する場合もこちらの項目に目を通すことをオススメします。

入力されている値をそのまま出力する

以下の文をコピペしましょう。

echoなどを入れると、エラーが出てしまうので注意してください。

条件分岐して出力する

フィールド内に何かしらの値が入ってる時のみ出力する場合は、以下の文をコピペしましょう。

• get_field(‘フィールド名’)→値を取得する
• the_field(‘フィールド名’)→値を出力する

という認識で構いません。以上がどのページにおいても基本のコードとなります。

別のページからカスタムフィールドを出力する場合

他のページにあるフィールドの値を出力したいときは、上で示したコードの外側にループ文の条件を加えてあげましょう。

まず、どの条件からでも共通するループ文を表記します。今回はWP_Queryで記します。

query($args);
if( $query->have_posts() ): while( $query->have_posts() ): $query->the_post();
  //ループ内容
endwhile;endif;wp_reset_postdata();
?>

特定の投稿タイプから出力する

 '指定したい投稿タイプ',
  );
?>

指定できる投稿タイプは以下の通りです。

‘post_type’の値は入力しなければ、’any’となります。

特定のタクソノミーから出力する

以下のような構成のタクソノミーを作成したとします。
(これ以降、[ ]内はフィールド名表記)

上画像の記事構造は、
カスタム投稿：東京都[tokyo]の内部に、
タクソノミー：新宿区[shinjukuku]、渋谷区[shibuyaku]が存在しています。

新宿区のカスタムフィールドを出力したい場合は、

 'tokyo',
    'taxonomy' => 'shinjukuku'
  );
?>

と追加すればOKです。

新宿区のタクソノミーを他で使っていないならば、

 'shinjukuku'
  );
?>

こちらの記述だけでも同様の動作をします。

また、新宿区のタクソノミー内に、

一番下の、“東西”[touzai]というようなラジオボタンを用意しました。

このフィールドで、“東口”[higashiguti]に選択されたもののタイトルだけを出力したいとします。

その場合、以下のようなコードになります。

 'tokyo',
    'taxonomy' => 'shinjukuku',
    'meta_key' => 'touzai',
    'meta_value' => 'higashiguti'
  );
if( $query->have_posts() ): while( $query->have_posts() ): $query->the_post();
  the_title();
endwhile;endif;wp_reset_postdata();
?>

‘meta_key’ や ‘meta_value’の使い方は理解していただけたでしょうか。

まとめ

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

今回の記事は、筆者がはじめてCustom Posttype UIとAdvanced Custom Fieldsを使った複雑な構成のサイトを作るときに、だいぶ手間取った出力の仕方をわかりやすくお伝えできたらなと思い、この記事を書かせていただきました。

ぜひWordpressを使っている方は、当ブログの他のWordpress関連の記事にも目を通してみてください。