20210915のCSSに関する記事は4件です。

日本の旅客鉄道の変遷をMapbox GL JSで表示してみました

はじめに 国土数値情報の鉄道時系列データを用いて、日本の旅客鉄道の変遷(1950~2020年)をMapbox GL JS(v2)のタイムスライダー機能で表示してみました。 鉄道時系列データは以下の国土数値情報の提供サイトよりgeojsonファイル(令和2年)をダウンロードして使用しています。 https://nlftp.mlit.go.jp/ksj/gml/datalist/KsjTmplt-N05-v1_3.html 背景地図にはMapboxを使用しているため、別途、Mapboxにてアクセストークンの取得及びstyleのURLが必要になります。 ★★★↓高速道路バージョンはこちらの記事を参照願います。★★★ 高速道路整備の変遷をMapbox GL JSで表示してみました アウトプットイメージ MapboxGLJSで変遷シリーズ?の鉄道バージョンを作成。首都圏の旅客鉄道の変遷。データの出典は国土数値情報の鉄道時系列データ。70年くらいのスパンで見ると、1950年の東京の鉄道網は現在と大きく異なることがわかる?鉄道の場合は見せ方の工夫が必要かな(事業者別など)?#Mapbox #旅客鉄道の変遷 pic.twitter.com/YEgmv2C7hw— shi_works? (@syanseto) August 22, 2021 ※「鉄道時系列データ」(国土交通省) (https://nlftp.mlit.go.jp/ksj/gml/datalist/KsjTmplt-N05-v1_3.html) を用いて作成 前提条件 鉄道時系列データは令和2年の「N05-20_RailroadSection2.geojson」を用いています※。 ※ただし、フィルタで使用する、geojsonファイルの属性(設置期間(設置開始)(N05_005b)と設置期間(設置終了)(N05_005e))が文字列のため、あらかじめQGIS等で整数に変換したものを用いています。 下記のコードでMapboxのアクセストークン、styleのURL及びN06-20_HighwaySection.geojsonのパスを入力してください。 なお、フィルタにはN05-20_RailroadSection2.geojsonの属性の「設置期間(設置開始)(N05_005b)」と「設置期間(設置終了)(N05_005e)」を用いています。 また、ラベル(鉄道路線の名称)にはN05-20_RailroadSection2.geojsonの属性の「路線名(N05_002)」を用いています。 html、CSS、JavaScript Railway_transition.html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>日本の鉄道路線の変遷</title> <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no"> <link href="https://api.mapbox.com/mapbox-gl-js/v2.4.1/mapbox-gl.css" rel="stylesheet"> <script src="https://api.mapbox.com/mapbox-gl-js/v2.4.1/mapbox-gl.js"></script> <style> body { margin: 0; padding: 0; } #map { position: absolute; top: 0; bottom: 0; width: 100%; } </style> </head> <body> <style> .map-overlay { font: 18px/20px 'Helvetica Neue', Arial, Helvetica, sans-serif; position: absolute; width: 25%; top: 0; left: 0; padding: 10px; } .map-overlay .map-overlay-inner { background-color: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2); border-radius: 3px; padding: 10px; margin-bottom: 10px; } .map-overlay h2 { line-height: 24px; display: block; margin: 0 0 10px; } .map-overlay .legend .bar { height: 10px; width: 100%; background: linear-gradient(to right, #00008b, #00ffff); } .map-overlay input { background-color: transparent; display: inline-block; width: 100%; position: relative; margin: 0; cursor: ew-resize; } </style> <div id="map"></div> <div class="map-overlay top"> <div class="map-overlay-inner"> <h1>日本の旅客鉄道の変遷</h1> 使用データ:<br> <a href="https://nlftp.mlit.go.jp/ksj/gml/datalist/KsjTmplt-N05-v1_3.html" target="_blank" rel="noopener"> 国土数値情報, 鉄道時系列データ(国土交通省)</a><br><br> <label id="year_label"></label> <input id="slider" type="range" min="1950" max="2020" step="1" value="1950"> </div> <div class="map-overlay-inner"> <div id="legend" class="legend"> <div class="bar"></div> <div align="center">昔(1950年)← → 最近(2020年)</div> </div> </div> </div> <script src="https://d3js.org/d3.v3.min.js" charset="utf-8"></script> <script> mapboxgl.accessToken = 'Mapboxのアクセストークンを入力してください'; const map = new mapboxgl.Map({ container: 'map', style: 'styleのURLを入力してください', // 例)mapbox://styles/mapbox/satellite-v9 center: [139.7527995, 35.685175], zoom: 8 }); // ズーム・回転 map.addControl(new mapboxgl.NavigationControl()); // フルスクリーンモードのオンオフ map.addControl(new mapboxgl.FullscreenControl()); // スケール表示 map.addControl(new mapboxgl.ScaleControl({ maxWidth: 200, unit: 'metric' })); function filterBy(year) { const filters = ['all', ['<=', 'N05_005b_int', year], ['>=', 'N05_005e_int', year]]; map.setFilter('railway-lines', filters); map.setFilter('railway-labels', filters); // スライダー表示用ラベル document.getElementById('year_label').textContent = year.toString() + '年'; } map.on('load', () => { // jsonCallback(highway); d3.json( 'N05-20_RailroadSection2.geojsonのパスを入力してください', // 例)data/N05-20_RailroadSection2.geojson jsonCallback ); }); function jsonCallback(data) { map.addSource('railway', { 'type': 'geojson', 'data': data }); // ライン map.addLayer({ 'id': 'railway-lines', 'type': 'line', 'source': 'railway', 'layout': { 'line-join': 'round', 'line-cap': 'round' }, 'paint': { 'line-color': [ 'interpolate', ['linear'], ['get', 'N05_005b_int'], 1950, '#00008b', 2020, '#00ffff' ], 'line-width': 5, 'line-opacity': 0.7 } }); // ラベル(鉄道路線の名称) map.addLayer({ 'id': 'railway-labels', 'type': 'symbol', 'source': 'railway', 'layout': { 'text-field': ['concat', ['to-string', ['get', 'N05_002']]], 'text-font': ['Open Sans Bold', 'Arial Unicode MS Bold'], 'text-size': 12 }, 'paint': { 'text-color': 'rgba(0,0,0,0.5)' } }); // フィルター実行 filterBy(1950); // 初期表示 document.getElementById('slider').addEventListener('input', (e) => { const year = parseInt(e.target.value, 10); // スライダーで選択した年次を整数化 filterBy(year); }); } </script> </body> </html> 参考文献
  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

SpringBootでCSSを使用する方法

CSSフォルダの配置場所 resourcesフォルダ>staticフォルダの配下にCSS等のフォルダを作成し、その中に配置する。 Thymeleafから参照する方法 <head> <!--中略--> <link th:href="@{/css/hoge.css}" rel="stylesheet" type="text/css"> <!--中略--> </head> 要素 説明 <link> 外部のスタイルシートを読み込むことができる。この要素はhead要素の中で使用する。 rel relationの略。外部のスタイルシートを読む場合は"stylesheet"を指定。 th: Thymeleafのth:href属性で参照したいファイルを指定する。@{/}と記述することでstaticディレクトリのルートからのパスを指定することができる。 type "text/css"。CSSのMIMEタイプを指定 MIMEタイプ ファイルの種類を指定する情報 BootStrapを使用する場合 <head> <!--中略--> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"> <!--中略--> </head> 同じ要素内にクラス名を複数指定していて、その全てに同じCSSを適用する場合 その複数指定している全てのクラス名に同じCSSを適用させる場合は、半角スペースで区切らずにセレクタを繋げて記述します。https://ooigawa-bitter-sweet.hatenablog.com/entry/2013/07/10/233000_1 html記述方法 <div class="sample1 sample2"> <p class="sample3">サンプルテキスト</p> </div>
  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

BotUIを使ってチャットボットを開発してみた

はじめに はじめまして! t_powerです。 本記事では、社内FAQをBotUIでチャットボット化した話を扱います。 プログラミング知識があまりない・・・ チャットボットを作ってみたいけど難しそう・・・ と思っている人にはぴったりのツールだと思うので、是非ご覧ください! 今回作成する上で下記のサイトを参考にさせていただきました。 この記事を見て実際に作ろうと思っている方はこちらも参考にしてください。 1. JavaScriptだけで本格的なチャットボットを開発できるライブラリ「BotUI」を使ってみた! 2. チャットボットを作ろう:2. JekyllサイトでBotUI 今回作成したもの 「はじめる」と書かれているバナーからチャットボットを使うことができます。 作ろうと思った経緯 before 従来は、問い合わせをメールなどで受け付けて、担当者が直接回答をしていました。 類似の問い合わせも多く、担当者の負担になっていました。 after それなら・・・ AIが流行っているし、問い合わせ対応をチャットボット化すればいいじゃないか! という流れになり、チャットボットを開発することになりました。 BotUIとは チャットボットのUIを構築するためのJavaScriptフレームワーク。直観的なJavaScript APIを使用して、メッセージを追加し、ユーザーが実行できるアクションを表示できる。 (出典: BotUI公式ドキュメント) 要するに、これを使えば、簡単にチャットボットが作れるよ~ってわけです! チャットボットは大きく分けるとシナリオ型とAI型(人工知能型)の2種類存在していて、BotUIは、シナリオ型を簡単に作ることが出来るフレームワークになっています。 ※シナリオ型とAI型の違いについてはこちらをご覧ください シナリオ型・AI型のチャットボットを比較~導入メリットとシナリオ作成のコツ チャットボット用のフレームワークやライブラリはたくさんあるようですが、今回はBotUIが適していそうだったので、こちらを採用しました。 事前準備 作業環境 OS: Windows10 テキストエディタ: Visual Studio Code ブラウザ: Microsoft Edge フォルダ構成 css/botui-theme-default.css 独自のテーマを作成することができるファイル(デザインの変更はこちらのファイルがメイン) css/botui.min.css 基本レイアウトを設定しているファイル(あまり書き換える必要ない) ※CSSファイルはCDN経由で読み込んでもよいのですが、今回はデザインを変更したかったため、GitHubからダウンロードしました ※とにかく動くチャットボットをはやく作りたい!デザインなんてどうでもいい!という方はダウンロードする必要はございません images/sample.png BOT側のアイコン ※もしアイコンを表示させたい場合は、こちらの任意の画像と、botui.min.cssをダウンロードして、書き換える必要があります(無くてもチャットボットは動きます) bot/index.html チャットボットを表示させるファイル bot/answer.js 質問に対する回答をまとめたファイル bot/bot.js BotUIを使ってシナリオを構成するファイル 基本的な使い方 index.html index.html <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>チャットボット</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="../css/botui-theme-default.css" /> <link rel="stylesheet" href="../css/botui.min.css" /> <!-- link rel="stylesheet" href="https://unpkg.com/botui/build/botui.min.css" / --> <!-- link rel="stylesheet" href="https://unpkg.com/botui/build/botui-theme-default.css" / --> </head> <body> <div id="botui-app" style="white-space:pre-wrap; word-wrap:break-word;"> <bot-ui></bot-ui> </div> <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.0.5/vue.min.js"></script> <script src="https://unpkg.com/botui/build/botui.min.js"></script> <script src="./answer.js"></script> <script src="./bot.js"></script> </body> </html> index.htmlは上記のコードをそのままコピペでOKです。 (デザインにこだわらない人は<!--link rel="stylesheet" href="https://unpkg.com/botui/build/botui.min.css" />と<!-- link rel="stylesheet" href="https://unpkg.com/botui/build/botui-theme-default.css" / --> のコメントを外して、お使いください) また、Bootstrapを導入して、スマホ、PC対応のレスポンシブな画面にしてもよいかもしれません。 style="white-space:pre-wrap; word-wrap:break-word;"について CDN経由で読み込んでいるVue.jsのバージョンがなぜ最新バージョンではないのか 上記2点は苦戦した点にて記載しています。 bot.js bot.js var botui = new BotUI('botui-app'); var Photo = '../images/sample.png' //初期メッセージ botui.message.add({ photo: Photo, content: 'チャットボットです', delay: 1000 }).then(showQuestions); //質問の選択肢を表示する関数 function showQuestions(){ botui.message.add({ photo: Photo, content: '質問をお選びください', delay: 1000 }).then(function(){ return botui.action.button({ autoHide: false, delay: 1000, action: [ {icon: 'sticky-note-o', text: '採用', value: 'recruitment'}, {icon: 'user', text: '新入社員', value: 'newEmployee'}, {icon: 'ellipsis-h', text: 'その他', value: 'other'}] }); }).then(function(res){ botui.action.hide(); switch(res.value){ case 'recruitment': showRecruitment(); break; case 'newEmployee': showNewEmployee(); break; case 'other': showOther(); break; default: end(); } }); } //採用カテゴリの質問の選択肢を表示する関数 function showRecruitment(){ botui.message.add({ photo: Photo, delay: 1000, content: '当てはまるものをお選びください' }).then(function(){ //ボタンを表示 return botui.action.button({ autoHide: false, delay: 1000, action: [ {icon: 'circle', text: '一次面接と最終面接の違い', value: 'interviewDifference'}, {icon: 'circle', text: '筆記試験の合格基準を教えていただけないでしょうか', value: 'successCriteria'}, {icon: 'long-arrow-left', text: '1つ戻る', value: 'return'}] }); }).then(function(res){ botui.action.hide(); switch(res.value){ case 'interviewDifference': showInterviewDifference(); break; case 'successCriteria': showSuccessCriteria(); break; case 'return': showQuestions(); break; default: end(); } }); } function showInterviewDifference(){ botui.message.add({ photo: Photo, delay: 1000, content: ansInterviewDifference }).then(askEnd); } /* 省略 */ //プログラムを終了するか聞く関数 function askEnd(){ botui.message.add({ photo: Photo, delay: 2000, content: '他に質問はありますか' }).then(function(){ return botui.action.button({ delay: 1500, action: [ {icon: 'circle-o', text: 'はい', value: true}, {icon: 'close', text: 'いいえ', value: false}] }); }).then(function(res){ res.value ? showQuestions() : end(); }); } //プログラムを終了する関数 function end(){ botui.message.add({ photo: Photo, delay: 1500, content: ansEnd }) } 今回作成したシナリオはこのような構成です。 (上記のコードには記載していませんが、「新入社員」、「その他」についても、「採用」と同様に作りました) bot.jsもphotoのパス指定だけ気を付ければ、コピペで問題ないです。 今回使用したメソッドやオブジェクトについて説明します。 method 名前 説明 botui.message.add 新規メッセージを追加する botui.action.button ボタンを表示する botui.action.hide アクションを非表示にする action object 名前 説明 autoHide 自動的に非表示になるのを防ぐ botui.action.hide()と一緒に使い、これが呼び出されたときにボタンを消す action 今回はbutton objectのicon、text、valueでそれぞれ、ボタンのアイコン、表示させる文、値を設定できる また、iconはFontAwesomeを利用している botui.action.button()などと一緒に使う message object 名前 説明 photo 画像のパスを指定して、アイコンを指定 content 表示されるメッセージを指定 delay 表示されるまでの秒数を設定できる ※ミリ秒単位なので、1000は1秒にあたる 他のメソッドやオブジェクトに関してはこちらをご覧ください。 bot.js }).then(function(res){ botui.action.hide(); switch(res.value){ case 'recruitment': showRecruitment(); break; case 'newEmployee': showNewEmployee(); break; case 'other': showOther(); break; default: end(); } }); 選択した項目からチャットを進めていくために、switch文で条件分岐させ、選択したボタンのvalueをresで取得し、それに合った関数を呼び出しています。 bot.js //プログラムを終了するか聞く関数 function askEnd(){ botui.message.add({ photo: Photo, delay: 2000, content: '他に質問はありますか' }).then(function(){ return botui.action.button({ delay: 1500, action: [ {icon: 'circle-o', text: 'はい', value: true}, {icon: 'close', text: 'いいえ', value: false}] }); }).then(function(res){ res.value ? showQuestions() : end(); }); } プログラムを終了するか聞く関数のaskEnd()では、「はい」か「いいえ」の2択しかないため、3項演算子を使用して分岐させています。 ?の左側res.valueがtrueならshowQuestions()、falseならend()を呼び出します。 answer.js 回答メッセージの変数をまとめたファイルです。 後で、回答メッセージをDBから取得するように改修する予定なので、一旦別ファイルに分けて宣言をしています。 answer.js var ansInterviewDifference = `一次面接は採用担当が実施します。 最終面接は社長が実施します。` /* 省略 */ var ansEnd = `ご利用いただきありがとうございました。 [TOPページへ戻る](http://xxx.xxx.xx.xxx)` このように、質問に対する回答をまとめています。 また、表示させるメッセージについては、`(バッククォート)で囲むことで、実際にファイルに記載したようにメッセージボックスにも表示されるようになります。 [TOPページへ戻る](http://xxx.xxx.xx.xxx)については、苦戦した点にて記載します。 index.html <script src="./answer.js"></script> <script src="./bot.js"></script> 今回のように別のjsファイルに質問に対する回答をまとめる場合、index.htmlで先に回答ファイルanswer.jsを読み込む必要があるので注意! 苦戦した点 指定した場所で改行できない index.html <div class="container" id="botui-app" style="white-space:pre-wrap; word-wrap:break-word;"> answer.js var ansEnd = `ご利用いただきありがとうございました。 [TOPページへ戻る](http://xxx.xxx.xx.xxx)` メッセージ内で\nや\r\nなどの改行コードを試してもうまくいかず・・・ 色々調べてみると・・・ Vue.jsで文字列を改行する場合 style="white-space:pre-wrap; word-wrap:break-word;" bot-uiタグが囲まれているdivタグの中にこれを記載し、先ほどanswer.jsで紹介したメッセージの内容を`(バッククォート)で囲む必要があるみたいです。 参考記事 Vue.jsでdataの文字列を改行したい HTMLクイックリファレンス white-space HTMLクイックリファレンス word-wrap リンク化できない index.html <!-- これだとリンク化できない --> <script src="https://cdn.jsdelivr.net/vue/latest/vue.min.js"></script> <!-- 2.0.5にすることでリンク化できる --> <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.0.5/vue.min.js"></script> 公式ガイドに記載されている通り、Vue.jsの最新バージョンをCDN経由で読み込んでいました。しかし、その場合URLの後に別のメッセージが表示されると、リンク化されなくなってしまうみたいです。 この問題を解決するためには、Vue.jsのバージョンを2.0.5に落とすことで、どのような状況でもリンク化されるようになります。 参考記事 URL loses its markup in javascript framework (BotUI) URLを新規タブで展開できない answer.js var ansEnd = `ご利用いただきありがとうございました。 [TOPページへ戻る](http://xxx.xxx.xx.xxx)` [表示文字](URL)で指定すると、同じタブで画面が切り替わってしまって、チャットボットが閉じてしまいます。 answer.js var newline = `[BotUI 公式マニュアル](https://docs.botui.org/index.html)^` 新規タブで展開するには、カッコの後ろに^(キャレット)を付けることで解決できました。 デザイン 今回デザインを変更するために、GitHubからダウンロードして読み込んだ、 botui.theme-default.cssとbotui.min.cssで重要だと思った点を紹介します。 botui.theme-default.css .botui-cotainer botui-theme-default.css .botui-container{ font-size:14px; background-color:#fff; font-family:"Open Sans",sans-serif } font-size メッセージの文字やボタンの文字の大きさを指定 background-color チャット背景色を指定 font-family フォントを指定(フォントファミリーと総称フォントの2つがある) .botui-messages-container botui-theme-default.css .botui-messages-container{ padding:10px 20px } padding メッセージのパディングを指定 .botui-actions-container botui-theme-default.css .botui-actions-container{ padding:0px 20px } padding アクション(今回はボタン)のパディングを指定 .botui-message botui-theme-default.css .botui-message{ min-height:30px } min-height メッセージ間の最小幅を指定 .botui-message-content botui-theme-default.css .botui-message-content{ padding:7px 13px; border-radius:15px; color:#000000; background-color:#8bf8f8 } padding メッセージ領域内のパディングを指定 color BOT側(左側)に表示されるメッセージの色を指定 background-color BOT側(左側)に表示されるメッセージ領域内の背景色を指定 ※border-radiusは外枠の丸み具合を変更するプロパティだが、ここで値を変更しても変わりませんでした(メッセージの要素内を変更するプロパティだから効かない?) .botui-message-content.human botui-theme-default.css .botui-message-content.human{ color:#000000; background-color:#f8ddaa } color 人間側(右側)に表示されるメッセージの色を指定 background-color 人間側(右側)に表示されるメッセージ領域内の背景色を指定 .botui-message-content.text botui-theme-default.css .botui-message-content.text{ line-height:150% } line-height メッセージ領域内の行間の高さを指定 .botui-message-content.embed botui-theme-default.css .botui-message-content.embed{ padding:5px; border-radius:5px } padding 動画のパディングを指定 border-radius 外枠の丸みを指定 .botui-message-content-link botui-theme-default.css .botui-message-content-link{ color:#1A0DAB } color リンクの色を指定 .botui-actions-buttons-button botui-theme-default.css .botui-actions-buttons-button{ border:1; color:#fff; line-height:1; cursor:pointer; font-size:14px; font-weight:normal; padding:10px 20px; border-radius:4px; font-family:"Open Sans",sans-serif; background:#777979; box-shadow:2px 3px 4px 0 rgba(0,0,0,.25) } cursor ボタンにカーソルを合わせたときの種類を指定 font-weight ボタンの文字の太さを指定 botui.min.css .botui-message-content botui.min.css .botui-message-content{ width:auto; max-width:80%; display:inline-block } max-width メッセージボックスの幅を指定 .profil botui.min.css .profil{ position:relative; top: -10px; border-radius:50% } top 基準の位置からどれくらい上に動かすかを指定 ※元々topプロパティは無かったが、アイコンを大きくしたらズレてしまったので、追記して丁度いい位置にくるように指定しました .profil>img botui.min.css .profil>img{ width:50px; height:50px; border:2px solid #e8e8e8 } width アイコン画像の幅を指定 height アイコン画像の高さを指定 .profil>img.agent botui.min.css .profil>img.agent{ /*初期設定だと変な画像になっているため、削除推奨 content:url(http://decodemoji.com/img/logos/blue_moji_hat.svg); */ border-radius:50% } content ここで画像指定していると、photoで表示したい画像を選んでもBOT側のアイコンは強制的にここで設定している画像になるため、削除推奨 おまけ YouTube動画の埋め込み方 今回作成したチャットボットでは使用していませんが、試したので記載します。 bot.js botui.message.add({ type: 'embed', content: 'https://www.youtube.com/embed/1oSeywNsjak', delay: 1000 }).then(showQuestions); YouTubeの動画を埋め込む際に注意する必要があります。 embedは外部要求を許可しているが、watchは許可していないため、URLを書き換える必要があります。 × https://www.youtube.com/watch?v=1oSeywNsjak ○ https://www.youtube.com/embed/1oSeywNsjak 参考記事 youtube html 埋め込み おわりに JavaScript初心者でも、BotUIを使うことで、簡単にシナリオ型のチャットボットを作ることが出来ました。 直観的に操作することが出来るので、プログラミングがよくわからなくても、それっぽいものを作れてしまうのが、BotUIのいいところだと思いました。 しかし、数が増えるとボタンも増える(分岐が増えてしまう)ため、見栄えがとても悪くなってしまいます。そのため、今後はAI型にシフトさせるなどの対策が必要だと思いました。 最後まで読んでいただき、ありがとうございました
  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

GoogleフォームをカスタマイズしてHPに埋め込む【こまりメモ】

こんにちは。 こまりまゆこです。 自分が学習したことを載せています。 「Googleフォームを自分でカスタマイズしてHPに埋め込もう」 【主な内容】 ・Googleフォームをとは? ・土台となるフォームの作り方 ・カスタムに必要な数字とURL ・完成形 Googleフォームとは? 一言でいうと、アンケートや問い合わせフォームを簡単に作れるGoogleのサービス。 誰でも無料で使えるのも人気な点で様々な場面で使用されている。 回答も集計してくれるなど大変使いやすい。 https://www.google.com/intl/ja_jp/forms/about/ 実際にフォームを作ってみよう ①「Googleフォームを作ってみる」から入る ②作りたいフォームを選ぶ(今回は連絡先情報を選択) ③フォームの項目を作る 「連絡先情報」を選択した場合は 名前 / メールアドレス / 住所 / 電話番号 / コメントの項目が既に入っている。 必要ない項目⇒ゴミ箱(赤丸)で削除 項目を追加したい⇒+ボタン(青丸)で追加 右下の必須をONにすると必須項目となる。 基本的には「記述式」がよく使用されているが、「ラジオボタン」も入れてみる。 ④フォームの完成形はこちら https://forms.gle/iWHr1ijVq735uNjf6 ※チェックしておくと良い事※ Googleフォーム設定の回答⇒「回答を一回に制限する」をONにすると何回も回答されることを防げる。 逆に何回も回答してOKなフォームにする場合、元々設定がONになっている事があるので、念のため確認しておくと良い カスタムに必要な数字とURL ①まずは必要な数字を探します。 デベロッパーツールを開き「名前」を検索(CTRL+F)。 ②3箇所くらいヒットする中のここの部分を見つける →ここというのは項目名が大体載ってる箇所 ③すべての項目の数字をメモ [[1987654320,"名前",null,0,[[123456789,nill,1]]] 前の部分の数字ではなく赤文字の部分の数字なので要注意! ④URLはデベロッパーツールで「<form」と検索 下記の部分をメモにコピペしておく。 「<form action="https://docs.google.com/forms/u/0/d/e/●●----------------●●" target="_self"」 フォームをカスタムしていく 記載されてるHTMLは自分が使用しているものなのでカスタムしてください。 (必須のところやボタン箇所) ①フォームコード1行目 メモしていたURLを入力。 index.html <form action="https://docs.google.com/forms/u/0/d/e/●●----省略----●●/formResponse" target="_self"> ②2行目から メモした番号を「entry.番号」の「番号」に入れていく。 ※性別の所だけに箇所番号があるが同じものを入れる。 コードの色付きがバラバラで見づらい為コピペして見てください index.html <ul> <li>お名前<span>※必須</span> <input name="entry.番号" type="text" required="required" class="textbox" placeholder="お名前"> </li> <li>メールアドレス <span>※必須</span> <input name="entry.番号" type="text" required="required" class="textbox" placeholder="メールアドレス"> </li> <li>電話番号 <span>※必須</span> <input name="entry.番号" type="text" required="required" class="textbox" placeholder="電話番号"> </li> <li>性別 <span>※必須</span></li> <label><input type="radio" name="entry.番号" value="男性">男性 </label><label><input type="radio" name="entry.番号" value="女性">女性</label> </li> <li>コメント <textarea name="entry.55207288" class="textbox" placeholder="コメント"></textarea> </li> <input type="submit" id="btn" value="送信する">  </ul> </form> classなどはcssを作る際に使用する部分に入れています。 ③必須項目、コメント欄確認 入力必須にする為のコード ↓ required="required" コメント欄の中に文字を入れる為に使用するコード ↓ placeholder="●●" 入っているか確認。 ④完成形はこちら 凄いシンプルすぎる 全てまとめたコードはこちら <form action="https://docs.google.com/forms/u/0/d/e/●●----省略----●まる/formResponse" target="_self"> <ul> <li>お名前<span>※必須</span> <input name="entry.番号" type="text" required="required" class="textbox" placeholder="お名前"> </li> <li>メールアドレス <span>※必須</span> <input name="entry.番号" type="text" required="required" class="textbox" placeholder="メールアドレス"> </li> <li>電話番号 <span>※必須</span> <input name="entry.番号" type="text" required="required" class="textbox" placeholder="電話番号"> </li> <li>性別 <span>※必須</span></li> <label><input type="radio" name="entry.番号" value="男性">男性 </label><label><input type="radio" name="entry.番号" value="女性">女性</label> </li> <li>コメント <textarea name="entry.55207288" class="textbox" placeholder="コメント"></textarea> </li> <input type="submit" id="btn" value="送信する">  </ul> </form> CSSでカスタマイズ cssで色付けして完成したものがコチラ! CSSはこちら @charset “utf-8”; body{ background-image: url("images/背景.jpg"); background-size:cover; background-repeat: no-repeat; } form { background-color: rgba(255, 255, 255, .8); width: 700px; height: 650px; margin: 100px auto; padding: 20px 40px 20px 0; } h1 { text-align: center; } ul { list-style-type: none } li { margin: 15px 0; } p { font-weight: bold; } span { background-color: rgba(255, 102, 102, .5); font-size: 10px; border-radius: 5px; padding: 3px; } .textbox{ display: block; padding: 10px 0 10px 10px; width: 640px; } label { padding-right: 10px; } #btn { border: 1px solid #000; background-color: rgba(133, 198, 181, .3); border-radius: 5px; padding: 10px 20px; margin: 10px 0 0 40px; font-weight: bold } ※レスポンシブデザインではない為ご自身で自由に編集してください 背景も画像になってますが色でもOK。 上記の手順で完成となります! 最後に 次回は送信を押したときのサンクスページの追加方法です! メモを載せていますがどなたかの参考になれば嬉しいです
  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む