山手線を徒歩で一周する人のための記録アプリ「YamaNotes」をリリースしました - すずかのプログラミング勉強記
はじめに 山手線を徒歩で一周する人のための記録アプリ「YamaNotes」をリリースしました。 この記事では「YamaNotes」の使い方や、開発過程で苦労したことなどをまとめます。 6/14追記：東京の気温が高くなることが予想されています。熱中症予防のため、涼しくなってからの挑戦をおすすめします。 サービスURL www.yamanotes.com リポジトリ github.com はじめに 自己紹介 アプリの概要 山手線徒歩一周チャレンジとは？ 使い方 ログインする 初期設定をする 進捗を確認する 到着する 履歴を確認する 開発に至る経緯 技術スタック 技術選定の理由 短期間で必要な機能を作るため、Rails7とHotwireで実装 コストを抑えて作るため、APIやデプロイ先を調査 地図の表示と描画にLeaflet + OpenStreetMapを使用 Render.com + Sup
TSKaigi資料まとめ
非常に学びが多く、刺激的な時間でした。…が、あまりに内容が濃く、逆に記憶に残らない！ そんな自分のために、登壇者の方が公開してくださっている資料をまとめました。 もともとは完全に自分用のメモなのですが、「こんなの欲しかった」と思ってくださる方がいればと思い、共有してみます。 内容に誤りや抜けがあれば、ぜひコメントなどでご指摘いただけると嬉しいです。修正していきます！ ※本記事では、TSKaigi 2025の各登壇者が公開されている資料・概要を引用・紹介しています。 ※引用元・登壇者情報は公式サイトおよび各スライド共有サービスからのリンクに基づいています。 ※内容の正確性については各登壇資料をご確認ください。 2025/05/23 Room: トグル 招待講演 The New Powerful ESLint Config with Type Safety Introduction to th
Webブラウザで地図を表示させる JavaScript のライブラリとして Leaflet がよく使われる。 Leaflet ではブラウザに地図タイルを表示し、移動・拡大・縮小といった基本的な動作を行うとともに、マーカー・画像等を地図と連携して表示させることが可能。あちこちの商用サイトでも使用されているのを見かける。 Leaflet は単なる JavaScript のライブラリなので、これを React で扱うときは、その間を上手いことバインディングしてくれる React Leaflet を使うのが便利。 そこで本記事では、React Leaflet を TypeScript で扱いつつ、国土地理院が公開している地理院タイルを表示するまでの手順を解説する。 （というか、これをやる方法を軽く検索したけど良いサンプルが見付からず、試行錯誤して動くものを作ったので、その経緯をメモとして残しておく
［CEDEC 2021］フロム・ソフトウェアの開発支援ツール「情報地図」を紹介する講演をレポート。マップに埋め込まれた情報をWebアプリで閲覧
［CEDEC 2021］フロム・ソフトウェアの開発支援ツール「情報地図」を紹介する講演をレポート。マップに埋め込まれた情報をWebアプリで閲覧 ライター：aueki 2021年8月26日，オンライン開催された日本最大のゲーム開発者会議CEDEC 2021で，フロム・ソフトウェアによる独自の開発支援ツール「情報地図」を紹介するセッションが行われた。情報地図の概要についてをゲームプログラマーセクションの川崎涼太氏，バックエンド部分を中心とした技術的な部分をR＆Dセクションの古田島裕斗氏が解説した。 情報地図とは，文字どおり，ゲームで使うマップに埋め込まれた情報を閲覧できるツールのことだ。フロム・ソフトウェアでは，これをWebアプリとして作成し，社内で活用しているという。 そもそもこういったツールが必要となったのは，ゲームのマップが広くなりすぎて，全体の情報が管理しきれなくなったことに起因するそ
お久しぶりです。AIが流行ってますね。AI、AI、猫も杓子もAI。ボヤボヤしてると後ろからバッサリだ。 私の普段の仕事は地理情報の可視化、というか具体的に言うとLeafletを拡張して独自のレイヤを作ったりみたいなことをやっているのですが、オフィスに（たまに）行くとAIが何だGPTがどうだという話になっており、もうそろそろAIから逃げられない情勢になってきました。 ということで、去年あたりから知人のフバさん（人の名前です）が推薦していた本「深層学習」でぼちぼちニューラルネットワークの勉強をしていました。 ↑これがフバさんです。異常なシャツを着ていますが彼は機械学習のエキスパートです。 *1 ↑ちなみにこれは私です。 まあそれはさておき 実は学生時代に講義でNNやバックプロパゲーションを教わった筈なんですが、よく分からないまま終わってしまったんですよね。確かExcelでやらされたんですよ。当
JavaScriptのおすすめライブラリ＆フレームワーク40選
JavaScriptのおすすめライブラリ＆フレームワーク40選 JavaScriptのライブラリやフレームワークを使うことで、幅広い特徴と機能により、ウェブサイトやアプリケーションの開発が容易になります。これを可能にしているのが、JavaScriptの動的で柔軟であるという特性でしょう。2020年に実施されたStackOverflowの調査によると、JavaScriptは回答者の67.7%が使用しており、最もよく使われているプログラミング言語として記録を更新（8年目）しています。 その汎用性の高さから、バックエンドとフロントエンド両方の開発やテストに利用できます。その結果、さまざまな目的に対応する数多くのJavaScriptライブラリやフレームワークを見つけることができます。それゆえに、プロジェクトでどれを利用すべきかと迷ってしまうこともあるでしょう。 しかし、心配はご無用です。今回の記事
【実践】PythonとOpenStreetMapで学ぶ経路システム開発入門 - uepon日々の備忘録
前回はGoogle Map APIを使用して開発を行いましたが、今回はOpenStreetMapを使用した似たようなことにチャレンジしてみようと思います。Pythonを使ってOpenStreetMapの経路検索URLを生成する方法ことを目的とします。 参考 uepon.hatenadiary.com オープンストリートマップ（OpenStreetMap）とは？ オープンストリートマップ（英語: OpenStreetMap、OSM）は、自由に利用でき、なおかつ編集機能のある世界地図を作るオープンコラボレーションプロジェクトである。GPS機能を持った携帯機器、空中写真、衛星画像、他の地理情報システムからのデータをもとに作られていくのが基本だが、編集ツール上で道1本から手入力での追加も可能である。与えられた画像とベクトルデータセットはオープンデータベースライセンス（ODbL）1.0のもと再利用可
はじめに この記事では Claude Code を利用してアプリを開発する過程を共有します。 TL;DR GitHub の任意リポジトリを入力すると、スターを付けたユーザの所在地を世界地図にプロットする Web アプリを作りました。 デモ : https://geostarmap.pages.dev/ リポジトリ：https://github.com/yottahmd/geostarmap なぜ作ったか OSS を開発していると「どの国の開発者に届いているのか」が気になってきます。しかし既存のソフトウェアは、Pythonでローカルで動かす必要があったり、メンテされておらず動かないなどの問題がありました。 そこで「Claude Code に作らせたら、一瞬でできるのでは？」という実験を兼ねて、自分で最小構成のアプリを構築することにしました。 短時間で作った実験アプリなので品質は重視しておりま
Pythonの地図可視化ライブラリfoliumでインタラクティブな地図を作成してみる | DevelopersIO
はじめに データアナリティクス事業本部のkobayashiです。 Pythonでデータ分析を行っていると、位置情報や地理データを地図上に可視化したいケースがあるかと思います。matplotlibやplotlyでも地図の描画は可能ですが、インタラクティブな操作（ズーム、ドラッグ、クリックでの情報表示）を手軽に実現したい場合には少し手間がかかります。 今回は、PythonからインタラクティブなWebベースの地図を簡単に作成できるライブラリfoliumを試してみたのでその内容をまとめます。 python-visualization/folium: Make beautiful maps with Leaflet.js & Python Folium — Folium documentation foliumとは foliumは、Pythonのデータ処理能力とJavaScriptの地図ライブラリで
JAXA Earth API for JavaScript Version 2.0.0 のAPIドキュメントです。 このAPIを利用すると、地球観測データを容易にブラウザ上に表示したり、地球観測データを利用したウェブアプリを開発したりすることが可能です。 必要な範囲のデータを必要な解像度で取り扱う仕組みになっているため、ブラウザ上で動作するJavaScriptであってもデータを取り扱うことが可能となっていることが特徴です。 Version 2系よりブラウザのメインスレッドのみならず、ブラウザのウェブワーカーや、 Node.js、 Deno、 Bun での実行にも対応しました。TypeScriptによる開発も可能となりました。 そのため、Version 1系に比べて仕様が大きく変更となっております。 クイックスタート 何ができる？ ほんの数行のプログラミングで地球観測データにアクセスできます
Observable Framework
Observable Framework is an open-source static site generator for data apps, dashboards, reports, and more. Framework includes a preview server for local development, and a command-line interface for automating builds & deploys. You write simple Markdown pages — with interactive charts and inputs in reactive JavaScript, and with data snapshots generated by data loaders in any programming language (
Positron 最速入門
この記事は、7月13日に開催されるTokyo.Rで発表するためのメモ用に書き溜めているものです。主に R ユーザー向けの情報をまとめていますが、 Positron 自体は Python も R もサポートしています（むしろ、説明の順序も Python の方が先に書かれていることが多いのを見るに、Python の方が優先されてそう）。 はじめに まず強調しておきたいのは、現時点で、カタギの人間が Positron に入門する必要はないです。詳しくはあとで見ていきますが、重要なポイントとして、 Positron はまだ絶賛開発中という段階で、安定して使えるようになるのはだいぶ先 たとえ Positron が正式リリースされても RStudio は残る というのが今の状況です。なので、RStudio をメインで使っている人は、数年は迷わずRStudioを使い続けて大丈夫です。いま慌てて入門する必
はじめに データアナリティクス事業本部の鈴木です。 緯度・経度の情報が入っている地理データを確認する機会がありました。 手軽に確認するのに、Foliumというライブラリを使うと便利だったので紹介します。 Foliumとは pythonからLeafletを使ってインタラクティブな地図を作成できるライブラリです。LeafletはオープンソースのJavaScriptライブラリで、Web地図サービスでインタラクティブな地図を作成するのに使われています。 Foliumを使うと、緯度・経度の値を使って、地図上にマーカーを立てたり、そのマーカーに視覚的な効果を付け足すことができます。タイルはいくつかの選択肢がありますが、デフォルトではOpenStreetMapが使われます。 こんなときに使うと便利 データの観測地点の場所が知りたいとき 地図上にマーカーを作成できるので、データの場所を可視化できます。 必
Next.jsプロジェクトでReact Leafletを使って地図を表示してみた | DevelopersIO
こんにちは！DA(データアナリティクス)事業本部 サービスソリューション部の大高です。 最近Next.jsを触っているのですが、ふと「地図も表示してみたいな」と思ったので試してみることにしました。 地図表示が出来るライブラリとしては様々なライブラリがあると思いますが、React Leafletというライブラリが利用できそうなので今回はこちらを利用して試してみたいと思います。 React Leafletについて 有名なオープンソースの地図表示ライブラリとしてLeafletというライブラリがあります。 このライブラリはJavaScriptライブラリとなっており、Reactプロジェクトでもこのライブラリを直接読み込んで利用することもできるかと思います。一方でReact向けのReact Leafletというラッパーライブラリが存在します。 こちらのReact Leafletを利用するとReactプ
Leafletを使った凄い地図たち。天気図、地質図、ハザードマップ、名字マップ、3D鉄道運行情報。 - 晴歩雨描
地図データを扱うJavaScript ライブラリ「Leaflet」を使って、地図表示を試してきた。 ネット上で「Leaflet」に関する情報を検索する中で、Leafletを使ったすごい地図をいくつか見つけた。 【天気情報をオーバーレイ：OpenWeatherMap】 →→→ Interactive weather maps - OpenWeatherMap 以下は、デモ用サイトなので、いつまで使えるか不明。 →→→ OpenWeatherMap for Leaflet 【月待ビンゴ 攻略マップ】 何だかよく分からないが良くできている →→→ 月待ビンゴ 攻略マップ 地質図の表示もできる。 【地質図：地質情報配信サービス】 →→→ Simple WMS on Leaflet 【洪水ハザードマップ 全国版】 →→→ 洪水ハザードマップ 全国版 【土砂災害ハザードマップ 全国版】 →→→ 土砂災
要約 緯度経度と地図上の平面直角座標(XY)とを変換するJavaScript関数を作成したのですが、そのプログラムの説明と、緯度経度と地図上の座標(XY)といった問題をを扱うのに最低限必要な「平面直角座標系」「世界測地系」「真北方向角」「XとYの向き」等の地理学の入門知識をまとめました。 ■作成したJavaScript ( latlonxy.js ) の概要 地図表示用のWebフレームワーク(Leaflet等)のJavaScriptから呼出し可能な関数にして、座標変換計算の計算量の多い部分を事前計算して定数値にすることで軽量化しています。 緯度経度から地図上の平面直角座標(XY)に変換し、真北方位角、縮尺係数を算出します。 平面直角座標(XY)から緯度経度に変換します。 以下の図は、国土地理院「電子国土Web」のサーバーの東京の皇居周辺の地図をLeafletを使って表示し、latlonxy
最近は地図関係のアプリを開発してて、ライブラリも多く実装したものを定期的にメモに残しておこうと思う Google Map の API が高額でいろいろなレイヤーを重ね合わせるのが少し面倒そうだったので、OpenStreetMap を使う方法を探索した React Leflet (Leaflet) Deck.gl MapLibre GL JS (fork of Mapbox GL JS) react-openlayers OpenSteetMap を使えるライブラリはかなりたくさんあり色々試したが、本記事では React Leaflet でシンプルな地図を表示させたメモです 環境 React 18.2.0 leaflet 1.9.4 react-leaflet: 4.2.1 React Leaflet を使う準備 $ npm i react-leaflet leaflet $ npm i -
個人制作で登山用GPSアプリを作った話
概要 2年前の話になりますが、個人制作で登山用GPSアプリを開発しました。 今はクローズしているのですが、開発時に工夫した点などの共有をします。 何をするアプリか 登山時にGPSを使い、事前にダウンロードした地図上で位置を表示することで、山中で圏外にいても自分の現在位置を知ることができるアプリです。 また、どのような時間と経路で登山したのか、GPSの移動履歴を記録できます。 古くからこのようなアプリは他にもあるのですが、「サーバーなしで、国土地理院地図のみを使うことで、無料かつ無制限に地図データをダウンロードできる」という点を既存製品との大きな差別ポイントとして開発しました。 作ったもの 開発時の話 Flutter採用 最初はReactNativeで開発していましたが、1ヶ月ほど作ってからデザインの壁にぶちあたりました。 個人制作ですしデザインがネックになることは事前から想像できていたので
エンジニアのnaruです。こんにちは！ とうとう30度を超える暑い時期がやってきましたね。 そんな時期に皆さまいかがお過ごしでしょうか？ 自分は暑がりなのにこの夏真っ盛りの時期に引越しをすることになり、なかなか無茶な計画を立ててしまったなと感じてます。（引っ越しのお兄さま達よあとは全て任せた・・・！） さて、引っ越しといえば地図、よく見ますよね。 今回はそんな地図に関係する話題です。 最近だと何かの大量の地理的なデータを地図上にプロットしたいといった要求はちょくちょくあると思いますが、本記事ではヒートマップを例にfoliumというPythonライブラリを使えば簡単にマップビジュアライゼーションができるよ、という話を共有したいと思います！ foliumとはJavaScriptの leaflet.js という地図ライブラリをPythonライブラリにしたもので、データを簡単に地図上にプロットし可
はじめに こんにちは、開発部の一筒です！ Leaflet.jsに触れる機会があったので簡単にご紹介したいと思います。 様々な機能がありますが今回はマーカー(ピン)の様々な表示方法について書きます。 Leafletとは JavaScriptで書かれたオープンソースの地図描画ライブラリです。 地図をWebページに統合するために使用され、オープンソースで、使いやすいAPIを提供しています。 地図上にマーカー、ポップアップ、ポリライン、ポリゴンなどを描画し、ユーザーとの対話を可能にする機能を提供します。 まず地図を用意 Leafletを使用する前に地図を表示させます。地図にはOpenStreetMapを利用しました。 OpenStreetMapとは フリーかつオープンソースの地図データベースです。 このデータベースは、世界中の道路、建物、公園、レストランなどの地理的な情報を含んでいます。 データは
地図データを扱うJavaScript ライブラリ「Leaflet」を使って、地図表示を試してきた。 今回、「RainViewer」の雨雲レーダーを地図に重ねて表示するようにした。 参考になるWebページ。 【サンプル １】 直近の雨雲を重ねて表示。 →→→ https://ok2nd.github.io/leaflet/me-rainviewer1.html ＜プログラムソース抜粋＞ ちょっと無理やりなロジックになっている。$.ajaxを使うためにjQueryを使用。 <script src="//code.jquery.com/jquery-3.5.1.js"></script> <script> function getRainViewer(address) { var result = $.ajax({ type: 'GET', url: 'https://tilecache.rai
Leaflet + OpenStreetMapで、地図にマーカー＆ラベル表示。サンプルソース。 - 晴歩雨描
地図情報を扱うサービス「Google Maps API」が無料では使えなくなり、「Yahoo! JavaScriptマップAPI」もサービス提供が終了し、以前「Mapbox GL JS」を試してみた。 今回、「Leaflet」と「OpenStreetMap」を使って、地図にマーカー表示を試してみた。 「Leaflet」は、地図データを扱うためのJavaScript ライブラリ。「OpenStreetMap」は、OpenStreatMap財団が「Open Data Commons Open Database License (ODbL)」 の下にライセンスするオープンデータ。いずれも無料でかつAPIキーの取得なしに利用できる。以下のサイトを参考にした。 試したところ、マーカー表示だけなら非常に簡単にできる。 【ステップ０：基本】 LeafletのCSSとJSライブラリを読み込む <link
地理座標系での距離や面積を計算するときに見る資料
極半径 b = a(1 - f) 平均半径 r = (2a - b)/3 Openlayers WGS84 or GRS80の平均半径 Leaflet WGS84 or GRS80の平均半径 Tufr.js WGS84 or GRS80 地球を球体として扱う 公式が使えて計算が楽。 半径には平均半径を使う。 距離 球体上の最短距離である大円距離(大圏距離)を求める。 英語で調べるときはgreat circleやgeodesic lineあたりでググる。 公式はwikipediaにある通り。 ライブラリはだいたいこの公式を採用している。 Openlayers Leaflet Turf.js 面積 指定した座標が囲む球体の表面の面積を求める。 球上の面積を求めるリュイリエの公式(l’Huiller’s formula)は複雑でやってられないから簡易式を使おう、というNASAの論文のアルゴリズム
地理情報・PostGISことはじめ - Qiita
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? フューチャー Advent Calendar 2020 17日目です。 昨日は @alfe_below さんによる「package.json dependencies メンテの仕方 最短ルート」でした。 はじめに 地理情報を扱うアプリケーションを開発するにあたって、基礎知識として頭に入れておいたほうが良さそうなことと、PostGISの簡単な使い方をまとめてみました。 Google Maps JavaScript APIやLeaflet.jsなど、フロントエンドのライブラリの使い方については触れていません。また、測量に関する細かい話も書い
駅奪取エンジニアのid:dorapon2000です。駅奪取では11月にゲーム内の地図のリプレースを行いました。地図そのもののスタイルも変わりましたが、地図の表示に使うライブラリも変更しています。今回は、アプリに地図を埋め込むだけであれば、ほんの少しのコードだけで実現できるということを紹介したいと思います。 記事の前半で地図表示の仕組みを簡単に説明して、後半で具体的なコードをお見せします。 地図表示の仕組み 地図を表示するためにはサーバ側とクライアント側の2つの仕組みが必要です。また、サーバとクライアントは地図をタイルという形式で送受信します。 地図タイルサーバ 地図タイルを配信する 自前でホストすることもできるが、いずれかのサービスのタイルAPIを利用すると楽 地図クライアント 地図タイルの受信と表示をする 地図の上にピンや吹き出しを置くこともできる タイルにはベクトルタイルとラスタタイル
はじめに Leafletなど、地図を表示するJavaScriptライブラリを用いると簡単に表示できますが、仕組みを理解するためあえて自力で計算してタイルを表示します。 探してみると、計算方法は見つかるのですが、数学が苦手な僕にはちょっと難しい・・・ので、できるだけ分かりやすい式で作りました。 最後に計算結果の確認をするため、富士山山頂の座標(35.36072, 138.72743)をもとに、タイル画像を表示してみます。 参考ページ Zenn:メルカトルとは何かを計算式から見る Qiita:メルカトル図法 wikipedia:メルカトル図法 国土地理院タイルの特徴 タイルはメルカトル図法 地図画像は縦横256pixcelの正方形 ズームレベル0は全世界を1枚(256×256)で表示する 緯度85度まで(256pxに収まる範囲。発散してしまうので) 左上を原点とする座標系(西経180度北緯85
23rd May 2022 I spotted a new (to me) pattern which I think is pretty interesting: projects are bundling compiled binary applications as part of their Python packaging wheels. I think it’s really neat. pip install ziglang Zig is a new programming language lead by Andrew Kelley that sits somewhere near Rust: Wikipedia calls it an “imperative, general-purpose, statically typed, compiled system progr
LINE株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。 LINEヤフー Tech Blog こんにちは、LINEのIT支援室で社内システムの開発と運用をしている岩月です。この記事はLINE Advent Calendar 2017の6日目の記事です。 人員の増加に対応するために、今年の4月、LINEはJR新宿ミライナタワーに移転しました。移転に伴い、IT支援室ではいくつかの新しい社内システムを導入しましたが、今日はその1つである「座席表」についてお話させていただきます。 開発のきっかけ 移転前、座席の管理は以下のようにExcelで行われていました（名前は消しています）。 ◯◯さんの座席を調べたいと思ったら、Excelもしくは変換されたPDFをダウンロードして、ビューアーの検索機能で名前を調べる必要がありました。恐らく
Webで地図を作ってみたいけど、どこから始めればいいかわからないアナタへ — 『位置情報エンジニア養成講座』（#位置エン本）書評 - Qiita
TL;DR ソフトウェア・エンジニアが、めくるめく「地図」「位置情報」「GIS」の世界へ踏み入れるのに最適な一冊。 GIS（Geographic Information System, 地理情報システム）分野の基礎知識と実践方法をバランスよく提示 地図投影法やデータ形式、Webでの配信方法といった基本（第2章） QGISによる位置情報データの加工（第3章） LeafletやTurf.js、MapLibre GL JSといった技術を用いたWebアプリ作成（第3,4章） バックエンドについては簡単な言及のみ コードとデモ HTML, CSS, JavaScript の基本的な知識が前提 https://github.com/kanahiro/location-tech-sample-v1 で公開 以下のような位置情報アプリを実装できるようになります: 書籍情報 Twitterハッシュタグ #位
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
React Leaflet + TypeScriptで地図（地理院タイル）を表示する
夏休みなのでニューラルネットワークの勉強をした - ポルノアニメ
Claude Code で GitHub スターの地理分布を可視化するオープンソースソフトウェアをつくった
JAXA Earth API for JavaScript
Foliumで手軽に地理データを可視化する | DevelopersIO
JavaScriptによる緯度経度と地図のXY(平面直角座標)との変換、および地理学入門
OpenStreetMap + React Leaflet で地図を表示したメモ - かもメモ
Pythonライブラリのfoliumでサクッとクールなヒートマップを作ってみる｜narudesu
Leafletで様々なマーカーを表示させる - Qiita
Leaflet地図：「RainViewer」の雨雲レーダーを重ねて表示。サンプルソース。 - 晴歩雨描
アプリに地図を埋め込むのは簡単！ - Mobile Factory Tech Blog
緯度、経度をもとに国土地理院タイルを表示する方法(ライブラリ未使用) - Qiita
Bundling binary tools in Python wheels
Excel管理の座席表をLeafletでWeb化した話