- 投稿日：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-13T20:18:20+09:00
あなたのプロジェクトを煌やかにするアニメーションライブラリ18選
Original article: https://dev.to/kerthin/18-amazing-github-repositories-that-will-help-you-make-a-beautiful-project-3pgo 以下はRoden( Twitter / GitHub / Webサイト )によるアニメーションライブラリ紹介記事、18 amazing ? GitHub repositories that will help you ? make a Beautiful Projectの日本語訳です。 help youの後の文字はPC版Chromeだと見えなかった。スマホ版では見れる。 元記事はリポジトリへのリンクだけというのも幾つかあるので、適当に解説を加えています。 18 amazing ? GitHub repositories that will help you ? make a Beautiful Project Introduction 複雑なアニメーションや便利な機能をあなたのプロジェクトに導入するために、今役に立つ優れたGitHubリポジトリを紹介します。 それではさっそく始めていきましょう。 1. Lottie-Web/Bodymovin 最初は私お気に入りのリポジトリです。 このライブラリを使うと、Adobe After Effectsで作成したアニメーションをそのままWebサイトに出力することができます。 2. Parallax.js マウスで操作できる美しい視覚効果を演出することができます。 さらにオブジェクトの移動速度を調整することもできます。 3. Flat Surface Shader [FSS] ランバート反射モデルを使い、光源を反映するタイル背景を生成します。 デモサイト。 4. Hover.css ボタンなどにマウスを乗せたときに起こせるホバーエフェクトのコレクションです。 デモサイト。 5. Video.js Markers 動画のプログレスバーにマーカーを表示して注目させることができます。 6. Magic Grid ダイナミックなグリッドレイアウトを作成できます。 いちいち@mediaを書く必要もなく、コンテナを指定するだけで全てが終わります。 7. Vue/React Content Loader https://github.com/egoist/vue-content-loader https://github.com/danilowoz/react-content-loader Facebookカードのようなローディング画面を簡単に作成できます。 8. React Image Gallery イメージギャラリーやカルーセルを表示させるReactコンポーネントです。 デモサイト。 9. WebSlides Webサイトをスライド表示にできるライブラリです。 デモサイト。 10. SVG.js JavaScriptで簡単にSVGを操作、アニメーションさせることができるライブラリです。 サンプル 11. React Motion UIに剛性と減衰を指定するだけで勝手にアニメーションしてくれるライブラリ。 React TransitionGroupのより強力な代替にもなります。 サンプル。 12. RELLAX 簡単にパララックスを再現できる軽量ライブラリ。 デモサイト。 13. Dynamics.js 物理ベースのアニメーションを作成できるライブラリ。 デモサイト。 14. mo · js ゼロからアニメーションを始めるための組込コンポーネントとツールを提供します。 デモサイト。 See the Pen ·● MOTION for the web ●· by LegoMushroom (@sol0mka) on CodePen. See the Pen ·•● Bubble • Layout ●•· by LegoMushroom (@sol0mka) on CodePen. 15. Reveal.js HTMLでプレゼンテーションを作成するフレームワーク。 Markdownサポート、LaTeXサポート、シンタックスハイライト、PDFエクスポートなど幅広い機能が搭載されています。 デモサイト。 16. Animsition ページ遷移のCSSアニメーションに特化した、シンプルなjQueryプラグイン。 デモサイト。 17. SVG Mesh 3d SVGを三角形に分割します。 デモサイト。 18. Zdog 非常に簡単に、疑似3D要素をつくることのできるライブラリです。 また数学的知識なしに幾何学的形状をつくることができます。 デモサイト See the Pen Zdog - Happy town by Dave DeSandro (@desandro) on CodePen. See the Pen Zdog - Little forest by Dave DeSandro (@desandro) on CodePen. See the Pen Flamingo (ZDog + GSAP) by ChenXin_nth (@chenxinnn) on CodePen. See the Pen Zdog Draggable Monument Valley Totem by Gabrielle Wee ? (@gabriellewee) on CodePen. The End ご覧いただきありがとうございます。 あなたが使っているリポジトリもぜひ教えてください。 また、この投稿で紹介したものよりよいものも教えてください。 初級フロントエンドエンジニアは、複雑なタスクは自分で実装せずに、既存のソリューションを使った方がいいとアドバイスしておきます。 そのほうが自分やサードパーティのプロジェクトで問題が発生する可能性が低くなるでしょう。 車輪を再発明する必要はありません。 時々作品を投稿してるから、よかったらTwitterもフォローしてね。 コメント欄 「Cool」 「こいつは素晴らしいコレクション！」 「実用的で便利なまとめありがとう。」 「もう何年も更新されていないような古いプロジェクトは紹介しないでください。」 感想 気楽に使えるアニメーションライブラリ集です。 深く使いこなさなくても、ちょっと置いておくとかでサイトの見た目が華やかになりそうですね。 個人的にはさっさとコンテンツ表示しろ派なのでどうもぴんと来なかったものも多いのですが、まあそういう奴は少数派だろうから気にする必要はないでしょう。 どんどん飾り立ててみましょう。 それにしてもZdogとかすごいね。 色々プラグインもあってなんだかんだと遊び甲斐がありそうです。