tag:crieit.net,2005:https://crieit.net/tags/lfs/feed Crieitでタグ「lfs」に投稿された最近の記事 2019-04-24T12:19:15+09:00 https://crieit.net/tags/lfs/feed tag:crieit.net,2005:PublicArticle/14940 2019-04-21T22:24:31+09:00 2019-04-24T12:19:15+09:00 https://crieit.net/posts/URL-netlify-Large-Media <h1 id="netlify の Large Media とは"><a href="#netlify+%E3%81%AE+Large+Media+%E3%81%A8%E3%81%AF">netlify の Large Media とは</a></h1> <p>Git レポジトリでサイトコンテンツを管理する際に、画像やPSD/ZIPなどの大きいファイルを含めて管理するために Git LFS（Git Large File Strage）と仕組みがある。<br /> LFS については細かく触れないが、LFS を使って netlify にデプロイされた画像を、URLパラメータをつかってリサイズやクロップが便利に扱えるように使える神機能である。</p> <p>Large Media 公式ドキュメント<br /> <a target="_blank" rel="nofollow noopener" href="https://www.netlify.com/docs/large-media/#enabling-netlify-large-media">https://www.netlify.com/docs/large-media/#enabling-netlify-large-media</a></p> <p>Git LFS 公式サイト<br /> <a target="_blank" rel="nofollow noopener" href="https://git-lfs.github.com/">https://git-lfs.github.com/</a></p> <h2 id="netlify Large Media のサンプル"><a href="#netlify+Large+Media+%E3%81%AE%E3%82%B5%E3%83%B3%E3%83%97%E3%83%AB">netlify Large Media のサンプル</a></h2> <p>例えば、普通に gitレポジトリ に含めて github などを介して netlify デプロイすると、このようなURLで画像にアクセスできる。</p> <p><a target="_blank" rel="nofollow noopener" href="https://netlify-photo-gallery.netlify.com/images/apple.jpg">https://netlify-photo-gallery.netlify.com/images/apple.jpg</a><br /> <img src="https://netlify-photo-gallery.netlify.com/images/apple.jpg?nf_resize=fit&w=1000&h=1000" alt="りんご画像" /></p> <p>これにこんな形で、最後に <code>?nf_resize=fit&w=200</code> を加えてやると、リサイズされた画像を生成して返してくれるのだ。<br /> <a target="_blank" rel="nofollow noopener" href="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</a><br /> <img src="https://netlify-photo-gallery.netlify.com/images/apple.jpg?nf_resize=fit&w=200" alt="リサイズされたりんご画像" /></p> <p>さらに次は、画像URLにの最後に <code>?nf_resize=smartcrop&w=200</code> を加えてやると、クロップされた画像を生成して返してくれる。</p> <p><img src="https://netlify-photo-gallery.netlify.com/images/apple.jpg?nf_resize=smartcrop&w=200&h=200" alt="クロップされたりんご画像" /></p> <p>１つ画像をアップするだけでいい感じにリサイズされた画像やクロップされたをすぐに使えるのだ！神すぎないか？</p> <p>これが <strong>netlify Large Media</strong> 機能だ。</p> <p>公式サンプルに Transformation demo とジェネレーターがあるので、もう少し触ってみたいかたはこちら。<br /> <a target="_blank" rel="nofollow noopener" href="https://netlify-photo-gallery.netlify.com">https://netlify-photo-gallery.netlify.com</a></p> <h2 id="netlify Large Media の使い方"><a href="#netlify+Large+Media+%E3%81%AE%E4%BD%BF%E3%81%84%E6%96%B9">netlify Large Media の使い方</a></h2> <h3 id="環境準備"><a href="#%E7%92%B0%E5%A2%83%E6%BA%96%E5%82%99">環境準備</a></h3> <p>最初に一度ローカル環境を準備する必要がある。</p> <h4 id="バージョン確認"><a href="#%E3%83%90%E3%83%BC%E3%82%B8%E3%83%A7%E3%83%B3%E7%A2%BA%E8%AA%8D">バージョン確認</a></h4> <p><code>git lfs version</code><br /> Git LFS version: v2.5.1以上　を確認<br /> なければ、Git LFS をインストール。詳細は公式サイトで割愛<br /> <a target="_blank" rel="nofollow noopener" href="https://git-lfs.github.com/">https://git-lfs.github.com/</a></p> <p><code>netlify -v</code><br /> netlify-cli: 2.6.4以上 を確認</p> <p>なければ、netlify-cli をインストール。詳細は公式ドキュメントで割愛<br /> <a target="_blank" rel="nofollow noopener" href="https://www.netlify.com/docs/cli/">https://www.netlify.com/docs/cli/</a></p> <h4 id="large media プラグインインストール"><a href="#large+media+%E3%83%97%E3%83%A9%E3%82%B0%E3%82%A4%E3%83%B3%E3%82%A4%E3%83%B3%E3%82%B9%E3%83%88%E3%83%BC%E3%83%AB">large media プラグインインストール</a></h4> <p>バージョン確認後、netlify-cliのプラグインをインストール</p> <pre><code>netlify plugins:install netlify-lm-plugin netlify lm:install </code></pre> <p>これで環境準備は完了</p> <h3 id="サイト（レポジトリ）ごとの設定"><a href="#%E3%82%B5%E3%82%A4%E3%83%88%EF%BC%88%E3%83%AC%E3%83%9D%E3%82%B8%E3%83%88%E3%83%AA%EF%BC%89%E3%81%94%E3%81%A8%E3%81%AE%E8%A8%AD%E5%AE%9A">サイト（レポジトリ）ごとの設定</a></h3> <p>Large Media 機能を使うには、サイトごとに機能を ON にしないといけないので、サイトごとで設定。<br /> 1. まずは、netlifyでプロジェクトを作成 と github レポジトリが紐付いていることを確認<br /> 2. その後、ローカルのレポジトリも紐付ける</p> <pre><code>netlify link </code></pre> <p>3.セットアップコマンドをつ</p> <pre><code>netlify lm:setup </code></pre> <p>4.セットアップコマンドをつ<br /> <code>git status</code> で、<code>.lfsconfig</code> が生成されていることを確認し、git add で<code>.lfsconfig</code>を git の管理下におく。</p> <h3 id="LFS で管理する"><a href="#LFS+%E3%81%A7%E7%AE%A1%E7%90%86%E3%81%99%E3%82%8B">LFS で管理する</a></h3> <p>サイトごとの設定の他に、LFS でファイルを管理する必要があるので、</p> <p>画像ごとでトラッキングしていくか、gitignore の <a target="_blank" rel="nofollow noopener" href="https://git-scm.com/docs/gitignore#_pattern_format">pattern rules</a> も使えるので、LFSで管理するように指定していく。</p> <pre><code>git lfs track "sample.jpeg" git lfs track "*.jpeg" </code></pre> <p>トラッキングされたファイル一覧はこちらで確認可能。</p> <pre><code>git lfs track </code></pre> <p>トラッキング時には <code>.gitattributes</code> が生成されるので、こちらも git add と commit して管理する。</p> <p>詳しくは netlify のドキュメント、または、Git LFS 公式サイトで。<br /> <a target="_blank" rel="nofollow noopener" href="https://www.netlify.com/docs/large-media/#large-media-file-tracking-configuration">https://www.netlify.com/docs/large-media/#large-media-file-tracking-configuration</a></p> <h3 id="確認"><a href="#%E7%A2%BA%E8%AA%8D">確認</a></h3> <p>うまくnetlify large media の設定と LFS で設定できていれば、あとはいつもどおりレポジトリに push をするだけで、large media 機能がつかえるようになる。</p> <p><a target="_blank" rel="nofollow noopener" href="https://lfs-test.netlify.com/sample.jpeg?nf_resize=smartcrop&w=100&h=200">https://lfs-test.netlify.com/sample.jpeg?nf_resize=smartcrop&w=100&h=200</a><br /> <img src="https://lfs-test.netlify.com/sample.jpeg?nf_resize=smartcrop&w=100&h=200" alt="木" /><br /> 最初のサンプルのようにパラメーターをつけるだけで、Large Media が使えるようになっている！</p> <p>正常に動いていれば、netlify 管理画面もこんな感じに、ドキュメントのリンクの画面から管理している画像の一覧に変わります。</p> <h3><img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/6531/1c50d7f0-e372-775d-df7d-379669687ba4.png" alt="Screen Shot on 0031-04-21 at 21:41:59.png" /></h3> <p>公式のサンプルもあるけど、自分でためしたサンプルも一応<br /> <a target="_blank" rel="nofollow noopener" href="https://github.com/yahsan2/lfs-test">https://github.com/yahsan2/lfs-test</a></p> <h2 id="netlify Large Media と CMS"><a href="#netlify+Large+Media+%E3%81%A8+CMS">netlify Large Media と CMS</a></h2> <p>この netlify large media 機能は、 netlify CMS をつかって画像をアップロードする lfs として画像をコミットしてくれるので、この機能を簡単につかえるので、netlifyCMS もおすすめですね。つまり画像リサイズをもった JAMstack な CMS も簡単につくれるわけです。<br /> <a target="_blank" rel="nofollow noopener" href="https://www.netlifycms.org/docs/netlify-large-media/">https://www.netlifycms.org/docs/netlify-large-media/</a></p> <p>なんか静的サイトホスティングサービスでシンプルなのに、このかゆいところにどんどん手が届いてく netlify 拡張具合ほんとファンです。</p> yahsan2