city-roads - 地図の道ごとに色分けして表示
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました 地図を元々提供されているままではなく、オリジナルのデータを載せたり、描画方法を変えたいと思ったりすることはないでしょうか。その手のことをしようと思うとGoogleマップでは難しかったりします。そうした目的でよく使われるのがOpenStreetMapです。 今回紹介するcity-roadsもそうした一例になります。地図の道を、方向によって色分けする面白い試みです。 city-roadsの使い方 例えば横浜で作ってみた例。すごいゴチャゴチャですね。 関内駅周辺は整備されているように見えます。 渋谷駅周辺。 倉敷。 city-roadsは道の進み方を可視化することで、その土地の成り立ちを可視化します。東京などはあまり一貫したルールがありませんが、京都や奈良など古都があった場所は綺麗に整備
DeepL Chrome Extension - Google ChromeからDeepLを使って簡単に翻訳
Google翻訳よりも自然な翻訳ができているとして、DeepLに注目が集まっています。執筆時点ではまだAPIベースの翻訳は日本では使えないのですが、提供されればWebサービスやビジネスでの利用も進むでしょう。 そんなDeepLをGoogle Chromeから簡単に使えるようにするのがDeepL Chrome Extensionです。 DeepL Chrome Extensionの使い方 文字列を選択した時のコンテクストメニューにTranslate with DeepLが追加されます。 選択すると、そのテキストを翻訳してくれます。 DeepL Chrome Extensionは原文が自動検出になっており、翻訳して欲しい言語も自動で日本語になっています。さくさくと翻訳して英文を読み進められそうです。 DeepL Chrome ExtensionはJavaScript製のオープンソース・ソフトウ
styled-icons - 13,500種を超えるアイコンフォント集
Webサイトを使いやすくしてくれるアイコンフォントは多数存在します。一つですべて済む場合もあれば、幾つも組み合わせたい場合もあるでしょう。足りない時に、都度追加していくのは面倒です。 そこで使ってみたいのがstyled-iconsです。13,500種類以上のアイコンが使えるようになるライブラリです。 styled-iconsの使い方 一部を紹介します。サービス、ブランド系のアイコン。 ツールバーなどに使えるアイコン。 多種多様に揃っているので、これだけあれば大抵のニーズは満たせるでしょう。 styled-iconsはFont Awesomeをはじめ、IoniconsやMaterial Design、Typiconsなど有名なアイコンフォント集を多数集めています。Reactスタイルのコンポーネントとして提供されており、共通した使い勝手で利用できます。Reactで作る際には導入しておきたいライ
PWA install - PWAインストール体験を向上させる
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました PWA（Progressive Web Apps）ではWebアプリケーションをローカルアプリのようにインストールできます。しかし、ユーザとしてはインストールするメリットが見えないとインストールしてくれないでしょう。 そこで使ってみたいのがPWA installです。ユーザがインストールしたくなるように促せるウィザードライブラリです。 PWA installの使い方 デモではインストールボタンを押すところからはじまります。ここは省略できるでしょう。 ウィザードを使ってインストールメリットを伝えます。 そしてユーザが納得したらインストールダイアログを出します。 インストール完了です。 PWA installはPWAのインストールダイアログを出す処理をフックして、インストール前にメリット
CoreUI Icons - 1,500種類を超える多彩なアイコン集
今のWebサイト、スマートフォンアプリではテキストではなくアイコンで操作を指示することが増えています。絵の方が分かりやすい場面も多いですが、分かりづらいアイコン（保存のフロッピーアイコンなど）もあります。 その中でも大事なのが統一性です。大量のアイコンが一つのパッケージになっていることで、統一されたデザインが実現できます。今回紹介するCoreUI Iconsはフリーでも1,500、有料版では3,000のアイコンが提供されます。 CoreUI Iconsの使い方 各カテゴリの最初の部分だけ紹介します。まずはブランド。 AppleやAmazonなどもあります。 国旗。 アクセシビリティ。 アラート。 ファシリティ。 ビジネス、マーケティング。 チャット。 顔。 ファイル、ドキュメント、メール。 フード、ドリンク。 手。 イメージ編集。 インタフェース。 メディア、オーディオ、動画。 電話系。
plant_erd - ER図をPlantUML用にエクスポート
UMLをテキストベースで記述できるPlantUMLを使っている方は多いのではないでしょうか。クラス図を流用する形でER図も描くことができます。そして、データベースはすでにあり、そこからPlantUML用に出力できればいいのに、と考えている方もまた多いでしょう。 そんな方にお勧めなのがplant_erdです。各種データベースに対応したER図エクスポートソフトウェアです。 plant_erdの使い方 出力した内容をPlantUMLで表示しています。 plant_erdはSQLite3、MySQLそしてPostgreSQLに対応しています。各データベースの内容をそのままPlantUML向けに出力が可能です。特定のテーブルだけを出力対象にもできます。リレーションも再現され、データベース構造をドキュメントに書き出すのにぴったりです。 plant_erdはGo製のオープンソース・ソフトウェア（MIT
JavaScriptのイベントをたくさん見られるサイト - 開発時に役立つ。JavaScriptのイベント処理を確認 MOONGIFT
JavaScriptでのアプリケーション開発において肝になるのがイベントのハンドリングです。マウスやキーボード操作などによって多様なイベントが呼ばれます。それらの購読、解除によってアプリケーションを構築するのですが、慣れている人であっても複雑で分かりづらいものです。 どんなイベントがあって、どうデータが送られてくるのかを理解するのに便利なのが「JavaScriptのイベントをたくさん見られるサイト」です。 JavaScriptのイベントをたくさん見られるサイトの使い方 イベントの内容は開発者ツールに出てくるのであらかじめ開いておきます。 例えばスクロールやリサイズイベントで呼ばれているのが確認できます。 マウス系イベント。 フォーム系。 メディア系。動画再生時などにイベントが呼ばれます。 アニメーション。 このサイトではクライアントサイドだけで処理ができるイベントを多数確認できます。似たよ
hls.js - JavaScript製のHTTP Live Streamingクライアント MOONGIFT
Appleがキーノートなどの配信に使っているのがHTTP Live Streamingと言われるプロトコルです。特別なプロトコルではなく、HTTPを使っているのがメリットですが、サポートしているブラウザがSafariくらいというのが難点です。 そこで使ってみたいのがhls.jsです。JavaScriptで作られたHTTP Live Streamingクライアントです。 hls.jsの使い方 設定も用意されています。エラーが出ても自動で回復してくれます。 Google Chromeでも動きます。10秒前後に動かすといったアクションもJavaScriptからできます。 hls.jsを使えばモダンなブラウザであればHTTP Live Streamingを提供できるようになります。良い動画配信プロトコルが見つかっていなかった方はhls.jsを使ってみてはいかがでしょう。 hls.jsはJavaSc
MOONGIFT|オープンソース・ソフトウェア紹介を軸としたITエンジニア、Webデザイナー向けブログ
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました Tank Vs Zombie Game Built in Ruby - Rubyで書かれた戦車 vs ゾンビゲーム Jul 16, 2021 - 1 min read Kopia - マルチベンダー対応のバックアップソフトウェア Jul 16, 2021 - 1 min read Polyfoto - モザイク画像を作成するPythonスクリプト Jul 15, 2021 - 1 min read SwiftLaTeX - WebベースのLaTeXエディタ Jul 15, 2021 - 1 min read Div.js - divタグだけでHTMLページを作成できる？ Jul 14, 2021 - 1 min read ASCIIFlow - アスキーアート用ドローアプリ Jul
JavaScriptを使ってExifデータを読み取る·exif.js MOONGIFT
exif.jsはJavaScriptを使って写真のExifデータを読み取るライブラリです。 スマートフォンの普及によって写真データをオンライン上に扱うケースが増えています。そんな写真のメタデータであるExifをJavaScriptで扱ってしまおうというのがexif.jsです。 サンプルです。写真を指定するとそのExifから位置情報を読み取ってGoogleマップにマーカーを立てています。 コードです。FileReaderでデータを読み取った上で解析しています。 exif.jsは位置情報のみならずホワイトポイントやフラッシュ、シャッタースピードなどExifで取得できるデータが網羅されています。これだけのデータが取れれば、面白い使い方が考えられそうです。 exif.jsはJavaScript製のソフトウェア（ソースコードは公開されていますがライセンスは明記されていません）です。 MOONGIFT
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
