google chart APIが突然エラー吐くようになり、仕様が大きく変わったぽい
google Geo Chartを使っていたプログラムが急に動かなくなっていた。
原因は仕様変更だった。
詳しいものは以下を参照
Visualization: GeoChart | Charts | Google Developers
起こった現象
gyazo.com
出たエラーは「Error: First row is not an array.」など
解決策
stackoverflow.com
いろんな部分の変更があった模様
- エンドポイントの変更
- APIキーが必要になった (Google Cloud ConsoleのAPIからMaps JavaScript APIを有効にして取得)
- 読み込むデータ形式が変更
- optionの中にdisplayModeが必要になった
解決前
<script src="https://www.google.com/jsapi"></script> <script> google.load('visualization', '1', { packages: ['geochart']}); google.setOnLoadCallback(graphChart("hoge")); var option = { region: 'JP', resolution: 'provinces', backgroundColor: '#81d4fa' };
解決後
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> <script> google.charts.load('current', { packages: ['geochart'], mapsApiKey: '<APIキー>' }); google.charts.setOnLoadCallback(graphChart); //コールバック引数も変更 var option = { region: 'JP', displayMode: 'markers', resolution: 'provinces', backgroundColor: '#81d4fa' };
データ形式変更前
[ { "name": "hoge1", "address": "住所1" }, { "name": "hoge2", "address": "住所2" } ]
データ形式変更後
[ [ "住所", "名称" ], [ "東京都渋谷区ほげふが", "ほげふがタワー" ] ]||<
pdfをgyazoに簡単に変換できるpdf2gyazoを作った
pdf2gyazo
PDFからGyazoに変換するツール「pdf2gyazo」を作りました!
— 又 (@matatsuna) 2018年2月3日
PDFをD&Dで画像に出来て、scrapboxやslackに貼るのに便利です。
Chrome最新版でのみ動作確認してます。https://t.co/7562bpwNC6
概要
作った経緯
imagemagickを使ってコマンドでpdfを画像にしてGyazoにアップロードして使用してました。
WindowsでImagemagickを使ってローカルのコマンドラインでpdfから画像を作る方法 - matablo
しかし、めんどくさくなり、Webで出来るようにしたいと思い実装しました。
また、PDFをサーバーに送信して変換したくなかったので、JSでの変換にこだわりました。
使ったライブラリ
pdfjs
Firefoxに採用されているらしいPDFのレンダリングシステム
GitHub - mozilla/pdf.js: PDF Reader in JavaScript
node上でcanvasを使うサンプルをベースに作成しました
pdf.js/examples/node/pdf2png at master · mozilla/pdf.js · GitHub
drag-drop
npmで見つけたドラッグアンドドロップに対応しているライブラリ
drag-drop