- 投稿日：2021-09-13T23:38:53+09:00
html文字列をReactElementに変換する
やりたいこと html文字列をReactElementに変換する． 例えば，"<img src='sample.png'>"という文字列をアプリ上で入力すると画像が表示されるなど． 方法 react-html-parserというライブラリを使う． 実装例 "<img src='sample.png'>"という文字列をReactElementに変換して表示する例 index.tsx import React from "react"; import ReactHtmlParser from "react-html-parser"; const Index: React.VFC = () => { const imgHtml = "<img src='sample.png'>"; return ( <div> {ReactHtmlParser(imgHtml)} </div> ); }; export default Index; 文字列をtextareaに入力し，ReactElementに変換して表示する例（TypeScript） index.tsx import React, { useState } from "react"; import ReactHtmlParser from "react-html-parser"; const Index: React.VFC = () => { const [html, setHtml] = useState<string>(""); return ( <> <div> {ReactHtmlParser(html)} </div> <textarea onChange={(e) => setSlide(e.target.value)} /> </> ); }; export default Index;
- 投稿日：2021-09-13T20:57:11+09:00
高速道路整備の変遷をMapbox GL JSで表示してみました
はじめに 国土数値情報の高速道路時系列データを用いて、高速道路整備の変遷（1962～2020年）をMapbox GL JS（v2）のタイムスライダー機能で表示してみました。 高速道路時系列データは以下の国土数値情報の提供サイトよりgeojsonファイル（令和2年）をダウンロードして使用しています。 https://nlftp.mlit.go.jp/ksj/gml/datalist/KsjTmplt-N06-v1_2.html 背景地図にはMapboxを使用しているため、別途、Mapboxにてアクセストークンの取得及びstyleのURLが必要になります。 アウトプットイメージ 関西の高速道路整備の変遷（1963～2020年）。データの出典は国土数値情報の高速道路時系列データ。関西出身やけど、路線名はよくわからない?♂️MapboxGLJSのタイムスライダーは時系列データを表示する際に便利な機能でごわす??#BuiltWithMapbox #Mapbox #高速道路整備の変遷 pic.twitter.com/z1WXysO0I1— shi_works? (@syanseto) August 23, 2021 ※「高速道路時系列データ」(国土交通省) (https://nlftp.mlit.go.jp/ksj/gml/datalist/KsjTmplt-N06-v1_2.html) を用いて作成 前提条件 高速道路時系列データは令和2年の「N06-20_HighwaySection.geojson」を用いています。 下記のコードでMapboxのアクセストークン、styleのURL及びN06-20_HighwaySection.geojsonのパスを入力してください。 なお、フィルタにはN06-20_HighwaySection.geojsonの属性の「設置期間（開始年）（N06_002）」を用いています。 また、ラベル（高速道路の名称）にはN06-20_HighwaySection.geojsonの属性の「路線名（N06_007）」を用いています。 html、CSS、JavaScript highway_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, #006400, #00ff00); } .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-N06-v1_2.html" target="_blank" rel="noopener"> 国土数値情報, 高速道路時系列データ（国土交通省）</a><br><br> <label id="year_label"></label> <input id="slider" type="range" min="1962" max="2020" step="1" value="1962"> </div> <div class="map-overlay-inner"> <div id="legend" class="legend"> <div class="bar"></div> <div align="center">昔（1962年）← → 最近（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', ['<=', 'N06_002', year]]; // 設置期間（開始年） map.setFilter('highway-lines', filters); map.setFilter('highway-labels', filters); // スライダー表示用ラベル document.getElementById('year_label').textContent = year.toString() + '年'; } map.on('load', () => { // jsonCallback(highway); d3.json( 'N06-20_HighwaySection.geojsonのパスを入力してください', // 例）data/N06-20_HighwaySection.geojson jsonCallback ); }); function jsonCallback(data) { map.addSource('highway', { 'type': 'geojson', 'data': data }); // ライン map.addLayer({ 'id': 'highway-lines', 'type': 'line', 'source': 'highway', 'layout': { 'line-join': 'round', 'line-cap': 'round' }, 'paint': { 'line-color': [ 'interpolate', ['linear'], ['get', 'N06_002'], 1962, '#006400', 2020, '#00ff00' ], 'line-width': 7, 'line-opacity': 0.5 } }); // ラベル（高速道路の名称） map.addLayer({ 'id': 'highway-labels', 'type': 'symbol', 'source': 'highway', 'layout': { 'text-field': ['concat', ['to-string', ['get', 'N06_007']]], 'text-font': ['Open Sans Bold', 'Arial Unicode MS Bold'], 'text-size': 12 }, 'paint': { 'text-color': 'rgba(0,0,0,0.5)' } }); // フィルター実行 filterBy(1962); // 初期表示 document.getElementById('slider').addEventListener('input', (e) => { const year = parseInt(e.target.value, 10); // スライダーで選択した年次を整数化 filterBy(year); }); } </script> </body> </html> 参考文献
- 投稿日：2021-09-13T04:08:11+09:00
HTML Thymeleaf メモ
thymeleatの宣言 <html xmlns:th="http://www.thymeleaf.org"> テキストにリンクを貼る <a th:href="@{/shopping_list}">買い物リスト</a> ボタンを押して入力フォームをPOST <div th:object="${inputHogeForm}"> <form method="post" th:action="@{/inputHoge}"> <input type="text" th:field="*{name}"/> <input type="submit" value="トップページ"/> </form> </div> うまくいかないときの☑ポイント ☑ポイント 解説 「get」と「post」を間違っていないか 「th」がついているか th:objectth:actionth:field 「$」と「@」間違えていないか "${inputHogeForm}""@{/inputHoge}" 「""」や「*」が抜けていないか "${inputHogeForm}""@{/inputHoge}""*{name}" th:if= true or false 記述メモ 用途 記述例 意味 == th:if="\${a.name}==${b.name}" a.name=b.name null th:if="${a.name}!=null" a.nameがnullじゃないなら sample.thtml <div th:if="${a.name} neq ${b.name}" th:text="${'a<>bです。'}"></div> sample2.thtml <div th:if="${a.name} == ${b.name}"> <!--trueなら実行--> <!--falseなら実行されない--> </div> (参考) https://itsakura.com/thymeleaf-if-loop タグ 改行 大別 備考 <p> あり ブロック要素 Paragraphの略。段落を表す。文章の前後に余白ができる。 <div> あり ブロック要素 divisionの略。 <span> なし インライン要素 囲った範囲のスタイルを変更する等の使い方をする。 選択肢 select <select name="sample" id="sample-select"> <option value="">--オプションの選択--</option> <option value="red">赤</option> <option value="blue">青</option> </select> テキストボックスに薄いグレーのテキスト <input type="text" value="" placeholder="表示させたいテキストを記述" >