タグ

2019年3月18日のブックマーク (5件)

  • Now でクラウドの複雑さから解放されよう、今すぐに - Qiita

    次々に登場するクラウドの新サービスに疲れを感じていたら、これを試してください。 Now は新しいスタイルの PaaS です。 AWS や GAE とは比較にならないくらいシンプルで高速なデプロイができます。 2018年11月19日に Now 2.0 の内容で書き換えました。[差分] TL;DR Now が他とどう違うのかというより、どのように動作するかを書いたほうが分かりやすいでしょう。 Now のデプロイは以下の手順で行います。 now.json をプロジェクトに追加する now を実行する 認証用のメールが届いたらリンクを開く これだけです。 ソースが自動的にデプロイされ、now.json に従ってサーバが走ります。*.now.sh という形式のドメインが自動的に割り当てられて、瞬時に HTTPS で見られるようになります。CDN も有効になっています。独自ドメインを取得していれば、そ

    Now でクラウドの複雑さから解放されよう、今すぐに - Qiita
  • Next.jsでデータを取得する 〜getInitialProps〜 - Qiita

    2020.05 Next.js 9.3から、データ取得用の新しいメソッド(getServerSidePropsなど)が推奨になりました。新しいコードをgetInitialPropsで書く理由はありません https://qiita.com/matamatanot/items/1735984f40540b8bdf91 Next.jsでページロード前に必要なデータをfetchするには、getInitialPropsを利用しますが、ちょっと引数が複雑だったのでメモ。 以下、概ね↓の和訳です。 https://nextjs.org/docs/#fetching-data-and-component-lifecycle データのfetchとコンポーネントライフサイクル state,ライフサイクルhook,初期データが必要なときは、SFCの代わりにReact.Componentをexportします。

    Next.jsでデータを取得する 〜getInitialProps〜 - Qiita
  • Next.js 8がリリースされた 🎉 新機能・改善点まとめ - Qiita

    2月11日にNext.js 8のリリースが公式ブログでアナウンスされました。 昨年9月のバージョン7のリリースから5ヶ月ぶりのメジャーアップデートですね。後方互換性を保ったアップデートとされています。 元記事で発表された新機能や改善点、変更点などをかいつまんでまとめてみました。 実際に自分で開発しているサービスをアップデートしてみた所感も少し書いています。 新しく追加された機能 サーバーレスに対応したビルド ビルド時の環境変数注入 crossOrigin設定の追加 改善点・変更点 ビルド時のメモリ使用量の大幅な削減 Prefetchのパフォーマンス向上 生成するHTMLのサイズ削減 開発用Webサーバの起動時間短縮 Static Exportの速度向上 Head要素の重複排除 インラインJSの廃止 外部APIへAuthenticationするサンプルの公開 新しく追加された機能 サーバーレ

    Next.js 8がリリースされた 🎉 新機能・改善点まとめ - Qiita
  • ブラウザレンダリング入門〜知ることで見える世界〜 - Qiita

    はじめに 『レンダリングの仕組みなんて知らなくても、ブラウザが勝手にやってくれるじゃん!』 当時駆け出しのエンジニアだった私はそう思っていました。 実際、当時の私はレンダリングの『レ』の字も知りませんでしたが、特に業務上で問題はありませんでした。 しかし、その時は突然訪れました。 クライアントの要望でアニメーションを多彩に取り入れた案件を実装した際に、テスト段階で一部ブラウザ(S○f○ri、E○ge)でアニメーションがひどい状況になっていることが発覚しました。 (開発中はChromeで確認を行っており、Chromeでは特に問題はなかったので発覚が遅れました。) それからは、狂ったようにパフォーマンスの改善方法をググり、修正する日々が続きました。(最終的には、なんとかマルチブラウザでの動作も担保し、納品まで完了しました。) その案件が落ち着いた後、改めて自分の調べたことを振り返ると、局所的な

    ブラウザレンダリング入門〜知ることで見える世界〜 - Qiita
  • NodeでChromeを操作してTwitterシェア用画像を生成するサーバー作った - Crieit

    Node.jsにはPuppeteerという画面を表示せずにChromeを扱えるライブラリがあります。それを利用し、URLをパラメータとして与えるだけでスクリーンショットを画像としてブラウザで表示させることができるサーバーアプリケーションを作成しました。 実際にこのような画像が作成できます。例として下記はボード内投稿にコードを入れた場合に表示される画像です。 下記は記事の画像です。 HTML, CSSから生成しているためドロップシャドウとかもこんな感じで簡単に効かせる事ができています。 GitHubで公開していますので、とりあえず使って見たいという方は記事を読み飛ばして最後の方にあるリンクをご利用ください(こらえきれぬ涙で頬を濡らしながら) 何が便利なのか WebサービスのURLをTwitter等でシェアするだけで、URLだけでなくツイートに画像も表示されるのをよく見ると思います。 これは画

    NodeでChromeを操作してTwitterシェア用画像を生成するサーバー作った - Crieit
    uchiuchiyama
    uchiuchiyama 2019/03/18
    フォントの問題は残るけど、`now`でサーバレスにすると安定稼働面の管理が楽ですよ(CDN化も自動ですし)。 たとえばこれとか参考になる https://github.com/zeit/og-image