5秒のGIFアニメでウェブデザインやプログラミングが学習できる「Madrassa」

テクノロジーの発展につれて、HTML・CSS・JavaScriptの書き方やスマートフォンアプリの作り方に精通した人材は、テクノロジー業界において引く手あまたです。ウェブデザインやプログラミングを習得できるオンライン学習講座が増えてきていますが、古典的な授業内容がメインで分かりづらいものが多いのが実情。そんな中、知識がなくてもわずか5秒のアニメーションGIFでプログラミング技術が分かりやすく学習できるオンラインスクール「Madrassa」がスタートしています。

Madrassa
http://www.madrassa.co/

「Madrassa」はウェブデザインやウェブサイトなどの作り方を、「コード知識がなくても学ぶことができる」というコンセプトで始まった実験的なオンラインスクール。5秒のGIFアニメを使ったデモによる授業スタイルとなっており、今後成長していくと見られるeラーニングの新しい形態を目指しています。

古典的な授業形態を一切取り払って、視覚的に短時間でコーディング学習ができるようになっており、新人のiOS 8開発者向けにアプリの作り方などが学習できるコンテンツなどを考えているようです。

Madrassaのベータ版で公開されているコースは、今のところアプリのプロトタイピングが可能なアプリ「POP」を使ったデモのみ。このコースは全部で20ステップ、1分30秒のGIFアニメで構成されており、受講にあたって費用は無料です。受講するには「Start Course」をクリックします。

アプリの作り方が学習できるデモになっており、学習に必要なのは、紙・ペン・POPのAndroidアプリ、またはiOSアプリです。デモを始めるには右下の矢印をクリック。

ページの真ん中に5秒ごとに繰り返されるGIFアニメが表示されており、その下に説明が書いてあるので「実際に何をするのか」がよくわかるようになっています。まずは紙にスマートフォンのスクリーンとして長方形を描きます。

さらに2つのスクリーンも追加。

左端のスクリーンを「ホームスクリーン」として、「H...LLO」と書きます。

その下に小さな長方形の枠を2つ描き、中に「Y」「E」と書き込みます。

真ん中のスクリーンには不正解を表す「×」のアイコンを描いて……

左側のスクリーンに正解を表す「☆」のアイコンと「HELLO！」と正解ワードを書き書き。

続いて好きなように色を塗ります。

ここでプロトタイピングアプリの「POP」を起動。

新しいプロジェクトを作成してプロジェクト名に「Hello」と入力。

すると表示されるカメラボタンをタップします。

カメラが起動したら、先ほど紙に描いた3枚のスクリーンをパシャリ。

さらにスクリーンを個別にパシャパシャ。

3枚とも撮り終えたら「Next」をタップして「Done」をタップ。

するとアプリに描いたスクリーンが保存されるので、ホームスクリーン上の「Y」を描いたマスをタップして範囲指定できたら、「Link to」をタップ。

「H..LLO」の文字は虫食いクイズになっており、「Y」だと間違った選択肢なので不正解を表す「×」のスクリーンにリンクさせます。

同じように「E」のマスにもリンク付け。

さらにタップ後のスクリーンからホームスクリーンに戻れるようにするため、矢印のアイコンを範囲指定してホームスクリーンへリンクを付けます。

これで作業は完了。再生ボタンをクリックすると、手描きのクイズアプリが完成しています。

例えば「H..LLO」と表示されているホームスクリーンで、「Y」をタップすると……

ちゃんと不正解のスクリーンが表示されました。

「E」をタップすると……

正解のスクリーンにつながっています。

このように、HTML・CSS・JavaScriptなどに詳しくなくても、アプリが動く仕組みが学習できたというわけです。

なお、Madrassaのベータ版で今後コンテンツが追加されていく予定なので、新しいコースをいち早く受講したい場合はメールアドレスを登録しておけばOKです。