blockun dialy

同人ゲーム制作サークル「SaNa」のメンバーが書くゆるーいブログです。

小学生でも出来る!C++プログラム #07

はおっ(0^∀^)ノ 。渚です。

プログラムしか書けない私たちですが、この度は同人界隈向けに、 なんとなくこんな風に作ってるよーというのを発信すべく、 定期的にブログで紹介してみようかということになりました。 この記事はそんな連載の第14回です。

ということで,渚からは「小学生でも出来る!C++プログラム」 を紹介していこうと思います。

関連ブログ

目次

  • 「for文って何?」
    • くりかえすということ
    • for文の基本の書き方

人物紹介

渚:プログラムを教えてくれる先生

f:id:nagisa39:20160618210950p:plain

ココ:いんたーねっとって聞いたことがあります!

f:id:nagisa39:20160619122427p:plain

マナブ:将来はゲームプログラマーになりたいな!

f:id:nagisa39:20160619122428p:plain

くりかえすということ

渚>for文で出来ることは,くりかえし処理です。

ココ>くりかえし?

渚>そうです!

渚>例えば,3回まわって,ワン!っていうとき,今までだと・・・

std::cout << "1回まわった" << std::endl;
std::cout << "2回まわった" << std::endl;
std::cout << "3回まわった" << std::endl;
std::cout << "ワン!" << std::endl;

渚>と,書く必要があるのですが,これが99回まわってワン!ってなったら

・・・・

渚>まぁ,書きたくないですよね。

ココ>たしかに・・・そうですね。

渚>こういう,くりかえし何かをするときに,for文を使います!

for文の基本の書き方

f:id:nagisa39:20160918115148p:plain

渚>基本的には,こんな風に書きます。

渚>宣言で,iに0を入れています。 渚>条件判定では,iが5より小さいかを判定しています。 渚>iが5より小さい場合は,何かしらの処理を実行します。 渚>処理が終わったら,iに1を足します。

渚>for文は,こういう処理をしています。

f:id:nagisa39:20160918115819p:plain

渚>では,処理の流れの具体例を見てみましょう。

f:id:nagisa39:20160918163203g:plain

渚>3回まわってワン!の例だと,こんな感じになります。

渚>for文の概要がなんとなくわかってきたと思います。

ココ>くりかえす!って感じが分かりました!

渚>では,for文の色々な書き方を見てみましょう!

for文の特殊な書き方

f:id:nagisa39:20160918115148p:plain

渚>for文は,「宣言」部分と「条件判定」部分と「計算」部分と「処理」部分に分かれます。

渚>そして,これら4つの部分は,何も書かないということができます。   例えば,こんな感じ。(※実践は,全部読んでからにしてください!)

for(;;)
{
}

渚>これは,「宣言」しない!,「判定」もしない!,「計算」もしない!,「処理」もしない!   という書き方ですが,処理もしないと意味がないので・・・

for(;;)
{
  std::cout << "無限にくりかえす";
}

渚>通常,処理には何か書きます。

マナブ>あっ!無限ループ!

渚>そうです。この書き方のことを,無限ループと言います。

渚>for文は,「条件判定」が間違っているとき(偽の時),処理をせずにfor文を抜けます。

渚>またfor文は,「条件判定」に何も書いていない時は,合っている(真である)という処理になっています。

渚>そのため,for文から抜けなくなり,無限にくりかえします。

ココ>えっ!そうなると,終了できなくなるんじゃ・・・

渚>その通りです!だから,無限ループのプログラムを書くときは,必ず無限ループから抜ける方法を書いてから実行します!

int count = 0;
int sec = 0;

for(;;)
{
    count++;
    if(count >= 1000)
    {
        sec++;
        count -= 1000;

        system("cls");
        std::cout << sec << std::endl;

        if(sec >= 10)
        {
           break;
        }
    }
}

渚>上のプログラムの「break」が,for文から抜ける方法になります。

渚>ちなみに,時間を図る場合は,上みたいな適当プログラムじゃなくて,std::chronoとか使いましょう。

渚>ざっくりとfor文について説明しました!あとは使って,学びましょう!

そのた

渚>for文以外の書き方の例と,使い分けについて。 f:id:nagisa39:20160918170933p:plain

次回

構造体について学ぼう

---フリー素材提供-------------------------------------- [ジュエルセイバーFREE] URL:http://www.jewel-s.jp/

Unityさわってみた(3D編)

こんにちは。
なんだか久しぶりに書いている気がます。soraです。

さて、超導入しかやってませんが、web編も一旦おしまいにして次は何をしようかーということで、渚さんに習いながらUnityを触ってみることしました。第一回は3Dということで、Unity手始めには恒例らしい、迷路ゲーム(のようなもの)をつくったので簡単にまとめておきたいと思います。

プロジェクト作成

Unityを起動してプロジェクトを作成します。今回は3Dゲームなので、下のタブを「3D」にして任意の名前で作成します。

f:id:moshisora:20160910114033p:plain

ステージをつくる

ではさっそくステージをつくります。ゲームを作るというと「あープログラミングかーー」とか「3D扱うのなんかやばそうだな」みたいな直感が働くんですが、GUIでぽちぽちと作ることもできるご時世になりました。さっそく迷路の壁や床を設置していきます。

床をつくる

新しい3Dオブジェクトをつくるときは、メニューから [GameObject] > [3D Objcet] の中にあるつくりたい形のオブジェクトを選択します。今回は床をつくりたいので Plane がよさそうです。

f:id:moshisora:20160910114535p:plain

選択すると、このようにSceneに追加されます。

f:id:moshisora:20160910114852p:plain

これからあとの工程で、壁やプレイヤーを設置するため、わかりやすい場所に置いておくのがよいので、画面右側の [Inspector] で場所と大きさを整えておきます。

f:id:moshisora:20160910115020p:plain

壁をつくる

では次に壁をつくります。床と同じように、メニューの [GameObject] > [3D Object] から、今度は [Cube] を選択します。(白の上に白で少し見にくいですが…)白色の箱がSceneに追加されます。これを迷路の壁にしたいので、[Inspector] で場所と大きさを調整していきます。

f:id:moshisora:20160910115657p:plain

こんな感じになりました。これを繰り返して迷路の壁をつくっていきます。地味な作業でした…。

f:id:moshisora:20160910115931p:plain

壁に色をつける

さて、壁は作成しましたが、白色ばかりでは見にくいので、壁に色をつけていきます。色をつけるには、まずマテリアルを作成します。メニューから、[Asset] > [Create] > [Material] を選択します。[Project] ビューに新しいマテリアルが追加されるので、ここでは名前を red としておきます。

f:id:moshisora:20160910120604p:plain

次に、このマテリアルの色を設定します。 red マテリアルを選択した状態で、[Inspector] の [Albedo] の項目をクリックすると、色選択ができるので、ここで好きな色を設定します。 red なので赤に設定しました。
マテリアルを作成したら、色を変更したいオブジェクトに作成した red マテリアルをドラッグ&ドロップで設定します。

f:id:moshisora:20160910120755p:plain

いい感じに赤くなったはず!

f:id:moshisora:20160910121522p:plain

プレイヤーをつくる

次に、キーボードで操作できるプレイヤーになるオブジェクトを作成します。壁の場合と同様に、メニューの[Game Object] > [3D Object] から、[Sphere]を選択します。わかりやすいように、前節と同じ手順で新しいマテリアル green を設定して、設置したSphereにドラッグ&ドロップして反映しておきましょう。あとは、[Inspector] で場所をスタート位置に設定して完了です。

プレイヤーが床にめり込まないように、高さには注意しましょう。

f:id:moshisora:20160910122202p:plain

物理演算を適用する

このままではプレイヤーが床や壁をすり抜けてしまうので、Unityに搭載されている物理演算機能をプレイヤーに反映します。

プレイヤーを選択した状態で、[Inspector] の一番下にある[Add Component] から、[Physics] > [RidigBody] を選択します。

f:id:moshisora:20160910123258p:plain

キーボード入力で操作する

次に、プレイヤーをキーボード入力で動かせるようにします。ここでようやくプログラムを書きます。

まず、メニューの[Assets] > [Create] > [C# script] を選択して、スクリプトを作成します。また、プレイヤーのオブジェクト(sphere)に作成したこのスクリプトをドラッグ&ドロップしてアタッチしておきます。このスクリプトにプレイヤーの動作をプログラムしていきます。ファイル名は Player にしておきます。↓をコピペすれば動くはず!

using UnityEngine;

public class Player : MonoBehaviour
{
    public float speed;
    public Rigidbody rb;

    public GameObject Goal;

    void Start()
    {
        rb = GetComponent<Rigidbody>();
    }

    void FixedUpdate()
    {
        float translation = Input.GetAxis("Vertical");
        float rotation    = Input.GetAxis("Horizontal");

        rb.AddForce(rotation * speed, 0, translation * speed);
    }
}

public float speed のように、 public で変数を定義しておくと、UnityのInspectorから数値を代入できる上、デバッグ中でも変更が反映されるので、とても便利です。スクリプトの動作は単純なもので、 Input.GetAxis() で取得した水平方向・垂直方向の入力に対して、設定した speed をかけた分だけプレイヤーオブジェクトに AddForce() で力を加えて動かしています。

Start FixedUpdate 関数はUnityが呼び出す関数で、 Start は初期化時、 FixedUpdate は指定した特定の時間が経過する度に呼ばれる関数です。一定のインターバルで AddForce し続けることによってキーボード入力での移動をしています。

ゴールをつくる

では最後にゴールを作ります。オブジェクトの作成方法はこれまでと同じく、メニューから [Game Object] > [3D Object] > [Cube] で作成します。また、白では見づらいのでプレイヤーを作成した時に作った green マテリアルを反映します。自分はこのあたりに作りました。

f:id:moshisora:20160910132153p:plain

ゴールしたことを判定する

プレイヤーがゴールに到達したことを検知します。ゴール側の準備として、ゴールのオブジェクトを選択した状態で、[Inspector]の[Box Collider] にある [isTrigger] のチェックを有効にしておきます。

f:id:moshisora:20160910132418p:plain

次に、プレイヤーのスクリプトOnTriggerEnter() を追加します。このメソッドは、Triggerに設定された他のオブジェクトと当たった時に実行されるメソッドです。ここでは当たったことをログに出力しています。実際にゲームを作るときはこの部分にクリアしたときの処理を記述していくといいですね!
(設計としてはゴール側に判定処理をもたせたほうがスマートな気もしますが面倒なのでここではプレイヤーに…)

プログラムは全文を載せておきます。

using UnityEngine;

public class Player : MonoBehaviour
{
    public float speed;
    public Rigidbody rb;

    public GameObject Goal;

    void Start()
    {
        rb = GetComponent<Rigidbody>();
    }

    void FixedUpdate()
    {
        float translation = Input.GetAxis("Vertical");
        float rotation    = Input.GetAxis("Horizontal");

        rb.AddForce(rotation * speed, 0, translation * speed);
    }

    void OnTriggerEnter(Collider other)
    {
        Debug.Log(other.gameObject.name);
    }
}

おわり

簡単にですが、Unity初心者がいろいろと教わりながらさわってみました。
つくったものが簡単というのもありますがC++/DirectXで書こうと思うと共通処理書くだけで結構げんなりするので、なかなか便利な時代になったものだなあと…。

個人的にはもっとプログラムでもりもりかきたい気持ちですが、どうやらそういう作り方もできそうとのこと。
(自分はプログラムしかかけないので)テキストと画像をいれればノベルゲーム作れる、みたいなテンプレート的なのを作れると面白いなーとちょっと妄想しています。(似たやつありそうですが!)

ということで次回は2Dゲームのほうにいってみます。では!

小学生でも出来る!C++プログラム #06

はおっ(0^∀^)ノ お久しぶりです。渚です。

プログラムしか書けない私たちですが、この度は同人界隈向けに、 なんとなくこんな風に作ってるよーというのを発信すべく、 定期的にブログで紹介してみようかということになりました。 この記事はそんな連載の第12回です。

ということで,渚からは「小学生でも出来る!C++プログラム」 を紹介していこうと思います。

関連ブログ

目次

  • 「if文を使おう!」
    • 自動販売機プログラム
    • 自動販売機プログラム解答

人物紹介

渚:プログラムを教えてくれる先生

f:id:nagisa39:20160618210950p:plain

ココ:いんたーねっとって聞いたことがあります!

f:id:nagisa39:20160619122427p:plain

マナブ:将来はゲームプログラマーになりたいな!

f:id:nagisa39:20160619122428p:plain

自動販売機プログラム

渚>今日は自動販売機プログラムを書いていきましょう!

ココ>じどうはんばいき?

マナブ>ジュースが買える機械だよ。

ココ>知ってる!   そうじゃなくて,そのプログラムっていうのが想像できなくて・・・

マナブ>確かにそうですね。どんなプログラムなんですか?

渚>標準入出力(コンソール)を使って,ちょっとした自動販売機を作ります。

渚>見た方が早いので,お見せしますね。

f:id:nagisa39:20160904145136p:plain

渚>まずは,coutを使って,表示を行います。

渚>¥(円マーク)は,¥¥と記入しないと,適切に表示されないので注意しましょう!

f:id:nagisa39:20160904145330p:plain

渚>次に,cinを使って,入力を行います。

渚>赤色の字の「1」がcinで入れた値になります。

ココ>cin?

渚>coutの意味が,c(コンソール)のout(出力)です。  cinは,c(コンソール)のin(入力)になります。

渚>使い方は,

std::string value;
std::cin >> value;

渚>これだけで,string型のvalueに値が入ります。

渚>では,自動販売機のプログラムを見てみましょう!

渚>赤色の字以外は,coutで表示しているだけです。   では,赤色の字の数字を変えたらどうなるか見てみましょう!

渚>例えば,1番目に0を入れてみますね。

f:id:nagisa39:20160904150617p:plain

渚>こんな感じで,1~4のみしか処理しないようになっています。

渚>1番目に1~4のどれかを入力し,   2番目に,1~2以外を入力してみますね。

f:id:nagisa39:20160904151758p:plain

渚>こんな感じで,無視して買わされます。

マナブ>聞く意味ないですね・・;

渚>そうですね!   気になる人は,1~2以外の入力を受け付けないようにしましょう。

渚>あと見せていないのは,1番目に3と4を選択したパターンですね。

ココ>1番目に4を入れると,お金が足りなくて買えない!

渚>そうですね!どうなるか見てみましょう。

f:id:nagisa39:20160904152323p:plain

渚>こんな感じで,お金が足りないことを指摘されます。

渚>最後に,1番目に3を選択した場合と,2番目に2を選択した場合を見てみましょう!

f:id:nagisa39:20160904152423p:plain

渚>こんな感じです。

渚>では,こんな感じの自動販売機プログラムを組んでみましょう!

マナブ>は~い! ココ>は~い!

自動販売機プログラム解答

渚>では,解答プログラムを載せますね。

渚>まだ,出来ていない人は,出来るだけ自力で頑張ってね!

渚>ちなみに,↓のが唯一の回答ではなく,こういう方法もある位に思ってください!

#include <iostream>
#include <string>
using namespace std;

int main()
{
    unsigned int money = 1500;

    string select;
    int i_select;

    cout << "自動販売機" << endl;

    cout << "残金:" << money << "円" << endl;
    cout << "--------------------------------" << endl;
    cout << "お茶 アップル コーラ コーヒー" << endl;
    cout << "\\100   \\150      \\1500    \\2000" << endl;
    cout << "--------------------------------" << endl;

    cout << "どれをお買い求めになりますか?" << endl;
    cout << "1:お茶 2:アップル 3:コーラ 4:コーヒー" << endl;
    cin >> select;
    
    try 
    {
        i_select = std::stoi(select);
    }
    catch(exception e)
    {
        cout << "1~4を入れて下さい!" << endl;
        return 0;
    }
    
    if (i_select == 1)
    {
        if (money < 100)
        {
            cout << "お金たりないよ~!" << endl;
            return 0;
        }

        cout << "お茶を買いましたね。" << endl;
        cout << "本当にいいんですか?" << endl;
        cout << "1:はい 2:YES" << endl;
        cin >> select;

        cout << "お買い上げありがとうございます!" << endl;
        cout << "あなたのお財布から" << 100 << "円が減りました" << endl;
        cout << "残金:" << (money -= 100) << "円" << endl;
    }
    else if (i_select == 2)
    {
        if (money < 150)
        {
            cout << "お金たりないよ~!" << endl;
            return 0;
        }
        cout << "アップルを買いましたね。" << endl;
        cout << "本当にいいんですか?" << endl;
        cout << "1:はい 2:YES" << endl;
        cin >> select;

        cout << "お買い上げありがとうございます!" << endl;
        cout << "あなたのお財布から" << 150 << "円が減りました" << endl;
        cout << "残金:" << (money -= 150) << "円" << endl;
    }
    else if (i_select == 3)
    {
        if (money < 1500)
        {
            cout << "お金たりないよ~!" << endl;
            return 0;
        }
        cout << "コーラを買いましたね。" << endl;
        cout << "本当にいいんですか?" << endl;
        cout << "1:はい 2:YES" << endl;
        cin >> select;

        cout << "お買い上げありがとうございます!" << endl;
        cout << "あなたのお財布から" << 1500 << "円が減りました" << endl;
        cout << "残金:" << (money -= 1500) << "円" << endl;
    }
    else if (i_select == 4)
    {
        if (money < 2000)
        {
            cout << "お金たりないよ~!" << endl;
            return 0;
        }
        cout << "コーヒーを買いましたね。" << endl;
        cout << "本当にいいんですか?" << endl;
        cout << "1:はい 2:YES" << endl;
        cin >> select;

        cout << "お買い上げありがとうございます!" << endl;
        cout << "あなたのお財布から" << 2000 << "円が減りました" << endl;
        cout << "残金:" << (money -= 2000) << "円" << endl;
    }
    else
    {
        cout << "1~4を入れて下さい!" << endl;
        return 0;
    }
    
    cout << "--------------------------------" << endl;
    return 0;
}

渚>今までの紹介にない,部分を説明しますね!

unsigned int money = 1500;

渚>実は,int型の本名は,signed intという型なんです。   この型は,プラスの値とマイナスの値の両方が使える型になります。

渚>unsigned int型は,マイナスを扱えないようにする代わりに   通常のsigned int型より,大きいプラスの値が使える型になります。

渚>今回は,moneyがマイナスになることがないので,unsigned int型を使っています。

i_select = std::stoi(select);

渚>これは,string型のselectをint型のi_selectに変換しています。

渚>もし,selectに入っている値がint型ではなかった場合,

    try 
    {
        i_select = std::stoi(select);
    }
    catch(exception e)
    {
        cout << "1~4を入れて下さい!" << endl;
        return 0;
    }

渚>catchの中に入り,「"1~4を入れて下さい!"」が表示されます。

渚>try catchは,「selectに入っている値がint型ではなかった場合」   のような,異常なエラーがあった際,   落ちるのではなく,正常に処理を続けられるようにする仕組みです。

渚>これで説明は以上になります!ほかに気になるところはありますか?

ココ>だいじょうぶです! マナブ>だいじょうぶです!

渚>ということで,今回はif文を使って,自動販売機プログラムを書いてみよう!でした。

次回

for文について学ぼう

---フリー素材提供-------------------------------------- [ジュエルセイバーFREE] URL:http://www.jewel-s.jp/

小学生でも出来る!C++プログラム #05 解答

渚>解答なので,

小学生でも出来る!C++プログラム #05 - 同人サークルSaNa|ブログ

を見てから,見てね!

経験値(exp)が50以上ならば,「レベルが上がった」そうでなければ,「まだレベルは上がってないよ」と出力されるプログラム

expが10の時

#include <iostream>

int main()
{
    int exp = 10;
    if(exp >= 50)
    {
        std::cout << "レベルが上がった" << std::endl;
    }
    else
    {
        std::cout << "まだレベルは上がってないよ" << std::endl;
    }

    return 0;
}

expが50の時

#include <iostream>

int main()
{
    int exp = 50;
    if(exp >= 50)
    {
        std::cout << "レベルが上がった" << std::endl;
    }
    else
    {
        std::cout << "まだレベルは上がってないよ" << std::endl;
    }

    return 0;
}

expが100の時

#include <iostream>

int main()
{
    int exp = 100;
    if(exp >= 50)
    {
        std::cout << "レベルが上がった" << std::endl;
    }
    else
    {
        std::cout << "まだレベルは上がってないよ" << std::endl;
    }

    return 0;
}

小学生でも出来る!C++プログラム #05

はおっ(0^∀^)ノ お久しぶりです。渚です。

プログラムしか書けない私たちですが、この度は同人界隈向けに、 なんとなくこんな風に作ってるよーというのを発信すべく、 定期的にブログで紹介してみようかということになりました。 この記事はそんな連載の第10回です。

気が付けば,10回目・・・内容は大して進んでいませんが,あっという間ですね。 ということで,渚からは「小学生でも出来る!C++プログラム」 を紹介していこうと思います。

関連ブログ

目次

  • 「if文って何?」
    • 前回の復習
    • もしもの世界
    • とりあえず,書いてみよう
    • 条件式
    • PCがif文を理解する仕組み
    • bool型
    • 条件式の組み合わせ

人物紹介

渚:プログラムを教えてくれる先生

f:id:nagisa39:20160618210950p:plain

ココ:いんたーねっとって聞いたことがあります!

f:id:nagisa39:20160619122427p:plain

マナブ:将来はゲームプログラマーになりたいな!

f:id:nagisa39:20160619122428p:plain

前回の復習

渚>前回は変数について勉強しました,変数とは何か覚えていますか?

ココ>箱!

渚>そうですね。では,変数の宣言の仕方は覚えていますか?

ココ>宣言?

渚>宣言とは,コンピュータに対して,この変数が使いたいです!と宣言(伝える)することです。

マナブ>つまり,変数のプログラムの書き方だよ。

ココ>ええと,あれ?

渚>変数の宣言の仕方はこんな感じです。

変数の箱の形  変数名  左の変数に値を入れる!  変数に入れる値  プログラム終わり!
  int型      変数名           =            変数に入れる値         ;

  ↓

int name = 0;

ココ>そういえば,最後に書いた気がする!

渚>そうですね。よくわからなかった人は,前回のを再度復習してみましょう!

渚>今回のif文では,前回勉強した変数を使っていくので,変数の考え方(変数は箱)と,プログラムの書き方(int i = 0;)を知ってから学んでいきましょう!

もしもの世界

渚>ではさっそくプログラム!と行きたいところですが,まずはif文の考え方から知りましょう!

渚>if文は,もし○○ならば,こうしたい,というのをプログラムで書くときに使います。

渚>例えば,マナブ君が,もし150円持っていたなら,ペットボトルのお茶が買えます。しかし,持っていなければ,お茶が買えません。というのをプログラムで書くことができます。

渚>ゲームでも,if文は必ず使います。例えば,どんな時に使うでしょう?

マナブ>例えば・・・経験値が50溜っていたら,レベルアップする!とかもif文を使いそうです。

渚>そうですね!ではそれを,実際のプログラムで書いていきましょう!

とりあえず,書いてみよう

渚>if文は,下のような感じで書きます。

int manabu = 150;
if( manabu >= 150 )
{
    std::cout << "マナブ君はお茶を買うことが出来ました。" << std::endl;
}
else
{
    std::cout << "マナブ君はお茶を買うことが出来ませんでした。" << std::endl;
}

渚>日本語に置き換えると・・・

int マナブ君の所持金 = 150円;
もし( マナブ君の所持金 150円 以上 )ならば
{
    std::cout << "マナブ君はお茶を買うことが出来ました。" << std::endl;
}
そうでなければ
{
    std::cout << "マナブ君はお茶を買うことが出来ませんでした。" << std::endl;
}

渚>こんな感じになります。

渚>では,経験値(exp)が50以上ならば,「レベルが上がった」そうでなければ,「まだレベルは上がってないよ」と出力されるプログラムを書いてみましょう。expの初めの値は,10と50と100で試してみましょう。

マナブ>は~い! ココ>は~い!

[[正解はこちら]]

渚>合っていたかな?

条件式

渚>次は,条件式について学びましょう!

ココ>じょうけんしき?

渚>そうです!条件式です!   さっきの例だと,「マナブ君の所持金 150円 以上」っていうところが条件式です。   条件「マナブ君がお金を150円以上持っている」というのを式で書くので,条件式と言います。

ココ>へぇ~

渚>この条件式は,必ず次のような形で書かれます。   「左側 記号 右側」でひとかたまりになります。

ココ>記号には何が入るの?

マナブ>例えば,    左側と右側が同じ値だったら?という意味の「==」(イコール)    左側と右側が違う値だったら?という意味の「!=」(びっくりイコール)    左側が右側より大きい値だったら?という意味の「>」(大なり)    左側が右側以上の値だったら?という意味の「>=」(大なりイコール)    左側が右側より小さい値だったら?という意味の「<」(小なり)    左側が右側以下の値だったら?という意味の「<=」(小なりイコール)     があるよ。

ココ>左側が右側より大きいのと,左側が右側以上なのって,どう違うの?

マナブ>えっと,同じ値が入る場合は以上で,含まない場合はより大きいかな。

渚>こんな感じですね。

f:id:nagisa39:20160820233421p:plain

ココ>なるほど!

渚>まとめるとこんな感じ

if( 条件式 )
{
 条件が合っていたら,ここに入る
}
else
{
 条件が間違っていたら,ここに入る
}
条件式は・・・
左側 記号 右側

という形で書く。

記号は,以下のようなものがある。 f:id:nagisa39:20160821120025p:plain

PCがif文を理解する仕組み

渚>さっきの項目で,「if文を使うと条件によって違うことができる事」や,「if文ってどうやって書くのか?」がなんとなく伝わったと思います。

ココ>は~い!

マナブ>大丈夫です!

渚>次は,PCがif文をどうやって処理しているか? つまり,処理の流れを教えますね。

ココ>はい! マナブ>はい!

渚>if文が処理される流れは,こんな感じです。

[1]
if( [2]条件式 )
{
 [3-1]
 条件が合っていたら,ここに入る
}
else
{
 [3-2]
 条件が間違っていたら,ここに入る
}

渚>[2]の条件式をもっと細かく見ていきます。

[1]左側 記号 右側  [1]が正しい場合は,trueに置き換わる  [1]が正しくない場合は,falseに置き換わる [2]置き換わった値がtrueならば,[3-1]に falseならば[3-2]に

渚>実は条件式は,一旦trueかfalseに置き換わります。   ということは,if(true)という書き方が出来ます。やってみましょう!

渚>まとめると・・・・

[1]
if( [2]条件式 )

     ↓

if( [3]条件式が正しければ[true] 正しくなければ[false] )
{
 [4-1]
 trueだったら ここに入る
}
else
{
 [4-2]
 falseだったら ここに入る
}

渚>実は,こんな感じでPCに理解(処理)されているのです。

bool型

渚>前回,変数について学びました。その時には出てきませんでしたが   変数の形にの一つに「bool型」というものがあります。

マナブ>確か,「true」か「false」しか入らない変数ですよね

渚>表現の仕方が若干違いますが,そんな感じです。

渚>ココさん,先ほど,if()の中には,最終的に2種類になるって話をしましたね。その2種類はなんですか?

ココ>えと,「true」と「false」?

渚>その通りです!

渚>マナブくん,bool型の変数valueの宣言を書いてみてください。初期値はtrueでお願いします。

マナブ>bool value = true; はい!こんな感じです!

渚>はい!正解です。

渚>では,ココさん,このvalueがtrueだったら,「trueです!」と表示するプログラムを書いてみてください。

ココ>は~い!

#include <iostream>

int main()
{
    bool value = true;
    if(value == true)
    {
        std::cout << "trueです!" << std::endl;
    }
    else
    {
    }
    return 0;
}

ココ>できました!

渚>そういえば,説明していませんでしたね。

ココ>??

渚>elseの後の{ }内は,そうではない時の処理を書く場所ですが   上の例だと,そうではない時の処理を書いていませんよね。

ココ>そうですね。

渚>実は,そうではない時の処理は,書く必要がなければ,書かなくてもいいんです。   つまり・・・これだけで成り立ちます。

if(条件式)
{
}

ココ>へぇ~!ということは・・・  

#include <iostream>

int main()
{
    bool value = true;
    if(value == true)
    {
        std::cout << "trueです!" << std::endl;
    }
    return 0;
}

ココ>できました!

渚>ん~惜しい!

ココ>えぇっ?!

マナブ>ん~?ぁ,そうか!

渚>マナブくんはピンと来たようですね。   ココさん,if文の( )の中は,「左 記号 右」の形で書くのがルールですが,   「左 記号 右」はtrueかfalseに置き換わります。ということは・・・?

ココ>えぇぇ・・・valueがtrueで,trueと同じ値だから,trueで・・・・あれ?

#include <iostream>

int main()
{
    bool value = true;
    if(value)
    {
        std::cout << "trueです!" << std::endl;
    }
    return 0;
}

ココ>こうですかっ?

渚>そうです!大正解!   if文の( )の中が,「value == true」ではなく,「value」なんです。

渚>理由は,  「value == true」は,valueがtrueの場合は,   「true」に置き換わり  「value == true」は,valueがfalseの場合は,falseとtrueは違うので,   「false」に置き換わります。

渚>つまり,value単体で,条件式を満たすことができるのです。

ココ>あれ?じゃぁ,value == falseって書きたかったらどうするんですか?

ココ>こう書くのかな・・・

#include <iostream>

int main()
{
    bool value = true;
    if(value)
    {
    }
    else
    {
        std::cout << "falseです!" << std::endl;
    }
    return 0;
}

渚>いいえ,違います。

渚>実は,こんな書き方をします。

#include <iostream>

int main()
{
    bool value = true;
    if(!value)
    {
        std::cout << "falseです!" << std::endl;
    }
    return 0;
}

ココ>あっ,「!」がついてる!

渚>そうです。この「!」(ビックリ)が付くと,右側が「反対」という意味になり,valueがtrueだったら,!valueはfalseになります。

ココ>なるほど~

渚>これでif文の仕組みの大半は説明し終わりました!   あとは,条件式の組み合わせだけですね。

条件式の組み合わせ

渚>今日はこれがラストです!

マナブ>いよいよですね!

渚>先ほど説明した条件式ですが,最終的に「true」または「false」に置き換わります。

渚>それを,頭に入れた状態で聞いてください。

マナブ>はい! ココ>はい!

渚>if( )に入る条件式は,1つだけではありません。実は,複数入れることが可能です。

渚>複数入れるためには,条件式と条件式の間に「&&」(あんどあんど) または「||」(おあおあ)を使います。

渚>それぞれの意味はこんな感じです。

左の条件式 && 右の条件式

  右:true 右:false
左:true 結果:true 結果:false
左:false 結果:false 結果:false

左の条件式 || 右の条件式

  右:true 右:false
左:true 結果:true 結果:true
左:false 結果:true 結果:false

渚>では,マナブくん,int型の変数[kion][初期値は26]が,25~28だと「適温です!」と表示するプログラムを書いてみましょう。

マナブ>はい!

#include <iostream>

int main()
{
    int kion = 26;
    if(kion >= 25 && kion <= 28)
    {
        std::cout << "適温です!" << std::endl;
    }
    return 0;
}

マナブ>できました!

渚>大正解です!   左側の条件式「kion >= 25」気温が25度以上の時,trueで,   右側の条件式「kion <= 28」気温が28度以下の時,trueになるので,   trueかつtrueは,true 正解です。

渚>では,これを||にすると,何が間違いになりますか?

マナブ>||だと,左か右がtrueだったら,trueになるので・・・

#include <iostream>

int main()
{
    int kion = 40;
    if(kion >= 25 || kion <= 28)
    {
        // kionが40でも,ここに入るので,||を使うと間違い!
        std::cout << "適温です?" << std::endl;
    }
    return 0;
}

マナブ>kionが40度でも,kionが25度以上という条件式は満たしているので,     「適温です?」と表示されてしまいます。40度は暑すぎます。なので,||を使うのは間違いです!

渚>そうですね!その通りです!

渚>こうやって,条件式をつないでいくことで,複雑な条件でも,1行で書くことができます!

渚>ということで,今回は以上となります!

次回

自販機(簡易版)を作ろう

---フリー素材提供-------------------------------------- [ジュエルセイバーFREE] URL:http://www.jewel-s.jp/

簡単なWebページをつくってみる #5

こんにちは。 夏休みを持て余しています。 soraです。

この度は同人界隈向けに、なんとなくこんな風に作ってるよーというのを発信すべく、定期的にブログで紹介してみようかということになりました。の第9回です。

今日は前回に引き続き、実際にjQueryでコンテンツを操作する話をしようと思います。

関連ブログ

目次

前回の放送&記事では、JavaScriptを書き始めるところまでと、本の簡単な例を紹介しました。今回は、jQueryという有名な JavaScriptのライブラリを使って、Webページ内のコンテンツやページ内での動作をさせる例をいくつか紹介します。
jQueryを使うまでについては前回の記事をご覧ください。とはいっても放送の時と比べると、力尽きて内容は少なくなっていると思いますが…。

ページ内のコンテンツを捕まえる

「このボタンを押した時、文字の色を変更する」のような動作をさせたい場合、まずは「このボタン」がページ内のどのボタンなのか、文字はどこの文字なのかをプログラムで取得する必要があります。jQueryを使ってページ内のコンテンツを取得するには、例えば次のようなHTMLがあったとすると、次のように書きます。

<!DOCTYPE html>
<html>
    <head>...</head>
    <body>
        <h1>見出し</h1>
        <div class="content content-1" id="main-content">
            <h2 class="label label-1"></h2>
            <p class="text text-1">
                テキストテキストテキスト
            </p>
            <button type="button" name="button" id="button">button</button>
        </div>
        <div class="content content-2">
            <h2 class="label label-2"></h2>
            <p class="text text-2">
                テキストテキストテキスト
            </p>
            <button type="button" name="button">button</button>
        </div>
        <div class="content content-3">
            <h2 class="label label-3"></h2>
            <p class="text text-3">
                テキストテキストテキスト
            </p>
            <button type="button" name="button">button</button>
        </div>

        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js" charset="utf-8"></script>
    </body>
</html>
var $button = $("#button");

これで変数 $button に11行目の <button type="button" name="button" id="button">button</button> のオブジェクトが格納されます。簡単ですね!

セレクタ

上の例で使った、 $("#button")#button の部分をセレクタといい、取得したいタグの情報を条件で指定します。この例では、 「button」というid属性を持ったタグを取得する という意味です。他にも例を紹介します。

あるidをもったタグを取得したい

上の例で載せた、id属性によって取得する例です。注意点としては、idはページ内で重複してはいけないというルールから、id属性で取得する場合は、仮にページ内に複数同じidをもつタグがあったとしても、最初に見つかった一つしか取得できません。idはページ内で一意であるべきなので、この場合は重複したidを重複しないように解決してあげましょう。

var $button = $("#button");

あるクラスをもったタグを取得したい

class属性をつかってタグを特定することもできます。idのときは # でしたが、classは . を使って取得します。cssと同じですね!

var $text = (".text-1");

また、classはページ内で重複する場合もあるので、条件にヒットする候補が複数ある場合は、それを配列で取得することができます。

var $texts = $(".text");

もっと複雑な条件で取得したい

他にもname属性やタグの種類でも絞り込みたいことがあるかもしれません。そういったときには、 [] を使って次のように書くことができます。

var $button = $('button[name="button"]');

これは buttonというname属性をもったbuttonタグを取得する という意味です。nameに限らず他の属性値でも扱えるので、複雑な条件が必要になった時は使ってみるといいかもしません。 (条件が複雑になってきたときは、DOMが必要以上に複雑になっていないか少し振り返ってみてください。)

ある要素がクリックされたときの動作を決める

前節で扱ったセレクタを使って要素を取得したあと、その要素がどうなったときに次の動作をしてほしいのか、ということを決める必要があります。ここでは、「ボタンがクリックされたとき」に何か動作させてみます。このようにイベントを取得するには、 $.on メソッドを使用します。

var $button = $("button");

$button.on('click', function() {
    console.log('クリックされた!')
});

このように、イベントの種類 click と、そのときに実行する内容を function で与えることができます。

ページのCSSを変更する

では実際にページ内のレイアウトを変更してみます!ボタンが押されたら、テキストの色を赤にする、ということをやってみます。

var $button = $("#button");
var $text   = $(".text");

$button.on('click', function(){
    $text.css('color', 'red');
});

見慣れない css というメソッドが出てきましたが、これは名前の通り、対象のcssプロパティを変更するメソッドです。ここではm $texttextというclass属性をもつ要素 なので、 「buttonというidをもつボタン」をクリックしたとき、「textというclassをもつ要素」のCSSプロパティ「color」を「red」に変更する という処理になります。

実行して、一番上のボタンをクリックしてみます。
画像のように色が変われば成功です!

f:id:moshisora:20160809121352p:plain

他にも

jQueryにはさまざまなメソッドが用意されています。

  • 要素をアニメーションさせる
  • 特定の位置までスクロールする
  • 表示/非表示を切り替える
  • などなど…

ので、興味のある方は挑戦してみてください!

まとめ

  • jQueryセレクタを使ってページ内の要素を条件で取得できる。
  • 取得した要素のイベントを取得して動作させたり、要素を編集できる。

小学生でも出来る!C++プログラム #04

はおっ(0^∀^)ノ お久しぶりです。渚です。

プログラムしか書けない私たちですが、この度は同人界隈向けに、 なんとなくこんな風に作ってるよーというのを発信すべく、 定期的にブログで紹介してみようかということになりました。 この記事はそんな連載の第8回です。

渚からは「小学生でも出来る!C++プログラム」 を紹介していこうと思います。

関連ブログ

目次

  • 「変数って何?」
    • 色んな形
    • 変数

人物紹介

渚:プログラムを教えてくれる先生

f:id:nagisa39:20160618210950p:plain

ココ:いんたーねっとって聞いたことがあります!

f:id:nagisa39:20160619122427p:plain

マナブ:将来はゲームプログラマーになりたいな!

f:id:nagisa39:20160619122428p:plain

色んな種類(しゅるい)

渚>前回,「"」ダブルクォーテーションで囲ったものは文字列で,囲われていないものは,数字として扱われるというお話をしました。

渚>例えば,"5"は,文字列の5で,5は,数字の5として扱われるということです。

渚>つまり,プログラムの世界では,同じ5でも文字列や数字のように,違う扱われ方をすることがあります。

f:id:nagisa39:20160807015943p:plain

渚>実はこの数字は,2種類に分けることができます。それは,整数と実数です。

ココ>せいすう?じっすう?

マナブ>整数は,5とか6とかの正の数と,-1とか-5とかの負の数と,ゼロのことだよ。

ココ>そ,そのくらい知ってるもん。

マナブ>そっか,ごめんね。じゃぁ,実数は知ってる?

ココ>うっ,わかんない。

マナブ>実数っていうのは,1.5みたいな,整数よりも細かいあたいを扱う数字のことだよ。

ココ>そっかぁ。体重計で見たことあるかも。

マナブ>そうだね,僕は54.5kgで。.5ついているから,これは少数(実数)だね。

f:id:nagisa39:20160807022137p:plain

渚>そうですね!他には,数字の2種類と文字列以外にも,文字やアドレスという扱い方があります。

渚>プログラムの世界では,同じ5でも,色々な種類があります。

f:id:nagisa39:20160807022912p:plain

変数

渚>プログラムでは,よく「変数」というのを使います。なんだかわかりますか?

マナブ>たしか,値を保管できる箱ですよね。

渚>その通りです!この,変数と呼ばれる箱に,さっきのような,文字や整数,文字列や実数などの値を保管し,必要な時に箱の中身を見ると,何を保管したかが分かるようになっています。

ココ>うぅ?えっと,つまり?

渚>例えば,四角い箱に,一回り小さい四角いつみきを入れます。

ココ>うんうん

渚>この,四角い箱には何が入っていますか?

ココ>えっ?四角いつみきじゃないの?

渚>四角いつみきですよ。

ココ>よかった。

渚>では,この四角い箱に,赤色の四角いつみきを入れます。

渚>次に,青色の四角いつみきを入れようとしたのですが,すでに赤色のつみきがあるので,赤色のつみきを取り出して,青色のつみきを入れました。

渚>四角い箱には,何色のつみきがありますか?

ココ>青!

渚>その通りです。そして,変数とは,この四角い箱のことなんです。

ココ>えぇっ?!

渚>では,今の話を,プログラムの話に置き換えましょう(^^♪

渚>例えば,整数が入る箱に,整数の3を入れます。

ココ>うんうん!

渚>この整数が入る箱には,何が入っていますか?

ココ>整数の3!

渚>そうですね。

渚>では,この3が入った箱に,5を入れようと思います。ですが,すでに3が入っているので,3を取り出して,5を入れました。

渚>この整数が入る箱には,何が入っていますか?

ココ>5!

渚>その通りです!この整数が入る箱のことを,変数と呼びます。

ココ>なるほど~,変数って箱なんですね!

変数の種類

渚>箱には,色々な形の箱があります。丸い箱だったり,四角い箱,星形の箱なんてものもあるかもしれません。変数にも同じく,色々な種類があります。

渚>例えば,整数が入る箱だったり,文字列が入る箱だったり,実数が入る箱,文字が入る箱があります。

渚>例えば,下の図のような丸い箱に,四角いつみきは入るでしょうか?

f:id:nagisa39:20160807031715p:plain

ココ>入らなそう

渚>そうですね。

渚>変数も一緒で,整数が入る箱に,文字列は入りませんし,文字が入る箱に,実数を入れることもできません。

渚>ただし,実数が入る箱に,整数を入れることはできます。これは,箱の形が似てるんでしょう。箱の形が似ていると,無理やり入れることが出来てしまいます。

渚>でも,おさまりが悪いので,箱の種類と,入れる値の種類は合わせましょう。

ココ>四角い箱に,丸いボールを無理やり入れたら,箱がぎゅ~って広がっちゃうもんね。形を合わせた方が,箱もボールもうれしいかも。

渚>では最後に,変数の種類と,そのプログラムの書き方を教えますね!

渚>対応表はこれで・・・

f:id:nagisa39:20160807033022p:plain

渚>プログラムではこんな風に書きます。

f:id:nagisa39:20160807033511p:plain

渚># include <string>を忘れずに,書いてね。

渚>int i = 5;について説明しますね。

渚>この,「int」っていうのが,整数の箱ですよ!という意味で,「i」というのが箱の名前になります。「iという名前の整数の箱」に5という整数を入れています。

ココ>できた!やったー!

マナブ>僕もできました!

次回

if文について

---フリー素材提供--------------------------------------
[ジュエルセイバーFREE] URL:http://www.jewel-s.jp/