コードを一切書かずに「Repl-AI」でチャットボットを作成してみた！

プログラミングの知識がなくてもチャットボットを作れるサービス「Repl-AI」を使って実際にチャットボットを作ってみました。コードを一切書かずとも動くものが作れるので、手軽に始めたい人におすすめです。ぜひご覧ください。

テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元：GMOリサーチ株式会社　調査期間：2021年8月12日～8月16日　調査対象：2020年8月以降にプログラミングスクールを受講した18～80歳の男女1,000名　調査手法：インターネット調査

プログラミングの知識がなくてもチャットボットを作れるサービス「Repl-AI」がリリースされています。

LINEやFacebookメッセンジャーを利用したボットのAPIが公開され、誰でもチャットボットを作成できるサービスがどんどん増えてきています。

海外にもBotsifyというチャットサービスがあるので、合わせてご覧ください。

今回は実際にRepl-AIを使って、チャットボットを作成してみたいと思います。

Repl-AIとは

%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-2016-10-20-10-34-27

Repl-AIは、インターメディアプラニング(IPI)とNTTドコモが共同開発し、2016年4月にβ版が公開されました。

プログラミングせずにチャットボットを作成するツールは他にもありましたが、ボットの動きをRepl-AI上で行えるので、実行確認をするのに役立つでしょう。

実際ボットがしっかり反応しているかといったテストは多くするはずなので、手軽にテストできるのは有難い。

[PR] プログラミングで挫折しない学習方法を動画で公開中

準備するもの

docomo developer supportアカウント取得

Repl-AIを利用するには、docomo Developer supportアカウントを取得する必要があります。チャットボットを作る前に登録しておきましょう。

実際にチャットボットを作成してみよう

プロジェクトの作成

準備が完了したら実際にチャットボットを作ってみましょう。

%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-2016-10-20-10-59-43

まずはプロジェクトプランの選択をします。

そして、プロジェクト名を決めます。今回は私たちが運営しているプログラミングスクール「TechAcademy」という名前をつけています。

プロジェクトを作成したら、ボット名とシナリオ名を作ります。

%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-2016-10-20-10-36-26

上記の画像ではすでに「techacademy」というボットが作成されていますが、スタート時は何もない状態です。

新規作成/インポートをクリックし、ボット名を決めましょう。

%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-2016-10-20-10-38-00

ボットを作成したら、続いてシナリオを作成しましょう。

%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-2016-10-20-10-38-20

こちらも新規で作成していきます。

%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-2016-10-20-10-38-45

ボット名同様、シナリオ名を決めて作成するをクリックしましょう。

%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-2016-10-20-11-09-02

作成すると画像のように「contact」と書かれたシナリオができています。

では、実際にチャットボットで必要なシナリオを作成していきます。

シナリオ作り

シナリオ作成のタイミングで、「挨拶シナリオ」を選択すると以下のような対話シナリオを作成してくれます。

%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-2016-10-20-10-39-30

このように「◯◯です」と言われたら「〜〜」と返すといった仕組みをプログラミングを一切せずに作ることができます。

実際にどんな会話になるのか見てみましょう。

%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-2016-10-20-10-40-20

「シナリオを保存してデプロイ」をクリックして、保存を完了させましょう。

実際の動作確認

プロジェクトの一覧画面に戻り「シミュレータ」を開きます。

%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-2016-10-20-10-55-42

シミュレータを開くとキャラクターが2Dで動きながら待っています。

今回はわんころもちというキャラクターと会話をしてみました。

きちんと会話になっている部分、対応できるテンプレートがない場合は「NOMATCH」と表示されています。

既存のチャットボットサービスは、一つの質問に対して一つの回答しか決められないというものが多かったですが、内容をまとめておくことができます。

%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-2016-10-20-15-31-38

これは、名前を間違ってしまった際にユーザーが回答する例を追加している項目です。

部分一致や曖昧一致といった一字一句合っていなくても会話できるように工夫もされています。

まとめ

LINEやFacebookメッセンジャーで提供しているチャットボットはビジネスにもなっているくらいです。

最終的には人間が行うコミュニケーションはあるものの、ECサイトを運営している会社などはカスタマーサポートの一環としてチャットボットを利用してみても良いでしょう。

ハッカソン等でもチャットボットは積極的に利用されているので、今後ますます利用シーンは広がるはずです。

ぜひコミュニケーションの自動化、試してみてください。

[お知らせ]TechAcademyでは初心者でも最短4週間でオリジナルサービスが作れるRuby on Railsオンラインブートキャンプを開催しています。

たった3分で誰でもポートフォリオサイトが作れる「Somebody.io」

誰でも簡単にポートフォリオサイトを公開できるサービスが出ました。「Somebody」というサービス名で、名前からも分かるように誰でも自分のサイトを持つこ...

プログラミング

Mac専用の国産テキストエディタ「mi」の使い方【初心者向け】

Mac向けのテキストエディタはいくつかありますが、今回は国産のテキストエディタ「mi（ミ）」の使い方を初心者向けに紹介します。インストール方法から簡単な...

プログラミング

初心者でもできる！Apacheをインストールする方法

Webサーバとは Webサーバーとは、Webブラウザからのリクエスト（要求）に対し、Webページの内容をレスポンス（回答）として表示させる役割があります。 ...

プログラミング

【初心者向け】Web開発をするなら絶対入れておきたいChrome拡張機能11選

これからエンジニアを目指す人や、普段はディレクターとして働いている人向けにWeb開発で便利なChrome拡張機能をまとめています。エンジニアやデザイナー...

プログラミング

大阪のパソコン教室20選｜自分に合った教室の選び方も紹介

大阪梅田付近の通いやすいパソコン教室をピックアップしました。スキルや資格など、自分にあったパソコン教室を探す際に参考にしてみてください。 &nbs...

プログラミング

オバマ、ジョブズ、ザッカーバーグが語る「プログラミングを学ぶ必要性」とは【動画紹介】

プログラミングを学ぶ必要性については、国内外問わず語る人が増えています。今回は、海外で影響力のある3人が語った「プログラミングを学ぶ必要性」についての動...

プログラミング

あわせてよく読まれている記事

この記事では、人気の子ども向けロボットプログラミング教材10選を紹介しています。ロボットプログラミングは、3歳から簡単に始められるものから大人も楽しめる本格的なものまで種類が豊富で、プログラミング初心者の方にもおすすめのプログラミング教材です。子どものうちからプログラミングをはじめることには多くのメリットがあり、小学校、中学校、高校と段階的に必修化されるプログラミング教育への導入としても役立つため、習い事としてもおすすめです。子どもがロボットなどの動くおもちゃやプログラミングに興味があるようでしたら、まずはロボットプログラミング教材からはじめてみてはいかがでしょうか。目次ロボットプログラミング教材とは【幼児におすすめ】ロボットプログラミング教材 3選【小学生におすすめ】ロボットプログラミング教材 7選これもおすすめ！人気のプログラミング教材もっと学びを深めたい子どもにはロボット教材で楽しくプログラミングを学習しよう！ロボットプログラミング教材とはロボットプログラミング教材とは、プログラムによって実際にロボットなどを操作して動かすことができる教材です。自分のプログラムした内容がすぐに確認できるので、子どもが興味を持ちやすく、楽しみながら学習することができるのが特徴であり、ロボットプログラミング教材のメリットです。知育おもちゃとしてもおすすめの文字入力不要で幼児でも操作しやすいものから、テキスト言語でプログラムする本格的なロボットまで種類が豊富です。それでは、「幼児向け」と「小学生向け」に分けてそれぞれにおすすめのロボットプログラミング教材を紹介します！ [PR] プログラミングで挫折しない学習方法を動画で公開中【幼児におすすめ】ロボットプログラミング教材 3選それではまず、幼児が遊びながら学べるロボットプログラミング教材を3つ紹介します。幼児向けのものはWi-Fiなどのネットワークやパソコン、タブレット等が必要なく、簡単にはじめられるものが多く揃います。 1）コード・A ・ピラーツイストツールタイプ：タンジブル, ロボット対象：3歳〜価格：5,500 円文字入力不要コード・A・ピラーツイストは、幼児（3歳～6歳）の子ども向けの芋虫型プログラミングロボットです。マテル社のベビー・プリスクールのおもちゃブランド、「フィッシャープライス」によって開発されました。プログラミングの際に文字の入力を必要としないので、幼児の子どもでも簡単に、かつ、楽しみながらプログラミングを学習することができます！コード・A・ピラーは乾電池式のロボットで、芋虫のように自走します。芋虫の胴体部分が関節ごとに外れるようになっており、胴体部分のパーツのそれぞれに「前進」、「右折」、「左折」などの命令を持たせることができます。これら胴体部分パーツをつなげ変えることでコード・A・ピラーの動きを変化させることができます。さらに、子どもが考えたプログラムによって胴体部分のパーツを光らせたり、音を鳴らしたり、楽しく遊びながらプログラミングを学べる知育玩具となっています。例えば、コード・A・ピラーが障害物を避けて走るにはどのようにしたらよいか、付属のゴールプレートを置いた場所に向うにはどうしたらよいかなど、手先を使いながら組み替えたり、走らせてみたり、子ども自身が考えて動かします。この体験はプログラミング的思考を育むことにつながるでしょう。 2）Cubetto（キュベット）ツールタイプ：タンジブル, ロボット対象：3歳〜価格：35,750円文字入力不要 Cubetto（キュベット）は、手を使って遊ぶ木のおもちゃ型のコーディングキットです。キュベットと一緒に冒険することで、子どもたちはプログラミングの基礎を身につけることができます。この教材の特徴は、テキスト言語などの子どもには複雑な手段を一切使わずに、LEGOのようなブロックを組み合わせることでロボットを動かせる、という点です。各ブロックに命令がそれぞれ1つずつ組み込まれており、それらを組み合わせボードにはめることでキュベットに指示を出します。青い実行ボタンを押すと作成したプログラム通りにキュベットが動き出します。魅力的なワールドマップとストーリーブックによって子どもの学習意欲が高まり、楽しく遊びながら学習ができます。これからを生きる現代の子どもにとって重要なスキルの一つであるプログラミングを、子どもたちが分かりやすい形で身につけることができます。 3）PETS（ペッツ）ツールタイプ：タンジブル, ロボット対象：3歳後半〜価格：22,000円文字入力不要 PETS（ペッツ）は、方向ブロックをロボットの背中に挿し込んで、子どもが作成した命令通りに動くプログラミング学習ロボットです。マス目状の特性シートの上を、ときには障害物をよけながらスタートからゴールへと動かしていきます。 PETSでは、パソコンなどに難しいコードを打ち込む学習方法ではなく、実際にロボットに触れて動かし、楽しみながらプログラミング的思考を学ぶことができます。また、ロボット自体が簡単な作りとなっているため、単三電池4本があればすぐに学習を開始することができます。保護者や教育者など教える側にも負担なく、大人も一緒になってプログラミング体験ができるロボット教材です。【小学生におすすめ】ロボットプログラミング教材 7選次に、小学生はもちろん中高生から大人まで、楽しみながらプログラミングを学習できるロボット教材を7つ紹介します。 1）embot（エムボット）ツールタイプ：ビジュアル言語, ロボット対象：6歳〜　価格：6,600 円文字入力不要タブレットでの操作を推奨 embot（エムボット）はNTTドコモが開発したプログラミング教育用の教材ロボットです。専用のアプリをダウンロードして、そのアプリからプログラミングを行い、embotを動かすことができます。ビジュアル言語を使っての直感的なプログラミングですので、子どもたちだけでなく教える側である先生や親御さんにとってもプログラミング学習の導入がしやすい教材です。教材の外装はダンボールで簡単に加工しやすく、外装ダンボール，embotコア，ブザー，LEDライト，サーボモーターを自由に組み合わせて、いろいろな活用を考えることもできます。直感的なプログラミングで論理的思考力を養うことができ、子どもたちの自由な発想、想像力を高めることも期待できます。公式サイトではembotを活用した様々な指導案や動画が公開されていますので、ぜひそちらも参考になさってください。 2）kurikit（クリキット）ツールタイプ：ビジュアル言語 , テキスト言語 , ロボット対象：6歳〜価格：6,600 円文字入力対応可 PCやタブレットでの操作を推奨 kurikit（クリキット）の代表的なプロダクトは「ココロキット」と呼ばれるロボットプログラミング教材です。こちらは、同社のヒット商品である「ユカイな生きものロボットキット」の拡張キットとして販売されています。子どもが工作のように自分で組み立てて作ったロボットを、ビジュアルプログラミングやテキスト言語のJavaScriptによって記述したプログラムで動かすことができます。シンプルな構成で専門的な知識がなくても簡単に操作することができ、プログラミングでロボットを動かしながら楽しく学ぶことができます。 kurikitのコースには、初級と上級があり、初級のコースでは直感的にプログラミングができる「ビジュアルプログラミング」を、上級コースではプロのエンジニアも使っている「テキストプログラミング」に挑戦できます。 3）toio（トイオ）ツールタイプ：タンジブル, ビジュアル言語 , テキスト言語 , ロボット対象：6歳〜大人価格：16,980円＋税（本体セット）文字入力対応可 PCやタブレットでの操作を推奨 toio（トイオ）には、パソコン不要でカードを使ってゲーム感覚で楽しめるものから、本格的なテキスト言語で自由にプログラミングを行えるものまで、幅広くプログラミング学習コンテンツが用意されています。プログラミングの基本を遊びながら身につけることができ、ステップアップしていく中で枠に囚われない動作を自由に作ることができます。 toioでは、初級コースとして「GoGo ロボットプログラミング～ロジーボのひみつ～」というコースがあります。これは、プログラミングの基本要素「順次、分岐、反復」が楽しみながら身につく冒険絵本を作成していくコースとなっています。子どものプログラミングによって、絵本の上をかわいいロボットが動きまわります。また、初中級コースとして、ビジュアルプログラミングアプリ「toio Do」が用意されています。こちらはパソコンやタブレットを使ったビジュアルプログラミングにステップアップします。しかし、いきなりプログラムを作成しなくても、サンプルプログラムを使用してロボットの動き試すことから始められます。ブロックを組み換えて改造することでオリジナル作品を作ることも可能です。さらに、上級コースとして、toioコアキューブというものが用意されています。キューブを使い、JavaScriptなどのテキスト言語でより実践的なプログラミングが体験できます。 4）LEGO®BOOST（レゴブースト）ツールタイプ：ビジュアル言語 , ロボット対象：7～12歳価格：19,660円文字入力不要 Wi-Fiなどのネットワーク、パソコン・タブレット不要 LEGO®BOOST （レゴブースト）では、LEGOで作ったロボットをプログラミングによって動くおもちゃに変身させながら、楽しくプログラミングを学ぶことができます。障害物のあるコースを移動させたり、シューターで的に命中させたりなど、子どもが興味を持ちやすい内容になっています。 LEGOが行う動作には、ジョークやダンス、ビートボックスなど面白い機能も豊富に用意されていますので、お友達と一緒にゲームをしているようにプログラミングを学べます。アプリには60種類以上のアクティビティがあり、プログラミングのブロックを集めながら基本的なプログラミングのスキルを身に付けることができます。さらにアプリのクリエイティブキャンバスという機能でオリジナル作品を組み立てることもできますので、さらに発展的なプログラミングを作成することも可能です。 5）mBot（エムボット）ツールタイプ：ビジュアル言語 , テキスト言語 , ロボット対象：8歳〜価格：15,400円文字入力対応可 PCやタブレットでの操作を推奨 Makeblock Co., Ltdが開発したmBot（エムボット）は、光センサーや超音波センサー、ブロックやタイヤなどがセットになっています。いろいろな機能が入っているためプログラミング技術だけでなく、センサーの仕組みやロボットの構造なども学ぶことができます。これらのセンサーやロボットをmBlockで作ったプログラムで動かすことで、試行錯誤してロボットの動きを考える経験が生まれます。さらに、mBlockで作成したプログラムを、現在多くのシステムエンジニアが活用している非常に汎用的なテキスト言語、Pythonや、Arduino言語のプログラミングコードに切り替えることもでき、より実用的な製品であるといえます。 6）KOOV®（クーブ）ツールタイプ：ビジュアル言語 , ロボット対象：8歳以上価格：36,880 円＋税文字入力不要 PCやタブレットでの操作を推奨 KOOV®（クーブ）とは、ブロックで自由な「かたち」を作って、それらを「プログラミング」することでさまざまな「動き」を与えながら学ぶロボット・プログラミング学習キットです。ロボット制作の体験によって、子どもたちの探究心や創造力、未来を切り拓く思考力を育むことができます。下記の3つのステップを子どもの理解や成長に合わせて選択することができますので、プログラミング初心者の子どもでも安心して挑戦できます。 STEP 1「ロボットレシピ」を真似るお手本となる「ロボットレシピ」を見ながら、いろいろな作品を制作して、ロボットとして動かしてみるところからプログラミング学習を始めます。 STEP 2「学習コース」で体系的に学ぶ流れに沿ってロボットを作るためプログラミングを徐々にマスターでき、確認クイズで学習を振り返りながら、少しずつロボットプログラミングを理解することができます。基本的な組み立てとアプリの操作を学習できるコースも用意されています。 STEP 3「自由制作」で子ども自ら発明するブロックの組み立てと、そのプログラミングの流れを一通りマスターした後で「自由制作」を行うことで、オリジナル作品づくりに挑戦することができます。作成したロボットプログラミングの写真・動画を共有して世界中の人々に評価してもらうこともでき、新たなロボット制作のアイデアを生み出すことができます。 7）ArtecRobo2.0（アーテックロボ2.0）ツールタイプ：テキスト言語, ビジュアル言語, ロボット対象：8歳以上価格：27,000円文字入力対応可 PCやタブレットでの操作を推奨 ArtecRobo2.0（アーテックロボ2.0）は、日本の学校教材メーカーである株式会社アーテックが開発したロボットプログラミング学習教材セットです。縦、横、斜めに自由につながるブロック、モーターやセンサーなどのロボットパーツ、プログラミングソフトを使用して、ロボットの仕組みとプログラミング技術を学ぶことができます。パーツ説明も親切で、ブロックの組み立ては工具やネジ、接着剤などを使わずに行うことができ、ロボットパーツを接続する際に付属コードの配線が見えるので、子どもがどう配線したらどう動くのかを実感しやすい構成となっています。プログラムを作るソフトは、パソコン用では「Studuino」、iPad用では「Tickle for iPad」があります。どちらも画面上で命令をブロックのようにつなげて並べるビジュアル言語方式なので、低学年の子どもでも無理なく学習を開始できます。さらに、児童用テキストや教員用指導書が付属しているので、子どもがテキストを参考に予習・復習をすることができます（WEBでも公開）。これもおすすめ！人気のプログラミング教材ここからはロボットではないが人気のタンジブル教材を紹介します！タンジブルとは形のないもの（命令、情報、プログラムなど）を、直接触ることができる形のあるものとして操作できるタイプの教材を指します。ロボットプログラミング教材よりもお手頃で始めるハードルが低いので、ぜひ参考にしてくださいね。 micro:bitV2（マイクロビット） ※micro:bitはmicro:bitV2にバージョンアップされています。ツールタイプ：テキスト言語, ビジュアル言語対象：7〜16歳価格：2,200円文字入力対応可 PCやタブレットでの操作を推奨 BBC micro:bit（マイクロビット）は、イギリスの公共放送局「BBC」によって開発された教育用コンピュータで、イギリスをはじめ多くの国の子どもたちがBBC micro:bitでプログラミングを学んでいます。クレジットカードよりも小さいサイズの電子基板にセンサーやLEDといったなどさまざまな機能が搭載されているにもかかわらず、その価格は非常に安価です。センサーやLEDの他にも、コンパス、無線通信機能、加速度センサー、温度センサーなどの搭載されていて、子どもたちが作った段ボールやペットボトルのおもちゃに心臓部としてこのmicro:bitを入れることで、自作のおもちゃを動かすことができます。 micro:bitで学ぶプログラミングでは、マイクロビット本体のほか、プログラムを書くためのパソコン、データを転送するケーブルなどの周辺機器を扱うため、子どもが技術に触れる機会を増やすことができますよ。 Toy-Conガレージ（トイコンガレージ）ツールタイプ：ビジュアル言語対象：6歳〜価格：6,980円＋税文字入力不要 Nintendo Switch本体が必要 Toy-Conガレージ（トイコンガレージ）は、Nintendo Switchを使って行うビジュアルプログラミング学習教材です。 Toy-Conガレージでは、Nintendo Labo の付属のToy-Conを作って遊ぶほかに、オリジナルのToy-Conのプログラム「発明」に挑戦することもできます。入門動画がYouTubeの任天堂公式チャンネルにて公開されているので、専門知識がなくても簡単に操作が可能です。 Toy-Conガレージでは、タッチスクリーンを使って指で直感的に作業できるので、子どもやプログラミング初心者でもキーボードでコードを書く必要がなく、プログラミング学習の導入としてもおすすめです！ YouTubeの任天堂公式チャンネルでは「バラエティキット」に含まれている「ラジコンカーToy-Con」と「紙人形Toy-Con」を使ったものや、本体に加えて輪ゴムを使った「輪ゴムギター」など、作例が豊富に紹介されています。ですが、工作は必須ではないのでJoy-Conだけを使用してプログラミングを始めることもできますよ！子どもがあれこれと工夫することで、「あそび」とはまた別の手触りや反応といった「体験」を作ることが可能となっているプログラミング学習教材です。AND、NOT、カウンター、タイマーなど、一般的なプログラミングの概念に通じる機能が詰まっていて学習教材としても質が高いと言えます。 MESH（メッシュ）ツールタイプ：ビジュアル言語対象：6歳〜大人価格：13,871円＋税文字入力不要 Wi-Fiなどのネットワーク、パソコン・タブレットなど不要 MESH（メッシュ）は、ソニー株式会社が開発した、小さな「電子タグ」型のプログラミング学習教材です。 USBメモリを一回り大きくしたような形状で、スマートフォンやタブレット、Windows10上のアプリを使ってプログラミングが行えます。アプリは画面上のアイコンを組み合わせてプログラムを作成する「ビジュアルプログラミング」形式になっており、子どもやプログラミング初心者でも直感的なプログラミングが可能です。 MESHには「LED」、「ボタン」、「人感」、「動き」、「温度・湿度」、「明るさ」、「GPIO（拡張）」の７種類の電子タグがありそれぞれを組み合わせることで色々な機能が実現できます。 MESHではプログラミングしてできたものを「レシピ」と呼び、そのレシピを作成する際に何を作るか、どの電子タグを組み合わせるかなどを子どもが考えながら、意図した仕組みを完成させるので、自然とプログラミング的思考が身に付きます。複数のMESHの組み合わせけでなく、身近にあるモノをMESHとスマホなどの通信機器と組み合わせ、「モノ」に通信機能をもたせる、いわゆるIoT（Internet

子ども向けプログラミング

JavaScriptでセレクトボックスの値を動的に生成する方法を現役エンジニアが解説【初心者向け】

JavaScriptでセレクトボックスの値を動的に生成する方法について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。目次Repl-AIとは準備するもの実際にチャットボットを作成してみようまとめそもそもJavaScriptについてよく分からないという方は、JavaScriptとは何なのかについて解説した記事を読むとさらに理解が深まります。田島悠介今回は、JavaScriptに関する内容だね！大石ゆかりどういう内容でしょうか？田島悠介 JavaScriptでセレクトボックスの値を動的に生成する方法について詳しく説明していくね！大石ゆかりお願いします！セレクトボックスとは入力画面などで選択を行う下記のような部品です。セレクトボックスの値とはセレクトボックスの値とは、セレクトボックスの選択肢のことです。上記の例では、「和食」「中華」「イタリアン」のそれぞれが「セレクトボックスの値」です。 [PR] プログラミングで挫折しない学習方法を動画で公開中セレクトボックスの値の設定方法 HTMLのselectタグの中にoptionタグで値を記述していきます。先程のセレクトボックスの画像の例では、下記のように3つのoptionタグが書かれています。なお、ここで日本語の「和食」「中華」「イタリアン」はあくまでユーザー向けの表示です。実際に内部で値として登録されるのはoptionタグのvalueである”JapaneseFood” “ChineseFood” “ItalianFood”です。 <select name="genre" id="genre"> <option value="JapaneseFood">和食</option> <option value="ChineseFood">中華</option> <option value="ItalianFood">イタリアン</option> </select> 「セレクトボックスの値を動的に生成する」とはそもそも「セレクトボックスの値を動的に生成する」とはなんでしょうか。さきほどの和食・中華・イタリアンの例では、最初からHTMLに3つの値が設定されていますが、これは「静的に生成されている」といいます。これに対して「動的に生成する」とは、JavaScriptを用いて、その時の状況に応じてあとから値を追加することをいいます。例えば、先ほどのセレクトボックスで和食を選んだ場合には「天ぷら」「寿司」を、中華を選んだ場合は「炒飯」「エビチリ」を選択肢として提示したい場合、ユーザーの選択に応じて「動的に」次のセレクトボックスの値を生成する必要が出てきますね。このような実装については、本記事後半の「実際に書いてみよう」で解説しています！まずは、具体的に値を動的に追加する方法を見ていきましょう。セレクトボックスの値を動的に生成する方法 JavaScriptでselectタグを取得して、optionタグを追加することで実現できます。下記のコードでは、セレクトボックスに「天ぷら」という値を追加しています。 HTML <select name="food-name" id="food-name"> </select> JavaScript //select要素を取得する const selectFoodName = document.getElementById('food-name'); //option要素を新しく作る const option1 = document.createElement('option'); //option要素にvalueと表示名を設定 option1.value = "tempura"; option1.textContent = "天ぷら"; //select要素にoption要素を追加する selectFoodName.appendChild(option1) 最終的なHTML <select name="food-name" id="food-name"> <option value="tempura">天ぷら</option> </select> 実際に書いてみよう選択した値によって動的にセレクトボックスの値を生成してみようそれではいよいよ実践的な実装をしていきましょう！ 100%理解するのが難しかったとしても、「こんな風に活用できるのか」とイメージするだけでも有意義ですので、ぜひ読み進めてみてください。冒頭の例で使った料理のジャンルを選択するセレクトボックスを使って、2つめのセレクトボックスに選択したジャンルのメニューを設定してみます。完成した動作は下記のような形になります。和食を選んだ場合と中華を選んだ場合で、右側のセレクトボックスの選択肢が変わっていますね。まずはHTMLソースです。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> </head> <body>  <select name="genre" id="genre"> <option disabled selected>ジャンルを選択してください</option> <option

JavaScript

JavaScriptのテキストボックスから値を取得する方法を現役エンジニアが解説【初心者向け】

JavaScriptのテキストボックスから値を取得する方法について解説します。実際のコードをもとに解説していきますので、理解を深めていきましょう。目次テキストボックスとはテキストボックスの値とはテキストボックスの値を取得する方法実際に書いてみよう田島悠介今回は、JavaScriptに関する内容だね！大石ゆかりどういう内容でしょうか？田島悠介テキストボックスから値を取得する方法について詳しく説明していくね！大石ゆかりお願いします！テキストボックスとはテキストボックスとは、ユーザーが入力した情報を受け取るフォーム要素の1つです。 <input>タグで表現されます。 <input type="text" id="テキストボックスのid"> <input>タグは type 属性の値で内容が大きく変わります。詳しくは以下の記事を参考にしてください。 mozilla.org-input [PR] プログラミングで挫折しない学習方法を動画で公開中テキストボックスの値とは上記で紹介したinput要素に入力されている内容のことを、本記事では「テキストボックスの値」と呼びます。テキストボックスの値を取得する方法テキストボックスの値を取得するには、大きく分けて2つのステップが必要です。テキストボックスの要素をJavaScriptで指定する指定したテキストボックスの要素のvalueプロパティを参照するテキストボックスの要素をJavaScriptで指定するテキストボックスの要素をJavaScriptで指定するには様々な方法がありますが、最も一般的な方法としてgetElementByIdがあります。この方法を使うには、指定したいテキストボックスの要素にid属性を付与する必要があります。 //HTML <input type="text" id="message"> このinput要素をJavaScriptで指定する場合、書き方は以下の通りになります。 //JavaScript const textbox = document.getElementById("message") HTML側で指定したmessageというidを、getElementByIdの引数に入れることで、その要素を指定しています。指定したテキストボックスの要素のvalueプロパティを参照するテキストボックスの要素が指定できたら、その要素のvalueプロパティを参照すると、テキストボックスの値を取得できます。コードにすると以下のような形です。 const textbox = document.getElementById("message") const value = textbox.value テキストボックスの値を取得する方法についての基本的な解説は以上です。ここからは実際にコードを書いていくことで理解を深めましょう！実際に書いてみよう今回のサンプルプログラムでは、テキストボックスから値を取得して別の要素に表示します。完成形のコードは以下の通りになります。ぜひ流れを追いながら、ご自身のエディタにコードを書き写してみましょう！ <!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title>sample1</title> </head> <body> <form id="form1" action="#"> <input type="text" id="input-message"> <input type="button" onclick="showMessage()" value="送信"> </form> <p id="output-message"></p> <script language="javascript" type="text/javascript"> const showMessage =

JavaScript

【初心者必見！】Webデザイナーが持っておくべき「ポートフォリオ」とは

Webデザイナーとして就職・転職する上で欠かせないのがポートフォリオ。この記事では、事例も紹介しながらポートフォリオとは一体なんなのか分かりやすく解説しています。 Webデザイナーがどんな仕事を担当する人なのか、詳しく知りたい方はWebデザイナーとはの記事も合わせてご覧ください。なお本記事は、TechAcademyのWebデザインオンラインブートキャンプのカリキュラムをもとに執筆しています。 Webデザイナーに必須のポートフォリオとは Webデザインを仕事にしている人は増えてきて、インターネットを使った仕事の受注や就職においてもその競争率は高くなってきています。そのとき重要になるのがアピールの方法です。 Webデザイナーの場合ポートフォリオという形で、自分の実績やスキルを相手に示すことができます。ロゴやバナー、Webサイトのデザインなど今まで作ってきたものをポートフォリオにまとめておけば、何を作ってきたのか一目で理解できます。転職のしやすさにも良い影響を与えますし、フリーランスとして働く上では必ずと言っていいほど持つべきでしょう。ポートフォリオの作り方ポートフォリオは内容を詳細まで決められているものではありませんが、ある程度基本となる情報は載せておく必要があります。まず、作ったWebサイトのタイトルとURL、スクリーンショットです。スクリーンショットがなければ文字での紹介となり意味がなくなってしまいます。また、制作にかかった時間や、自己紹介もまとめておくことで面接時の質問を誘導することにも一役買います。印象に残るようなデザインにすることは大切ですが、統一性を失ってはかえってごちゃごちゃとした印象になってしまうため見やすさを意識することも忘れてはいけません。 WordPressで使えるポートフォリオ用テーマも紹介しているので、手軽に作ることも可能です。 [PR] プログラミングで挫折しない学習方法を動画で公開中イケてるポートフォリオの事例ポートフォリオを始めて制作する場合には特に、他人のポートフォリオを参考にすることでイメージが掴めるようになります。 Webデザイナーの成果物の居場所はすべてインターネット上にあるため、検索すればすぐに見つけることができます。ここでは、その中でも著名人の作ったポートフォリオの事例を紹介します。 Mana ManaさんはWebデザイン界でも有名でポートフォリオの参考事例としてよく紹介されています。わかりやすさが特徴のデザインとなっています。ポートフォリオフクシマナオキこちらは1ページにすべてを収めた構成が特徴的なポートフォリオです。ページを新たに読み込むことなくスクロールのみで見ることができ、ストレスのない見せ方ができています。ポートフォリオ Jojodesign このポートフォリオは円を基調としたデザインとなっていて、滑らかに動く背景が印象的です。ポートフォリオ Shogo Tabuchi 音楽やアニメーションが多く活用され面白みのあるポートフォリオです。動きを多く表現したいという方は参考になるはずです。ポートフォリオ秦頌光クールさのあるポートフォリオで、2DのWebサイト上で立体を意識した見せ方をしているのが特徴です。各画面をスライドショーのように見せているのが印象的ですね。ポートフォリオ OH｜割石裕太わりえもんさんこと割石さんのポートフォリオ。フリマアプリFrilなどのデザインをしてきた実績が紹介されています。ポートフォリオタカヤオオタ MERYのロゴやデザインを手がけた人として有名な方のポートフォリオです。自分が関わったプロジェクトが見やすく並べられていて、作ったロゴなどが一目で分かるようになっています。ポートフォリオ以上、ポートフォリオとは何なのか、何を載せるものなのか説明しました。実際のポートフォリオも参考にしながら自分が作った作品を載せるポートフォリオを作ってみてください。また、TechAcademyでは初心者でも最短4週間でオリジナルWebサイトを公開できるWebデザインオンラインブートキャンプを開催しています。現役のWebデザイナーがパーソナルメンターとして受講生に1人ずつつき、マンツーマンのメンタリングで学習をサポートし、最短4週間でオリジナルWebサイトを作ることが可能です。独学に限界を感じている場合はご検討ください。

Webデザイン

Photoshopでアートボードを追加する方法を現役エンジニアが解説【初心者向け】

Photoshopでアートボードを追加する方法について、TechAcademyのメンター（現役エンジニア）が初心者向けに解説します。なお本記事は、TechAcademyのオンラインブートキャンプPhotoshop講座のカリキュラムをもとに執筆しています。田島悠介今回は、Photoshopに関する内容だね！大石ゆかりどういう内容でしょうか？田島悠介アートボードを追加する方法について詳しく説明していくね！大石ゆかりお願いします！目次アートボードとはアートボードを追加する方法アートボードの基本的な使い方まとめアートボードとは Photoshop CC 2015から追加された新機能で、1つのPSDファイルの中にアートボードと呼ばれるカンバスのようなものをいくつも作成することができます。作成されたアートボードは、独立しているため、個別にサイズやレイヤーの変更を加えても他のアートボードには影響は及びません。 [PR] プログラミングで挫折しない学習方法を動画で公開中アートボードを追加する方法ツールバーの「アートボードツール」をクリックするか、または、ウィンドウ内の「アートボード名」をクリックします。アートボードの上下左右に表示された「＋」ボタンをクリックし、アートボードを追加します。アートボードは、クリックされたボタンの方向に、追加されます。アートボードの基本的な使い方アートボードの新規作成ファイル新規作成時にアートボードを作成する。Photoshopで、ファイルを新規作成する際に、「アートボード」にチェックを入れ「作成」します。ファイル作成後にアートボードを作成するレイヤーパネルの「三」ー「アートボードを新規作成」をクリックします。ダイヤローグボックスにアートボードの名前を設定し、「OK」をクリックし確定します。アートボードの移動「アートボード名」をドラッグすると、アートボード全体を移動することができます。アートボードの複製複製したいアートボードのレイヤー上を右クリックし、メニューの「アートボードを複製」をクリックします。ダイヤローグボックスにアートボードの名前を設定し、「OK」をクリックし確定します。アートボードの削除削除したいアートボードのレイヤー上を右クリックし、メニューの「アートボードを削除」をクリックします。まとめアートボードを利用すると、Webサイト用のデザインカンプやバナーなどサイズの違う複数のデザインを1つのPSDファイル内で管理できるので、とても便利です。監修してくれたメンターメンターOM Webデザインの勉強のためロサンゼルスに留学。その後、現地のWeb制作会社に就職し、Webデザイナーとしてのキャリアをスタート。現在もロサンゼルスで働く傍ら、フリーランスのWebデザイナーとして、アメリカだけでなく日本からのWeb制作も請け負う。また、画像のリタッチが得意なので、しばしばリタッチの依頼も請け負う。大石ゆかり内容分かりやすくて良かったです！田島悠介ゆかりちゃんも分からないことがあったら質問してね！大石ゆかり分かりました。ありがとうございます！ TechAcademyでは初心者でも1週間でフォトレタッチをマスターできるオンラインブートキャンプ Photoshop講座を開催しています。現役デザイナーに毎日チャットで質問することができます。

Photoshop

【完全保存版！】デザインを参考にすべき海外のポートフォリオサイト25選

本稿は、Webdesigner Depotのブログ記事を、Webdesigner Depotより了解を得て日本語翻訳し掲載した記事になります。またこの記事は、Ezequiel Bruni氏によって、投稿されました。ご紹介するのは、ミニマリストデザインのサイト、伝統的なデザインのサイト、アシンメントリーなデザインのサイト、実用的ではないけれど実験的でクールなデザインを大胆に試みているサイトです。今までには到底不可能だと思われたデザインを見ることができます。視差効果(パララックス)を利用して、良い意味で撹乱を引き起こしているデザインもあります！ pixelindustry pixelindustryのポートフォリオは各テーマごとに作成されています。だから、厳密には世界初のオリジナルデザインではないかもしれませんが、ポートフォリオが彼ら独自の強みや才能を示すために役立っていることは、確かです。もっとも、「テーマのある」ポートフォリオが良い方向に評価されるときにだけ効果的なのかもしれませんが。 pixelindustry David Alexander David Alexanderのポートフォリオは、広くてゆったりとしていて、画像をメインとしたフレンドリーな印象のフルスクリーンのレイアウトが特徴です。もしあなたのコンテンツが、テキストが少なめで画像を多用しているとしたら、参考にできる手法です。 David Alexander [PR] プログラミングで挫折しない学習方法を動画で公開中Martine aimait les films ビデオ制作会社のMartine aimait les films(フランス語で「マルタンはフィルムを愛する」の意)のポートフォリオサイトは、２分割法のようなデザインが素晴らしいです。ビデオの背景として使われているシンプルでクオリティの高いクリップとの相乗効果で、サイト全体は現代的でプロフェッショナルな雰囲気に仕上がっています。紹介する動画のスタイルとよく合っています。 Martine aimait les films Aycan Elijah Yilmaz 私が「銀河で表現されたあご髭」を見たのは、このAycan Elijah Yilmazのポートフォリオが2回目でした。この「銀河で表現されたあご髭」はさておき、ミニマリストデザインには大変参考になる良いサイトです。 Aycan Elijah Yilmaz Chris Cook Chris Cookのポートフォリオは、シンプルで、モノトーンを基調としていて、美しいタイポグラフィでデザインされています。私が特に好きなことろは、背景のパターンが微かなトーンで使われている点です。背景のパターンは、現代では時代遅れのデザインとして否定される傾向にありますが、このサイトは上手く取り入れています。 Chris Cook whitelist ビデオ制作スタジオのwhitelistのポートフォリオは、90年代スタイルのマルチメディアのプレゼンテーションを基本としながら、現代的なテクノロジーと手法が使われています。このような種類のデザインによくあるユーザビリティの問題には、私も批判的な立場ですが、良くないデザインというわけではありません。余分な装飾の多いファンシーなJavaScriptやアニメーションを削ぎ落とした後に残るのは、美しいミニマリストデザインのサイトです。装飾のため、またUIエレメントや重要なコンテンツに注目を集めるために、珍しい幾何学の図形を使う手法が私は特に好きです。 whitelist 4musketier 4musketierはデザイン代理業の会社と思われます（私はドイツ語が読めないのであくまで推測ですが）。それほど想像力に富んだデザインではありません。模範的なフラットデザインであり、特定のカラースキームというよりも、色とりどりのパステルカラーの虹色を使ったようなデザインとして参考になります。素晴らしいタイポグラフィ、贅沢に使われているホワイトスペース（余白）などが良い効果をもたらしているデザインです。デザイン全体を通して高い精度があり、一見の価値があります。 4musketier Lachlan Kincaid Lachlan Kincaidのポートフォリオは、文字通りの意味の「ホワイトスペース（余白）」によって、ミニマリズムの世界を私たちに見せてくれます。シンプルなデザインのサイトで、紹介する全ての作品に、適切なコンテクストを与えるために、テキストと画像が強調されています。高く評価できる試みです。 Lachlan Kincaid Electric Enjin Electric Enjinのポートフォリオサイトは、ズームイン効果のある3Dの多面球体の登場から始まることで、衝撃的な印象を与えてくれます。これより先は、実際に見てのお楽しみとしてもらいたいので、話すのを控えます。潜在的なユーザビリティの問題を別とすれば、これこそデザイナーがFlashを利用したサイトに追求し、その実現が難しいデザインであると表現すれば十分かもしれません。サイトの他の部分のデザインは明らかにもっとシンプルです。壮観であり過ぎず、それでいて見ていて楽しいデザインです。トップページは訪問者に何かしら考えさせるところがあるデザインです(ブラウザ上で作動すれば)。 Electric Enjin Olle Olleのポートフォリオサイトは、ミニマリズムデザインと一連のバウハウス（Bauhaus）のデザイン様式を組み合わせています。ページはただデザインされたというよりも、芸術志向です。デザイナーの方々へのメモ：芸術とは、余分な装飾の多いファンシーなレイアウトのことだけではありません。小さなディテールや全体のカラースキームを、コンテンツに合わせて変化させることも大切です。 Olle Locomotive Locomotiveのポートフォリオサイトは、マテリアルデザイン（Material Design）を基本としながら、Googleの模範通りには見えない素晴らしい例です。一部の要素にはマテリアルデザイン（Material Design）に典型的な特徴を見ることができますが、独自の個性もあります。 Locomotive AREA 17 モダンで美しいデザイン、ブラックとホワイトのコントラストが強調されたカラースキーム、アシンメトリーを組み合わせたのが、AREA 17のポートフォリオです。私自身、自分のグレースケールのウェブサイトを気に入っていますが、よく知られているように、ほとんど完全なブラックカラー（スクリーン上では完全なブラックカラーに見えます。）を使ったデザインに成功するのは難しいことです。 AREA 17 C RCL C RCLのポートフォリオサイトは、フルスクリーンサイズのカルーセル（回転ベルトコンベアーのような、スライドギャラリーのデザイン）をページの中央に配置するというリスキーな選択をしています。リスクがあるというのは、このカルーセルが、彼らの紹介する作品を見るためにアクセスする唯一の方法だからです。しかし、それでも美しいデザインにまとめられています。またタイポグラフィも素晴らしいです。 C RCL Whitehall Whitehallはニューヨークのインテリアデザインスタジオです。プロジェクトの全ての作品を素晴らしい写真で紹介していて、フルスクリーンに表示されます。ウェブサイトの他の部分はシンプルで、ユーザーは必要な情報だけを得ることができます。「About(概要)」のページのアシンメトリーなデザインには驚きましたが、このサイト上の他の部分にはない、良いデザインに思えます。 Whitehall Uzik Uzikのポートフォリオサイトは、オリジナリティが高すぎず、上手くデザインされた例の1つです。画像、テキスト、色など全ての要素が効果的に使われています。時々はデザインの定石に従うことにもアドバンテージがあります。Uzikはそれに成功した例です。サイトを訪問して、見てみることをおすすめします。 Uzik Dunlop Builders Dunlop Buildersのポートフォリオは、ミニマリストデザインを利用したビジネスサイトの素晴らしい例です。構成や使われている要素はよくあるようなデザインですが、このサイトならではの個性的なデザインもあります。その個性的なデザインは、主にレイアウトと文字に見ることができますが、画像にも見出すことができます。 Dunlop Builders David Schweitzer 作曲家のDavid Schweitzerのポートフォリオは、1ページの構成ではありません。しかし、最も重要な情報がトップページに集められているため、1ページの構成と見なすこともできるかもしれません。ランダムに色を加えられた幾何学的な図形は、それがなければモノトーン調になるウェブサイトに、刺激的で素晴らしい効果を与えています。ただこれらの図形がテキストと重なる部分で、テキストが読みにくくなっています。私が好きな点は、彼の音楽プロジェクトのコンテンツをクリックすると詳細が表示されるところや、小さなメディアプレーヤーでサンプル音楽を視聴できるところです。 David Schweitzer Geordie Wood Geordie Woodのポートフォリオは率直に言って、実用向きではない散らかったデザインです。一見、どこにメインのナビゲーションがあるのかさえわかりません。ページの右上にある矢印の要素がナビゲーションかと思ったらそうではなくて、写真家の名前のテキストをホバーしたときに現れるようになっていました。この散らかりようは別にしても、タイポグラフィの使い方や、ホバー時にはクリックが終了するまでテキストが画像上に留まって表示されるデザインが好きです。写真の画像のホワイトスペース（余白）はそれぞれ異なる比率で与えられているのも、良いデザインです。実験的で予測不可能な印象が、紹介している写真と合っています。ナビゲーション要素は修正されるべきですが、デザインは好きです。 Geordie Wood Sam Lord Flavin Sam Lord Flavinのポートフォリオでは、実験的なデザインを試みています。このサイトは彼の主な3つのスキルセットを示す目的で使われているようです。アシンメトリーデザインと視差効果(パララックス)が、驚くほど良い効果を生んでいます。 Sam Lord Flavin Villa

Webデザイン

記事を検索

ニュース

インタビュー

テクノロジー

キャリア

お問い合わせ

コードを一切書かずに「Repl-AI」でチャットボットを作成してみた！

目次

Repl-AIとは

準備するもの