どうも、まさとらん（@0310lan）です！
今回は、ブラウザ上でマイクロラーニングにも最適な学習教材を作成＆公開し、誰でもスマホから体験してもらうことが可能なWebサービスをご紹介します！
スマホのタッチ操作で学習ができるようにデザインされており、画像・動画・音声などのマルチメディアも活用することでインタラクティブな要素を盛り込めるのが特徴です。
誰でも無料で製作できるので、ぜひみなさんもオリジナルの教材を作ってみてください！
【 TalentCards 】
■「TalentCards」の使い方！
まず最初に、今回ご紹介する「TalentCards」を使ってどのような教材が作れるのかを見てみましょう！
サンプル例として、以下の動画を見てください。
このように、スマホのタッチ操作だけでカードをめくりながら自分のペースで少しずつ学習を進めていくことができるようになっています。
理解度を確かめるための「ミニテスト」も製作することが可能で、最終的なスコアも保存されるようになっていて便利です。
それでは、実際にオリジナル教材の製作を始めていきましょう！
まずは、サイトのトップ画面からユーザー登録をするためのボタンをクリックしましょう。
名前やメルアド・パスワードなどを入力します。
すると、自分専用の「ダッシュボード」が表示されます！
この画面から、教材を製作したり学習中のユーザー管理やアナリティクスの確認などができるようになります。
■「オリジナル教材」の作り方
ここからは、実際にオリジナルの教材を作っていきます！
サンプル例として、今回は「JavaScript」を学習できる簡単な教材を作ってみたいと思います。
まずは、画面右上にある「CREATE SET」ボタンをクリックします。
これから作る教材の「(1)タイトル」「(2)簡単な紹介」「(3)画像」を設定しましょう！
すると、教材を製作するための専用エディタが表示されます。
この画面上で、さまざまなカード形式の教材を作っていくわけです。
早速、1枚のカード教材を作ってみましょう！
まずはカードの背景を設定したいので、メニューから「BACKGROUND」を選択します。
いくつかのテンプレートが用意されているので、好きなものを選択しましょう。
これで背景が設定されました。
次に、文字を入力したいので同じようにメニューから「TEXT」を選択します。
カードの「上・中・下」のいずれかに文字を設定できるので、好きな箇所へ入力します。
これでカードの表面ができました！
今回は「変数とは？」というカードにして、裏面にその解説を作ってみましょう。
そこで、次はカードの裏面を選択しましょう！
今度は、背景を「WEB SEARCH」からキーワード検索して画像を設定してみます。
画像はそのままトリミングをすることも可能です！
背景を設定したら、先ほどと同じように文字を入力して解説文を作ります。
これで裏面が完成です！
このような流れで、画面下にある「ADD CARD」をクリックしながらどんどんカードを作っていきましょう！
■便利な機能を使ってみよう！
カードを作る際に便利な機能がいくつか用意されているので、ピックアップしてご紹介しておきます！
例えば、メニューから「VIDEO」をクリックします。
キーワードを入力するとYouTubeから関連動画を検索することができます。
好きな動画を選択してみましょう！
すると、カードに「動画アイコン」が表示されます。
これをクリックすることで、先ほど選択した動画が再生されるようになるわけです。
もちろん、スマホの画面に最適化されて表示されるようになっています。
カードだけでは解説が難しい場合に、動画と組み合わせることでより学習しやすい環境を作ることができるわけです。
同じ要領で、「音声」や「リンク」も添付することが可能です！
自分の声を録音したファイルを貼り付けたり、自分のサイトへリンクを張ったりなども簡単にできます。
また、理解度チェックのために「ミニテスト」を作ることも可能です！
作り方は簡単で「問題」と「解答」を入力するだけでOKです！
スマホからテストを受講しやすいデザインへ自動的に変換されるので、問題作りに集中できるのは大変便利ですね。
■スマホへ配信してみよう！
「TalentCards」は、専用のアプリがiOS / Android向けに提供されており、そのアプリを使うことで自分が製作した教材を配信することが可能なのでご紹介しておきます。
まず最初に、教材がある程度できたら画面上部のメニューから「Card Sets」タブをクリックして「公開」状態になっているかを確認しておきましょう！
「非公開」になっていると配信できないので要注意！
次に、「App Control」タブをクリックします。
ここで教材の各種設定やデザインの変更などができるのですが、今回はデフォルトのままにしておきます。
そして、上部の青いボタンをクリック！
「TalentCards」アプリへのリンクが表示されます。
まだアプリをダウンロードしていない方は、ここでスマホにインストールしておきましょう。
また、画面下に「専用コード」が表示されているのでメモをしておきましょう！
今度は、スマホから専用アプリを起動して、先ほどメモしておいたコードを入力します。
すると、自分が作成した教材が表示されます。
すべてスマホ向けにデザインが最適化されていることが分かりますね！
あとは、タップしながらカードに書かれていることを閲覧していきます。
また、フリック操作で次々とカードをめくって学習できたり、ミニテストもタップしていくだけで進めていくことができます。
このように「専用コード」を友人・知人などにシェアするだけで、自分が作成した教材を誰にでも配信できるのはとても便利ですね。
ちなみに、コードは複数登録できるのでアプリの中にいくつかの教材をまとめることも可能です。
■ブラウザさえあれば使える！クラウド開発環境PaizaCloud
プログラミング教育や学習を始めようと思うと、大変なのが言語の実行環境やデータベースの構築、サーバーの準備などの環境設定です。
PaizaCloudは、paizaが提供しているクラウド型開発環境サービスです。ブラウザを開くだけでエディタ、Webサーバ、DB等の開発環境が完了、OSの種類やバージョンなどに関係なくすぐに開発を進めることができるため、商用利用から初心者の学習・研修などにもおすすめです。
LAMP、Ruby on Rails、JSP、Djangoなどベーシックな環境が設定済みですが、それ以外のツールも追加インストールが可能です。またクラウド型開発環境サービスとしては珍しく、UIはもちろんエディタやターミナルなども完全日本語対応しています。
PaizaCloudについて詳しくはこちら
■まとめ
今回は、「TalentCards」の基本的な使い方を駆け足でご紹介しました！
自分が持っている知識を教材にしたり、社員研修の内容をカード化するような使い方も面白いでしょう。
アイデア次第でさまざまな活用法が考えられるので、ぜひみなさんもオリジナルの教材を作ってみてはいかがでしょうか！
＜参考＞
「paizaラーニング」では、未経験者でもブラウザさえあれば、今すぐプログラミングの基礎が動画で学べるレッスンを多数公開しております。
そして、paizaでは、Webサービス開発企業などで求められるコーディング力や、テストケースを想定する力などが問われるプログラミングスキルチェック問題も提供しています。
スキルチェックに挑戦した人は、その結果によってS・A・B・C・D・Eの6段階のランクを取得できます。必要なスキルランクを取得すれば、書類選考なしで企業の求人に応募することも可能です。「自分のプログラミングスキルを客観的に知りたい」「スキルを使って転職したい」という方は、ぜひチャレンジしてみてください。
