「Netlify」の記事 - Crieit

Netlifyのビルド時間をGitHub Actionsで0時間にして月末のヒヤヒヤから解放されよう！

2021-02-20T15:13:23+09:00

Netlifyのビルド時間をGitHub Actionsで0時間にして月末のヒヤヒヤから解放されよう！

Netlify

みなさんもご存じ超便利ありがたサービスNetlifyですが、無料で使ってる貧民には毎月とある悩みがでてきます。

今月のビルド時間は残り○○分

NetlifyはGitHubのレポジトリと連携して、フロントのビルドを実行した上で、デプロイするという超便利機能があるのですが、このビルドを回すのに時間の制約があり、

無料民だと月300分となっております。(それ以上はPro版月19ドル課金すれば問題なく使えます。課金も経験済み)

300分あれば大丈夫そう、とそう思う気もしなくなくもないですが、

複数レポジトリにわたってNetlifyを使っていたり、Gatsby.jsで画像をたくさん使っていてSharpの画像リサイズに時間がかかったり、Dependabotで定期的にPRが出てPreview deployが発生したりすると
案外ぎりぎりだったりします。

なので、私のような貧民は月末になると、Netlifyのビルド時間が気になってこのブログの記事を書かなくなったり、サイトリファクターのペースが落ちてしまいます。

特にブログ更新は顕著で、例えば今書いている記事も通勤の電車の中でスマホから書いているわけなので、細かくコミットを打って保存したいのですが、コミットを打ってプッシュしてしまうと、ビルドが走ることになるので、WIPでのコミットが億劫になり、結果的に家のようなまとめてプッシュできるような作業スペースがある場所でないと、
ブログを書かなくなってしまいました。

せっかくNetlify CMS化した意味がないですね。

この悩みGitHub Actionsにお任せください

ということでこの悩み、GitHub Actionsで解決してみたいと思います。

なんか工務店のCMみたいな表現になってしまいました。

Netlifyのビルド時やっていることを洗い出して自前でやってみる

基本的にNetlifyがビルド時やってることは、例えばGatsby.jsであれば、gatsby buildコマンドを実行し、特定のディレクトリー(大概は./public)に配置されたビルド済みJSをデプロイする動きなので、
それをそっくりGitHub Actionsに移行すればいいのですが、Netlifyがビルド済みJSに対して後処理(PostProcess)を実行してるパターンもあります。

私の場合、JSやイメージを最適化してくれるAsset optimizationとFormタグに属性をつければ勝手にFormを作ってくれるForm detectionの二つが設定されていましたのでそれぞれまず無効化します。

Form detectionの解説はこちらを参照ください。

こちら、Netlifyで実施してくれなくなりますので、こちらで実装し直す必要があります。

gatsby-plugin-minify

Asset optimizationのうち、JSやCSSのminiferはgatsby-plugin-minifyを使うことでhtmlやJS、CSSをminifyできます。

インストールはいつも通りNPM(yarn)から

npm install gatsby-plugin-minify

使い方はgatsby-config.jsのpluginsに次のように設定すればできます。

    {
      resolve: 'gatsby-plugin-minify',
      options: {
        caseSensitive: false,
        collapseBooleanAttributes: true,
        useShortDoctype: false,
        removeEmptyElements: false,
        removeComments: true,
        removeAttributeQuotes: false,
        minifyCSS: true,
        minifyJS: true,
      },
    },

minifyCSSとminifyJSをtrueにすることにより、CSSについてはclean-css、JSについてはUglifyJSを使って一緒にminifyされます。また、gatsby-plugin-minifyの裏側はhtml-minifierをgatsby-node.jsでpostbuildで全掛けしているだけなので、細かいオプションはhtml-minifierで設定できる感じです。

ちなみに、気を付けないといけないのがremoveAttributeQuotesのオプションをfalseにすること。

これをtrueにすると、HTMLタグ内のアトリビュートにダブルクオートが入らなくなりちょっとファイルが軽くなるのですが、berss.comのようにサイトのRSSリンクを取得するようなシステムでうまく読み込めなくなってしまい、サイト更新が最悪通知できなくなってしまう現象が発生しました。

これで1日使ってしまった...。

RSSのリンクをページのLinkとして仕込んでいる人は要注意です。

imgurを使うことで、画像ホスティングとリサイズを同時にやっちゃう

imgurというサービスがあります。

主にRedditとかGifをあげるための画像ホスティングサービスとして有名なのですが、こちらを使うことで簡単に画像のリサイズとホスティングを実現できるため、このブログではimgurを使ってます。

画像URLの後ろに画像サイズに合わせたキーワードを入れることで実現できます。

例えばこちらのURLの画像を

[https://i.imgur.com/Wfz9G0B.png](https://i.imgur.com/Wfz9G0B.png)

160x160にリサイズするには後ろにbをくっつけます。

[https://i.imgur.com/Wfz9G0Bb.png](https://i.imgur.com/Wfz9G0Bb.png)

これで、画像最適化も完了です。

GitHub Actionsでビルドとデプロイ

ここまで来たらあとはGitHub Actionsでビルドとデプロイを行うだけです。

masterブランチへのPRでPreviewデプロイ、masterへのコミットで本番デプロイをするように2つactionsを作ります。

まずはPreviewデプロイ

name: DeployToNetlifyPreview
on:
  pull_request:
    branches:
      - master

jobs:
  build:
    runs-on: ubuntu-latest

    steps:
      - name: Checkout source code
        uses: actions/checkout@v2
      - name: Cache node_modules
        uses: actions/cache@v1
        with:
          path: node_modules
          key: ${{ runner.OS }}-build-${{ hashFiles('**/package-lock.json') }}
          restore-keys: |
            ${{ runner.OS }}-build-
            ${{ runner.OS }}
      - name: Setup Node
        uses: actions/setup-node@v1
        with:
          node-version: 12.x
      - name: npm install and build
        env:
          GATSBY_GITHUB_CLIENT_SECRET: ${{secrets.GATSBY_GITHUB_CLIENT_SECRET}}
          GATSBY_GITHUB_CLIENT_ID: ${{secrets.GATSBY_GITHUB_CLIENT_ID}}
          GATSBY_ALGOLIA_SEARCH_API_KEY: ${{secrets.GATSBY_ALGOLIA_SEARCH_API_KEY}}
          GATSBY_ALGOLIA_INDEX_NAME: ${{secrets.GATSBY_ALGOLIA_INDEX_NAME}}
          GATSBY_ALGOLIA_APP_ID: ${{secrets.GATSBY_ALGOLIA_APP_ID}}
          GATSBY_ALGOLIA_ADMIN_API_KEY: ${{secrets.GATSBY_ALGOLIA_ADMIN_API_KEY}}
          FAUNADB_SERVER_SECRET: ${{secrets.FAUNADB_SERVER_SECRET}}
        run: |
          npm install
          npm run build
      - name: Deploy to netlify
        run: npx netlify-cli deploy --dir=./public > cli.txt
        env:
          NETLIFY_AUTH_TOKEN: ${{ secrets.NETLIFY_AUTH_TOKEN }}
          NETLIFY_SITE_ID: ${{ secrets.NETLIFY_SITE_ID }}
      - name: Cat cli.txt
        run: |
          cat cli.txt
          sed -i -z 's/\n/\\n/g' cli.txt
      - name: Post Netlify CLI Comment
        env:
          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
          URL: ${{ github.event.pull_request.comments_url }}
        run: |
          curl -X POST \
               -H "Authorization: token ${GITHUB_TOKEN}" \
               -d "{\"body\": \"$(cat cli.txt)\"}" \
               ${URL}

node setupやnpm install, buildはいつも通りです。

GitHub ActionsではSecretを指定することができますので、Algolia searchやFaunaDBのAPIキーはシークレットとしてビルド時の環境変数で渡してます。

ちなみに、環境変数でGATSBY_XXXXとしておくと、ビルドされたJSにも環境変数が入る形になります。（JSから環境変数を使う場合はこれを忘れないこと。）これ結構詰まるポイント。

デプロイにはnetlify-cliを使います。

必要な環境変数はサイトIDとAUTH TOKENです。

ちょっと特徴として、netlify-cliでデプロイが成功すると、デプロイURLが標準出力に出ますので、それをいったん適当なtextファイルに書き出し、

PRコメントにもURLを送るようにしています。

GitHub Actionsの素晴らしいところは、GITHUB TOKENについては、特に設定しなくてもsecrets.GITHUB_TOKENで取り出すことができますので簡単にPRコメントに送信できます。

      - name: Deploy to netlify
        run: npx netlify-cli deploy --dir=./public > cli.txt
        env:
          NETLIFY_AUTH_TOKEN: ${{ secrets.NETLIFY_AUTH_TOKEN }}
          NETLIFY_SITE_ID: ${{ secrets.NETLIFY_SITE_ID }}
      - name: Cat cli.txt
        run: |
          cat cli.txt
          sed -i -z 's/\n/\\n/g' cli.txt
      - name: Post Netlify CLI Comment
        env:
          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
          URL: ${{ github.event.pull_request.comments_url }}
        run: |
          curl -X POST \
               -H "Authorization: token ${GITHUB_TOKEN}" \
               -d "{\"body\": \"$(cat cli.txt)\"}" \
               ${URL}

次に本番へのデプロイです。

name: DeployToNetlifyPRD
on:
  push:
    branches:
      - master

jobs:
  build:
    runs-on: ubuntu-latest

    steps:
      - name: Checkout source code
        uses: actions/checkout@v2
      - name: Cache node_modules
        uses: actions/cache@v1
        with:
          path: node_modules
          key: ${{ runner.OS }}-build-${{ hashFiles('**/package-lock.json') }}
          restore-keys: |
            ${{ runner.OS }}-build-
            ${{ runner.OS }}
      - name: Setup Node
        uses: actions/setup-node@v1
        with:
          node-version: 12.x
      - name: npm install and build
        env:
          GATSBY_GITHUB_CLIENT_SECRET: ${{secrets.GATSBY_GITHUB_CLIENT_SECRET}}
          GATSBY_GITHUB_CLIENT_ID: ${{secrets.GATSBY_GITHUB_CLIENT_ID}}
          GATSBY_ALGOLIA_SEARCH_API_KEY: ${{secrets.GATSBY_ALGOLIA_SEARCH_API_KEY}}
          GATSBY_ALGOLIA_INDEX_NAME: ${{secrets.GATSBY_ALGOLIA_INDEX_NAME}}
          GATSBY_ALGOLIA_APP_ID: ${{secrets.GATSBY_ALGOLIA_APP_ID}}
          GATSBY_ALGOLIA_ADMIN_API_KEY: ${{secrets.GATSBY_ALGOLIA_ADMIN_API_KEY}}
          FAUNADB_SERVER_SECRET: ${{secrets.FAUNADB_SERVER_SECRET}}
        run: |
          npm install
          npm run build
      - name: Deploy to netlify
        run: npx netlify-cli deploy --prod --dir=./public
        env:
          NETLIFY_AUTH_TOKEN: ${{ secrets.NETLIFY_AUTH_TOKEN }}
          NETLIFY_SITE_ID: ${{ secrets.NETLIFY_SITE_ID }}

ほとんど同じですが、netlify-cliでdeployコマンドに --prodオプションを入れることで、本番環境へデプロイされます。

      - name: Deploy to netlify
        run: npx netlify-cli deploy --prod --dir=./public
        env:
          NETLIFY_AUTH_TOKEN: ${{ secrets.NETLIFY_AUTH_TOKEN }}
          NETLIFY_SITE_ID: ${{ secrets.NETLIFY_SITE_ID }}

結論

これで、Netlifyのビルド時間は0になり、精神的に安心できるようになりました。

リファクタや記事の執筆もはかどっていいですね！！

いつかサーバーを閉じるとき〜お金をかけずに 410 を返す方法〜

2020-12-10T20:50:51+09:00

この記事は Fediverse Advent Calendar 2020 9日目の記事です。

昨日の記事は、Fediverse でおなじみのコーヒー豆屋さんNelson Coffee Roasterさんの仙台でおすすめのお店記事でした。
Nelsonさんとこからは、僕も何度か豆を買わせていただいてます。仙台行ってみたい。
Fediverseでお世話になっている豆屋です｜まめや｜note

今日の記事は、サーバーを閉じる時のお話です。
ActivityPub サーバーをやってきたけど、いろんな理由で閉じたい… と言うことがあると思います。
連合しているサーバーにできるだけ影響を与えず、かつ可能な限りお金をかけずにサーバーを閉じる方法を書きます。

僕は Mastodon サーバーしか運営していないので未確認ですが、他の ActivityPub 対応サーバーでも使える手だと思います。

tl;dr

Netlify を使って、無料で 410 Gone を返すヤツを作った
tootctl self-destruct はどう動くか知らん

410 を返せとは言われるけど

サーバーを閉じたいと誰かに相談すれば、だいたい「しばらくの間は410 Goneを返した方がいい」と言われるわけですが、410 Goneを返すにもサーバーが必要なわけで、特に経済的な理由で閉じたいとき解決になってない、という話があります。

410 Gone をお金をかけずに返す方法があれば、そういう苦難から解放されるわけです。

それ、Netlify を使えば無料で出来ます。

無料で 410 Gone を返すヤツを作る

Netlify という静的なサイトを無料でホスティングするサービスがあります。
こいつを活用すると、閉鎖したサーバーに来たリクエストに対して 410 Goneを返すことができます。しかも無料です。
デプロイするだけでそれができるリポジトリを作りました。
cyber-gene/netlify-410

使い方

リポジトリをフォークしましょう。
Netlify にデプロイするには、自分のリポジトリである必要があります。
Netlify のアカウントを持ってなければ作成する
有料プランもありますが、今回の用途であれば無料の STARTER で問題ないと思います。
Netlify
サイトを作る
New site from Git を押す

GitHub 等のアカウントと連携させる画面が出てきます。Forkしたリポジトリがあるサービスを選択して連携させます。

連携させると、リポジトリを選択するのが出てくるので、netlify-410 を選択

ビルド設定はそのままで動きます。Deploy siteを押すとサイトができます。
ドメインの設定をする
Site setting → Domain management → Custom domains からドメインを追加します。
画面で指定されたDNSレコードを追加し、ドメインへのアクセスがNetlifyに向かうように設定します。
それをNetlify側が確認できたら、SSLの証明書とかを勝手に作ってくれます。らくちん！
※ 自分のドメインでアクセスできるようになるまでしばらく時間がかかります。気長に待ちましょう。
このへんが全部終わったら、Webブラウザからアクセスしてみましょう。
こんな画面が出ていればOKです！

本当に410返してんの？

Webブラウザの開発者ツールを使って、本当に410を返してるのか見てみましょう。ステータスが410になっていますね？

他のサーバーから配信を受ける /inbox も見てみましょう。410なのでオッケー。

これで、410を無料で連合しているサーバーに返すことができます。

で、いつまで410返したらいいの？

ドメインの有効期限があるうちは、410返しとけばいいと思います。
ドメインを更新してまで410を返すべきとは、僕は思いません。無理の無い範囲でやっていけばいいと思います。

自分でサーバーを立てることは自由なので、閉じることも自由であるはずですが、他のサーバと密に連携して動いている関係上、サーバーを閉じると少なからず他のサーバーに影響を与えてしまいます。
が、この方法を使えば、少なくともドメインを維持している間は追加費用をかけずに、他のサーバーへの影響を最小限にして自分のサーバーを閉じることができます。
このへんは、いざサーバーを閉じるとなった時に二の足を踏む要因ではあるので、活用してみてください。

一度閉じてしまうと、同じドメインで ActivityPub のサーバーをもう一度立ち上げようとしても、うまく連合に参加できないことがあります。閉じる時はそのへんの覚悟を持ちましょう。

明日はオカどん管理人の kuloma1108 さんの記事です。

アニメのレコメンドサービス、NextJS化しました。

2020-05-16T23:29:13+09:00

先週アニメのレコメンドサービスを作ったばかりなのですが、
業務でNext.jsとReact hooksが必要になり、
勉強がてらソースコードの少ないものをリメイクしてみました。

サービスのURL

Annictさじぇすと!

Next.js

Next.jsはReactJSを用いたフレームワークです。
Next.jsの環境構築【これからはじめるNext.js】

Next.jsのメリットとしては読み込むファイルが軽量になった分パフォーマンスが向上することでしょうか。

環境構築

今回環境構築の参考にしたのはこちら

(プロジェクトルート)
　├ components (コンポーネント類)
　├ context (React contextを格納するフォルダ)
　├ hooks　(React hooksを格納するフォルダ)
　├ lib
　│　└ gtag.js　(analytics)
　├ pages
　│　├ _app.tsx　(レイアウト)
　│　├ _document.tsx　(index.htmlに相当)
　│　├ index.tsx
　│　└ works
　│　　　└ [id].tsx　(idは可変なのでdynamic routes)
　├ public
　│　└ images
　└ styles　(CSS)

pages

ファイルシステムの構造がそのままWEBシステムのパスになります。
例外として、_app.tsxと_document.tsxがあります。

_app.tsx

レイアウトを担当。

const App = ({Component,pageProps}:AppProps) => {
    Router.events.on('routeChangeComplete', url => gtag.pageview(url));
    return(
        
            
                
            
        
    );
}

_document.tsx

いわゆるindex.htmlに相当。
あれ、これclass構文だったわ。（コピペ）

class MyDocument extends Document {
  render() {
    return(
      
        
        　
        
        
        
        
        
      
      )
  }
}

export default MyDocument;

index.tsx

export interface Work{
      image:{
        recommendedImageUrl:string
      },
      twitterUsername:string,
      annictId:number,
      watchersCount:number,
      title:string,
      seasonYear:string,
      seasonName:string,
      wikipediaUrl:string,
      syobocalTid:string
  }


const Index:NextPage = () => {
    const [pageNum,setPageNum] = useState(1);
    const [data,setData] = useState();
    const store = useContext(storeContext);

    useEffect(() => {
      const f = async()=>{
        let resData;
        if(store.query.length === 0){
          resData = await fetchSeasonWorks(store.seasonName);
        }else{
          resData = await fetchByTitle(store.query);
        }
        setData(resData);
        console.log(resData);
      }
      f();
    },[store.seasonName,store.query]);

    const myRef = useRef(null);

    ....

hooks

hooksを格納する....はずなのですが、ビューとロジック分離するの失敗してるので
またどこかで使うでしょう(笑)

context

今回はreduxの代わりにcontextで全体の状態を管理します。
【React + Typescript】useContext の値を子コンポーネントから更新

type StoreContext = {
  seasonName: string;
  query:string;
  setSeasonName: (seasonName: string) => void;
  setQuery: (query: string) => void;
};

const defaultContext: StoreContext = {
  seasonName: CURRENT_SEASON,
  query:'',
  setSeasonName: () => {},
  setQuery: () => {},
};

export const storeContext = createContext(defaultContext);

export const useSeasonName = (): StoreContext => {
  // state名はThemeContext typeのプロパティに合わせる。
  const [seasonName, setSeason] = useState(CURRENT_SEASON);
  const [query, setQ] = useState('');
  // 関数名はThemeContext typeのプロパティに合わせる。
  const setSeasonName = useCallback((current: string): void => {
    setSeason(current);
  }, []);
  const setQuery = useCallback((current: string): void => {
    setQ(current);
  }, []);
  return {
    seasonName,
    query,
    setSeasonName,
    setQuery
  };
};

個々のコンポーネントでも状態を持っています。

gtag

Next.jsでGoogle Analyticsを適用する

lintに苦戦...

がっつりtypescriptを書いていたわけではなかったので、
nextjsはなかなかビルドを通してくれませんでした。
ParsedUrlQuery typings should allow undefined values

function isString(value: unknown): value is string {
      return typeof value === "string"
    }
    const id = isString(router.query.id) ? router.query.id : ""
    useEffect(()=>{
      const f = async () => {
        if(router !== undefined && router.query !== undefined){
          const resData = await fetchByWorkId(id);
          setData(resData);
        }
      }
      f();
    },[router.query]);

netlifyにデプロイ

netlify.tomlに必要なルーティングを記述します。

[build]
  base = "/"

  # next exportの出力先
  publish = "out/"

  # next buildからのnext exportでファイル生成
  command = "yarn run build && yarn run export"

[context.production]
  command = "NODE_ENV=production yarn run build && yarn run export"

[[redirects]]
  from = "/"
  to = "/index.html"
  status = 200
[[redirects]]
  from = "/works/*"
  to = "/works/[id].html"
  status = 200

アニメのレコメンドサービスを作りました。

2020-05-08T19:25:38+09:00

サービスURL

https://annict-suggest.netlify.app/

アニメの類似性をどう計算するか

コサイン類似度

人工知能を使わずにアニメのレコメンドサービスを作ろうと思ったのがきっかけです。
ユークリッド距離は触ったことがあるので、他の指標としてコサイン類似度が面白そうだと思いました。
ユークリッド距離は2点間の距離、コサイン類似度は2点のベクトル同士の角度です。

使った指標

約3300の作品に対して「見た」「見てない」のベクトルを作ってコサイン類似度を算出しようとしました。
「あにこれ」のように成分分析されているタグの類似度を計算するのもありだと思いました。

挫折

導入は比較的楽なように思えたのですが、計算量が尋常ではありませんでした。事前にフィルタリングを何もかけていなかったため、3300レコードx3300レコードの計算をしようとしていて、あまりに時間がかかるので諦めました。

アイテムの類似性について考察してみる

結局SQL

例:ID4342の作品を見たユーザを抽出して、
それらのユーザが他に見た作品のうち共通している人数が多い順に30件を取得する。

select 
    sum(st2.watch_status) as count,
    st2.work_id,
    w.title
from status st2
-- ID:4342の作品を見たユーザを取得
inner join (
    select 
        st.user_id 
    from status st
    where st.work_id = 4342
 )st3
on st2.user_id = st3.user_id
inner join works w
on w.annict_id = st2.work_id
-- 作品自身を除く
where st2.work_id != 4342
group by st2.work_id
order by count desc
limit 30

今回使った技術

GraphQL(Annict API)
ReactJS
NodeJS(TypeScript)
twitterAPI
netlify

データの棲み分け

最新のデータが欲しい場合はAnnictAPI(GraphQL)、分析データが欲しい場合はDBから読み込み、というようにデータの棲み分けを行っています。

GraphQLでエイリアスを使う

Annict API
ユーザが見たアニメと見ているアニメ両方が欲しい場合、
エイリアスを使うと複数条件が記述できる。

query {
      user(username:"${username}"){
       annictId,
       works(state:WATCHED){
         nodes{
           annictId
           title
         }
       }
      ing:works(state:WATCHING){
         nodes{
           annictId
           title
         }
       }
      }
    }

CSP(コンテンツセキュリティポリシー)

アニメのOGPがない場合は公式twitterアカウントの画像を使用しているが、CSPなどで同じサイトでないコンテンツは表示できなくなったので、
URLに「twitter」が含まれる場合はサーバにプロキシさせて画像を読み込むようにした。

ご意見

こちらから使ってみた感想・ご意見をお寄せください。

自分だけのオリジナル紙面を作れる「スポーツ新聞メーカー」をリリースしました。

2020-04-23T00:32:48+09:00

サービスURL

https://sports-news-maker.netlify.app

何ができるか

新聞名
見出し
試合のスコア(3-10イニングまで)
画像
縦見出し
写真のキャプション

を編集してこのようなオリジナル紙面を作れます。

特徴

入力フォームの隠蔽

パワプロ風画面ジェネレータで作ったコンポーネントを流用しています。
クリックするまで入力フォームが出ない仕様です。

縦書きの見出し

縦書きをCSSでデザインしています。
writing-modeというプロパティだけでは、英文字が横になってしまうので、text-orientationというプロパティで英文字対応を行っています。

style={{
            writingMode:'vertical-rl',
            textOrientation:'upright',
            fontSize:`calc(6vw - ${store.getState().newsTitle.length/2}px )`,
            margin:5,
            width:'1em',
            whiteSpace:'nowrap',
            fontWeight:'bold'
          }}

レスポンシブ

フォントサイズや画像の大きさ、マージンなどを画面の幅によって変わるようCSSで実装しています。

可変イニング数

3～10回までイニング数を変えることができるようになっています。

セピアフィルター

画像に新聞らしくセピアフィルターをかけています。
へぇ、CSSってこんなこともできるんだ!という新しい発見がありますね。

{{
          maxWidth:'85vw',
          objectFit:'cover',
          filter:'sepia(30%)',
         }}
        src={this.state.image_src}/>

振り返り

今回はほぼ一日で作ったので、またフロントで完結しています。
時間があればOGPでシェア機能つけたら面白いかもしれません。
あとは試合スコアのチーム名を長くすると表示が乱れるのは課題です。
幅を固定してフォントサイズを文字長で反比例させればいいですかね。

敗者のweb1week

2020-03-22T17:10:52+09:00

先週行われた web1week。
初開催にも関わらず50を超えるサービスが登場し、大盛況のうちに幕を閉じた。

経験者ならば理解を得られると思うが、個人開発という舞台には魔物が棲んでいる。
着手時点で思い描いた予定などペロリと喰われてしまう。

不意に削られる作業時間。
理想と妥協の狭間で揺れる要件。
技術仕様の落とし穴。
サービスの意義を自問自答し続ける日々。
リリース直後に訪れる無慈悲な障害。

これらを乗り越えローンチされた個人サービスの奥には、語られることのない物語が潜んでいる。
そんなサービスが50以上も並ぶweb1weekのボードは圧巻で、たとえHello Worldの様なサービスでも私の心を踊らせてくれる。
とても甲乙など付けられない。

しかし「敗者」は存在する。
「web1week楽しみ！」と方方で意気込みを語り、「やってみませんか？」と様々な人を勧誘した挙句、あろうことか最小限の機能でさえ1weekに間に合わず、最終的には要件すら満たせなかった。
紛うことなき「敗者」だ。
個人開発界隈ではよく「リリースすることが大事」と言われている。その通りだ。リリースさえすれば勝ちなのだ。

これは、そんな勝負に敗北を喫した男の記録である。

立案

月曜の午前0時、お題「Home」が発表された。
こじつけでも何でも「Home」を絡ませたWebサービスならクリアとのこと。
初学者でも参加し易いうえに、CGMやIoTを絡めたサービスも構想でき、かつ疫病の脅威に怯える時勢に寄り添った素晴らしいお題だと思った。
それと同時に頭を抱えた。
１週間で作り上げるとなると出来る事は限られている。ピンと来るアイディアが何も思い浮かばない。

「自分が実装してみたい機能」というアプローチで考えてみる。
我が家にはGoogle Nest Hubというガジェットが存在する。ディスプレイ付きスマートスピーカーというイロモノだ。
スマート家電のような贅沢品は存在しない我が家だが、昨年の私の誕生日に妻から贈ってもらっていた。しかし、動画を見るにはタブレットやテレビに転送で事足りるし、BGMをかける風習も無い。なかなか使う場面が訪れなかった。
これを何とか活用できないか。

玄関や冷蔵庫に貼ってるホワイトボード。これをNest Hubで代用できないかと考えた。
「いってらっしゃい」「おやつにわらび餅を冷蔵庫に入れてます」の様な、家族間のメッセージは手書きの方が嬉しかったりする。
しかし、ホワイトボードのデメリットはホワイトボードの場所へ行かないと書けないことだ。
仕事中に「冷蔵庫にわらび餅入れてるの忘れてた！」となった場合、LINEに頼るしかない。
スマホから手書きでメッセージを書き、玄関やリビングに置かれたNest Hubに表示されたらエモいのでは。

Nest Hubで表示するWebアプリについて調べてみる。
どうやらInteractive Canvasというフレームワークで実装するらしい。
しかし、基本的にVUI（音声ユーザーインターフェース）が前提となる作りで、ストアへ並べるにはGoogleの承認も必要となる。
今回の要件・納期では厳しい、、

方針を変える。
Nest HubにはGoogle Photosにあるアルバムを選択して、フォトフレームとして表示する機能がある。
Nest Hub側でメッセージ画像を入れたアルバムを選択して、Webサービス側ではそのメッセージ画像を更新すれば良いのはないだろうか。
調べてみた。さすがGoogle様。ちゃんとGoogle PhotosのAPIも存在する。

これでいこう。

WebサービスにGoogleアカウントでログイン
手書きUIのCanvasでメッセージを書く。
Nest Hub表示用のアルバムをGoogle Photosに作成
Canvasを画像化して3.のアルバムにアップロード
既にメッセージ画像が存在する場合は削除（アルバム内の画像は1枚のみとする）
Nest Hubで表示

OAuth2認証をクライアントで完結できれば、DBすら不要。
この程度なら1週間でいける。

市場調査もしてみた。

スマートディスプレイ（ディスプレイ付きスマートスピーカー）がどれぐらい普及してるのか気になるのでアンケお願いします！持ってるか持ってないか。押し入れで眠っててもOKです！
— きんみ | ツイッター大喜利サイト🎍ついぎり🎍作りました🙄 (@_kinmi) March 9, 2020

うん、Nest Hub専用サービスは良い感じのスキマ産業のようだ（強がり）

Nuxt.jsでプロジェクトを作成して今日の作業は終了。
この時点で月曜の夜。順調だ。

裏の目的

常々思っていたのが「もっと手軽に画像アップロード機能を作れないか」という事だった。
画像アップロードというのは、ストレージを用意して、アップされる画像の最適化処理を組み、著作権の侵害等を考慮して規約や同意UIの設計をしなければならない。
リリース後は不適切な画像が上がってないかウォッチする義務が発生するし、ストレージの残容量も気にしなければならない。
更に、増え続ける画像の管理方法（一定期間で削除するか、お金で解決するか）も検討しなければならない。
個人開発において、割とコストが高めの機能だ。

この課題はGoogle Photos等のユーザーが保有するクラウドストレージに公開状態で保存すれば解決するのではないかと考えた。
このご時世、Googleアカウントは誰でも持っている。アカウント登録時に自動で付与されるGoogle Photosの容量は高画質モードなら無制限だし、あくまで「画像を公開しているのはユーザー」という体裁を繕えるので著作権問題もグレーゾーンとなる（漫画村方式）
サービス側で保有するのは画像の静的URLのみだ。

今回、Google PhotosのAPIを使いこなせる様になれば今後の個人開発に幅を持たせることが出来るかもしれない。

ハマる

コロナ自粛の影響により勤務時間が削減され、個人開発の時間は比較的多めに取れた。
それでも間に合わなかったのは全てにハマったからだ。
全てだ。
時系列でハマりポイントを紹介していく。

JS ClientSDKが使いづらい

Google APIをWebで利用する場合、Google API Client Library for JavaScript（GAPI）というライブラリを利用する。
Initial Commitは2011年。それなりに年季の入ったライブラリだ。

NPMには登録されていない。

scriptタグで読み込む必要がある。
Nuxt.jsで外部スクリプトを使用する場合、$nextTicks()を用いてもスクリプトのロードが完了していない場合がある。
ロード状態を監視する必要があるので少し手間だ。

DiscoveryDocs

GAPIのスクリプトを読み込んだ時点ではinit()等、最低限の機能しか保有していない。
Getting Startedに記載されているが、API Key等を設定して初期化する際にDiscoveryDocsというURLを設定する。
DiscoveryDocsはAPI単位で用意されており、URLの先にあるJSONをGAPIでロードすれば機能として利用できる。
Google Photos APIのDiscoveryDocsは下記となる。
https://content.googleapis.com/discovery/v1/apis/photoslibrary/v1/rest
スクリプトの肥大化を防ぐための機構だろう。
ここまではまだ良い。手間を感じるがまだ許せる。

同期処理

ドキュメントのサンプルはthenチェーンで記載されている。
じゃあ・・・と思ってasync / awaitで書き直してみる。動かない。
そう、返却値はES6 Promiseじゃない。
goog.Thenableという独自インターフェースを継承したオブジェクトだ。
init().then(()=>{ }) の中でしかGAPIは動かない。同期的にいくつものAPIを使いたければthenのネストを深め続けるしかない。F*ck。

ES6が標準化されたのが2015年。このライブラリの開発当初ならスマートな仕様だったのだろう。
しかし、こちとら去年からJSを学び始めた身。
終始、この仕様に慣れず生産性が低下した。

認証で躓く

ユーザー管理にはFirebase Authenticationを採用した。
手軽に導入でき、「特定のユーザーには使わせない」といったセキュリティ対策も出来る。
Twitter API等、他社のAPIと連携する場合はトークンの保管といった一手間が必要になってくるが、今回はGoogle Platform内で連携するだけ。
簡単だろうと思った。

🙅 Firebase → Google API

以下の記事を参考に、Firebase UIでログイン→GAPIのイニシャライズを試みる。
Using Google APIs with Firebase Auth and Firebase UI on the Web

できない。
この記事ではFirebaseでログインした時点で GAPIの認証状態 : gapi.auth2.getAuthInstance().isSignedIn.get()が true になる想定だが false だ。
GAPIでもログインする必要があるのか？と思って試したがFirebaseとGAPIで二重ログインされてしまった。

記事のコメント欄に記載がされているが、現在はFirebaseでログインしてもGAPIでログイン状態を検知しない。
下記のissueにもその事が記載されており、ステータスはopenのままだ。
https://github.com/google/google-api-javascript-client/issues/561

🙆 Google API → Firebase

つまり現状、FirebaseとGAPIを連携するには認証順を逆にしないといけない。
GoogleAPIのサインイン : gapi.auth2.signIn()でログインした後、認証情報を取得して Firebaseの認証情報を使用したサインイン : firebase.auth().signInWithCredential()でもログインするフローとなる。
下記の記事を参考に実装した。
How to Use Google APIs on the Web

進捗：だめです

この時点で既に平日は終わっていた。残すところは土日のみ。
対応が長期化した要因は「出来ると書いてあったから」。
Firebase→GAPIの認証は不可能という可能性を考慮していなかった。
この考慮漏れが発生するとプログラマーの思考はどうなるか。
ひたすらタイポを探し続けるのである。

画像アップロードが用意されてない

まだ間に合う。
土曜にアップロード機能を実装。
日曜にデザインを微修正＆実機で動作確認。
ここまで盛大に躓いて尚、根拠なく「出来る」と盲信する。
進捗が遅れてるプログラマーにありがちな逆算スケジュールである。

🙅 GAPIで画像アップロード

ガイドラインを読んでみる。
https://developers.google.com/photos/library/guides/upload-media
どうやら画像をアップロードするには、二段階の手順を踏まないといけないようだ。

画像のバイナリデータをGoogleにアップロードする
上記返却値に含まれるアップロードトークンを用いてアルバムに追加する。

Google PhotosのDiscoveryDocsから該当のメソッドを探してみる。
無い。
何度検索しても「uploads」という処理は無い。
「なぜ無いのか」なんて考える余裕も無い。
（現在、不安になって再度探してみたがやっぱり無い）

GAPIじゃGoogleに画像をアップロード出来ない・・・？

🙅 axiosでリクエスト

悩んでいる暇は無い。もうクライアントSDKは捨てる。
ドキュメントにはエンドポイントが記載されているので、そこに対してaxiosでPOSTリクエストを投げてみる。

Network Error.

・・・久し振りに見たぜ。
has been blocked by CORS policy: No 'Access-Control-Allow-Origin'
CORSエラーだ。
おいおい、嘘だろ。CORSだと？
浅学だが、基本的にはAPI側での対応が必須だったと記憶している。詰んだか？

🙅 XMLHttpRequestでリクエスト

ドキュメントには「CORSもサポートしているよ」と書かれている。
How to use CORS to access Google APIs
クライアントSDKを用いれば回避できるよ。と。
使えねぇんだよチクショウが。
記事の最後にXMLHttpRequestを用いた例も記載されている。
存在は知っていたが初めて使うなこれ。
愚直に書いてある通り組んでみる。

has been blocked by CORS policy: No 'Access-Control-Allow-Origin'

泣く。

🙅 gapi.client.request()

まだだ。諦めない。
俺は長男だから我慢できたけど次男だったら我慢できなかった。

ドキュメントを漁り、もう１つの可能性を見つける。
クライアントSDKには標準で APIを叩く為のメソッド : gapi.client.request()が備わっている。
GoogleAPIのエンドポイントをベタ書きして引数に渡せば叩けるらしい。
クライアントSDKならCORSを回避できるんだろ？信じるぞ？
叩いてみる。

404

？？？
タイポ探しフェーズ（数時間）に入るも、やっぱり問題は無い。
リクエスト内容を確認した。POST先のURLが変わっている。
画像アップロードのエンドポイントはhttps://photoslibrary.googleapis.com/v1/uploadsだが、ドメイン部がcontent.googleapis.comに変わってる。
なんだこれは。
恐らく、クライアントSDKが書き換えていると推測。M*ther F*cker。

諦めた。

クライアントで完結することを。

🙆 Netlify Functions

ホスト先にNetlifyを利用している。
そこでクラウド関数を作れるNetlify Functionsを使ってみようと思い立った。
使った経験が無い機能だ。下記の記事を参考にHello Worldから始めてみる。
【入門】Netlify Functionsコトハジメ
そして「Googleに画像をアップロードしてアップロードトークン返すクラウド関数」を立ててみた。
うまくいった。
初めて使う機能なのに、ハマらず動く。ローカル環境もすぐ出来た。
感動した。モダン最高。

進捗：納期は昨日なので大丈夫です

この時点で日曜の夜。
軸となる機能は一通り完成したものの、「同名アルバムが存在していた場合」などのシチュエーションに応じた分岐は作れてないし、要件として「既にメッセージ画像が存在していた場合は更新する」といった機能も存在するが未実装だ。実機確認もやれてない。

「ごめんなさい」しつつ、月曜に出そう。
そう決めて床についた。

画像の削除/更新はできない

ベットに入った直後、悪寒がした。

見覚えがない。

散々GoogleAPIのドキュメントと格闘し続けたが、Google Photos内の写真を削除/更新するエンドポイントは見た記憶がない。
スマホを取り出し確認してみるも、やはり無い。

冗談だろ？クラウドストレージを操作するAPIのくせに削除/更新は出来ない？そんな馬鹿な話があるか。
調べてみる。
https://issuetracker.google.com/issues/109759781
結論：出来ないらしい

詰みです。お疲れ様でした。

過去画像を含めてランダム表示されるなんてホワイトボードじゃない。

「お手数ですがGoogle Photosを開いて、ご自身で過去の画像を削除してください。」
しょーもな。
サービスとして成立していない。

・・・いや、まだだ。

よし、譲ろう。

百歩譲ろう。

Google Driveなら削除/更新もAPIで可能じゃなかろうか。
Photosなんかより歴史あるクラウドストレージだ。
Google Driveへアップした写真をNest Hubで表示できれば問題無い。

Can I connect my Google Drive to my Google home hub?
結論：出来ないらしい

こうして私は、web1weekの敗者となった。

Safari対応（おまけ）

負け犬でも遠吠えぐらいは出来る。
「手書き画像をGoogle Photosへアップするサービス」としてローンチしよう。
そう決めて実機確認に入った。

CORSぞ

MacのChrome、Android Chromeは問題なく動作完了。
妻に「iPhoneでこれ使えるか確認してほしい」と依頼する。
返信は「画面が驚きの白さ」。
ここで初めてMacのSafariでも動作確認してみる。

has been blocked by CORS policy: No 'Access-Control-Allow-Origin'

CORSぞ。

何度立ちはだかれば気が済むのだCORSよ。
まぁ思い当たる節はあった。
GAPIが使い辛いので、下記のようにクラアントSDKを動的に読み込んでplugin化していたのだ。

export default async ({ $axios, store }, inject) => {
  // GAPIの読み込み
  const gapiScript = document.createElement('script')
  const src = await $axios.$get('https://apis.google.com/js/api.js')
  gapiScript.appendChild(document.createTextNode(src))
  document.head.appendChild(gapiScript)
  const gapi = window.gapi

  // ロード処理(Promise化)
  const clientLoad = new Promise((resolve, reject) => {
    gapi.load('client:auth2', () => {
      resolve()
    })
  })
  // GAPI初期化処理
  const init = () => {
    return clientLoad.then(() => {
      return gapi.client.init({
        apiKey: authConfig.Google.apiKey,
        clientId: authConfig.Google.clientId,
        discoveryDocs: authConfig.Google.discoveryDocs,
        scope: authConfig.Google.scopes.join(' ')
      })
    })
  }
  inject('gapi', gapi)
  inject('gapiInit', init)
}

不安はあったが、動いたのでそのままにしていた。
外部スクリプトを動的に読み込む場合、普通はCORSの問題が発生する。
素直にscriptタグで読み込むように変更した。

というか、なぜChromeでは読み込めたのか分からない。
同じGoogle製品だから？
プラットフォーマー恐るべし。

クロスサイトトラッキング

さて、初期表示までは問題なくSafariで動作した。
しかしGoogleへログインしても認証状態を検知しない。
プログラムが「ログイン中」と判断しないのだ。
こればっかりは思い当たる節も無い。

issueが上がっていた。
gapi auth2 issue on safari
同様の事象、かつオープンのままだ。
Safariの場合、Cookieを全削除するか、プライベートブラウズなら問題無いらしい。
マジかよ・・・
頑張れば何か対策できるのかもしれないが、負け犬にそんな根性は無い。
UserAgentから「Safari、もしくはiPhone/iPad」を判定して、該当する場合は長ったらしい注意文言を表示するようにした。

敗因

次回以降のweb1weekで勝つための敗因分析を行う。

PoC（概念実証）不足

一番の原因はこれ。
事前に「画像の削除/更新は出来ない」と知っていれば別案を採用していた。
とはいえ、1週間という過密スケジュールで検証工程を取れるかは疑問が残る。
少なくとも、

機能の洗い出し
実装に必要な外部インターフェースのドキュメントはちゃんと読む

まぁ、、当たり前のことはちゃんとしよう。ということ。

「出来ない」の判断が遅い

認証や画像アップロード等、ハマった際に「出来ない」という判断が出来ていない。
昨今の潤沢な開発環境に甘え、「出来ない事は無い」と思い込んでいる節がある。
確かに大抵の場合、ハマる原因は外部インターフェースの仕様変更、もしくはタイポが多い。
塩梅が難しいが、もっと早いタイミングでissueを探そう。

Google Photosを利用した画像アップローダーは作れるのか

冒頭に記した「裏の目的」について。
そもそもGoogle Photos APIの利用規約には「ホスティングサービスとして使うならCloud Storageを使え」と明記してある。
開発するサービスを「Google Photosへアップした写真の共有ギャラリー」という位置付けにするならグレーかな？と思ったが、
結論から言うと「多分、不可」だ。
少なくとも、そう言うサービスを作れるだけのAPIが提供されていない。

まず前述の通り、API経由での画像の削除/更新は出来ない。
あくまで画像のアップロードのみで、アルバム間の移動すら出来ない。

そして、更に致命的なことに静的なURLは取得できない。
写真のURLを取得するAPIは存在するが、一定期間が過ぎると無効化されるらしい。
これはGoogle Photosの「URLで共有する」と同じURLなのだろう。
URL先には静的な画像が埋め込まれているらしいが、それを取得するAPIは存在しない。
スクレイピングを駆使すれば取得できるかもしれないが、実用的では無いだろう。

「ユーザーのプライベートストレージを用いた画像アップローダー」は別サービスを検討した方が良さそうだ。

ゴミを公開する

これはweb1weekじゃない。
私が作りたかったものでもない。
ゴミだ。

Nest Board
https://nest-board.netlify.com/

Google APIは申請無しで使用できるが、Googleから承認されていない場合、ログイン時に警告画面が出る。
利用する際は注意文言を読んで頂きたい。

需要あるか分からないが、Nest Hub側で表示する際の手順も明記しておく。

1. スマホ（iPhone/Android）でGoogle Homeアプリを開く
Nest Hubの初期設定に必要なアプリなのでインストールされているはず。

2. 表示したいNest Hub > フォトフレームを編集 > Google フォトの順で選択

3. Nest Boardで作成したアルバムを選択する
初期値は「Nest Board」

4. 「フォトフレーム」画面の下部にある「個人的な写真の整理」を「リアルタイム共有アルバムのみ」にする
これを設定しないとNest Hubがフォトフレームに不向きな写真と判定して表示されない。
ハマりポイント。

以上の手順を踏めば、Nest Hubに手書きのメッセージ画像が表示される。

普段はソースコードを公開したりしないのだが、今回はリポジトリをpublicにした。
なぜなら敗者だからだ。
https://github.com/kin-mi/nest-board

おわり

次は勝つ。

Nuxtアプリを無料で公開するときに試した5つの環境まとめ(Firebase/GAE/Netlify/Heroku)

2020-03-20T13:51:56+09:00

最近Nuxtでいろいろ作っているけど、無料で使える環境をいろいろ試してる。
いろいろメリデメあるけど、SPAならNetlify/SSRならHerokuがよさそう。
いままで試したものをまとめてみた。

ほしかったもの

主に開発してるのがCGM系のWebサービスなので、

動的なOGP画像などが設定できる(OGP芸)
カスタムドメインが使える
日次のランキング集計などの定期実行ができる

が、無料でできて、なるべく実装が楽で、そこまで遅くないのがうれしい。

試した5つのパターン

試したのは以下の5パターン。試してみた順で記載。

Nuxt(SSR) + Cloud Function
起動がかなり遅かった。。実装も大変なのでNG
Nuxt(SPA) + Firebase Hosting
構築はかなり楽。ただ、OGP芸が大変でFunctionsが必要
Nuxt(SPA) + Netlify
プレレンダリングでOGP芸が楽。定期実行はFunctionsでできる
Nuxt(SSR) + GAE(f1:256M)
メモリの制限きつく、たまに落ちる。。定期実行はcron.yamlでできる
Nuxt(SSR) + Heroku(free:512M) + Cloudflare
メモリ多くてよい。SSLはないのでCloudflareを併用。定期実行はHeroku Scheduler

SPAで十分であれば、「3.Nuxt(SPA) + Netlify」が構築も簡単で良かった。
積読ハウマッチは、現在この構成。

SSRの場合、「5. Nuxt(SSR) + Heroku(free:512M) + CloudFlare」が良い感じ。
へんあいマップがこの構成。

各パターンについて

1. Nuxt(SSR) + Cloud Function

一番はじめに積読ハウマッチでやろうとした構成。

細かいやり方は、以下の記事の「Firebase Cloud Functionsの設定してSSRできるようにする」あたりに。
・Nuxt.jsではじめるときのやることリスト(SSRも国際化も自動デプロイも) - くらげになりたい。

当時は動的ページのSEO対応するには、この方法が多く検索に出ていたので試したけど、
Cloud Functionのコールドスタートがつらすぎてお蔵入り。。SPAでいくことに。。

2. Nuxt(SPA) + Firebase Hosting

積読ハウマッチをリリースしたときの構成。

課題だった動的ページのSEOは、Cloud Functionsを経由して返す方法で対応。
こちらも当時よく検索に出てたけど、実装が大変そうだったので2番手に。

細かいやり方は、以下の記事に。（2020/03/22追記: OGP画像生成系の記事を追加）
・Nuxt(SPA)+FirebaseでSEO！OGP！: 特定のパスだけheadだけ返すやつ - くらげになりたい。
・Nuxt.js(SPA)+Firebaseで積読用の読書管理サービスを作ってみたときにハマったこと - Qiita
・Cloud Functions + ImageMagickでOPG画像の動的生成してCloud Storageにアップロードする - くらげになりたい。
・Cloud FunctionとSVGでOGP画像生成を試行錯誤したまとめ - くらげになりたい。

カスタムドメインについては、Firebase HostingでSSLと合わせて無料で設定可能。

定期実行は、Cloud Functionsでできるのでそれを利用した。
・関数のスケジュール設定 | Firebase
・Cloud Functions for Firebaseのcronみたいな定期実行を試したら簡単だった - Qiita

ただ、Cloud Functionsの定期実行は、
「Googleアカウントごとに3つのジョブを無料で使用できる」
なので、注意が必要。プロジェクトごとじゃない。。

3. Nuxt(SPA) + Netlify

積読ハウマッチの現在の構成。

NetlifyのPrerenderingが無料化されて使えるようになり、よいという話を聞くように。。

実装が複雑で、変更もしにくかったので、この方法に。
Netlify自体がCDNも提供していているので、すこしはやくなった(気がする)

カスタムドメインも、NetlifyのDNSを設定して無料で対応できる。

定期実行は、2.と同じ感じで、Cloud Functionsのまま。

コード量も減って変更もしやすくなったので、OGP画像の改善とかが楽にできるように。。(´ω｀)

4. Nuxt(SSR) + GAE(f1:256M)

SPAの課題として、初期表示が遅いのでなんとかしたいなと、SSRの環境を模索しはじめ。。
公開していないけど、1つ作ってみた。

試してみたところ、起動するだけでメモリ上限すれすれで、複数アクセスがあったりすると、落ちる場合も。。
(ts-nodeで動かしているのも悪い気がしている。。)

ただ、定期実行はcron.yamlを用意すればURLに送信でき、無料範囲も広い。
料金も「その他のリソース」をみるとcronは無料のよう。
・cron.yaml を使用したジョブのスケジューリング

カスタムドメインやSSLも無料で利用できる感じ。(試してないので未確認)

5. Nuxt(SSR) + Heroku(free:512M) + Cloudflare

GAEでうまくいかなかったので、無料でメモリも多いHerokuを利用。
へんあいマップがこの構成で稼働中。

定期実行は無料のアドオン(Heroku Scheduler)が利用できる。
Nuxt側でserverMiddlewareを用意すればOK。

ただ、メモリは多く定期実行もが、Herokuの無料枠だと制限も多い。

SSLは非対応
30分アクセスがないとスリープする
クレジットカードの登録で1000時間/月xアカウント
(未認証だと550時間/月xアカウント)

1. SSLは非対応

単体だけだとSSLに対応していないので、Cloudflareを併用。
CloudflareがCDNも提供してくれるので良い感じに。

2. 30分アクセスがないとスリープする

これは、Heroku Schedulerを使えばOK。
任意のURLを叩けるため、15分毎などスリープしないようにしておく。

3. 無料枠は1000時間/月xアカウント

1000時間あれば、24時間x31日でも744時間なので、大丈夫な感じ。
ただ、アカウント単位での無料枠なので、複数アプリを無料で稼働はできない。。

実際のやりかたとかは、

以下の記事に。
・Heroku+CloudflareなNuxtでSSRしてみる - くらげになりたい。

まとめ

いろいろ試してみたけど、Nuxt.jsを無料で公開するときは、

SPAならNetlify
- prerenderingで動的ページのSEOも対応
- カスタムドメインやSSLもNetlifyでOK
- 定期実行はCloud Functionsで。
- ただし、定期実行は1アカウントにつき、3ジョブまで
SSRならHeroku
- SSRで動的ページのSEOも対応
- 定期実行はHeroku Schedulerで
- Cloudflareを併用し、SSL対応
- 無料枠は1アカウントにつき、1アプリが限界かも

SSRの方は他にCloud RunやZEIT nowがある。
Cloud Runは立ち上げがGAEより遅いときので後手だけど、
ZEIT nowは気になってるので試してみたい(´ω｀)

以上!!

こんなのつくってます!!

積読用の読書管理アプリ『積読ハウマッチ』をリリースしました！
積読ハウマッチは、Nuxt.js+Firebaseで開発してます!

もしよかったら、遊んでみてくださいヽ(=´▽`=)ﾉ

要望・感想・アドバイスなどあれば、
公式アカウント(@MemoryLoverz)や開発者(@kira_puka)まで！

へんあいマップもリリースしました！

「偏愛マップ」を簡単に作れるWebアプリです!
へんあいマップも、Nuxt.js+Firebaseで開発してます!

偏愛マップは人見知りや口下手な人にも優しいコミュニケーションツールで、
勉強会、懇親会、オフ会などの余興・アイスブレイクや自分のプロフィールにも！

よかったら遊んでみてください(´ω｀)

(改良版)パワプロ風画面ジェネレータを作ってみた

2020-03-14T22:03:11+09:00

作ったサービス

https://pawapro-gen.netlify.com/

一旦書いたボード

web1week - パワプロ風画面ジェネレータを作ってみた

時間的に残りの機能間に合わないかと思っていたので、最低限動く機能で出したのですが、結論から言うと間に合いました。

インライン編集機能

当初はフォームとプレビュー機能を分けて作っていたのですが、
ほとんど全てインラインで編集できるように変更しました。

twitterシェア機能

OGPサーバの構築

以前slack流量計を作った際に、web表彰のスクリーンショットを撮っていたので、OGP作成にはそれほど抵抗はありませんでした。

あとはだらさんの作成されてるOGPサーバを参考にさせていただきました。

OGPサーバの構築に使った技術

NodeJS
Express
TypeScript
puppeteer
VPS
docker-compose

ロジック

ジェネレータからDBにデータを登録する
登録されたデータをもとにpuppeteerでスクリーンショットを撮る
DBに画像を格納する
OGPのサーバ問い合わせにはDBに保存してある画像を使用する
- OGPサーバに直接アクセスさせると負荷が集中してサーバが落ちるため

DB登録処理は既存のAPサーバに追加

OGPサーバは別コンテナ

twitter投稿

アプリ起動時componentDidMountのタイミングでUUIDを生成するようにしました。
react-shareというライブラリを使い、
beforeOnClickメソッドでDBへの登録を行っています。
ローディング画面も作りました(同時にバグ生成)。

{
              store.dispatch(switchLoading(true));
              let isSuccess = await postData();
              store.dispatch(switchLoading(false));
              if(!isSuccess){
                alert('データの保存に失敗しました。時間を空けるか、リロードして再度作成してください。')
                return new Error();
              }else{
                return Promise.resolve();
              }

            }}
          >
            保存してシェアする！

苦労したこと

画像のキャッシュ

ヘッダでキャッシュコントロールしたことがなかったので若干はまりました。

OGPのトリミング問題

twitterやFacebookでOGPの上下左右がトリミングされる問題があり、
Jimpなどで余白の拡張をしようと思ったのですが、時間がなかったこともあり、
React側でマージンをとってスクリーンショットを撮る際に余白ができるように修正しました。

できなかったこと

チーム・選手画像のアップロード

OGPの生成で手一杯だったので、base64化してDBに格納するところまで考えられませんでした。後々追加する予定。

nuxt.jsプロジェクトをnetlifyで公開してredirectを使うときの罠

2020-03-06T09:34:49+09:00

3/6 11:15追記

サブディレクトリにあるときだけ発生する問題ぽい。問題をまとめてサポートに報告しました https://community.netlify.com/t/subdirectory-and-publish-directory-redirection/10120

netlifyにはnetlity.tomlという設定ファイルを書くといろいろ設定ができることになっていて、従来nginxでやっていたような各種リダイレクトも、ここに書くことで実行してくれることになっている。
Syntax for the Netlify configuration file

これと、nuxt.jsみたいにビルド結果をサブディレクトリに出力するツールが組み合わさるとちょっと予想しない対応が必要になる話。

ルートディレクトリに配置したnetlify.tomlにビルドとリダイレクトの設定を書く。

[build]
  base = "front/"
  publish = "dist/"
  command = "npm run generate"

[[redirects]]
  from = "https://gisyohub.netlify.com/"
  to = "https://gisyohub.com/"
  status = 301
  force = true

結果、ビルドはしてくれるのだけれど、リダイレクトは動かない。

ぼくの実験結果だと、同じファイルをコピーして、staticディレクトリにもnetlify.tomlを配置してあげると、ビルドする時dist/にコピーされて、その結果redirectが動作するようになる。

おそらくnetlifyは、ビルド時はルートディレクトリにあるnetlify.tomlを見るけど、リダイレクトのときはpublishディレクトリにあるnetlify.tomlを見ているらしい。実装の都合は何となく分かるんだけど、せめてドキュメントに明示してほしい感じ。

こことかここで話題に上がってるんだけど、バグとしては認めてもらえなかったぽい。
https://community.netlify.com/t/redirects-within-netlify-toml-not-working/1731
https://community.netlify.com/t/netlify-toml-folder-with-nuxtjs-and-netlify-cli/4659/3

シンプル再現環境を作ればバグだと認めてもらえそうな気がするんだけど、この問題のミニマム環境って何で作るのがいいのだろう。nuxtとかの開発環境なしに、index.htmlだけをnetlifyで公開するような構成って作れるのかな？

Vue.js+Netlifyで最小のアプリを作る

2020-02-06T23:52:50+09:00

Vue.jsで最小のアプリケーションを作成して、Netlifyにデプロイするまでを解説します。1週間以内くらいで1ページだけの簡単なWebアプリケーションを作ろう、と思ったらこれくらいで十分可能です。複雑なアプリケーションにしなければデータベースもブラウザ上のLocal Storageに保存する形であれば用意する必要もありませんし、とても楽です。

準備するもの

今回の最小のアプリケーションを作成するためには下記の準備が必要です。インストールやユーザー登録をしておきましょう。

npmのインストール
Yarn（好みで必要であれば）
GitHubのユーザー登録
Netlifyのユーザー登録

Vue CLI

まずはPCにVue CLIをインストールします。Vue CLIを利用すると、コマンドで簡単にVue.jsのプロジェクトを作成できるようになります。インストール方法は下記のどちらかのコマンドです。

npm install -g @vue/cli

もしくは

yarn global add @vue/cli

プロジェクトを新規作成

Vue CLIを使ってVue.jsのプロジェクトを新規登録します。下記のコマンドを実行します。

vue create hello-world

するとプロジェクトにどのような機能を入れるかを選択しながら作成することが出来ます。必要なものを選択していきます。よく分からない場合は最初にdefaultを選択しておけば良いと思います。

例として、僕はManually select featuresで下記を選択しました。

Check the features needed for your project

Babel, TypeScript, Linter/Formatter, Unit Testing, E2E Testing

TypeScriptと２つのTestingを追加しました。1ページの軽いアプリケーションなのでRouterは選択しませんでした。Testingは今回は使いませんが、もし使うことになった際に一から設定するのは面倒なのでとりあえず雛形を作ってもらっておいたほうが楽かなと思いいつも追加しています。とりあえずシンプルなアプリケーションを作るだけであれば不要でしょう。

Use class-style component syntax?

Vueコンポーネントの使い方が変わります。好きな形を選択しましょう。Vue.js3でまた新しいカタチも出てくるのですがまだ選択できませんのでとりあえず好きなもので良いと思います。シンプルなアプリケーション用ですのであまり考える必要はないでしょう。

Use Babel alongside TypeScript

TypeScriptの場合？　だけでしょうか。そのままYで良いと思います。

Pick a linter / formatter config

これもLinter/Formatterを選択している場合だけでしょうか。TSLintはもう使わないほうが良いのでそれ以外であれば好きなのを選べば良いと思います。僕はPrettierを選んでいます。

Pick additional lint features

いつLintするかの設定です。とりあえずLint on saveで良いと思います。

Pick a unit testing solution

Unitテストで利用するパッケージの選択です。GitHubでのスター数が多いので適当にいつもJestにしています。

Pick a E2E testing solution

同上でcypressを選択しました。

Where do you prefer placing config for Babel, ESLint, etc.?

いろんな設定がpackage.jsonに詰め込まれるのは嫌なのでIn dedicated config filesにしました。

Save this as a preset for future projects?

最後にこの設定を今後も使うかの選択です。怖いのでそのままNにしました。

これで完了です。待っていれば先程指定したアプリケーション名のフォルダにプロジェクトが作成されます。E2Eテストとかを入れているとかなり時間がかかるかもしれません。

問題なければ最後に表示されるように、cdコマンドでフォルダ内に移動し、serveコマンドを実行すればもうアプリケーションが実行できます。

cd vue-netlify-sample
yarn serve

問題なければURLが表示されるのでアクセスすれば表示されます。

Gitにコミットする

とりあえずプロジェクトを作成した直後の状態をGitにコミットしておくと良いでしょう。通常はgit initする必要がありますが、Vue CLIの場合はそれもやってくれているっぽいのでそのままコミットできます。git addも必要ですがそれもやってくれているっぽいので、例えばVSCodeの場合はそのままメッセージを入力してコミットできるっぽいです。

GitHubにリポジトリをpushする

さきほど作成したリポジトリとそのコミットを、GitHubのリモートリポジトリに登録します。まずは新しいリポジトリをGitHub上に作成します。

設定はこんな感じです。名前だけ入力するだけで大丈夫です。公開したくなければPrivateを選択しておきましょう。

新規作成できると、空のリポジトリが作成されます。この状態ではリポジトリの初期化方法が色々と書かれています。その中に既存のローカルリポジトリを使う方法が書かれていますので、それをローカルのプロジェクト上で実行します。

git remote add origin [email protected]:dala00/vue-netlify-sample.git
git push -u origin master

問題なければGitHub上の画面を更新するとpushしたファイル一覧が表示されるようになります。

Netlifyにデプロイする

続いてNetlifyで先程作成したGitHubのリポジトリを連携させて、簡単にデプロイできるようにします。まずは「New site from Git」ボタンを実行します。するとGitHub上のリポジトリ一覧が表示されます。

ただ、新規登録時やNetlify上でのアプリケーション作成時のGitHub連携方法によってはもしかしたら表示されていないかもしれません。すべてのリポジトリの連携を許可する設定であれば表示されていると思いますが、特定のリポジトリだけ許可する設定で連携した場合は作成したばかりのGitHubリポジトリは表示されていません。その場合は画面の下に

Can’t see your repo here? Configure the Netlify app on GitHub.

というメッセージのリンクがありますので、そちらでGitHubに移動して許可するリポジトリを追加する必要があります。下記のような感じで追加します。

問題なく選択できたらアプリケーションの新規登録画面に遷移します。Build commandにyarn build、Publish directoryにdistと入力して登録を行います。

登録が完了するとデプロイ一覧に下記のようにデプロイ中である旨のステータスが表示されています。完了すると緑色のPublishedというステータスに変わるのでしばらく待ちましょう。

問題なければ上部にURLが表示され、アクセスできるようになります。下記が実際にデプロイしたURLです。

https://eager-neumann-0e6dfa.netlify.com/

eager-neumann-0e6dfaの部分はSite settingsのsite nameという項目で変更することもできます。独自ドメインを持っていればそれを利用することもできます。

アプリケーションを更新する

アプリケーションに機能を追加してそれをデプロイしたい場合は、追加分をコミットしてGitHubにpushすると自動的にNetlify側も更新してくれます。

例えば試しに下記のようなよくあるインクリメントのテスト機能を書いてみます。例えばTypeScriptの場合はApp.vueを下記のように変更します。（主にcountを使ったところを追記しています）

問題なければ下記のようにボタンを押すと数値が増えていく機能が出来上がります。

あとはコミットしてpushすると再度Netlify上でデプロイが走りアプリケーション上に反映されます。

まとめ

このようにJavaScriptとGitHub、Netlifyを使うだけだと非常に簡単にアプリケーションを作ることができます。サンプルや、ずっと運用していくわけではない簡単なアプリケーションであればおすすめです。

今回作成したプロジェクトはGitHubで公開しています。

https://github.com/dala00/vue-netlify-sample

React+Netlifyで最小のアプリを作る

2020-01-27T22:30:38+09:00

Reactで最小のアプリケーションを作成して、Netlifyにデプロイするまでを解説します。1週間以内くらいで1ページだけの簡単なWebアプリケーションを作ろう、と思ったらこれくらいで十分可能です。複雑なアプリケーションにしなければデータベースもブラウザ上のLocal Storageに保存する形であれば用意する必要もありませんし、とても楽です。

準備するもの

今回の最小のアプリケーションを作成するためには下記の準備が必要です。インストールやユーザー登録をしておきましょう。

npmのインストール
Yarn（好みで必要であれば）
GitHubのユーザー登録
Netlifyのユーザー登録

Node.jsはnvm等を使うと複数のバージョンをインストールできて便利です（が、慣れてからでも良いと思います）。

プロジェクトを新規作成

まずはReact.jsのプロジェクトを新規登録します。npmやYarnが入っていればコマンド一発で新規作成できます。下記のどちらかのコマンドです。

npx create-react-app my-app

yarn create react-app my-app

TypeScriptを使いたい場合はパラメータを指定するだけで可能です。

npx create-react-app my-app --template typescript

yarn create react-app my-app --template typescript

完了したらもうすぐに下記コマンドで実行できます。

cd my-app

で作成されたフォルダに入り、下記のどちらかのコマンドを実行します。

npm run start

yarn start

問題なければ下記のような画面が表示されます。

Gitにコミットする

とりあえずプロジェクトを作成した直後の状態をGitにコミットしておくと良いでしょう。下記のコマンドで空のリポジトリを作って初期化します。

git init

あとはVSCode等を使っていればプラスボタンでファイルを git add と同じようにステージングできます。そしてコメントを入力してチェックボタンをクリックすると git commit がVSCode上で実行できます。

GitHubにリポジトリをpushする

さきほど作成したリポジトリとそのコミットを、GitHubのリモートリポジトリに登録します。まずは新しいリポジトリをGitHub上に作成します。

設定はこんな感じです。名前だけ入力するだけで大丈夫です。公開したくなければPrivateを選択しておきましょう。

git remote add origin [email protected]:dala00/react-netlify-sample.git
git push -u origin master

問題なければGitHub上の画面を更新するとpushしたファイル一覧が表示されるようになります。

Netlifyにデプロイする

Can’t see your repo here? Configure the Netlify app on GitHub.

問題なく選択できたらアプリケーションの新規登録画面に遷移します。最近は下記のようにビルドコマンドや公開フォルダも自動的に入力されていますので、本当に何もする必要がありません。そのまま登録を行います。

問題なければ上部にURLが表示され、アクセスできるようになります。下記が実際にデプロイしたURLです。

https://agitated-noyce-250fb9.netlify.com/

agitated-noyce-250fb9の部分はSite settingsのsite nameという項目で変更することもできます。独自ドメインを持っていればそれを利用することもできます。

アプリケーションを更新する

アプリケーションに機能を追加してそれをデプロイしたい場合は、追加分をコミットしてGitHubにpushすると自動的にNetlify側も更新してくれます。

例えば試しに下記のようなよくあるインクリメントのテスト機能を書いてみます。例えばTypeScriptの場合はApp.tsxを下記のように変更します。（useStateと、そこから生成したcount, setCountを使っているところを追記しています）

import React, { useState } from 'react'
import logo from './logo.svg'
import './App.css'

const App: React.FC = () => {
  const [count, setCount] = useState(1)

  return (
    
      
        
        
          Edit src/App.tsx and save to reload.
        
        
          Learn React
        
        {count}
        
          
        
      
    
  )
}

export default App

問題なければ下記のようにボタンを押すと数値が増えていく機能が出来上がります。

あとはコミットしてpushすると再度Netlify上でデプロイが走りアプリケーション上に反映されます。

まとめ

今回作成したプロジェクトはGitHubで公開しています。

https://github.com/dala00/react-netlify-sample

SPAなNuxtアプリをFirebase HostingからNetlifyに移行してみた

2020-01-07T21:31:01+09:00

Netlifyがいいと聞いて、Firebase Hostingから移行してみたときの備忘録。

NetfilyのプレレンダリングがあるのでOGP芸が楽。
昔、こんな記事を書いたけど、Functionsで頑張らなくてもよくなった。

使ってみてよかったので、移行したときにやったことをまとめてみる。

移行するときにやったこと

nuxt.config.tsなどの変更

1. Nuxtなどの公式サイトを見て設定

Firebase Hostingで設定したのとかぶっているところもあり、nuxt.config.tsは変更なし。

参考: Netlify へデプロイするには？ - NuxtJS

2. _redirectsファイルの作成

Netlifyでは、index.html以外は404になるので、
SPAの場合はstatic/_redirecsというファイルを作成して、
以下の内容を記載しておく。

/*    /index.html   200

参考] Rewrites and proxies | Netlify Docs

3. Netlify側の設定

あとは、Netlifyにアクセスして、「SPA モードで生成されたサイトの場合」にも書いてあるとおりの内容をNetlifyの設定に入力すればOK。

迷わなければ、5分くらいでできて、masterにpushと更新される(´ω｀)

プレレンダリング

ベータ版だけど、Netlifyでプレレンダリングしてくれる機能がある。

この記事に書いてある感じで、
「FunctionsでheadだけのHTMLを生成→リダイレクト」
としていたのが不要になる感じ。

Netlifyの画面で設定

設定は簡単で、Netlify上で設定画面で有効化すればOK。
参考: Prerendering | Netlify Docs

その他の修正点

あとは、以下の修正。

OPGのためにrouterでリダイレクトしていた設定を削除
各ページでメタ情報を適切になるように変更

また、上で書いたとおり、static/_redirecsで

/*    /index.html   200

これを設定しておかないとボットがアクセスしたときに404になってOGPがでない。。

(これに気づかずかなりハマった。。)

小ネタ: プレレンダリングの結果を確認する

プレレンダリングするかどうかは、UAを見て判断しているらしく、

UAを指定してすると、プレレンダリングされた結果を確認でき、
UAを指定してないと、プレレンダリングなしの結果になる

curlだとこんな感じで、-A twitterbotを指定するとよい。

$ curl -A twitterbot https://example.com/hoge/fuga -o fuga.html

参考: [Common Issue] Understanding and debugging prerendering

毎回、Twitter Card Validatorで確認するのはめんどくさいので、この方法だと便利。

ページが存在しないURLの対応

積読ハウマッチでは、少し特殊なことをしていて、
一部のURLはheadだけのHTMLしか存在しないページがいくつかある。

なので、その部分を修正していく。方法としては以下の感じ。

nuxt.config.tsでrouterに、クエリパラメタ付きでリダイレクトを追加する
- リダイレクトとエイリアス | Vue Router
asyncData()でクエリパラメタを受け取り、created()で削除
- this.$router.push({ query: {} });
- Vuejs vue-router クエリパラメータの一部だけを取り除く - SIerだけど技術やりたいブログ

動的なサイトマップの対応

書籍やユーザのページなどは日々増えていくので、
サイトマップも動的に生成するようにしている。

Hostingの場合はFunctionsを呼び出せたけれど、
Netlifyに移行すると、それができないので対応が必要。

netlifyの_redirectsを使って直接Functionsへリダイレクトする方法で対応した。

こんな感じで各URLを該当のFunctionsにリダイレクトさせておく。

/sitemap  https://us-central1-.cloudfunctions.net/sitemap
/*        /index.html   200

sitemap-moduleだとダメだった...

sitemap-moduleで動的なページの対応方法も乗っているが、
SPAなのでgenerateされてしまう...

参考

カスタムドメインの設定

Netlifyの設定画面に従い、カスタムドメインを設定していく。

ALIASを設定するようにいわれるが、
お名前ドットコムはALIASを設定できないらしいので、
NetlifyのDNSを使う形で対応

参考にした記事でも書いてあるとおり、
Aレコードでもできるが、CDNを活用できないらしいので同様の対応

あとは、設定画面にも書いてあるとおり、
*.netlify.comから設定したドメインへリダイレクトを追加しておく。

[https://tsundoku.netlify.com/*](https://tsundoku.netlify.com/*) https://tsundoku.site/:splat 301!
/sitemap  https://us-central1-.cloudfunctions.net/sitemap
/*        /index.html   200

これでリダイレクトされるようになるので、あとはDNSの反映を待てばOK！

以上!!

こんなのつくってます!!

積読用の読書管理アプリ『積読ハウマッチ』をリリースしました！
積読ハウマッチは、Nuxt.js+Firebaseで開発してます!

もしよかったら、遊んでみてくださいヽ(=´▽`=)ﾉ

要望・感想・アドバイスなどあれば、
公式アカウント(@MemoryLoverz)や開発者(@kira_puka)まで♪

参考にしたサイト

キャップ野球向けイベントカレンダー作ってみました。【12/12 update】

2019-12-08T00:51:56+09:00

キャップ野球向けイベントカレンダー

https://cap-calendar.netlify.com/

最近キャップ野球関係のサービスをいくつか作っているのですが、

キャップ野球・全国大会非公式特設サイト
野球リーグスコア管理システム ver3α
優勝ラインシミュレーター

まだ普及途上にあるマイナースポーツなので、色々広報手段が足りないようで「こんなイベントカレンダー欲しい」という声を聞いたので作ってみました。

検討した仕組み

マイブームというわけではないのですが、個人開発ではDBレスのサービスを作ることが多いです。スキーマの設計が面倒なのと個人でデータを持ちたくないのが....。

最近作った主なDBレスサービス

キャップ野球・全国大会非公式特設サイト
ドラフト風画像作成サービス「ドラフトなう!」
アニメランキング作成サービス「Annict Access 3」
音楽ランキングメーカー
優勝ラインシミュレーター
ボウリング幹事アプリ「bowling party manager」

timetree

カレンダー共有ということで一番最初に考慮したのがtimetree。
ただし、外部公開されているAPIの中にカレンダーに登録されているイベントの一覧を取得するAPIがないことがわかり(19/12/7時点)、採用を断念しました。

google calendar API

定番のカレンダー。ただし、現在公開されているv3 APIはOAuth必須となっている。極力ユーザに余計なアクションをさせたくなかったので選択肢から外しました。

google public calendar

googleカレンダーには誰でも閲覧できる「公開カレンダー」があり、
その仕組みを調べていたところ、OAuthなしでデータを取得できるという結論に達しました。

イベントの種類タグ

イベントの種類を分類するために、イベントのタイトルにタグをつけてもらう方式にしました。
例：【イベントの種類】【イベントの場所】タイトル

強敵、正規表現....

エンジニアとして避けては通れない道なのはわかっているのですが、1つめの【】の中は取得できるものの、繰り返しの取得ができず、

(ノ｀Д)ノ彡 ┻━┻　←こんな感じになりました

結局文字列を再帰的に検索するという力業で解決しました。
文字列処理はHSP時代に腐るほどやったんや....

findTag=(str,tags)=>{
    console.log(tags)
    let beginIdx = str.indexOf('【');
    let endIdx = str.indexOf('】');
    if(beginIdx !== -1 && endIdx !== -1){
      let tagStr = str.substring(beginIdx + 1,endIdx);
      tags.push(tagStr);
      this.findTag(str.substring(endIdx + 1,str.length),tags);
      return tags;
    }else{
      return tags;
    }
  }

ロースキルでごめんなさい。

採用フォント

普段Noto Sans JPを好んで使っているのですが、Noto Sans JPのままでは若干固いイメージだったので、M PLUS Rounded 1cを使っています。

動作イメージ

未実装の機能

更新日時順表示

AnnictAccess3をリニューアルしました！

2019-10-27T21:29:52+09:00

進捗的にはこの記事の続きなのですが、大幅にリニューアルを敢行しました。

サービスURL

https://annictaccessv3.netlify.com/

動作イメージ

今回の機能改善点

「アニメ選択」画面の実装

ランキングに追加中の番組の強調
年を指定して番組一覧を表示

以前のバージョンでは全体から上位30位までを固定で抜き出してそれをソートする形でした。

視聴者数の表示

今回苦労したこと

画像取得に制限がある問題

取得数を制限する
→外部APIを探す
→herokuにキャッシュさせる処理を書く

    if(isExistFile('./public/'+req.params.url +'.jpg')){
      res.sendfile('./public/'+req.params.url +'.jpg');
    }
    try {
    client.get('users/show',{screen_name: req.params.url},
        async(error, tweets, response)=>{
            if(error) return Promise.reject(error);
            console.log(response.statusCode)
            if(response.statusCode===200){
                  var json = JSON.parse(response.toJSON().body)
                  let imageRes = await fetch(json.profile_image_url);
                  downloadFile(json.profile_image_url,'./public/'+req.params.url+'.jpg')
                  res.redirect(json.profile_image_url);
              }
          })
  } catch (error) {
    console.error(error)
  }

未実装の機能

映画版ランキングメーカー
- the movie db APIからデータを取得する準備中です。
- 日本語/英語両対応するかも？
twitterシェア機能

既知の不具合

画像が読み込めなかった場合、クリックできる範囲が狭くなる
画像取得の際にtwitterAPIの制限に引っ掛かる

今回使っている技術

ReactJS/Netlify

ReactJS...フロントエンドの画面や通信を司るjavascriptのフレームワーク
Netlify...Reactアプリなどを簡単にデプロイできるプラットフォームサービス

NodeJS/Heroku

NodeJS...サーバサイドjavascript。
Heroku...NodeJSやRailsなどサーバサイドアプリケーションをデプロイできるプラットフォームサービス

graphQL

サーバにデータを問い合わせるクエリ言語の一つ。
REST APIの後継と言われている。

 let query = gql`query {
          searchWorks(orderBy: {field: WATCHERS_COUNT, direction: DESC} seasons: ["${req.params.year}-spring","${req.params.year}-summer","${req.params.year}-autumn","${req.params.year}-winter"]) {
            edges {
              node {
                  title
                  seasonName
                  seasonYear
                  annictId
                  twitterUsername
                  watchersCount
              }
            }
          }
        }`

お問い合わせフォームを作るならNetlify Formsがオススメ！

2019-10-08T08:27:14+09:00

オリジナルの記事はこちら

こんにちは。mono（@mono7555e）です。

今回は私のブログのお問い合わせフォームにも使っているNetlify Formsのご紹介です。
ブログやサイトにお問い合わせフォームを設置したい時に簡単に使えるのでオススメです。

Netlify Formsとは

Netlifyについては以前ご紹介していますのでそちらをご覧ください。

https://www.mono7555e.com/gatsbyjs-and-netlify/

そのNetlifyのサービスの1つで「Forms」というフォームの送信内容を受け取ってくれるサービスがあります。

利用方法は簡単で、タグにnetlifyまたはdata-netlify="true"要素を追加して、Netlifyに反映するだけです。

以下、公式ドキュメントのサンプルです。


  
    Your Name: 
  
  
    Your Email: 
  
  
    Your Role: 
  
  
    Message:

タグのdata-netlify="true"以外は普通のフォームなのが分かると思います。

タグにdata-netlify="true"をつける以外に制約はないので、フォームの見た目などのカスタマイズは自由です。

価格

月に100件、アップロードデータサイズ10MBまでは無料で使えます。

それ以上になると、19ドル/月の費用がかかります。詳しくは公式サイトをご覧ください。

主な機能

ファイル添付

type="file"のフィールドを追加すれば、それだけでファイルもアップロードできるようになります。


  ...
  
  ...

スパムフィルタリング

送信された内容はAkismetを使ってフィルタリングされます。

フィルタリングされたものはダッシュボード画面から確認出来るので、誤ってスパム判定されて確認できないということはないです。

メールアドレスの形式が間違っている場合などもフィルタリングされて弾かれるみたいです。

さらに、「reCAPTCHA 2」などを使ってフォームを保護することができるので必要であれば使ってみると良さそうです。

詳しくは公式ドキュメントをご覧ください。

エクスポート

送られてきた内容は基本的にはNetlifyのダッシュボード画面から確認することになりますが、CSV形式でのエクスポート機能もあります。

ダウンロードできるのはスパム判定されていないもののみです。

通知

メールやSlackで通知を飛ばすことができます。

name="subject"の要素をフォームに追加しておけば、通知のタイトルに入力された内容が使われるようになるのでオススメです。


  ...
  
  ...

こちらもエクスポートと同様、スパム判定されていない場合のみ通知されます。

サンクスページ

サンクスページを用意して

タグのactionにサンクスページのパスを設定するだけでOKです。


  ...
  
  ...

何も設定していない場合はNetlifyが用意した画面が表示されます。

カスタマイズ等はできないので自前で用意する方が良いでしょう。

GatsbyJSで利用する場合の注意点

GatsbyJSやその他静的サイトジェネレーターからも利用可能ですが、サンプルのままだと動かないので一部コードの追加が必要になります。

以下のようなコードを

に追加します。

valueの内容はタグのname属性に合わせて変更してください。

サンプル


  {/* 以下のコードを追加 */}
  
  ...

Netlify Forms以外の選択肢

このブログがGatsbyJS+Netlifyという構成で作られていたのでNetlify Formsを使ってお問い合わせフォームを構築しましたが、Netlifyを使っていない場合や難しく感じた場合はGoogleフォームを使うのが良いと思います。

まとめ

以前からTwitterのDMにてご依頼等いただくことがありましたが、企業さまだと少々お手間だったようなので、お問い合わせフォームを設置することにしました。

Netlify Formsなら簡単に設置できますし、スパムも自動で判別してくれるので管理の手間も少なくオススメです。

参考

公式ドキュメント

https://www.netlify.com/docs/form-handling/

ReactアプリにNetlify Formsを入れる方法（公式ブログ）

https://www.netlify.com/blog/2017/07/20/how-to-integrate-netlifys-form-handling-in-a-react-app/

いまブログを始めるならGatsbyJS+Netlifyがオススメ！

2019-10-08T08:07:21+09:00

オリジナルの記事はこちら

こんにちは。mono（@mono7555e）です。

今回は新しくブログを立ち上げた際に使ったGatsbyJSとNetlifyのご紹介です。
新しくブログを立ち上げようとしている方やWordPressに疲れた方には参考になるんじゃないかと思います。

GatsbyJSとは

https://www.gatsbyjs.org/

GatsbyJSはReactで作られた静的サイトジェネレーターです。
JSONやYAML、XMLなど扱うデータを全て一回GraphQLで取り出せるように変換してくれるので、様々なデータが扱いやすく、コンポーネント化がしやすいという特長があります。

また、プラグインも豊富で大抵の場合、既にプラグインがあるのでそれを使うように設定してあげればOKです。

今回のブログ立ち上げの際にもMarkdownで記事が書けるというのを必須事項にあげていたのでgatsby-transformer-remarkというプラグインを利用してMakrdownファイルをGraphQLで扱えるようにしました。

他にもsitemap.xmlを生成してくれるgatsby-plugin-sitemap、Google Tag Managerのタグを入れてくれるgatsby-plugin-google-tagmanagerなど利用しています。

なぜWordPressを使わなかったのか

ブログを立ち上げるとなると真っ先に思い浮かぶのがWordPressだと思います。
ですが、今回は使うのをやめました。
WordPressを使った経験はある方なら分かると思うのですが色々つらみを感じているからです。

セキュリティが不安

WordPressはかなり使われているので様々な方面から狙われやすいです。
セキュリティパッチ等のアップデートを忘れているとすぐに狙われて乗っ取られたり、悪意のあるコードを埋め込められたりする恐れがあります。

管理が大変

前述の通りセキュリティが不安なのでセキュリティパッチが降ってきたらすぐに適用したいのですがカスタマイズをバリバリやっていたりプラグインを使っている場合、それらが邪魔をしてアップデートが出来ないことがままあります。
また、WordPressだけでなくPHPやWebサーバーの管理等も必要なのでその辺りも大変です（レンタルサーバーの場合はその辺り任せられるので楽ですが、カスタマイズがしづらい場合もあります。）

PHP書くの辛い

最後はかなり個人的な理由です。
WordPressはPHPで作られているので、ある程度カスタマイズをしようと思うとPHPでコードを書く必要があるのですが、PHPは書いててあまり楽しい言語ではないので出来れば避けたいと思っています。

なぜブログサービスを使わなかったのか

WordPress以外にもブログをはじめるのに使えるサービスがいくつかありますが、Markdown、アフィリエイト、カスタマイズ性の辺りがマッチせず使うのを諦めました。

有名なところだとAmebaブログ、ライブドアブログ、fc2ブログなどがありますが、それらのブログサービスはMarkdownで記事が書けないので除外しました。

Markdownが使えるのは、調べた限りだとMedium、note、Qiita、はてなブログぐらいですが、それらも他の部分がネックになりました。

Medium

使ったことがないので何とも言えないところですが、日本で使っている人が少ない印象で、検索に引っかかることもないのでSEOにも強くなさそうな印象です。
2017年に日本から撤退しているのも気になりました。

note

アフィリエイトが貼れなかったり、カスタマイズも出来ないのがちょっと辛いかなと。
ただ、有料記事が販売できたりするのでブログとは別に利用しようと思っています。

https://note.mu/mono7555e

Qiita

noteと同様にアフィリエイト、カスタマイズが出来ないのと、プログラミングに関するものしか投稿できないというのがネックです。
もしかしたらめちゃくちゃコードを見せるような記事はQiitaに書くかもしれません。

一応登録だけはしました。

https://qiita.com/mono7555e

はてなブログ

4つの中だと、はてなブログは結構良くてサクッと立ち上げるならオススメです。
独自ドメインを設定する場合は有料プランになってしまいますが気にしない方なら無料版で事足りると思います。
今回はガッツリカスタマイズしたかったのでやめました。

GatsbyJSを選んだ理由

ということでGatsbyJSです。

GatsbyJSはReactベースでGraphQLでデータを扱うというのが当時、流行っていたというのもあって採用することにしました。

GatsbyJSの良いところ、悪いところ

高速

WordPressなどと違い事前にHTMLを生成してあるのでレスポンスが高速です。

維持費が安い

基本的には静的HTMLを置いておくだけでOKなので、AppサーバーやDBは不要。
後述するNetlify等の静的サイトをホスティングするサービスを使うだけでほとんどの場合事足ります。

豊富なプラグイン、ライブラリ

公式、非公式に関わらずプラグインが多数あるのと、npmも使えます。
それらの組み合わせで作ることが出来ます。

専門知識が必要

一方で、ReactやGraphQL、ES6等の知識が必要です。
フロントエンドエンジニアの方であれば問題ないと思いますが、そうでない場合は少しキャッチアップが必要かもしれません。

GatsbyJSを採用したのでホスティングを考えなければなりませんが、GatsbyJSを使うならNetlifyを使うというのがデファクトスタンダードになっています。
なので私も例に漏れずNetlifyを使うことにしました。

Netlifyとは

https://www.netlify.com/

静的サイトをホスティングしてくれるサービスです。
GitHubやBitbucketのリポジトリと連携するだけで、pushを検知して自動でビルド、デプロイしてくれます。

Netlifyの良いところ

無料で独自ドメインを設定できる

基本的には.netlify.comのサブドメインが設定されますが、独自ドメインを持っていればそれを無料で設定できます。

無料でHTTPSにできる

.netlify.comのサブドメインであっても、独自ドメインであってもHTTPSにするのは無料で出来ます。

デプロイ前にプレビューできる

ブランチを切ると自動的にプレビュー用のサイトが自動で作られるので変更内容を公開前に確認できます。

悪いところも書こうと思ったんですが思いつかないですね…
一応、無料だと100GBまでの転送量の制限がありますが、多くても数100MBぐらいしか使わないと思うので全然問題ないかなと思います。

まとめ

私はブログを立ち上げるときの条件

WordPress以外
独自ドメインが使える
Markdownで書ける
カスタマイズしやすい

これらを満たすのがGatsbyJSとNetlifyの組み合わせだったので使用しています。

同じような条件で検討されている方はGatsbyJSとNetlifyの組み合わせがオススメなので是非試してみてください。

Netlifyでsubmoduleのcloneに失敗する時

2019-04-24T19:15:13+09:00

12:04:27 AM: Error checking out submodules: Submodule 'src/lib/project' ([email protected]:owner/project.git) registered for path 'src/lib/project'
Cloning into '/opt/build/repo/src/lib/project'...
Host key verification failed.

fatal: Could not read from remote repository.

Please make sure you have the correct access rights
and the repository exists.
fatal: clone of '[email protected]:owner/project.git' into submodule path '/opt/build/repo/src/lib/project' failed
Failed to clone 'src/lib/project'. Retry scheduled
Cloning into '/opt/build/repo/src/lib/general'...
Host key verification failed.

git submoduleを使っていて、Netlify上でこんなエラーが出た時は、下記の様にするとうまくいく。

diff:.gitmodules [submodule "src/lib/project"] path = src/lib/project - url = [email protected]:owner/project.git + url = git://github.com/owner/project.git

以前にも遭遇して、そのときに何かを参考にして解決したんだと思うけど、忘れちゃいました。公式ドキュメントだったかな？次回すぐに当たれるようにメモ。

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 の使い方

環境準備

最初に一度ローカル環境を準備する必要がある。

バージョン確認

git lfs version
Git LFS version: v2.5.1以上　を確認
なければ、Git LFS をインストール。詳細は公式サイトで割愛
https://git-lfs.github.com/

netlify -v
netlify-cli: 2.6.4以上を確認

なければ、netlify-cli をインストール。詳細は公式ドキュメントで割愛
https://www.netlify.com/docs/cli/

large media プラグインインストール

バージョン確認後、netlify-cliのプラグインをインストール

netlify plugins:install netlify-lm-plugin
netlify lm:install

これで環境準備は完了

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

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 と CMS

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

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

Netlifyでfunctionsのデプロイがなぜか失敗する時の対処法

2019-01-31T23:57:42+09:00

Netlifyでfunctionsを含めたプロジェクトをデプロイしようとすると、エラーでデプロイできなかった。不思議に思いながら本家のfunctionsのサンプルを「Deploy to Netlify」ボタンでデプロイしてみたのだが、それもデプロイできない。ちなみに発生したエラーは下記のようなもの。

failed during stage 'deploying site': Failed to execute deploy: [PUT /deploys/{deploy_id}/functions/{name}][500] uploadDeployFunction default  &{Code:0 Message:}

対処法

待とう。何かNetlifyの機嫌が悪いだけかもしれない。もしくはアカウントやプロジェクトを作ったばかりの時はLambda側の連携の準備ができていないのかもしれない。

僕の場合は何時間かたって再度Retryしてみたらデプロイができた。

ただ、元々成功していたプロジェクトのデプロイが急にできなくなったのであれば、違う原因かもしれないので注意。エラーメッセージを要確認。

ReactJS+NetlifyでOGP対応

2019-01-26T19:42:57+09:00

OGPとは

Open Graph Protocolの略。
FacebookやtwitterなどのURLシェア機能で画像と文字列を使ってWEBサイトの内容を伝えるための規格です。

ReactでOGPが難しい理由

FacebookやtwitterなどのクローラーがJavascriptを実行しない仕様のため、ページの内容がJavascriptで動的に作成されるSPAなどでは工夫が必要となります。

react-helmetを使ってmetaタグを動的に書き換える

react-helmet
metaタグだけではなく、headタグの中身を動的に書き換えることができます。(reduxの)storeから文字列をセットしたりできます。

componentWillMount(){
   window.prerenderReady = false;
}
componentDidMount(){
   window.prerenderReady = true;
}

NetlifyでPrerenderingの設定をする

Settings -> Build&Deploy -> Prerendering から下図のようにEnabledにする

おまけ

crieitさんのボード機能を使って野球リーグスコア管理システムの進捗とか書いてます。選手個人成績のページもOGPに対応しました。

「Netlify」の記事 - Crieit

Netlifyのビルド時間をGitHub Actionsで0時間にして月末のヒヤヒヤから解放されよう！

いつかサーバーを閉じるとき 〜お金をかけずに 410 を返す方法〜

アニメのレコメンドサービス、NextJS化しました。

アニメのレコメンドサービスを作りました。

自分だけのオリジナル紙面を作れる「スポーツ新聞メーカー」をリリースしました。

敗者のweb1week

Nuxtアプリを無料で公開するときに試した5つの環境まとめ(Firebase/GAE/Netlify/Heroku)

(改良版)パワプロ風画面ジェネレータを作ってみた

nuxt.jsプロジェクトをnetlifyで公開してredirectを使うときの罠

Vue.js+Netlifyで最小のアプリを作る

React+Netlifyで最小のアプリを作る

SPAなNuxtアプリをFirebase HostingからNetlifyに移行してみた

いつかサーバーを閉じるとき〜お金をかけずに 410 を返す方法〜