概要 Node.js 用ライブラリの osm-static-maps を使って OpenStreetMap や地理院地図の画像を取得する 今回の環境 macOS Catalina + Node.js v14.9.0 osm-static-maps のインストール osm-static-maps パッケージをインストールする。 $ npm install osm-static-maps OpenStreetMap の地図画像を取得する ソースコード。 'use strict' const osmsm = require('osm-static-maps'); const fs = require('fs'); (async () => { try { // 地図画像の Buffer オブジェクトを取得 const imageBinaryBuffer = await osmsm({ width: 800, // 画像の横幅(ピクセル) height: 600, // 画像の縦幅(ピクセル) center: '136.882090,35.170560', // 経度,緯度 zoom: 20, // ズームレベル type: 'png' // PNG 画像フォーマット }) // 地図画像データをファイルに出力 await fs.promises.writeFile('osm.png', imageBinaryBuffer) process.exit(0); } catch (err) { console.error(err); process.exit(1); } })(); 実行結果。 地理院地図の地図画像を取得する ソースコード。 'use strict' const osmsm = require('osm-static-maps'); const fs = require('fs'); (async () => { try { // 国土地理院の地理院タイルを使う const tileserverUrl = 'https://cyberjapandata.gsi.go.jp/xyz/std/{z}/{x}/{y}.png' const attribution = 'osm-static-maps / 出典: 地理院タイル' // 地図画像の Buffer オブジェクトを取得 const imageBinaryBuffer = await osmsm({ tileserverUrl: tileserverUrl, attribution: attribution, width: 800, // 画像の横幅(ピクセル) height: 600, // 画像の縦幅(ピクセル) center: '136.882090,35.170560', // 経度,緯度 zoom: 14, // ズームレベル type: 'png' // PNG 画像フォーマット }) // 地図画像データをファイルに出力 await fs.promises.writeFile('chiriin.png', imageBinaryBuffer) process.exit(0); } catch (err) { console.error(err); process.exit(1); } })(); 実行結果。 参考資料 GitHub - jperelli/osm-static-maps: Openstreetmap static maps is a nodejs lib, CLI and server open source inspired on google static map service Static map images - OpenStreetMap Wiki Tile servers - OpenStreetMap Wiki Zoom levels - OpenStreetMap Wiki Tile Usage Policy (OSMF Operations Working Group) 地理院地図｜地理院タイルについて 地理院地図｜地理院タイル一覧 File system | Node.js v14.9.0 Documentation
osm-static-maps パッケージをインストールする。
$ npm install osm-static-maps
ソースコード。
'use strict' const osmsm = require('osm-static-maps'); const fs = require('fs'); (async () => { try { // 地図画像の Buffer オブジェクトを取得 const imageBinaryBuffer = await osmsm({ width: 800, // 画像の横幅(ピクセル) height: 600, // 画像の縦幅(ピクセル) center: '136.882090,35.170560', // 経度,緯度 zoom: 20, // ズームレベル type: 'png' // PNG 画像フォーマット }) // 地図画像データをファイルに出力 await fs.promises.writeFile('osm.png', imageBinaryBuffer) process.exit(0); } catch (err) { console.error(err); process.exit(1); } })();
実行結果。
'use strict' const osmsm = require('osm-static-maps'); const fs = require('fs'); (async () => { try { // 国土地理院の地理院タイルを使う const tileserverUrl = 'https://cyberjapandata.gsi.go.jp/xyz/std/{z}/{x}/{y}.png' const attribution = 'osm-static-maps / 出典: 地理院タイル' // 地図画像の Buffer オブジェクトを取得 const imageBinaryBuffer = await osmsm({ tileserverUrl: tileserverUrl, attribution: attribution, width: 800, // 画像の横幅(ピクセル) height: 600, // 画像の縦幅(ピクセル) center: '136.882090,35.170560', // 経度,緯度 zoom: 14, // ズームレベル type: 'png' // PNG 画像フォーマット }) // 地図画像データをファイルに出力 await fs.promises.writeFile('chiriin.png', imageBinaryBuffer) process.exit(0); } catch (err) { console.error(err); process.exit(1); } })();
仕事でnode.jpを使用する機会があったのですが、 複数のシステムで様々なnodeのバージョンを使う機会があり、仮想環境(CentOs)でnodeのバージョン切り替えれるようにしました Node.js と npm インストール とりあえず、nodeとnpmをインストールします (CentOs) yum install gcc gcc-c++ yum install nodejs npm –enablerepo=epel ※ついでにMacの場合は以下のコマンドで brew install node n のインストール npm install -g n nのパスを通す ~/.bash_profileを使用しパスを指定する ※ない場合は、作成してください。~/.profile, ~/.bashrcでも自分の好みのもので構いません cd vi .bash_profile .bash_profileに以下の文言を買い込みます export N_PREFIX=$HOME/.n export PATH=$N_PREFIX/bin:$PATH 調整を適用 source .bash_profile これで準備できました！ 特定バージョンのインストール 最新バージョン $ n –stable $ n –latest $ n latest 特定バージョン $ n 5.7.1 バージョン切り替え nコマンドを使用すると矢印キーとEnterキーで切り替えることができます # n ο node/10.17.0 node/12.18.3 Use up/down arrow keys to select a version, return key to install, d to delete, q to quit これでnodeのバージョンを気楽に切り替えれるようになりました、本当に助かる 参考文献 https://qiita.com/jaxx2104/items/2277cec77850f2d83c7a https://blog1.mammb.com/entry/2019/11/26/090000 https://qiita.com/bigplants/items/2d75bf552e0da4a7e822
仕事でnode.jpを使用する機会があったのですが、 複数のシステムで様々なnodeのバージョンを使う機会があり、仮想環境(CentOs)でnodeのバージョン切り替えれるようにしました
とりあえず、nodeとnpmをインストールします (CentOs)
yum install gcc gcc-c++ yum install nodejs npm –enablerepo=epel
※ついでにMacの場合は以下のコマンドで
brew install node
npm install -g n
~/.bash_profileを使用しパスを指定する ※ない場合は、作成してください。~/.profile, ~/.bashrcでも自分の好みのもので構いません
cd vi .bash_profile
.bash_profileに以下の文言を買い込みます
export N_PREFIX=$HOME/.n export PATH=$N_PREFIX/bin:$PATH
調整を適用
source .bash_profile
これで準備できました！
最新バージョン
$ n –stable $ n –latest $ n latest
特定バージョン
$ n 5.7.1
nコマンドを使用すると矢印キーとEnterキーで切り替えることができます
# n ο node/10.17.0 node/12.18.3 Use up/down arrow keys to select a version, return key to install, d to delete, q to quit
これでnodeのバージョンを気楽に切り替えれるようになりました、本当に助かる
https://qiita.com/jaxx2104/items/2277cec77850f2d83c7a https://blog1.mammb.com/entry/2019/11/26/090000 https://qiita.com/bigplants/items/2d75bf552e0da4a7e822
はじめに ループしながら、配列内の要素をキーとするオブジェクトを作成する方法を紹介します。 方法 const array = ['key1', 'key2', 'key3',] const createObj = (array) => { const obj = new Object(); array.forEach(item => (Object.defineProperty(obj, item, { enumerable: true, // ループのために必要! value: 'ここに値' }))); return obj; } console.log(createObj(array)); // {key1: 'ここに値', key2: 'ここに値', key3: 'ここに値'} オプションとして設定する、enumerable: trueが重要です。 これがないと動きません。 まとめ 配列内の要素をキーとするオブジェクトを作成することができました。
ループしながら、配列内の要素をキーとするオブジェクトを作成する方法を紹介します。
const array = ['key1', 'key2', 'key3',] const createObj = (array) => { const obj = new Object(); array.forEach(item => (Object.defineProperty(obj, item, { enumerable: true, // ループのために必要! value: 'ここに値' }))); return obj; } console.log(createObj(array)); // {key1: 'ここに値', key2: 'ここに値', key3: 'ここに値'}
オプションとして設定する、enumerable: trueが重要です。 これがないと動きません。
enumerable: true
配列内の要素をキーとするオブジェクトを作成することができました。
はじめに YouTube Data API を使って、YouTubeチャンネルにアップロードされた動画を埋め込みHTML形式で取得してみました。 JavaScriptのYoutube用ライブラリもいくつかあるみたいですが、 今回はURLを直打ちする形で実装しました。 GET URLやJSONの仕様は下記を参照しました。 https://developers.google.com/youtube/v3/docs 環境は下記になります。 macOS Catalina 10.15.6 Node.js v14.8.0 (Node.js Library)request 6.14.7 コードと実行結果 コードは下記になります。 youtube.js const request = require('request'); const URL_YOUTUBE_API='https://www.googleapis.com/youtube/v3/'; const YOUTUBE_APP_KEY=process.env.YOTUBE_APP_KEY; const MY_YOUTUBE_CHANNEL_ID=process.env.YOUTUBE_CHANNEL_ID; const URL_YOUTUBE_CHANNELS=URL_YOUTUBE_API + 'channels?key=' + YOUTUBE_APP_KEY + '&part=snippet,statistics,contentDetails&id=' + MY_YOUTUBE_CHANNEL_ID; const URL_YOUTUBE_PLAYLISTITEMS=URL_YOUTUBE_API + 'playlistItems?key=' + YOUTUBE_APP_KEY + '&part=snippet,contentDetails&playlistId='; const URL_YOUTUBE_VIDEOS=URL_YOUTUBE_API + 'videos?key=' + YOUTUBE_APP_KEY + '&part=player&id='; var get_yotube_options_base = { url: '', method: 'GET', json: true }; var html_data = []; var get_youtube_options_1 = get_yotube_options_base; get_youtube_options_1.url = URL_YOUTUBE_CHANNELS; request(get_youtube_options_1, function (error, response, ch_info) { var playlistId = ch_info.items[0].contentDetails.relatedPlaylists.uploads; var get_youtube_options_2 = get_yotube_options_base; get_youtube_options_2.url = URL_YOUTUBE_PLAYLISTITEMS + playlistId; request(get_youtube_options_2, function (error, response, playlist_info) { var videoId_list = []; playlist_info.items.forEach(item => { videoId_list.push(item.snippet.resourceId.videoId); }); var get_youtube_options_3 = get_yotube_options_base; get_youtube_options_3.url = URL_YOUTUBE_VIDEOS + videoId_list.join(','); request(get_youtube_options_3, function (error, response, video_info) { video_info.items.forEach(item => { html_data.push(item.player.embedHtml); }); console.log(html_data); }); }); }); 実行結果は下記になります。 「XXXXXXXXXXXXX」の部分は自分の情報に書き換えてください。 % export YOTUBE_APP_KEY=XXXXXXXXXXXXX % export YOUTUBE_CHANNEL_ID=XXXXXXXXXXXXX % node youtube.js [ '<iframe width="480" height="270" src="//www.youtube.com/embed/uRML4cHJKsE" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>', '<iframe width="480" height="270" src="//www.youtube.com/embed/BuHrzydYE2s" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>' ] コードの説明 YouTubeに対して3回HTTPリクエストをする形になってます。 (1回目) チャンネルIDから再生リストIDを取得 => URL:「URL_YOUTUBE_CHANNELS」 (2回目) 再生リストIDから動画IDを取得 => URL:「URL_YOUTUBE_PLAYLISTITEMS」 (3回目) 動画IDから埋め込みHTMLを取得 => URL:「URL_YOUTUBE_VIDEOS」 事前準備が必要です。 ・App Keyについては、 「Google APIs Console」というサイトで発行しておきます。 ・YouTube Channel IDはIDを取得したいチャンネルのページに行って、ソースを表示=>「CHANNEL_ID」で文字列検索すると出て来ます。 下記の画像で言うと「UCD0it6kq_2HBn3uMACiX_3A」の部分です。 以上です。
YouTube Data API を使って、YouTubeチャンネルにアップロードされた動画を埋め込みHTML形式で取得してみました。
JavaScriptのYoutube用ライブラリもいくつかあるみたいですが、 今回はURLを直打ちする形で実装しました。
GET URLやJSONの仕様は下記を参照しました。 https://developers.google.com/youtube/v3/docs
環境は下記になります。 macOS Catalina 10.15.6 Node.js v14.8.0 (Node.js Library)request 6.14.7
コードは下記になります。
const request = require('request'); const URL_YOUTUBE_API='https://www.googleapis.com/youtube/v3/'; const YOUTUBE_APP_KEY=process.env.YOTUBE_APP_KEY; const MY_YOUTUBE_CHANNEL_ID=process.env.YOUTUBE_CHANNEL_ID; const URL_YOUTUBE_CHANNELS=URL_YOUTUBE_API + 'channels?key=' + YOUTUBE_APP_KEY + '&part=snippet,statistics,contentDetails&id=' + MY_YOUTUBE_CHANNEL_ID; const URL_YOUTUBE_PLAYLISTITEMS=URL_YOUTUBE_API + 'playlistItems?key=' + YOUTUBE_APP_KEY + '&part=snippet,contentDetails&playlistId='; const URL_YOUTUBE_VIDEOS=URL_YOUTUBE_API + 'videos?key=' + YOUTUBE_APP_KEY + '&part=player&id='; var get_yotube_options_base = { url: '', method: 'GET', json: true }; var html_data = []; var get_youtube_options_1 = get_yotube_options_base; get_youtube_options_1.url = URL_YOUTUBE_CHANNELS; request(get_youtube_options_1, function (error, response, ch_info) { var playlistId = ch_info.items[0].contentDetails.relatedPlaylists.uploads; var get_youtube_options_2 = get_yotube_options_base; get_youtube_options_2.url = URL_YOUTUBE_PLAYLISTITEMS + playlistId; request(get_youtube_options_2, function (error, response, playlist_info) { var videoId_list = []; playlist_info.items.forEach(item => { videoId_list.push(item.snippet.resourceId.videoId); }); var get_youtube_options_3 = get_yotube_options_base; get_youtube_options_3.url = URL_YOUTUBE_VIDEOS + videoId_list.join(','); request(get_youtube_options_3, function (error, response, video_info) { video_info.items.forEach(item => { html_data.push(item.player.embedHtml); }); console.log(html_data); }); }); });
実行結果は下記になります。 「XXXXXXXXXXXXX」の部分は自分の情報に書き換えてください。
% export YOTUBE_APP_KEY=XXXXXXXXXXXXX % export YOUTUBE_CHANNEL_ID=XXXXXXXXXXXXX % node youtube.js [ '<iframe width="480" height="270" src="//www.youtube.com/embed/uRML4cHJKsE" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>', '<iframe width="480" height="270" src="//www.youtube.com/embed/BuHrzydYE2s" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>' ]
YouTubeに対して3回HTTPリクエストをする形になってます。
(1回目) チャンネルIDから再生リストIDを取得 => URL:「URL_YOUTUBE_CHANNELS」 (2回目) 再生リストIDから動画IDを取得 => URL:「URL_YOUTUBE_PLAYLISTITEMS」 (3回目) 動画IDから埋め込みHTMLを取得 => URL:「URL_YOUTUBE_VIDEOS」
事前準備が必要です。 ・App Keyについては、 「Google APIs Console」というサイトで発行しておきます。
・YouTube Channel IDはIDを取得したいチャンネルのページに行って、ソースを表示=>「CHANNEL_ID」で文字列検索すると出て来ます。
下記の画像で言うと「UCD0it6kq_2HBn3uMACiX_3A」の部分です。
以上です。
