すずしんろぐ

読者です 読者をやめる 読者になる 読者になる

すずしんろぐ

人生大逆転を目指す、鈴木俊吾の成長日記

Kotlin 整数リストの選択ソートプログラムを作成してみた

f:id:Suzushin:20170429140030j:plain

こんにちは、すずしんです。

今日は、Kotlinの学習をしてみました。
Kotlinのおおまかな仕様を確認した後で、どんなプログラムを書こうかなと考えていたのですが…。
ここはやはり比較的入門しやすいソートのプログラムを書いてみようとなりました。
そこで、今回は整数リスト選択ソートをするプログラムを作成してみました。

選択ソートとは?

選択ソートというのは、配列の最小値(最大値)を持つ要素を探して、それを配列の先頭要素と交換することで整列を行っていくソートアルゴリズムです。
最悪計算量はO(n2)と遅いのですが、実装が単純なためしばしば用いられることがあります。

ここでは、昇順で値を並びかえることを考えます。
選択ソートでは、まずデータ列の中で最も小さい値を探し、1番目の要素と交換します。
続いて2番目以降のデータ列から最も小さい値を探し、2番目の要素と交換します。
このような手順を、データ列の最後(の1回前)まで繰り返すとソートが完了します。

数字を使った選択ソートの例は以下のような感じです。
各回で最も小さい値を探して、値を入れ替えるという手順を踏みます。

5 9 1 4 7 (初期状態)
1 9 5 4 7 (1回目)
1 4 5 9 7 (2回目)
1 4 5 9 7 (3回目)
1 4 5 7 9 (4回目)
1 4 5 7 9 (終了)

Kotlinでの選択ソート

今回私が作成した、Kotlin版選択ソートのソースコードは以下のような感じです。

main関数では、まずScannerを用意して標準入力を受け付ける準備をします。
そして、整数のリストとなる文字列を入力してもらい、それを整数のMutableListに変換します。
そのリストの内容を表示して初期状態を確認してから、ソートを行い、再びリストの内容を表示しています。
sort関数では、forループでインデックスを更新しながら、各回の最小値を探して交換する作業を繰り返しています。

import java.util.*

fun main(args: Array<String>) {
    val scanner = Scanner(System.`in`)
    val n: MutableList<Int> = scanner.nextLine().split(",").map({ it.toInt() }).toMutableList()
    scanner.close()

    println(n)
    sort(n)
    println(n)
}

fun sort(n: MutableList<Int>) {
    var tmp: Int
    var minIndex: Int
    for(i in n.indices.filter({ it < n.size - 1 })) {
        minIndex = i
        n.indices.filter({ it >= i + 1 }).forEach({ j -> if(n[j] < n[minIndex]) minIndex = j })
        if(minIndex != i) {
            tmp = n[i]
            n[i] = n[minIndex]
            n[minIndex] = tmp
        }
    }
}

今回のプログラムを作成するにあたって困ったのが、forループの回数指定です。
forループ中に使うためのインデックス(i, j)の範囲を指定する方法が最初分からず悩みましたが…。
filter()を使えば上手くいくかもと思って、試しにやってみたところ良い感じになりました。

私はJavaでも選択ソートのプログラムを書いたことがありますが…。
Javaとは若干プログラムの雰囲気が違います。
Kotlinに慣れてしまうと、こちらの方が書きやすくなるのでしょうかね?

実行結果

上記のプログラムを実行してみた結果の例は以下のような感じです。
整数のリストの入力は「,」で区切って入力します。
実行結果を見てみると、確かに昇順に並び替えられているのが分かりますね。

5,1,8,4,9,2,3,7,6
[5, 1, 8, 4, 9, 2, 3, 7, 6]
[1, 2, 3, 4, 5, 6, 7, 8, 9]

ひとこと

今回はKotlinで選択ソートをするプログラムを作成してみましたが…。
アルゴリズムの基本的な考え方は他の言語とも同じですね。
後はどうやって実装するかの話になってきます。

私はまだまだですが…。
map()やfilter()などをうまく使いこなせるようになれば、もっと簡潔にプログラムを書けそうな感じがしますね。
スムーズにプログラムを作成できるようにもっと勉強しなければっ!

やはり、Hello Worldのプログラムと比べれば…。
だいぶプログラムを作成したという達成感がありますね。
今後はさらに高度な事ができるように、Kotlinの学習を続けていきたいと思います。

関連商品

amzn.to

Kotlin入門 IntelliJ IDEAで開発環境の構築とHello World

こんにちは、すずしんです。

GoogleがAndroid開発言語としてKotlinを採用するというニュースがありました。
これは大きな出来事でしたね。

www.suzushin7.jp

これを受けまして…。
今後、Androidアプリの開発の際にはKotlinを使ってみたいと思いまして…。
私はこの機会にKotlinの学習をしてみることにしました。

今日は、Kotlinのプログラミングができる開発環境構築してみました。
そして、Hello Worldのプログラムを作成して動作を確認するところまでやってみました。
実際試してみると結構面白いですね。

そこで、今回の記事では…。
InttelliJ IDEAを使ったKotlinの開発環境の構築および最初のプログラムを作成するところまでを解説してみます。
あなたもぜひこの機会にKotlinに触れてみてはいかがでしょうか?

Kotlinとは?

Kotlinというのは、JetBrains社のアンドリー・ブレスラフとドミトリー・ジェメロフが開発した、静的型付けのオブジェクト指向プログラミング言語です。
オペーレーティング・システムに関係なく、Java仮想マシン上で動作させることが可能なJVM言語の1つです。
Java言語で書かれたプログラムとほぼ同じくらいの速度でコンパイルされ、同じくらいの速度で動作するとされています。
Kotlinで書かれたプログラム(.kt)は、コンパイルされるとクラスファイル(.class)になります。

IntelliJ IDEAとは?

IntelliJ IDEAというのは、Kotlinを開発したJetBrains社が提供しているIDE(統合開発環境)です。
Javaの統合開発環境としては、Eclipseに次いでIntelliJ IDEAが2番目の人気になっているようです。
無料のCommunity Editionと有料のUltimate Editionの2つがあります。

今回使用するのは、IntelliJ IDEAのCommunity Editionです。
こちらでは、Java・Scala・Groovy・Clojure・KotlinといったJavaプラットフォーム上で動作する言語のみの対応となっています。
Kotlinの学習用途で利用するので問題ないですね。

IntelliJ IDEAのダウンロードとインストール

まずは、何はともあれIntelliJ IDEAをダウンロードしましょう。
以下のリンク先に移動します。
そして、ページの右上にあるDownloadをクリックします。

www.jetbrains.com

以下のようなページになりますので…。
あなたがお使いのパソコンのOSが選択されているかどうかを確認してから、Community Editionの方のDownloadをクリックします。
すると、IntelliJ IDEAのダウンロードが始まります。

f:id:Suzushin:20170522112042j:plain

ダウンロード完了後は、ダウンロードしたファイルをクリックしてインストールをします。
基本的には、指示に従っていくだけなので簡単ですね。
インストールには少々時間がかかりますので、コーヒーでも飲みながらまったり待ちましょう。

Kotlinプラグインのインストール

IntelliJ IDEAのインストールが完了したら、続いてIntelliJ IDEAにKotlinプラグインをインストールします。

IntelliJ IDEAを最初に起動すると、Set UI Theme画面がまず表示されます。
IntelliJとDarculaの2つからお好きな方を選択してください。
私は何となくDarculaを選択してみました。

f:id:Suzushin:20170522113331j:plain

続いて、TUNE IDEA to your tasks画面が表示されます。
ここではそのままにしておいて、「Next: Featured plugin」をクリックします。

f:id:Suzushin:20170522113536j:plain

Download featured plugins画面が表示されます。
ここもそのままにしておいて、「Start using IntelliJ IDEA」をクリックします。

f:id:Suzushin:20170522113758j:plain

Welcome to IntelliJ IDEAという画面になると思います。
ここで、右下にある「Configure」をクリックして、表示される項目の中から「Plugins」を選択します。

f:id:Suzushin:20170522114123j:plain

Plugins画面になります。
画面左下にある「Install JetBrains plugin...」をクリックします。

f:id:Suzushin:20170522114410j:plain

Browse JetBrains Plugins画面になります。
検索ボックスに「Kotlin」と入力すると、Kotlinのプラグインが表示されると思います。
そのKotlinプラグインを選択して、右側の画面に表示される「Update」をクリックしてください。
更新が終わったら、「Restart IntelliJ IDEA」をクリックして再起動してください。

f:id:Suzushin:20170522114748j:plain

新規プロジェクトの作成

IntelliJ IDEAを再起動すると、Welcome画面になります。
ここで、「Create New Project」を選択します。

f:id:Suzushin:20170522115248j:plain

プログラム言語の選択になります。
左側の画面から「Kotlin」をクリックして、右側の画面から「Kotlin(JVM)」を選択して「Next」をクリックします。

f:id:Suzushin:20170522120252j:plain

プロジェクト名とSDKの設定を行います。
Project nameには「HelloKotlin」、Project SDKにはインストールしているJDKを選択します。
もしJDKをまだインストールしていない場合には、その下にある「Download JDK」からJDKをダウンロード・インストールしてから改めて作業を行ってください。
設定が終わったら「Finish」ボタンを押します。
しばらく待つと「HelloKotlin」プロジェクトが作成されます。

f:id:Suzushin:20170522120326j:plain

Hello.ktの作成と実行

それでは、いよいよKotlinでのプログラミングを始めます。

まずは「Hello.kt」を作成します。
プロジェクトの「HelloKotlin」→「src」を選択してある状態にします。
そして、右クリック→「New」→「Kotlin File/Class」を選択します。

f:id:Suzushin:20170522121044j:plain

「New Kotlin File/Class」画面になります。
Nameに「Hello」と入力して「OK」ボタンを押します。
これで、Hello.ktが作成されます。

f:id:Suzushin:20170522124602j:plain

右側にある編集画面で、以下のようにソースコードを編集します。
コピペではなく、自分の手で入力してくださいね。
そうしないと、プログラミングの練習にはなりませんので…。

fun main(args: Array<String>) {
    println("Hello, world!")
}

入力が終わったら、メニューの「Run」→「Run」を選択します。
実行するファイルを訊かれますので「HelloKt」をクリックします。
すると、コンパイルされた後、プログラムが実行されます。
画面下に表示されるコンソールに「Hello, world!」と表示されましたね。

f:id:Suzushin:20170522125725j:plain

f:id:Suzushin:20170522125849j:plain

次回以降、Hello.ktを実行する際には…。
画面右上にある再生ボタン(▶)を押せば実行できますよ。

以上で、Hello.ktの作成と実行方法についての説明を終わります。
お疲れ様でした。

ひとこと

今回の記事では、IntelliJ IDEAを使ってKotlinのプログラムを作成するところまでの解説を行いました。
いかがでしたでしょうか?
うまくできましたか?

やはり、プログラムが正しく実行するところを見ると…。
「おぉ、ちゃんと動いた!」と嬉しくなってきますよね。
もし同じようにちょっと感動したような人は、きっとプログラミングを楽しめるようになると思いますよ。

これで、Kotlinの学習環境が揃いました。
これから私はKotlinの勉強を本格的に始めてみたいと思います。
いずれは、Androidアプリの開発にもKotlinを使えるようにするつもりです。
今後が非常に楽しみですね!

この記事を読んでいるあなたは、プログラミングに興味があるということなのでしょうかね?
もしくは何となく読んでいるだけなのかもしれませんが…。
それでもここまで読んでいただけてありがたいですね。

プログラミングに興味がある方はもちろんなのですが…。
今までプログラミングに関心が無かったという方も、ぜひ一度はプログラミングを実際に体験してみてください。
もしかしたら、プログラミングの楽しさにハマるかもしれませんよっ!?

関連商品

amzn.to

Android StudioにKotlinの開発環境を導入する方法

おはようございます、すずしんです。

前回の記事で、GoogleがKotlinAndroid開発言語として正式サポートすると発表したことについて書きました。
これは非常に大きなニュースですね!

www.suzushin7.jp

そんなわけで、私もAndroid開発にKotlinを使ってみたいと思うようになりまして…。
手持ちのAndroid StudioにKotlinの開発環境を導入してみることにしました。
実際にやってみると、意外と簡単に導入することができましたね。

そこで、今回の記事ではAndroid StudioにKotlinの開発環境を導入する方法について書いてみます。
もしあなたがAndroid開発をしているのなら、この機会にKotlinを導入してみる価値はあると思いますよ。

Kotlinとは?

Kotlinというのは、JetBrains社のアンドリー・ブレスラフとドミトリー・ジェメロフが開発した、静的型付けのオブジェクト指向プログラミング言語です。
100%Javaと互換性があり、OSに関わらずJava仮想マシン上で動作します。
Javaで書かれたプログラムと同等くらいの速度で動作します。
Kotlinで作成したファイル(.kt)は、コンパイルするとクラスファイル(.class)になります。

Android StudioにKotlinの開発環境を導入する方法

それでは、以下からAndroid StudioにKotlinの開発環境(プラグイン)を導入する方法、およびKotlinを使ったAndroidアプリの作成方法について書いていきます。
手順に沿ってやっていけば、誰でも導入ができると思います。

Kotlinプラグインの導入

まずは、Android Studioを起動します。
メニューの「File」→「Settings」を選択して、Setting画面を表示させます。

f:id:Suzushin:20170519120827j:plain

画面の左側にある項目の中から「Plugins」を選択します。
そして、右側に表示される画面の下にある「Install JetBrains plugin...」をクリックします。

f:id:Suzushin:20170519121147j:plain

Brouse JetBrains Plugins画面になります。
検索ボックスの中に「Kotlin」と入力してKotlinのプラグインを検索します。
Kotlinプラグインが見つかると思いますのでそれをクリックします。
その後、右側にある「Install」をクリックしてください。

すると、Kotlinプラグインのインストールが始まります。
インストール後、Android Studioを再起動してください。

f:id:Suzushin:20170519121639j:plain

Kotlinを使ったAndroidアプリの作成方法

それでは、試しに簡単なAndroidアプリのサンプルを作成してみます。
メニューの「File」→「New」→「New Project」を選択します。

f:id:Suzushin:20170519123942j:plain

Create New Project画面になります。
ここでは、Application nameを「HelloKotlin」、Company domainを「suzushin7.jp」とします。
そして、画面右下にある「Next」ボタンをクリックしてください。

f:id:Suzushin:20170519124359j:plain

Target Android Devicesを選択する画面になります。
「Phone and Tablet」にチェックを入れて、Minimum SDKをここでは「API 14: Android 4.0」にしてください。
設定が終わったら、「Next」ボタンをクリックします。

f:id:Suzushin:20170519124844j:plain

Add an Activity to Mobileを選択する画面になります。
ここでは「Empty Activity」をクリックして選択してください。
その後、「Next」ボタンをクリックします。

f:id:Suzushin:20170519125156j:plain

Customize the Activityの設定画面になります。
これはそのままで大丈夫ですので、「Finish」ボタンをクリックしてください。
以上で、JavaでのAndroidアプリのひな型が作成されます。

f:id:Suzushin:20170519125447j:plain

ここから、Kotlinで開発できるように設定していきます。

Javaで書かれているファイルをKotlinファイルに変換します。
メニューの「Code」→「Convert Java File to Kotlin File」を選択します。
しばらくすると、JavaファイルがKotlinファイルに変換されます。

f:id:Suzushin:20170519130337j:plain

変換が終わると、以下のようになりますね。

package jp.suzushin7.hellokotlin

import android.support.v7.app.AppCompatActivity
import android.os.Bundle

class MainActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
    }
}

メニューの「Tools」→「Kotlin」→「Configure Kotlin in Project」をクリックします。
すると、build.gradle(app)ファイルにKotlin用の記述が自動で追加されますので同期します。

以上で、Kotlinで書かれたプログラムを実行することができるようになりました。
Android Studioの再生ボタンを押して、エミュレーターや実機で実行させてみましょう。

ひとこと

今回の記事では、Android StudioにKotlinの開発環境(プラグイン)を導入する方法について書いてみました。
一見手順が多そうに見えますが、実際にやってみるとそう多くはありません。
所要時間としてはおそらく10分もあればできると思います。

Androidアプリの開発は、今後Kotlinでの開発が増えてくるのではないかと思います。
その際にすぐに対応できるように、今の内からKotlinに慣れておくと良いかもしれませんよ。

関連商品

Androidの開発言語にKotlinを正式採用!Kotlinとはどんな言語?

f:id:Suzushin:20170429140030j:plain

こんにちは、すずしんです。

私はニュースを何気なくチェックしていたのですが…。
その際に、Android開発に関する話題で気になるものがありました。
それは「Kotlin」をAndroidの正式な開発言語に選定するというものでした。

Kotlinについては、名前だけは聞いたことがあるものの…。
具体的にはどんなプログラミング言語なのかまでは知りませんでした。
そこで、今後の事も踏まえてKotlinについてちょっと調べてみることにしました。

Kotlin選定のニュース

Googleは、Android開発の第一級言語に「Kotlin」を選択することにしたようです。
そのニュースがこちら。

jp.techcrunch.com

この記事にも書いてありますが、Kotlinは100%Java互換らしいですね。
しかも、GoogleがAndroidアプリを開発するときに使っている言語とのこと。
既にもうKotlinが開発に使えるという事なのですね!

私はJavaが好きなので、今まではJava一筋でAndroid開発をしてきました。
ただ、Kotlinが正式採用されたとのことで、今後はKotlinに移行していく必要がありますね。
私も次回から作成するAndroidアプリからはKotlinを使ってみようと思います。

Kotlinとは?

Kotlinというのは、JetBrains社のアンドリー・ブレスラフとドミトリー・ジェメロフが開発した、静的型付けのオブジェクト指向プログラミング言語です。
オペレーティング・システムに関わらずJava仮想マシン上で動作します。
その動作速度は、Javaで書かれたプログラムと同等くらいらしいです。
Kotlinで作成したファイル(.kt)は、コンパイルするとクラスファイル(.class)になります。

Hello World

プログラミング言語の入門をする時に、まず最初に作成するプログラムがHello Worldですね。
これは、コンソールに「Hello, World!」という文字を出力するものです。

Javaでは例えば以下のように書きます。

public class Hello {
    public static void main(String[] args) {
        System.out.println("Hello, World!");
    }
}

同じようにKotlinでHello Worldを書くと以下のようになります。
うん、意外とシンプルになりましたかね。

fun main(args: Array<String>) {
    println("Hello, World!")
}

Kotlin公式のページに行くと、Kotlinで書かれたプログラムのデモがあります。
こちらで、Kotlinではどのようにプログラムを書くのかというのを確認してみると良いかもしれませんね。

try.kotlinlang.org

Kotlinの入門書

Kotlinの勉強をするにあたっては、やはり何か入門書があった方が良いですよね。
そこでAmazonで良さそうなものは無いかと探してみたところ、「Kotlinスタートブック -新しいAndroidプログラミング」という本が見つかりました。
早速、私も購入することにしましたよ!

ひとこと

Googleが正式にKotlinをAndroid開発の第一級言語に採用したというのは大きなニュースですね。
これで、今後のAndroid開発の環境もだいぶ変わってくるのではないでしょうか。

私は現状Kotlinでの開発経験がありませんので…。
Kotlinの入門書を読みながら学習を進めていきたいと思います。
今後、KotlinでAndroid開発をするのが楽しみですね!

関連記事

www.suzushin7.jp

ページリンク作成ブックマークレットPageLinkを作成してみた!

f:id:Suzushin:20170429140030j:plain

こんにちは、すずしんです。

私が過去に作成したブックマークレットで、地味に便利だと思うものを紹介するこのコーナー(?)。
今回は「PageLink」というブックマークレットについて紹介したいと思います。
便利だなと思ってもらえたら嬉しいですね。

PageLinkとは?

「PageLink」というのは、私が過去に作成したブックマークレットです。
このブックマークレットを使うと、今見ているページリンクをあっという間に作成してくれます。

通常、リングタグを作成するには…。
まず、URLをコピーしてaタグのhref属性に貼り付けます。
そして、記事のタイトルをコピーしてtitle属性とリンクテキストに貼り付ける、といった手順を取ります。

慣れてくると作業スピードは上がるかもしれませんが…。
それでも若干手間がかかりますよね。
コピーして貼り付けるという作業を繰り返す必要もありますし。
どうせならもっと楽にやりたいですよね?

そこで、PageLinkの出番です。
このPageLinkなら、なんとワンクリックのみでリンクタグを作成してくれます。
その後は、リンクタグを記事に貼り付けるだけとなりますので非常に簡単ですよ。
今まで手作業でやっていた場合には、そのあまりのお手軽さにびっくりするかもしれませんね。

PageLinkの登録方法

PageLinkの登録方法は簡単です。
お使いのウェブブラウザのブックマークバー上に、以下のリンクをドラッグアンドドロップしてください。
おすすめとしては「ブックマークレット」フォルダをブックマークバー上に作っておいて、そこに登録すると分かりやすいと思います。

PageLink

PageLinkの使い方

PageLinkの使い方も実に簡単です。

まず、リンクを作成したいページを開いておきます。
そして、さきほど登録したPageLinkをクリックします。
するとプロンプトが表示されます。

f:id:Suzushin:20170515140621j:plain

リンクタグが自動生成されていますのでそれをコピーします。

<a href="http://www.suzushin7.jp/entry/2017/05/15/m-gram" title="最近話題の性格診断エムグラム(m-gram)を試してみた! - すずしんろぐ" target="_blank">最近話題の性格診断エムグラム(m-gram)を試してみた! - すずしんろぐ</a>

後は、そのリンクタグを記事に貼り付けるだけです。
ねっ?簡単でしょ?

最近話題の性格診断エムグラム(m-gram)を試してみた! - すずしんろぐ

PageLinkのソースコード

PageLinkのソースコードは以下のようになっています。
非常に単純な仕組みになっているというのが分かりますね。
URLとタイトルを取得してaタグを作成し、プロンプトに表示させているだけです。

javascript:(function(){
var url = location.href;
var title = document.title;
var a = '<a href="'+url+'" title="'+title+'" target="_blank">'+title+'</a>';
prompt('PageLink', a);
})();

ひとこと

今回の記事では、今見ているページのリンクを作成するブックマークレット「PageLink」を紹介しました。
ページのリンクを作成して、記事に貼りつけたいという場面は結構あると思います。
そんな時はぜひこのPageLinkをお試しください。
サクッと簡単にリンクが貼れるようになりますよ。

脳トレにも最適!プログラミング入門ゲームLightbotが面白い!

おはようございます、すずしんです。

私はプログラミングが好きです。
現在は、趣味でAndroidアプリを作ったりもしていますね。
プログラミングは分かってくるとなかなか面白いのですよ。

また、私は同時にゲームも好きなので…。
プログラミングをしながら楽しめるゲームは無いのかなとふと思いました。

そこで、インターネットで検索してみると「Lightbot」というゲームを発見しました。
試しにプレイしてみたところ、これはなかなか面白いなと思いました。
ちょっとした脳トレにもなりそうです。

これはぜひあなたにもプレイしてもらいたいと思いましたので…。
今回の記事では、Lightbotについて簡単に紹介したいと思います。

Lightbotとは?

Lightbotというのは、プログラミングの学習用に開発されたサイトになります。

ゲーム内容としては、ロボットを操作して全ての青いタイルを点灯させるパズルゲームです。
あなたは、特定のブロックを並べて動作を定義します。
ロボットはその定義に従って行動を起こします。
なので、うまくロボットを誘導して与えられた問題をクリアしてください。
Lightbotは小学生から利用できるほどの内容と難易度で、全問クリアすると証明書が発行できます。

LightbotはFlashで作成されていて、ウェブブラウザからゲームをプレイすることができます。
ウェブブラウザ版の問題数は全20問で、「Basic」「Procedures」「Loops」の3つのテーマがあります。

Lightbotでは、各問題ごとに丁寧な解説とヒントが表示されます(英語)。
この英語に関しては、特に難しい単語は出てきません。
中学英語程度の理解力があれば問題無く分かると思います。

操作方法は簡単で、マウスを使って行動ブロックを並べていくだけです。
難易度的にはそれほど高くありませんので…。
ちょっとしたスキマ時間にサクッとプレイできますよ。

Lightbotのプレイ方法

まずは、Lightbotのページに移動しましょう。
Flashを有効化して、画面中央のプレイボタンを押すとゲームが始まります。

Lightbot

f:id:Suzushin:20170516174209j:plain

問題中に現れる解説の例です。
簡単な英語なので、すぐに理解できますよね。

f:id:Suzushin:20170516174524j:plain

行動ブロックをクリックして動作を定義していきます。
最初の内はサクッと解けると思います。

f:id:Suzushin:20170516174753j:plain

解いた問題はセーブされます。
ですので、後でまたプレイするという事もできますね。

f:id:Suzushin:20170516175240j:plain

先に進むにつれて難易度が上がっていきますが…。
解説やヒントを参考にしながら、冷静に動作を組んでいけば大丈夫です。

f:id:Suzushin:20170516175718j:plain

ひとこと

今回の記事では、プログラミング学習ゲームである「Lightbot」について紹介してみました。
シンプルなルールのゲームですので…。
誰でも簡単にプレイすることができると思います。

Lightbotでは、実用的なプログラミングスキルはあまり身に付かないと思いますが…。
プログラミングに興味を持つきっかけにはなるかもしれません。

個人的には面白いゲームだと思いますので…。
ぜひあなたも良かったらLightbotをプレイしてみてくださいね。

参考

Lightbot

超簡単!jQueryでアニメーション付き開閉式ボックスを作成してみた

f:id:Suzushin:20170429140030j:plain

こんばんは、すずしんです。

前回の記事で、jQueryの簡単な読み込み方について書きましたので…。
何だかjQueryのプログラムを書いてみたい気分になりました。

そこで、私はちょっとしたjQueryのサンプルプログラムを作成してみました。
そのサンプルプログラムでは「アニメーション付き開閉式ボックス」を実装してみました。
さすがjQueryで、パパッと簡単に作ることができましたよ!

せっかくなので、今回作成したサンプルプログラムを記事に載せておこうと思います。
需要があるかどうかは分かりませんが…。
誰かの役に立てれば光栄です。

開閉式ボックスとは?

ここでいう所の開閉式ボックスというのは…。
展開用のリンクをクリックすると、スライドしながら現れるdiv要素の事を言います。

最初、div要素は非表示になっていますが…。
リンクをクリックすると、スライドしながらdiv要素が表示されます。
そして、もう一度リンクをクリックすると、今度はスライドしながら非表示になります。
要するに、アニメーション付きでトグルするdiv要素です。

最初は非表示にしておいて、リンクをクリックしたら表示されるような仕組みを実装したいなら…。
今回の方法は有効ですよ。

アニメーション付き開閉式ボックスのサンプルプログラム

早速、アニメーション付きで開閉するボックスを作成していきます。

まずは、実装に必要なものをまとめてみます。

  • 開閉式アニメーションをさせるためのリンク(*1)
  • 表示されるdiv要素(*2)

このリンク(*1)がクリックされると、div要素(*2)が開閉されれば良いのですね。
ここでは、このリンク(*1)のclass属性にtoggle-linkを、div要素(*2)のclass属性にはtoggle-boxを付加します。
そして、リンク(*1)がクリックされたときに実行されるJavaScriptの関数をtoggle()としています。
サンプルプログラムとしては、以下のようにしてみました。

<a class="toggle-link" href="javascript:toggle();">開閉</a>
<div class="toggle-box">
<p>ここにコンテンツが入ります。</p>
</div>

CSSについては、とりあえず簡単に以下のようにしてみました。
ポイントとしては、toggle-boxのdisplayをnoneに設定することくらいでしょうか。

<style type="text/css">
.toggle-box {
  border: 1px solid #aaaaaa;
  margin: 10px;
  padding: 10px;
  display: none;
}
</style>

そして、JavaScriptのコードですが…。
まずjQueryを読み込んで、toggle関数の定義をします。
toggle関数では、toggle-boxが付加されている要素(*2)に対して、slideToggle()を実行するだけです。
jQueryを使うと、たったこれだけのコードで良いというのがすごいですよね~。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
function toggle() {
  $('.toggle-box').slideToggle('slow');
}
</script>

サンプルプログラムの実行例

上記で作成したサンプルプログラムをこの記事にも貼り付けてみました。
実際にちゃんと動作するかどうか確認してみてください。

「開閉」のリンクをクリックすると…。
ボーダーが付いていて、「ここにコンテンツが入ります。」という文字が書かれている要素が表示されると思います。
もう一度クリックすると、今度は非表示になります。
アニメーションもきちんと付いていますよね?

開閉

ここにコンテンツが入ります。



ひとこと

今回の記事では、jQueryの練習としてアニメーション付き開閉式ボックスを作成してみました。
ソースコードを見てみると、別に大した事はしていないというのが分かると思います。
ただ単純にslideToggle()を呼び出しているだけですからね。
jQueryがいかに強力なライブラリなのかという事が分かるのではないでしょうか。

jQueryを上手く使いこなせれば、Webページの作成もきっと捗るでしょうね。
私ももっと高度な事ができるように、jQueryの勉強をしていきたいと思います。