山手線を徒歩で一周する人のための記録アプリ「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
［CEDEC 2021］フロム・ソフトウェアの開発支援ツール「情報地図」を紹介する講演をレポート。マップに埋め込まれた情報をWebアプリで閲覧
［CEDEC 2021］フロム・ソフトウェアの開発支援ツール「情報地図」を紹介する講演をレポート。マップに埋め込まれた情報をWebアプリで閲覧 ライター：aueki 2021年8月26日，オンライン開催された日本最大のゲーム開発者会議CEDEC 2021で，フロム・ソフトウェアによる独自の開発支援ツール「情報地図」を紹介するセッションが行われた。情報地図の概要についてをゲームプログラマーセクションの川崎涼太氏，バックエンド部分を中心とした技術的な部分をR＆Dセクションの古田島裕斗氏が解説した。 情報地図とは，文字どおり，ゲームで使うマップに埋め込まれた情報を閲覧できるツールのことだ。フロム・ソフトウェアでは，これをWebアプリとして作成し，社内で活用しているという。 そもそもこういったツールが必要となったのは，ゲームのマップが広くなりすぎて，全体の情報が管理しきれなくなったことに起因するそ
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 に作らせたら、一瞬でできるのでは？」という実験を兼ねて、自分で最小構成のアプリを構築することにしました。 短時間で作った実験アプリなので品質は重視しておりま
JAXA Earth API for JavaScript Version 2.0.0 のAPIドキュメントです。 このAPIを利用すると、地球観測データを容易にブラウザ上に表示したり、地球観測データを利用したウェブアプリを開発したりすることが可能です。 必要な範囲のデータを必要な解像度で取り扱う仕組みになっているため、ブラウザ上で動作するJavaScriptであってもデータを取り扱うことが可能となっていることが特徴です。 Version 2系よりブラウザのメインスレッドのみならず、ブラウザのウェブワーカーや、 Node.js、 Deno、 Bun での実行にも対応しました。TypeScriptによる開発も可能となりました。 そのため、Version 1系に比べて仕様が大きく変更となっております。 クイックスタート 何ができる？ ほんの数行のプログラミングで地球観測データにアクセスできます
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 -
はじめに こんにちは、開発部の一筒です！ 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
地理情報・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を利用すると楽 地図クライアント 地図タイルの受信と表示をする 地図の上にピンや吹き出しを置くこともできる タイルにはベクトルタイルとラスタタイル
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をダウンロードして、ビューアーの検索機能で名前を調べる必要がありました。恐らく
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Claude Code で GitHub スターの地理分布を可視化するオープンソースソフトウェアをつくった
JAXA Earth API for JavaScript
JavaScriptによる緯度経度と地図のXY(平面直角座標)との変換、および地理学入門
OpenStreetMap + React Leaflet で地図を表示したメモ - かもメモ
Leafletで様々なマーカーを表示させる - Qiita
Leaflet地図：「RainViewer」の雨雲レーダーを重ねて表示。サンプルソース。 - 晴歩雨描
アプリに地図を埋め込むのは簡単！ - Mobile Factory Tech Blog
Bundling binary tools in Python wheels
Excel管理の座席表をLeafletでWeb化した話