tag:crieit.net,2005:https://crieit.net/tags/%E3%83%95%E3%83%AD%E3%83%B3%E3%83%88%E3%82%A8%E3%83%B3%E3%83%89/feed Crieitでタグ「フロントエンド」に投稿された最近の記事 2018-12-18T14:35:56+09:00 https://crieit.net/tags/%E3%83%95%E3%83%AD%E3%83%B3%E3%83%88%E3%82%A8%E3%83%B3%E3%83%89/feed tag:crieit.net,2005:PublicArticle/14615 2018-12-01T10:08:55+09:00 2018-12-18T14:35:56+09:00 https://crieit.net/posts/9a531cc77a86bfec6a0ad932dac69b56 <p>この記事はcrieitでの <a href="https://crieit.net/advent-calendars/2018/technology">個人開発サービスに用いられている技術 Advent Calendar 2018</a> における記念すべき１日目の記事です。</p> <h1 id="このアドベントカレンダーの趣旨"><a href="#%E3%81%93%E3%81%AE%E3%82%A2%E3%83%89%E3%83%99%E3%83%B3%E3%83%88%E3%82%AB%E3%83%AC%E3%83%B3%E3%83%80%E3%83%BC%E3%81%AE%E8%B6%A3%E6%97%A8">このアドベントカレンダーの趣旨</a></h1> <p>「アドベントカレンダー」という文化については触れませんのであしからず。</p> <p>この「個人開発サービスに用いられている技術」というカレンダーの言い出しっぺなので、軽く趣旨を説明したいと思います。</p> <p>このカレンダーで皆さんに書いてもらいたいのは、個人でwebサービスやアプリを開発している方が自分のサービスをどのように作ったかというのを熱く語っていただきたいと思ったからです。</p> <p><a target="_blank" rel="nofollow noopener" href="https://twitter.com/Neko_Inu_/status/1063308508718755840">運営者ギルド</a>というslackコミュニティで個人開発者が集まってワイワイやってるんですが、そこのメンバーを中心にして</p> <ul> <li>日頃作ってるサービスの技術面がどうなっているかをこの機会に共有しあって、今後お互いに困った時にスムーズに聞けるようになるといいな〜</li> </ul> <p>というのと</p> <p>私自身webサービスが作るのも使うのも好きで、特に技術的に何を使って実現しているのかを考えるのも趣味だったりします。<br /> それで過去にこのような「Webサービス分解」というテーマで記事を書いたりもしました。</p> <p><a target="_blank" rel="nofollow noopener" href="https://blog.nabettu.com/entry/disassembly-peing">「#Webサービス分解 「Peing-質問箱-」の分解」</a></p> <p>それで、それぞれみんなが自分で解説してくれると非常に面白い記事が出来上がるのではないかと考えたからです。</p> <p>ということで、まずは私から個人で運営している「ためしがき」というサービスについて解説していきます。</p> <h1 id="ためしがきとは"><a href="#%E3%81%9F%E3%82%81%E3%81%97%E3%81%8C%E3%81%8D%E3%81%A8%E3%81%AF">ためしがきとは</a></h1> <p><a target="_blank" rel="nofollow noopener" href="https://tameshigaki.jp/"><a href="https://crieit.now.sh/upload_images/c181415c1e544827d52f4376408b9da55c01de7b53db5.png" target="_blank" rel="nofollow noopener"><img src="https://crieit.now.sh/upload_images/c181415c1e544827d52f4376408b9da55c01de7b53db5.png?mw=700" alt="ためしがき" /></a></a></p> <p>日本語の商用利用可能なフリーフォントをまとめて試せて、そのままシェアしたり配布先にリンクしたりできるサイトです。今回はこのサービスの技術面について書いていきます。</p> <h1 id="ためしがきに用いられている技術"><a href="#%E3%81%9F%E3%82%81%E3%81%97%E3%81%8C%E3%81%8D%E3%81%AB%E7%94%A8%E3%81%84%E3%82%89%E3%82%8C%E3%81%A6%E3%81%84%E3%82%8B%E6%8A%80%E8%A1%93">ためしがきに用いられている技術</a></h1> <h2 id="フロントエンド編"><a href="#%E3%83%95%E3%83%AD%E3%83%B3%E3%83%88%E3%82%A8%E3%83%B3%E3%83%89%E7%B7%A8">フロントエンド編</a></h2> <p>このサイトはサーバーレスSPAとなっており、Vue.jsのフレームワークであるNuxt.jsを利用して開発しております。</p> <p>デザインは特にCSSフレームワークなど使わずにすべて自前でCSSを書いています。</p> <p><a href="https://crieit.now.sh/upload_images/d38e4f82abbc9b8a285b5eae0e55337c5c01ded0ac060.gif" target="_blank" rel="nofollow noopener"><img src="https://crieit.now.sh/upload_images/d38e4f82abbc9b8a285b5eae0e55337c5c01ded0ac060.gif?mw=700" alt="20181127143603.gif" /></a></p> <p>このモーダルが開くときのアニメーションや、ボタン色が反転したりというアニメーションも基本的には自前のCSSアニメーションで実現しています。消しゴムも。</p> <p>PCで見た際に文字数に応じてプレビューのコンポーネントのサイズが動的に変わっていく部分は、頑張って計算して数を決めているんですが、Gridとかにしたらもっと楽だったかも。追々直していきたいですね。</p> <p>フォントの読み込みはのりぴー先輩のこの本を参考にして、ページ読み込みの際に一気にpreloadさせています。20MBくらいあります😥</p> <p><a target="_blank" rel="nofollow noopener" href="https://amzn.to/2Q7fZPy">誰でもつかえる！ウェブフォント実践マニュアル</a></p> <p>あとは計量化のためにフォントファイルはすべてWoff2形式で配信しています。</p> <h3 id="縦書き機能"><a href="#%E7%B8%A6%E6%9B%B8%E3%81%8D%E6%A9%9F%E8%83%BD">縦書き機能</a></h3> <p>これこないだ追加した新機能なんですが、せっかく法人なのでPR TIMESさんにプレス売ったりしてみました。</p> <p><a target="_blank" rel="nofollow noopener" href="]https://prtimes.jp/main/html/rd/p/000000001.000034255.html">日本語のフリーフォントが一度に試せる「ためしがき」が縦書き対応しました！</a></p> <p>これもCSSで縦書きできないか〜って色々実験していたんですが、結果Safariとかで崩れたり、縦書き対応のフォントとそうでないフォントがあって切り分けが難しいことなど色々ありまして、結局縦書きCSSはやめました。</p> <p>じゃあどうやって縦書きしているかというと、デベロッパーツールを見てもらうとわかるんですが１文字づつDomを分けて、かっこや点などの役物は回転や移動をして調整という形になりました。これだとフォントが縦書き対応しているかどうかは関係なくなります。</p> <p>こちらの実装は前職のスーパーエンジニアの中山さんの作った西尾維新の公式サイトの方式等を参考にしています。</p> <p><a target="_blank" rel="nofollow noopener" href="http://ni.siois.in/">西尾維新公式サイト</a></p> <p>（このサイト作られたの結構前なんですが、今見てもヤバさがヤバい）</p> <p>結構CSS以外でもCanvasを使ってjavascriptで縦書きを実現する際にもこの手法をとられている場合が多いですね。<strong>フォントに依存しない</strong>というのが今回大量のフォントを利用するためしがきでは重要でした。</p> <h2 id="バックエンド編"><a href="#%E3%83%90%E3%83%83%E3%82%AF%E3%82%A8%E3%83%B3%E3%83%89%E7%B7%A8">バックエンド編</a></h2> <h3 id="ホスティング"><a href="#%E3%83%9B%E3%82%B9%E3%83%86%E3%82%A3%E3%83%B3%E3%82%B0">ホスティング</a></h3> <p>ブランチ毎の確認やフォントを本番化前の確認ページにはNetlifyを利用しています。</p> <p>本番環境のみFirebaseというサービスのHostingを利用しています。(CDNの速さがNetlifyはまだ少し遅いため)</p> <h3 id="フォントのシェア機能"><a href="#%E3%83%95%E3%82%A9%E3%83%B3%E3%83%88%E3%81%AE%E3%82%B7%E3%82%A7%E3%82%A2%E6%A9%9F%E8%83%BD">フォントのシェア機能</a></h3> <p>ユーザーが指定のフォントで任意の文言でシェアを行う機能は基本的にfirebaseを利用していて、</p> <ol> <li>html2canvasでクライアントサイドで画像化</li> <li>firebase Storageにアップロード</li> <li>strageのURLや文言をfirestoreに保存</li> <li>firestoreで発行されたIDをもとにシェア用URL発行</li> <li>シェア先のURLをgetするとOPimageに「storageに保存された画像が設定されたhtml」を返却するfirebase functionsが起動</li> <li>5.にアクセスするとtameshigakiのtopへリダイレクト</li> </ol> <p>という流れになっております。</p> <p>1の画像化については、ユーザーの環境によっては不安定なためpuppeteerでの画像発行を試みようとしましたが、functionsでpuppeteer起動して画像発行・・・とすると待ち時間が多いため一旦クライアントサイドでの発行としています。これもチューニングして再挑戦したいですね。</p> <h2 id="CI環境など"><a href="#CI%E7%92%B0%E5%A2%83%E3%81%AA%E3%81%A9">CI環境など</a></h2> <p>Firebase Hostingはビルド環境などがないため、githubにpushしたのを検知してCircle CIでbuildしてfirebase hostingへdeployしてもらっています。</p> <h2 id="運用"><a href="#%E9%81%8B%E7%94%A8">運用</a></h2> <p>フォントファイルの管理はヘッドレスCMSのcontentfulで行っています。</p> <p>ただ、フォントファイルが重たい＆フォント情報の更新はあまり頻度が高くないためビルド時にcontetntfulからダウンロードしてきてbuildファイルに混ぜてdeployしております。</p> <h1 id="今後の展望"><a href="#%E4%BB%8A%E5%BE%8C%E3%81%AE%E5%B1%95%E6%9C%9B">今後の展望</a></h1> <ul> <li>フォントの追加作業が大変で全然出来ていないので、ぼちぼち進めていこうと思っています。</li> <li>フリーフォントを使ってブログ用OGP画像を作る機能とかもあったらいいかな〜と考えています。</li> <li>どこかデザイン系でシナジーがある会社さん、有料フォントのサブスクリプションを行っているサービスさん、なにかしら協業したりできればと思っていますので心当たりある方はご連絡いただけると幸いです。</li> </ul> <h1 id="まとめ"><a href="#%E3%81%BE%E3%81%A8%E3%82%81">まとめ</a></h1> <p>こんな感じで個人で作ったサービスをどのように作っているかというのを、カレンダーに登録したメンバーも書いていってくれます！明日は「Nyaaanを支える技術」で<a target="_blank" rel="nofollow noopener" href="https://twitter.com/morix1500">morixさん</a>！頼んだ！</p> <p>また、カレンダーにはまだ空きがありますので、参加したいからは遠慮なくどうぞ！！！</p> <p><a href="https://crieit.net/advent-calendars/2018/technology">個人開発サービスに用いられている技術 Advent Calendar 2018</a></p> nabettu tag:crieit.net,2005:PublicArticle/14547 2018-09-20T10:05:48+09:00 2018-10-31T10:29:50+09:00 https://crieit.net/posts/037ff25795b66d00a85cfce714cfce99 <p><a href="https://crieit.now.sh/upload_images/4cf58d0cd308adaf31acb59bed16c2955ba31ad0984c9.png" target="_blank" rel="nofollow noopener"><img src="https://crieit.now.sh/upload_images/4cf58d0cd308adaf31acb59bed16c2955ba31ad0984c9.png?mw=700" alt="staticsite.png" /></a></p> <p>SPAなどの静的サイト（PHPやRubyなどのサーバープログラムを走らせない環境でのWebサイト）のを公開するにあたって、運用・配信（ホスティング）するならどこがいいかと聞かれたのですが、そのときの回答を技術書典の宣伝も兼ねてブログにしたためます。</p> <p>今回は次の４つで比較しています。</p> <ul> <li>GitHub Pages</li> <li>Firebase Hosting</li> <li>GitLab Pages</li> <li>Netlify</li> </ul> <p>上記４つはどれも<strong>独自ドメインの設定は無料</strong>で行うことが出来ます。</p> <p>※比較的初心者に向けて書いている前提です。そのためAWS S3やレンタルサーバーはアカウントがなければ設定も面倒ですし今回は除外しています。</p> <p>少し機能について説明が必要な部分があるので、先に説明を書きます。</p> <h2 id="Rewrite設定について"><a href="#Rewrite%E8%A8%AD%E5%AE%9A%E3%81%AB%E3%81%A4%E3%81%84%E3%81%A6">Rewrite設定について</a></h2> <p>SPAで静的サイトを公開する際にありがちなミスなのですが、URLを変更してサブディレクトに進んでからリロードすると404ページになってしまうというものです。</p> <p>これは公開サイトでページの404のRewrite設定が出来ていない場合に起こってしまう事象です。</p> <p>「ファイルの読み込み時に404だったら index.html を返す設定」をすることで、リロードしても継続してサイト閲覧することが可能になります。(その場合はJavaScriptで404ページかどうかを判定します。)</p> <p>設定が出来ない環境でSPAのルーティングを利用する場合はハッシュルーターにする必要があります。</p> <h2 id="ビルド機能について"><a href="#%E3%83%93%E3%83%AB%E3%83%89%E6%A9%9F%E8%83%BD%E3%81%AB%E3%81%A4%E3%81%84%E3%81%A6">ビルド機能について</a></h2> <p>プロジェクトによってはWebpackなどを利用して、html,css,jsファイルをコンパイル（トランスパイル）してから公開すると思います。</p> <p>そのときにビルド機能がついている環境の場合は、「手元でビルドしたものをgitで管理したり、ビルドしてからdeployする」等の手間が省けます。</p> <p>テストを書いていたらテストが通るかどうかなどもそこでチェックして、デプロイするかどうかを選択できたりもします。</p> <h1 id="各サービスの機能を紹介"><a href="#%E5%90%84%E3%82%B5%E3%83%BC%E3%83%93%E3%82%B9%E3%81%AE%E6%A9%9F%E8%83%BD%E3%82%92%E7%B4%B9%E4%BB%8B">各サービスの機能を紹介</a></h1> <h2 id="GitHub Pages"><a href="#GitHub+Pages">GitHub Pages</a></h2> <ul> <li>とにかくタダで使えます！</li> <li>使えますが、下記の記事のような制限があります</li> </ul> <p><a target="_blank" rel="nofollow noopener" href="https://qiita.com/tonishi/items/e5696b477278f3c49b77">https://qiita.com/tonishi/items/e5696b477278f3c49b77</a></p> <ul> <li>設定した特定のブランチが自動で公開されるので管理が楽。</li> <li>×: SPA用のRewrite設定不可</li> <li>×: ビルド機能無し</li> </ul> <h2 id="Firebase Hosting"><a href="#Firebase+Hosting">Firebase Hosting</a></h2> <ul> <li>△: たくさんアクセスがあるとデータ容量に応じて課金が必要になります</li> </ul> <p>(無料枠で利用していて制限まで行ったら、通知が来るのみで勝手に課金されるようなことはありません。)</p> <ul> <li>SPA用のRewrite設定可能</li> <li>特定のパスをFirebase Functionsに繋ぐことができる</li> <li>×: ビルド機能無し</li> </ul> <h2 id="GitLab Pages"><a href="#GitLab+Pages">GitLab Pages</a></h2> <ul> <li>とにかくタダで使える</li> <li>SPA用のRewrite設定可能</li> <li>特定のブランチが自動公開できて管理が楽</li> <li>ビルド機能アリ</li> </ul> <h2 id="Netlify"><a href="#Netlify">Netlify</a></h2> <ul> <li>とにかくタダで使える</li> <li>SPA用のRewrite設定可能</li> <li>GitHubやGitLabと連携して、静的サイトを自動で公開可能</li> <li>ビルド機能アリ</li> <li>特定のパスにAWS lambda(Netlify Functions)接続可能</li> </ul> <h1 id="まとめ"><a href="#%E3%81%BE%E3%81%A8%E3%82%81">まとめ</a></h1> <p>すでにGitHub、GitLabでソースを管理しているとして、ライブラリのリファレンスなどのちょっとしたサイトならそれぞれのPages機能を使うと手軽です。</p> <p>Firebaseを利用していて、FunctionsとパスをつなぎたいならFirebase Hostingを利用しましょう。しかしビルド機能がないので必要な場合はCircle CIなどと併用が必要です。</p> <p>他、Firebase Functionsとつなぎたい場合を除いて<strong>便利な機能が揃っているNetlifyをおすすめ</strong>しています。Netlifyには他にもたくさんの便利な機能が備わっています。</p> <h2 id="Netlifyの上記以外便利機能紹介"><a href="#Netlify%E3%81%AE%E4%B8%8A%E8%A8%98%E4%BB%A5%E5%A4%96%E4%BE%BF%E5%88%A9%E6%A9%9F%E8%83%BD%E7%B4%B9%E4%BB%8B">Netlifyの上記以外便利機能紹介</a></h2> <ul> <li>ブランチ毎に自動でサイトを公開できる（プルリクを確認するときなど便利）</li> <li>Webhookでビルドしたり、ビルドしてデプロイしたらSlackに通知する（GitLabも可能）</li> <li>ブランチごとのA/Bテスト用に出し分けができる</li> <li>サーバーサイドレンダリングしないSPAだけど、コンテンツに応じてOGP画像などのmeta情報を出し分けられる(Prerendering機能)</li> <li>静的サイトであるあるな「フォームだけ設置したい」場合もNetlify Formが利用できる</li> <li>ブログなどを作りたい場合にコンテンツを管理できるNetlify CMSもあります</li> </ul> <p>他にもチーム開発で必要な機能や、BASIC認証の設定(有料)など様々な<strong>静的サイト公開に便利な機能が備わっています！</strong></p> <h2 id="ということで宣伝"><a href="#%E3%81%A8%E3%81%84%E3%81%86%E3%81%93%E3%81%A8%E3%81%A7%E5%AE%A3%E4%BC%9D">ということで宣伝</a></h2> <p>そんなNetlifyの様々な機能を１から１０までほぼ全て実例を使って解説する本を今度の10月8日に開催される技術書典で販売しますので、いらっしゃる方はログインして下記のページをチェックしてぜひぜひ買いに来てください！！！</p> <p><a target="_blank" rel="nofollow noopener" href="https://techbookfest.org/event/tbf05/circle/24720002">https://techbookfest.org/event/tbf05/circle/24720002</a></p> <p>以上ですが、本買わなくともNetlifyはめっちゃ便利なので一度使ってみて下さい！</p> nabettu