- 投稿日：2021-09-15T23:30:42+09:00
【GitHub】静的サイトの公開
はじめに HTMLとCSSだけで静的サイトを作り、それをGitHub Pagesで公開する流れを説明します。 公開手順 1) GitHub公式ページにアクセスし、RepositoriesのNewをクリックします。 2) Repository nameを入力し、Create repositoryをクリックします。 3) 画面遷移したら、Quick setupという項目のところに表示されているURLをコピーしておきます。 4) エディターに戻り、ターミナルもしくはコマンドプロンプトを使い、GitHubにプッシュしていきます。 ターミナルorコマンドプロンプト ①cd 公開したいフォルダ名 ②git init ③git add . ④git commit -m "メッセージ" ⑤git remote add 3)でコピーしたURL ⑥git push -u origin master 5) GitHub公式ページに戻り、作成したリポジトリのページからSettingsをクリックします。 6) 下の方にGitHub Pagesという項目があり、Check it out here!というリンクがあるのでそこをクリックします。 7) Sourceという項目のNoneとなっている部分をBranch:masterに変更し、saveをクリックします。 8) 画面遷移後、Your site is ready to be published at https://アカウント名.github.io/リポジトリ名/と表示されるので、そのリンクをクリックすればWebページが表示されます。 おわりに これはあくまで「静的サイト」の公開なので、その点にはご注意願います。
- 投稿日：2021-09-15T20:53:19+09:00
日本の旅客鉄道の変遷を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> 参考文献
- 投稿日：2021-09-15T18:05:05+09:00
PHP初心者に超オススメのUdemy講座6つを厳選！web入門者必見
この記事では、Udemyのオススメ初心者向けPHP講座を紹介します。 ・未経験だけどwebアプリケーションを作れるようになりたい ・将来的にサーバーサイドエンジニアになりたい ・自分でコードを書くかは未定だけど、ウェブサービスを作って起業したい といった人にオススメできるものをチョイスしました。 PHP+MySQL（MariaDB） Webサーバーサイドプログラミング入門 おすすめ度：★★★ ・PHP+MySQL（MariaDB） Webサーバーサイドプログラミング入門 この講座で学べる内容 ・PHPの基礎知識とMySQL（MariaDB）の基礎が修得できる ・SQLの基礎が修得でき、データベースを利用したプログラムを作成できる ・PHPを利用したプログラムを作成でき、サーバーサイドのWebサービスを開発できる ・データベースと連携した、Webサービスを開発・カスタマイズできるようになる 【PHP, MYSQL, Apache】ガチで学びたい人のためのWEB開発の基礎(バックエンド編) おすすめ度：★★★★★ ・【PHP, MYSQL, Apache】ガチで学びたい人のためのWEB開発の基礎(バックエンド編) この講座で学べる内容 ・どのような技術が組み合わさってWEBシステムが動いているのか、その基礎を体系的に学びます。 ・開発に欠かせないWEBの基礎知識について学びます。 ・PHPの基本的な文法について学びます。 ・開発で頻出する正規表現の使い方について学びます。 ・PHPの名前空間、クラスを使った記法について学びます。 ・データベースの実践的な設計手法について学びます。 ・SQLを使ったデータベースの操作方法について学びます。 ・Apacheの設定方法について学びます。 ・サーバーとブラウザのやり取りを可視化し、その仕組みを学びます。 ・Apacheの設定を通してパフォーマンス改善の基礎を学びます。 【HTML,CSS,JS,PHP,Git,Docker】✅ プログラミング初心者OK！ ゼロからわかるWebシステム開発 おすすめ度：★★★★ ・【HTML,CSS,JS,PHP,Git,Docker】✅ プログラミング初心者OK！ ゼロからわかるWebシステム開発 この講座で学べる内容 ・Webアプリケーションの基礎 ・HTML / CSSを用いた静的なWebページの構築 ・JavaScript を用いたプログラミング入門 ・PHPを用いた動的なWebページの構築 ・ターミナル / コマンド操作の基礎 ・AWS（クラウドコンピューティングサービス）を活用したWebサーバーの構築 ・独自ドメインやSSL/TLSの設定 ・Gitを活用した開発フローの学習 ・Dockerを活用した開発環境の構築 ・プログラミング設計（MVC）/ UnitTest の基礎 PHP 7/8 プログラミング マスター講座 おすすめ度：★★★ ・PHP 7/8 プログラミング マスター講座 この講座で学べる内容 ・PHPを利用したプログラミング開発手法 ・PHP 7以降の新しい言語仕様 ・MAMPを利用したウェブサーバーでの PHP開発手法 ・データベース（MySQL/MariaDB）との連携方法 基礎だけ学ぶ PHPプログラミング講座 おすすめ度：★★★★★ ・基礎だけ学ぶ PHPプログラミング講座 この講座で学べる内容 ・PHPプログラミングの基礎が学べます。 ・Webアプリケーション開発の基礎が学べます。 ・ターミナルでのコマンド操作を学べます。 ・開発環境の作り方など、プログラミングの流れを理解できます。 【3日でできる】はじめてのLinuxサーバー構築入門（CentOS 7・PHP 7・Docker対応） おすすめ度：★★★★★ ・【3日でできる】はじめてのLinuxサーバー構築入門（CentOS 7・PHP 7・Docker対応） この講座で学べる内容 ・さくらのVPS上にCentOS 7をインストールできる ・PHP7で、LAMP環境（Webサーバー）を構築できる ・LAMP環境にWordPressをインストールできる ・DockerでWordPressサイトを作れる Udemy関連記事 ・SQL未経験者にオススメのユーデミー動画講座6選!データ分析したい人向け ・【Python】サーバーサイド初心者にオススメのUdemyのDjango動画講座5選 ・iPhoneアプリ作成入門に最適なUdemyのオススメSwift講座5選 ・【学習効果・高】ブロックチェーン入門に最適なUdemy講座おすすめ6選 ・Typescript入門におすすめのユーデミー講座5選。JS未経験者も可
- 投稿日：2021-09-15T00:24:05+09:00
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は自分が使用しているものなのでカスタムしてください。 (必須のところやボタン箇所) ①フォームコード１行目 メモしていたURLを入力。 index.html <form action="https://docs.google.com/forms/u/0/d/e/●●----省略----●●/formResponse" target="_self"> ②２行目から メモした番号を「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。 上記の手順で完成となります！ 最後に 次回は送信を押したときのサンクスページの追加方法です！ メモを載せていますがどなたかの参考になれば嬉しいです