誰でもチャットボットが作れる時代に！コーディング一切なしでチャットボットが完成する「Botsify」

facebook messengerを利用して、誰でもチャットボットを作れるツール「Botsify」を紹介します。一切コーディングをする必要がないので、誰でも作成できてしまいます。ぜひ自分のチャットbotを作ってみては！

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

facebook messengerを利用して、誰でもチャットボットを作れるツール「Botsify」を紹介します。

最近、「チャットボット」というキーワードが非常に注目されていますよね。ボット(bot)というのは、ロボットの略称で自動送信をするプログラムのことを言います。

LINEの「りんな」がチャットボットとして有名なサービスの一つとなっています。

今までは、LINEやFacebookでチャットボットを提供することはできますが、基本的には開発者が自分でプログラムを書く必要がありました。今回紹介する「Botsify」は、コーディング一切せずにチャットボットを作成することができてしまうのです。

海外のサービスのため英語ではありますが、まずはサンプルのチャットボットを体験してみてください。

@listと入力すると、食べ物のメニュー出てきますね。

チャットボットを作成する流れは、動画をご覧ください。

18分程度の動画なので、初めの設定に少し時間がかかるかと思いますが、一度作ってしまえば誰でも簡単に作れます。

簡単な手順としては、

facebookページの作成
facebookアプリの作成
Botsifyでチャットボットを作成
facebookアプリと連携
チャットボットをリリース

といった流れでmessengerでチャットができるようになります。

今までfacebookページやfacebookアプリを作ったことがないという人でも動画を見ればスムーズに進められるのでご安心を。

管理画面は、以下のようになっておりこの中でチャットボットを作成することができます。

現状まだ実装されていませんが、ユーザーの分析も行えるようになるそうです。

スクリーンショット 2016-05-13 12.00.34

「こんにちは」と言われたら「こんにちは！」と返すように用意するのもチャットするように設定できてしまいます。

スクリーンショット 2016-05-13 11.43.44

ちなみに対応できない言葉に対しては、一律で「すみません分からないです。@listと入力してもらえますか？」と軌道修正させることもできるので、話が合わないタイムラインにはならないはずです。

機械学習するものではないので、自分でカスタマイズする必要がありますが、無理に予測することもありません。

カスタマーサポートでのコミュニケーション、予約や注文が必要なレストラン等で使ってみるのも面白いでしょう。

わざわざ新しいアプリをインストールしなくても、facebook messenger上でチャットができるのであらゆる場面で役に立ちそうです。ぜひBotsifyを使ってチャットを自動化してみましょう！

[お知らせ]TechAcademyでは初心者でも8週間でエンジニアになれるRuby on Railsオンラインブートキャンプを開催しています。自分のアイデアを形にしたいと思っている方はぜひご覧ください！

【プログラミング入門者向け】コンパイラ型言語とは？現役エンジニアが用語解説

コンパイラ言語とは何かについて、TechAcademyのメンター（現役エンジニア）がプログラミング入門者向けに解説します。なお本記事は、TechAcad...

プログラミング

始める前に要チェック！プログラミングで挫折する3つのパターンとその解決方法

プログラミングの勉強を始めたけど、途中で挫折してしまったという経験はないでしょうか。そこで今回はTechAcademyの過去7,000人以上の受講生の事...

プログラミング

福岡のパソコン教室20選｜特徴や料金を表で比較

福岡県中心部や複数教室のある通いやすいパソコンスクールをピックアップしました。田島悠介今回は、なにか相談受けたんだって？ ...

プログラミング

【開発者向け】アップルが発表した「WWDC2017」の振り返りまとめ

本稿は、Erminesoftのブログ記事を了解を得て日本語翻訳し掲載した記事になります。本記事は、Ellina氏によって投稿されました。 &nbs...

プログラミング

「code.9leap.net」をやってみた！ゲームプログラミングを学ぶサイト

最近話題になることが多いオンラインでプログラミングを学べるサービスですが、Webのプログラミングだけにとどまりません。「code.9leap.net（コ...

プログラミング

Macのテキストエディタ「CotEditor」の使い方【初心者向け】

プログラミングに使えるテキストエディタは複数ありますが、今回はMac専用のテキストエディタ「CotEditor」の使い方を初心者向けに紹介します。インス...

プログラミング

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

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

JavaScriptでセレクトボックスの値を動的に生成する方法について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。そもそも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

人気の子ども向けロボットプログラミング教材10選

この記事では、人気の子ども向けロボットプログラミング教材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のテキストボックスから値を取得する方法について解説します。実際のコードをもとに解説していきますので、理解を深めていきましょう。目次テキストボックスとはテキストボックスの値とはテキストボックスの値を取得する方法実際に書いてみよう田島悠介今回は、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

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

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

プログラミングの知識がなくてもチャットボットを作れるサービス「Repl-AI」がリリースされています。 LINEやFacebookメッセンジャーを利用したボットのAPIが公開され、誰でもチャットボットを作成できるサービスがどんどん増えてきています。海外にもBotsifyというチャットサービスがあるので、合わせてご覧ください。今回は実際にRepl-AIを使って、チャットボットを作成してみたいと思います。目次 Repl-AIとは準備するもの実際にチャットボットを作成してみよう Repl-AIとは Repl-AIは、インターメディアプラニング(IPI)とNTTドコモが共同開発し、2016年4月にβ版が公開されました。プログラミングせずにチャットボットを作成するツールは他にもありましたが、ボットの動きをRepl-AI上で行えるので、実行確認をするのに役立つでしょう。実際ボットがしっかり反応しているかといったテストは多くするはずなので、手軽にテストできるのは有難い。 [PR] プログラミングで挫折しない学習方法を動画で公開中準備するもの docomo developer supportアカウント取得 Repl-AIを利用するには、docomo Developer supportアカウントを取得する必要があります。チャットボットを作る前に登録しておきましょう。実際にチャットボットを作成してみようプロジェクトの作成準備が完了したら実際にチャットボットを作ってみましょう。まずはプロジェクトプランの選択をします。そして、プロジェクト名を決めます。今回は私たちが運営しているプログラミングスクール「TechAcademy」という名前をつけています。プロジェクトを作成したら、ボット名とシナリオ名を作ります。上記の画像ではすでに「techacademy」というボットが作成されていますが、スタート時は何もない状態です。新規作成/インポートをクリックし、ボット名を決めましょう。ボットを作成したら、続いてシナリオを作成しましょう。こちらも新規で作成していきます。ボット名同様、シナリオ名を決めて作成するをクリックしましょう。作成すると画像のように「contact」と書かれたシナリオができています。では、実際にチャットボットで必要なシナリオを作成していきます。シナリオ作りシナリオ作成のタイミングで、「挨拶シナリオ」を選択すると以下のような対話シナリオを作成してくれます。このように「◯◯です」と言われたら「〜〜」と返すといった仕組みをプログラミングを一切せずに作ることができます。実際にどんな会話になるのか見てみましょう。「シナリオを保存してデプロイ」をクリックして、保存を完了させましょう。実際の動作確認プロジェクトの一覧画面に戻り「シミュレータ」を開きます。シミュレータを開くとキャラクターが2Dで動きながら待っています。今回はわんころもちというキャラクターと会話をしてみました。きちんと会話になっている部分、対応できるテンプレートがない場合は「NOMATCH」と表示されています。既存のチャットボットサービスは、一つの質問に対して一つの回答しか決められないというものが多かったですが、内容をまとめておくことができます。これは、名前を間違ってしまった際にユーザーが回答する例を追加している項目です。部分一致や曖昧一致といった一字一句合っていなくても会話できるように工夫もされています。まとめ LINEやFacebookメッセンジャーで提供しているチャットボットはビジネスにもなっているくらいです。最終的には人間が行うコミュニケーションはあるものの、ECサイトを運営している会社などはカスタマーサポートの一環としてチャットボットを利用してみても良いでしょう。ハッカソン等でもチャットボットは積極的に利用されているので、今後ますます利用シーンは広がるはずです。ぜひコミュニケーションの自動化、試してみてください。 [お知らせ]TechAcademyでは初心者でも最短4週間でオリジナルサービスが作れるRuby on Railsオンラインブートキャンプを開催しています。

プログラミング

PHPでセレクトボックスから値を受け取る方法を現役エンジニアが解説【初心者向け】

今回は、PHPでセレクトボックスから値を受け取る方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 PHPについてそもそもよく分からないという方は、PHPとは何なのか解説した記事を読むとさらに理解が深まります。なお本記事は、TechAcademyのオンラインブートキャンプ、PHP/Laravel講座の内容をもとに紹介しています。田島悠介今回は、PHPに関する内容だね！大石ゆかりどういう内容でしょうか？田島悠介 PHPでセレクトボックスから値を受け取る方法について詳しく説明していくね！大石ゆかりお願いします！この記事は、HTMLのセレクトボックスで選択された値をPHPプログラムで受け取る方法について記載した記事です。 HTML、PHPのことがまだあまりよく分かっていない方でも理解できる内容になっています。目次セレクトボックスとはセレクトボックスから値を受け取る方法実際に書いてみようまとめセレクトボックスとはセレクトボックスとはHTMLの<select>タグを使用して作成することのできる、選択肢が複数あるプルダウンメニューのことです。 PHPでは、画面のセレクトボックスで選択された値を受け取り、DBにデータを検索・登録・更新・削除などの処理を行うことができます。 [PR] プログラミングで挫折しない学習方法を動画で公開中セレクトボックスから値を受け取る方法セレクトボックスで選択された値をPHPなどのサーバーサイドプログラムで受け取るには、まずセレクトボックスを持つ画面側は、HTMLの<form>タグで<select>タグを囲まなければいけません。 <form>タグで囲まれたHTMLの部品は、入力・送信フォームとなり選択・入力された値をサーバーサイドプログラムに送ることが可能になります。次にPHP側では、<form>タグに記載された、GET・POSTなどのリクエストメソッドに合わせてデータを受け取る「スーパーグローバル変数」が用意されています。 GETリクエストの場合は、スーパーグローバル変数「$_GET[]」を使用して画面のフォームから送信された値を受け取ります。POSTリクエストの場合は、スーパーグローバル変数「$_POST[]」を使用して画面のフォームから送信された値を受け取ります。 2つの変数の[]の部分には、画面側HTML内に記載されたname属性に設定された文字列を渡します。name属性に指定された文字列を指定することで、そこで入力された値を受け取れる仕組みになっています。ちなみにスーパーグローバル変数とはPHPのプログラム内のどこからでも呼び出すことができる、PHPがあらかじめ用意している変数で、$_GET、＄_POSTの他にも様々なスーパーグローバル変数が用意されています。実際に書いてみようそれでは、実際にセレクトボックスで選択された値を、PHPプログラムで受け取る例を見ていきましょう。サンプルコード(index.php)： <?php if(isset($_POST["fruits"])) { // セレクトボックスで選択された値を受け取る $fruit = $_POST["fruits"]; // 受け取った値を画面に出力 echo $fruit; } ?> <!DOCTYPE html> <html> <head> <metacharset = "utf-8"> <title>セレクトボックスの値をPHPで受け取る</title> </head> <body> <h1>セレクトボックスの値を送信</h1> <form action="index.php" method = "POST"> <select name= "fruits"> <option value = "りんご">りんご</option> <option value = "れもん">れもん</option>

PHP

記事を検索

ニュース

インタビュー

テクノロジー

キャリア

お問い合わせ

誰でもチャットボットが作れる時代に！コーディング一切なしでチャットボットが完成する「Botsify」

関連するキーワード

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

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

人気の子ども向けロボットプログラミング教材10選

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

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

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

PHPでセレクトボックスから値を受け取る方法を現役エンジニアが解説【初心者向け】

TechAcademyから
現役エンジニアの方へ
お知らせ

記事を検索

ニュース

インタビュー

テクノロジー

キャリア

お問い合わせ

記事を検索

関連するキーワード

関連する記事

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

TechAcademyから 現役エンジニアの方へ お知らせ

TechAcademyから
現役エンジニアの方へ
お知らせ