yahsan2の投稿 - Crieit

URLパラメータで簡単画像リサイズ。netlify の Large Media が便利！

2019-04-21T22:24:31+09:00

netlify の Large Media とは

Git レポジトリでサイトコンテンツを管理する際に、画像やPSD/ZIPなどの大きいファイルを含めて管理するために Git LFS（Git Large File Strage）と仕組みがある。
LFS については細かく触れないが、LFS を使って netlify にデプロイされた画像を、URLパラメータをつかってリサイズやクロップが便利に扱えるように使える神機能である。

Large Media 公式ドキュメント
https://www.netlify.com/docs/large-media/#enabling-netlify-large-media

Git LFS 公式サイト
https://git-lfs.github.com/

netlify Large Media のサンプル

例えば、普通に gitレポジトリに含めて github などを介して netlify デプロイすると、このようなURLで画像にアクセスできる。

https://netlify-photo-gallery.netlify.com/images/apple.jpg

これにこんな形で、最後に ?nf_resize=fit&w=200 を加えてやると、リサイズされた画像を生成して返してくれるのだ。
https://netlify-photo-gallery.netlify.com/images/apple.jpg?nf_resize=fit&w=200

さらに次は、画像URLにの最後に ?nf_resize=smartcrop&w=200 を加えてやると、クロップされた画像を生成して返してくれる。

１つ画像をアップするだけでいい感じにリサイズされた画像やクロップされたをすぐに使えるのだ！神すぎないか？

これが netlify Large Media 機能だ。

公式サンプルに Transformation demo とジェネレーターがあるので、もう少し触ってみたいかたはこちら。
https://netlify-photo-gallery.netlify.com

netlify Large Media の使い方

サイト（レポジトリ）ごとの設定

Large Media 機能を使うには、サイトごとに機能を ON にしないといけないので、サイトごとで設定。
1. まずは、netlifyでプロジェクトを作成と github レポジトリが紐付いていることを確認
2. その後、ローカルのレポジトリも紐付ける

netlify link

3.セットアップコマンドをつ

netlify lm:setup

4.セットアップコマンドをつ
git status で、.lfsconfig が生成されていることを確認し、git add で.lfsconfigを git の管理下におく。

LFS で管理する

サイトごとの設定の他に、LFS でファイルを管理する必要があるので、

画像ごとでトラッキングしていくか、gitignore の pattern rules も使えるので、LFSで管理するように指定していく。

git lfs track "sample.jpeg"
git lfs track "*.jpeg"

トラッキングされたファイル一覧はこちらで確認可能。

git lfs track

トラッキング時には .gitattributes が生成されるので、こちらも git add と commit して管理する。

詳しくは netlify のドキュメント、または、Git LFS 公式サイトで。
https://www.netlify.com/docs/large-media/#large-media-file-tracking-configuration

確認

うまくnetlify large media の設定と LFS で設定できていれば、あとはいつもどおりレポジトリに push をするだけで、large media 機能がつかえるようになる。

https://lfs-test.netlify.com/sample.jpeg?nf_resize=smartcrop&w=100&h=200

最初のサンプルのようにパラメーターをつけるだけで、Large Media が使えるようになっている！

正常に動いていれば、netlify 管理画面もこんな感じに、ドキュメントのリンクの画面から管理している画像の一覧に変わります。

公式のサンプルもあるけど、自分でためしたサンプルも一応
https://github.com/yahsan2/lfs-test

この netlify large media 機能は、 netlify CMS をつかって画像をアップロードする lfs として画像をコミットしてくれるので、この機能を簡単につかえるので、netlifyCMS もおすすめですね。つまり画像リサイズをもった JAMstack な CMS も簡単につくれるわけです。
https://www.netlifycms.org/docs/netlify-large-media/

なんか静的サイトホスティングサービスでシンプルなのに、このかゆいところにどんどん手が届いてく netlify 拡張具合ほんとファンです。

Puppeteer on AWS Lambda のスクリーンショットで文字が豆腐になるので、ウェブフォントと絵文字フォントをインストール

2018-12-28T19:11:14+09:00

状況

現在開発中の https://poiit.me で puppeteer のスクリーンショットを使って動的OGPをつくっています。
CSSで動的な画像をデザインできるし、一つ lambda 関数を作っておけば、いろんなところで応用ができるのでいいですね。

が、今回は絵文字が、豆腐になってしまったのでその対処法。

参考記事

ベースはこちらの記事を参考にしました。
https://qiita.com/zyyx-matsushita/items/c33f79e33f242395019e

基本は参考Qiita をベースに対応できましたが、絵文字フォントがどこにあるのか結構探したので、備忘録的にメモ。

絵文字フォントダウンロードと設置

Google の Noto Color Emoji はこちらからダウンロードできました。
https://www.google.com/get/noto/#noto-emoji-zsye-color

他のダウンロード可能な絵文字フォントを知っていたら、是非ダウンロード場所教えてください！

で、ダウンロードしたファイルを解答し /.font/NotoColorEmoji.ttf に設置

WEBフォント

こちらは絵文字以外のフォントについては、WEBフォントをつかっています。

screenshot を撮る前に head に追加してやれば反映されるはず。

        await page.evaluate(() => {
            var style = document.createElement('style')
            style.textContent = `
                @import url('//fonts.googleapis.com/css?family=M+PLUS+Rounded+1c|Roboto:300,400,500,700|Material+Icons');
                div, input, a, p{ font-family: "M PLUS Rounded 1c", sans-serif; };`
            document.head.appendChild(style);
            document.body.style.fontFamily = "'M PLUS Rounded 1c', sans-serif";     
        })

その後、長めに wait させたないとフォントが反映されていないことがあるので注意

        await page.waitFor(3000);

こちらの記事を参考にしています。
https://qiita.com/chimame/items/04c9b45d8467cf32892f

関数実行

lambada で呼び出す関数で、フォントをサーバーにインストールする fc-cache コマンド実行してから、
puppeteer の screenshot などを実行すれば、ちゃんと絵文字が反映されているはずです。

アップロードすれば終了です。

めでたし！

serverless を使ったベーシックな puppeteer on lambda は github に置いてあるので必要あれば。
https://github.com/yahsan2/puppeteer-example-on-serverless-lambda

この記事のフォント反映バージョンも要望あればで公開しますので、コメントください〜！

poiit というサービスつくっています！

この記事がもし参考になれば、50円からサポートお願いします〜！

https://poiit.me/yahsan2/

NPO法人をエンジニアが手伝うススメ！Fastly non-profits サポートプログラムなど

2018-12-16T00:08:22+09:00

NPO 法人は、WEBサービスなどを無料または、格安で使わせてもらえるサービスがたくさんある。

僕は NPO法人グリーンズ（ greenz.jp ）のエンジニアとしても活動しているのだが、いろんな有料サービスに実際に触れることができて知見がたまり、他のプロジェクトでも生きているので、そんな NPO 向けのサービスを紹介と、エンジニアがNPO手伝うススメを書く。

NPO 法人向けのサービスの探しかた

探し方ですが、まずはNPO支援コレクション（通称：N コレ！）にまとまっているので、是非ここで探してみてほしい。
http://npo-sc.org/ncolle

有料サービスが、無料になったり、割引価格で使えるものが意外とたくさんある。

この記事でもまとまっています。
https://rhodium.co.jp/2018/01/11/【npo必見】非営利組織-割引・特典-一覧/

探してみるとコレも使えるのか！ってなるものをがあるのですが、いくつか自分のオススメの紹介する。

Slack 有料プラン

Slack は有料のスタンダードプランが無料になるというプログラムがある。
https://get.slack.help/hc/ja/articles/204368833-Slack-の-NPO-支援プログラム

Slack の NPO 支援プログラムは、審査を通った団体に対し、1つのワークスペースの有料プランへのアップグレードを無料または割引価格で提供しています。詳細は次の通りです :

スタンダードプラン : メンバー数が250人以下のワークスペースに対しては無料のアップグレード、250人を超える規模のワークスペースに対しては85%の割引を提供します。

Slack は有料になるとインテグレーションが無限につけれたり、グループメンション、メンバーの発言の分析など、無料版にはない機能が使える。NPOを支援する代わりに、いろんなインテグレーションや、一定数以上大人数で、運用ができるというのは、とても学びがある。

Slack できることがとても増えるので、とてもオススメ。

G Suite for Nonprofits

Google の G Suite の NPO法人であれば無料で使える。
https://support.google.com/nonprofits/answer/3367223?hl=ja

G suite は、Google Apps まわりで、何かと便利なので、NPOを手伝うことで G suite になれるということができる。

株式会社ジャックアンドビーンズ Google Ad Grants の運用代行業務サポート

そもそも、Google Ad Grants が NPOに向けては、月間100万円分（※10,000ドル分）の無料枠で広告出稿ができる。

しかし広告出稿の作業意外と大変なので、さらにジャックアンドビーンズさんが無料で代行運用をしてくれるものがある。

広告運用がめちゃくちゃ大変なので、とてもありがたいし、Google Ad Grants の設定の勉強にとてもなる。

https://npo-marketing-labo.com/free-support

Faslty の non-profits サポート

上記のNコレ！にはないが、このリンクの下の方に Nonprofit Program っていうのがある。
https://www.fastly.com/open-source

具体的な内容は書いていないが、 greenz.jp は無料枠（一定金額まで）をもらって、Faslty を使うことができる。
強靭な Fastly キャッシュを無料で実際に運用できるのは、とても最高である。

なぜエンジニアがNPO手伝うのを勧めるのか

NPO 界隈は、IT の力が圧倒的に足りていない。エンジニアという人種がNPOに関わることは、それだけで大きな力になる。
Slack を導入を手伝うだけでも、Gsuite の設定をするだけでも、めちゃくちゃ貢献できる。

エンジニアとの関わりが比較的つくりづらい NPO とって、エンジニアが近くにいるだけでとても力強い存在となれるのだ。

また力強い存在になれるだけでなく、上記サービスで紹介したように、有料のサービスを実運用で提案しやすいというメリットがある。フリートライアルで数週間試すのと、実際に運用するのは全然ちがう。こうした実験というと語弊があるか、手伝うことでエンジニアとしても実運用の知見を手に入れることができるのは、とてもメリットがあると思う。

しっかりと使いこなせるようになれば、無料でNPOを応援してくれているサービス提供社のサービスを、もっと僕らエンジニアは使うだろうし、そういったNonprofit事業を応援している会社をもっともっと僕らも応援するサイクルになれば win - win - win なのではないだろうか。

是非、NPOは無料で使える気になるサービスがあったら、そのサービスでNPOを手伝ってあげるのはどうだろうか？

注）もちろん、無理やり導入することで運用コストを上げるなど本末転倒な提案は絶対しないでくださいね。笑