適切な監視ツールを選ぶことで、システムの稼働状況をリアルタイムで把握し、問題が発生した際に迅速に対応することが可能になります。

本記事では、個人開発者にとって導入が簡単で、無料で利用できる監視ツールを3つ紹介し、その選び方や実際の使用感について紹介します。

個人開発で導入する監視ツールの選び方

個人開発で導入する監視ツールを選ぶ際のポイントは、まず簡単に導入できることがポイントかなと思います。

開発リソースを効率的に活用するため、設定が直感的で短時間で完了するツールが理想的です。

また、無料プランが利用可能なツールを選ぶことで、コストを抑えつつ必要な監視機能を確保できます。

具体的な監視ニーズに応じて、稼働状況やエラーをリアルタイムで監視できるツールや、ウェブサイトのパフォーマンスを監視できるツールを選ぶのもありだと思います。

個人開発で導入するのにおすすめの監視ツール3選

1. UptimeRobot

特徴

ウェブサイトやサービスの稼働状況を監視し、ダウンタイムが発生するとアラートを送信します。

UptimeRobotは、HTTP(S)、Ping、ポート、キーワードのモニタリングをサポートしており、幅広い監視ニーズに対応しています。

利点

設定が非常に簡単で、初心者でも短時間で監視を開始できます。アラートはメール、SMS、Slackなどで受け取ることができ、即座に問題を把握できます。

さらに、ダッシュボードが直感的で見やすいため、監視結果を迅速に確認できます。

無料プラン

無料プランでは、50のモニタリング対象を5分間隔で監視可能です。

個人開発プロジェクトには十分な範囲で利用でき、基本的な監視機能をカバーしています。

公式サイト:

UptimeRobot: Free Website Monitoring Service

Start monitoring in 30 seconds. Use adva…

uptimerobot.com

2. Sentry

特徴

アプリケーションのエラートラッキングとパフォーマンスモニタリングを提供します。

エラーの発生場所、頻度、影響範囲をリアルタイムで把握でき、パフォーマンスの問題を素早く特定します。

多くのプログラミング言語やフレームワークに対応しており、幅広い開発環境で利用可能です。

利点

エラーをリアルタイムで検出し、詳細なスタックトレースとコンテキスト情報を提供するため、問題の原因を迅速に特定できます。

開発者フレンドリーなインターフェースを持ち、エラーの管理が簡単です。また、Sentryはパフォーマンスモニタリング機能も備えており、アプリケーションの応答時間やトランザクションの速度を詳細に分析できます。

無料プラン

一定のエラー数まで無料で利用可能で、小規模なプロジェクトや個人開発に最適です。

公式サイト:

Application Performance Monitoring & Error Tracking Software

Application performance monitoring for d…

sentry.io

3. StatusCake

特徴

ウェブサイトの稼働監視、SSL監視、ページ速度監視などを提供します。

監視対象はHTTP(S)やPing、TCPポートの他に、特定のキーワードの存在やレスポンスタイムもチェック可能です。

利点

設定が非常に簡単で、数分で監視を開始できます。アラート機能が豊富で、メール、SMS、電話、Slackなど様々な方法で通知を受け取ることができます。

世界中のロケーションからの監視が可能で、ユーザーの実際の使用感を反映した監視が行えます。また、詳細なレポート機能があり、稼働状況やパフォーマンスの変化を分析しやすくなっています。

無料プラン

基本的な監視機能を提供し、個人プロジェクトや小規模なサイトに十分対応できます。

無料プランでも主要な監視機能を利用でき、初期コストを抑えつつ監視を行うことができます。

公式サイト:

StatusCake - Uptime monitoring, Page speed monitoring, and more

Website Monitoring solution that drives …

www.statuscake.com

実際にStatusCakeを導入してみた

今回、いくつかの監視ツールを触ってみて、StatusCakeが一番サクッと設定ができたのでこちらを導入しました。

複雑な設定や知識が不要で、数分で監視を開始できました。

ウェブサイトの稼働監視では世界中のサーバからのチェックが可能で、サービスのグローバルな可用性を確認できます。

メール、SMS、Slackなど多様な方法でアラートを受け取ることができ、問題発生時に迅速に対応できそうです。

また、無料プランの提供もあり、個人開発者にとってコストは重要な要素であり、StatusCakeは無料で基本的な監視機能を利用できるため、予算を気にすることなく導入できます。

無料プランでも10のモニタリング対象を5分間隔で監視できるため、一般的な個人開発のプロジェクトでは十分に対応できそうです。

通知を設定し、実際に監視対象のページが落ちると以下のようなメールが届きます。

おわりに

今回紹介した3つの監視ツールは、いずれも設定が簡単で、個人開発者にとって扱いやすいものかと思います。

特にStatusCakeは、簡単なセットアップと多機能な監視オプションで優れたパフォーマンスを発揮します。

無料プランを利用することで、初期コストを抑えつつ、効果的な監視を行うことができますので、ぜひこれらのツールを活用してみてください！

個人開発のWebサービスをContentfulからSupabaseに移行した経緯

無料枠を超えそう

Contentfulの無料枠で使用しているのですが、無料枠だとレコード数が1万件となっており、徐々に上限に近づいていました。このままだと半年後くらいに上限にいきそうだったので、移行することにしました。

ちなみに有料プランも考えたのですが、1ヶ月300ドルと高いのとレコード数の上限が5万件といずれまた上限に達する時がきてしまうのと思ったのでやめました。

ContentfulのAPI経由での取得なので検索性がちょっと悪い

Contentfulからのデータを取得する際にAPI経由で取得するのですが、Contentfulが指定した条件で取得するため、若干使いづらいところがありました。

具体的に全文検索でmatchを使うのですが、データによってはヒットするはずなのに引っかからなかったりしていました。今後、Webサービスの検索性を高めるためにも移行しておきたかったです。

Webサービスの変化

今後WebサービスとしてCGM要素が追加されることもあり、ContentfulのAPIにGETだけでなくPOSTやUPDATEのリクエストを頻繁に行われることになります。

初期の頃の静的なコンテンツメインの情報サイトからCGMサービスとして変化していく中で、今後もContentfulを使っていくことに違和感を感じ、ちゃんと自前でDBを用意してあげる方が今後の保守性や拡張性においても良いのではないかと思いました。

Supabaseにした理由

Contentfulを使っていたことからサーバレスのアプリケーション構造になっており、その構造でも導入できるSupabaseを選択しました。

またSupabaseにした理由として、RDBが使いたかったのとライブラリが用意され触った感じ使いやすかったためです。SupabaseのDBはPostgreSQLを使用しており、ライブラリのドキュメントも充実していました。

ContentfulからSupabaseに移行するまでにしたこと

Supabaseで開発環境と本番環境を用意

まずSupabaseで開発環境と本番環境を構築しました。アカウント登録してプロジェクト作成しました。

OpenAI logo

Build production-grade applications with…

supabase.com

Supabase用のディレクトリを用意

次にWebアプリケーション内のソースコードを新しくSupabaseの接続用に作成しました。

Supabase用のDriverを用意して、ローカル環境で向き先をSupabaseにして実装をしました。

ContentfulからSupabaseへデータ移行

ContentfulにあるデータをSupabaseのDBに移行しました。ContentfulからデータをGETしてSupabaseのDBにINSERTするスクリプトを書いて、そのスクリプトを実行することでデータ移行しました。

検証環境で確認

ローカル環境での開発が終わったら、実際に検証環境にあげて本番環境と同じ動作になるかを検証しました。

本番環境の向き先をSupabaseへ移行

検証環境の動作確認を終えて、問題ないことを確認した後、本番環境への移行作業を行いました。

実際にSupabaseに移行してみて

バグが発生した

やはり人力の動作確認やテストだとどうしても抜け漏れがあり、本番移行後に気づいたバグがいくつかありました。今後バグを発生させないようにするためにもE2Eの導入などが必要になりそうです。

移行作業は思ったとおりいかない

とんとん拍子でいけると思ったら、実際に修正するコードが多かったり、データ移行にハマったりと思ったよりも時間がかかりました。事前に調査してたとはいえ、移行作業はどうしても読めないことが多く、時間がかかってしまうなと改めて感じました。

なぜNetlifyからFirebase Hostingに移行したのか

Firebaseに集約したい

最近認証機能を実装したことから、Firebase AuthenticationやFirestoreを利用することになり、ホスティングサービスもFirebaseにまとめたい感がありました。

今後もFirebaseのサービスを使っていきたいと考えていたので、早いタイミングで集約していこうと思いました。

コストが安くなる

Netlifyの1ヶ月のビルド時間の無料枠は300分で、追加500分ごとに7ドルという料金体系でした。

最初は無料枠でも問題なくビルドできていましたが、コンテンツが増えて無料枠で収まることがなくなり、毎月追加枠を2つ購入していた感じになっていました。

そもそもビルド時間長すぎ問題があり、そちらも解決する必要があるのですが、今後もコンテンツが増えていくことを考えると地味にコストが効いてくるなと思っていました。

そこで色々調べていくとFirebase HostingとGitHub Actionsを組みわせた場合、無料枠は2000分とコストがかからずビルドできることを知り、移行したいと思う大きな要因となりました。

CDNのエッジが国内にあるので早くなるのでは

Netlifyの無料プランだと日本のエッジノードが利用できず海外からの配信になっているようで、Page Speed Insightsでチェックすると結構遅いことがわかりました。

Firebase Hostingなら国内からの配信になるようなので、サイトのパフォーマンスも向上すると考えていました。

NetlifyからFirebase Hostingへの移行作業

ローカルからFirebase Hostingにデプロイできるようにする

まずは公式を参考にして、ローカルでgenerateしたファイルをFirebase Hostingにデプロイできるようにしました。

デプロイしてみてFirebase Hostingにデフォルトで使われているドメインにアクセスしてみて、ページに問題ないかを確認しました。

GitHub Actionsでパイプラインを構築する

パイプラインを構築するといってもfirebase initするといい感じのymlファイルを生成してくれるので、それを元にちょっと変更しただけでした。

出来上がったパイプラインのymlファイルはこんな感じになりました。ちなみにworkflow_dispatchを追加するとGitHub Actionsから手動でトリガーできるようになります。

特にソースコード変更せずにコンテンツの更新などでビルドしたい場合に役立ちます。

name: Deploy to Firebase Hosting on merge
'on':
  push:
    branches:
      - main
  workflow_dispatch:
jobs:
  build_and_deploy:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      - run: npm i && npm run generate
      - uses: FirebaseExtended/action-hosting-deploy@v0
        with:
          repoToken: '${{ secrets.GITHUB_TOKEN }}'
          firebaseServiceAccount: '${{ secrets.FIREBASE_SERVICE_ACCOUNT_HOGE }}'
          channelId: live
          projectId: hoge

Firebase Hostingにドメインを設定する

この時点でGitHubにPushするとNetlifyとFirebase Hosting両方にデプロイされるようになっている状態です。

あとは独自ドメインをFirebase Hostingの方に設定するだけです。これも公式を元にポチポチ設定していけば完了します。

設定してから反映まで数時間かかったので、移行日が決まっている場合は、あらかじめ考慮しておくと良いでしょう。

NetlifyからFirebase Hostingに移行する際に注意すること

完全に忘れていたのですが、NetlifyはURLのパスを大文字から小文字に自動で変換していました。

ヘッドレスCMSとしてContentfulを使用しているのですが、そこのIDは自動で大文字小文字などが混ざった文字列を生成しており、それをURLのパスとして利用していました。

そのため、Google検索などからアクセスした際にURLのパスが小文字に変換された文字列になっており、Firebase Hostingに移行した際にFirebaseは小文字変換はしないため、存在しないページとして認識されてしまっていました。

リダイレクト処理する

ということで急いで対応しなければならず、一旦Netlifyに切り戻しを行いつつ、対策を考えました。

パッと思いついたのは小文字のパスでアクセスされた際にちゃんと元々の大文字が含まれたパスにリダイレクトする処理を入れることを思いつきました。

ビルドしているログには大文字が含まれたパスで生成されているのが確認できたので、それらを元にサクッとPythonでいい感じにFirebase.jsonのredirectsにそのままそのまま貼っつけられるような処理を書きました。

url_list = [ここに元々のURLを書く]

mappings = []

for url in url_list:
  source = url.lower()
  destination = url
  mappings.append({
    "source": source,
    "destination": destination,
    "type": 301
  })

print(mappings)

printした結果をfirebase.jsonに貼ってPushしてなんとかことなきを得ました。

NetlifyからFirebase Hostingに移行する際に結構ありがちな失敗かと思うので、参考になればと思います。

半年以上経ち、個人開発からチーム開発になって取り組んだことなどをまとめておきます。

Slackでワークスペースを作ったり、Google Analyticsなど諸々の連携

まず最初にSlackのワークスペースを作成して、チャットや開発がしやすいように整備しました。また、Githubの連携やチャンネルの作成などチーム開発がしやすいようにしました。

次にGithubやNetlify、Contentfulなどの開発に必要なツールの連携、Google AnalyticsやSearch Console、Clarityなどの各種ツールを招待して使えるようにしました。

その他にもアーキテクチャの説明や各種使い方など、今後チームとして開発する上で必要なことを実施しました。

アジャイルな開発

個人開発でやっていた小さなサービスということもあり、柔軟かつ頻繁なリリースを進めるためにアジャイル開発を取り入れました。

同じチームだった時にアジャイル開発でやっていたこともあり、お互いアジャイル開発のメリットややりやすさを感じていました。

カンバンを作成して、1週間を1イテレーションとし、毎週必ずプランニングの時間を入れていました。プランニングでは主に前イテレーションでやったことと次イテレーションでやることを話します。

クォーターの初めに大まかにストーリーを作成し、ポイントをつけていきます。ある程度イテレーションを回していくとベロシティが計測できるため、今クォーターはここまでできそうだねというよう話ができるようになり、スコープを調整しながらアジャイルな開発を進めることができました。

ふりかえりの実施

さすがに毎イテレーションのふりかえりまではできていないですが(本来はやった方がいいけど業務後に進めていることもあり毎週は負荷が大きすぎると判断)、ふりかえりも行うようにしました。

実際にふりかえりをしてみるとこれからはこうしていこうやもっとこうすればよかったなど新しい発見や学びがあります。また、お互いに普段思っていることなどを話すので、認識や考えの共有ができる良い機会になりました。

最後に具体的なアクションを出すことで、次にやることが明確化されて、ふりかえりをやった効果をさらに実感できました。

定期的なオフライン会によるペアプロやリフレッシュ

プランニングやMTGなど基本はオンラインでやっていますが、月一くらいでオフライン会を実施しています。

オフラインで集まってペアプロしたり、サウナに行ってリフレッシュしたりと作業&遊びみたいな感じになっています。

定期的にオフラインで集まることで雑談やふと思ったアイデアなどを話す機会となり、とても良い取り組みとなっています。

OKRを立てる

2023年から実際にOKRを立てて、目標を明確にするようにしました。OKRとは、Objectives and Key Resultsの略称で、目的と重要な成果指標のことです。

OKRを考えて立てることで、中長期的なビジョンを掲げることができ、今後の見通しがクリアになりました。

毎週のプランニングでOKRの進捗の確認をすることで、今どの程度達成しているのか、何をやらなければならないのかが明確化され、より推進力を持ってサービスの成長にコミットすることができたと思います。

また、単純に達成されていることが見える化することでモチベーションも上がりますし、達成感も得やすいと思います。

開発以外のことも共有したり話し合うような時間をつくる

サービスが大きくなるにつれ、開発以外の取材や外部の方との打ち合わせ、お問い合わせが増えてきました。

チームに入ったエンジニアには主に開発をお任せしてもらっていますが、随時お問い合わせや打ち合わせの内容を共有したり、意見を話したりするようにSlackやMTGで話す時間をつくりました。

また、お問い合わせの内容による対応や対策を話し合ったり、ユーザーの声を拾ってどうしていくかを検討したりと一緒にプロダクトを成長させていくような取り組みをしました。

このように、自分だけが持っているコンテキストをなくすことで、常に共通の知識とビジョンを共有している状態を目指しました。

この辺りは現在自分含め2人だけなのでやっていけている感ありますが、人数が多くなると課題になってくるかなとは思います。

リニューアルしようと思ったきっかけ

約1年ほど前から運営している個人サービスがありがたいことに徐々にアクセス数を伸ばし、8月には初めて10万PVを超え、その後も継続的に伸びています。

今後も長くかつ機能を増やして多くの人に愛されるサービスにしていきたいと思い、古い技術やごちゃっているコードなどを綺麗にして保守性・運用性の高いものにしたいと思いリニューアルをすることに決めました。

具体的にはNuxt2 + JavaScriptで書かれたコードをNuxt3 + TypeScriptにしました。特にJSからTSはずっとやりたかったけどなかなか手をつけられなかったところでした。

TSにしたことで型を定義することができ、グッと開発体験が向上しました。やはり静的型付けでないと気持ちよく開発できない感があり、リニューアルして本当に良かったなと思う点でした。

他にはリニューアル前だとビルド時間が長くなっており、Nuxt3で導入されたViteでビルド時間が短縮されました。またNitroによる開発時のホットリロードがかなり早くなり開発体験が向上しました。

ざっくりアーキテクチャ

サービスとしてはJamstack構成でつくられています。他にスクレイピングするためのジョブなどがありますが、ここでは割愛しています。

Jamstack構成として、ヘッドレスCMSはContentful、ホスティングサービスはNetlify、静的サイトジェネレーターはNuxt3です。

厳密に言うと一部クライアントサイドで動的にデータを取得しており、SSG + CSRのSPA構成のページがあるため、完全に全てのページが静的化してAPI通信がないわけではないです。

基本的にGitでmainブランチにPushされた時とContentfulのコンテンツが更新された時にビルドを走らせています。Netlifyの無料枠だとビルド時間が月に300分で今ちょっとギリなので、近々有料プランに移行することになりそうです。

その点Contentfulは無料で結構使えるので助かってます。コンテンツが膨大にならない限りは無料枠でなんとかなりそうです。

今後、動的な機能の開発を増やしたいと考えており、アーキテクチャをどうするか検討中です。サブドメインを取って別のサービスとして切り分けて出そうかと考えています。

いずれにせよ静的コンテンツ中心の現状では、この構成がパフォーマンス的にもコスト的にもSEO的にも良いのではないかと考えています。

リニューアルまでの苦労や困難

技術的なところではSSGできなかったりSVGが読み込めない、動的サイトマップが上手くできないなど色々ありました。

何度かもうリニューアルを諦めようとも思いましたが、粘りに粘ってなんとかリニューアルに漕ぎ着けることができました。

その場で焦って何とかしようとしても上手くいかないことが多く、ちょっと時間を置いてみると意外とサクッと解決したり別の角度からの解決策が浮かんだりしました。

今となって振り返れば大したことないと思うことでも、当時は結構心折れてたりしていたので、精神的に色々思い詰めない方がいいのかなと思っています。

Dependabotの導入

技術的負債を残さないためにも新しくリニューアルしたリポジトリにDependabotを導入しました。

ライブラリがメジャーまたはマイナーバージョンのアップデートされた時に自動的にプルリクエストを作成してくれます。

プルリクエストをマージしてローカル環境でgenerateしてみて問題なければ本番に適用する流れでいい感じにバージョンアップデートに対応できそうです。

実際にdevelopに対してプルリクエストをしてもらうように設定し、開発環境で動かしたりgenerateしてみて動作確認しています。週一で対応していく予定です。

リニューアル終わってみて

リニューアル直後はアクセスが微減したりして注視していましたが、2週間くらいして前の水準に戻り安定してきましたので、一旦リニューアル関連の作業は落ち着いた感じです。

リニューアルが終わってみて一安心といった感じで、終わってみてやってほんと良かったなーと思います。開発体験が向上し、運用性・拡張性が増して更なる進化へ積極的に取り組めそうです。

ゼロから作り直すのはパワーが入りますが、その分の達成感はひとしおです。

エラーが起きるとサーバーが落ちる

Node.jsでAPIを開発しているのですが、エラーが発生するとサーバーがダウンしてしまいます。一度サーバーがダウンしてしまうと、次リクエストから応答しなくなります。

try/catchでエラーハンドリングしていても、予期せぬところでエラーが発生する可能性があるため、さすがに運用していく上ではサーバーが落ちないようにしたいです。

なんとかサーバーが落ちないようにできないものかと調べてみると、PM2が良さそうな感じでした。

PM2とは

PM2はNode.jsアプリケーションのプロセス管理を行うためのオープンソースです。PM2を使うことで、Node.jsアプリケーションの起動やログ管理、モニタリングができます。

プロセスの状態を常に監視しているため、プロセスが停止した場合などに自動で再起動させる機能を持っています。

PM2 - Home

PM2 is an advanced production process ma…

pm2.keymetrics.io

PM2を導入する

PM2を導入してみます。まずpackage.jsonにpm2を追加します。

・package.json

…

  "dependencies": {

    ...

    "pm2": "latest"
  },

…

次にPM2の設定ファイルを作成します。scriptの箇所などは適宜読み替える必要があります。watchをtrueにすることでコードが変更があった場合に自動で再起動してくれます。

・pm2.config.json

}
  "name": "sample-app",
  "script" : "ts-node src/driver/server.ts",
  "watch": true,
  "env" : {
    "NODE_ENV" : "development"
  },
  "env_production" : {
    "NODE_ENV" : "production"
  }
}

Dockerfileを修正する

Dockerfileを修正し、先ほど作成したpm2.config.jsonを読み込ませてpm2を使えるようにします。

–no-daemonオプションを指定することで、PM2を実行し続けることができます。

・Dockerfile

FROM node:16
WORKDIR /usr/src/app

COPY package*.json ./

RUN npm install
RUN npm install -g ts-node

COPY . .

EXPOSE 5000

CMD node_modules/pm2/bin/pm2 --no-daemon start pm2.config.json

PM2で実際に動かしてみる

Dockerを再度ビルドして動かしみます。

無事動きました。

挙動の違いを確認する

nodemonの場合

従来のnodemonの場合は、以下のようにエラーが発生した場合「app crashed」になりコードの変更が検知されるまでは再起動されませんでした。

そのため、以降のリクエストはNo Responseとなってしまいます。

PM2の場合

今回導入したPM2の場合は、以下のようにエラーが発生した場合でもすぐにサーバーが再起動しました。

そのため、以降のリクエストも受け付けることができます。

参考：LINE謎の開発についてまとめ

参考：プログラミング初心者でも無料で簡単にLINE BOTが作れるチュートリアル｜渡なべ達明｜note

参考：【入門】Google Apps ScriptでLINE botを作成する

特にこちらのKindle本ではとてもわかりやすく解説されています。こちらの本では実際に作られている謎解きやマーケティング戦略まで紹介されているので、ご一読することをおすすめします。

LINE謎とは

LINEの公式アカウントを用いて、主にBot形式で謎を出題する謎解き形式をLINE謎と呼ばれています。

LINEのアカウントさえあれば、手軽に謎解きに挑戦することができます。LINEのMessaging APIが開放されてからLINE謎が出現し、少しずつ広まってきているようです。

LINE謎開発の事前準備

事前準備として以下が必要となります。今回は参考記事通りにGAS(Google App Script)を使用してコーディングを行っています。Googleアカウントは登録された前提とします。

• Googleアカウント登録
• LINE Developers登録
• LINE Bot Designer(必須ではない)

LINE Developersの登録

まず、以下のリンクからLINE開発者登録を行います。既にLINEアカウントを持っている場合は、そのアカウントで登録することができます。QRコードログインで簡単に認証することができます。

LINE Developers

LINE Bot Designerのダウンロード

LINE Bot Designerを使用することで、簡単かつ短時間でLINE Botのプロトタイプを作成することができます。GUIで感覚的にチャットボットを設計できます。

以下のリンクからLINE Bot Designerをダウンロードします。後ほど使用しますので、その後インストールまでやっておきましょう。

LINE Bot Designer

Messaging APIで新規チャンネルを作成

先ほど登録したLINE Developersにログインし、「新規チャンネル作成」を押します。新規チャンネル作成に必要な項目を入力します。

ここで作成するLINE謎のチャンネル名やアイコンなどを登録します。なおチャンネル名は7日間は変更できないため、注意が必要です。

LINE Messaging API：Messaging APIの特徴 Messaging APIは

GASからWebhook URLを取得する

まず、自身のGoogleアカウントからGoogleドライブを開き、Googleスプレッドシートを新規作成します。

スプレッドシートを開いたら、「ツール」→「スクリプトエディタ」を選択します。

選択すると、以下のようなスクリプトエディタが表示されます。左上にあるプロジェクト名を入力し、「公開」→「ウェブアプリケーションとして導入」を選択してください。

それぞれ、以下のように設定し「Deploy」を押下します。

表示された「Current web app URL」をコピーします。これがWebhook URLとなります。

LINE DevelopersのWebhook設定でGASと連携する

作成したチャンネルからMessaging API設定を選択します。下にあるWebhook設定のWebhook URLに先ほどコピーしたURLをペーストします。また、Webhookの利用をONにします。

次にさらに下にあるチャンネルアクセストークンの発行を行います。このチャンネルアクセストークンは後で使います。

GAS(Google App Script)を使って、ユーザとの応答形式LINE Botのスクリプトを実装する

GASの画面に戻り、ユーザとの応答形式のスクリプトを実装していきます。JavaScriptで書くことができます。

チャンネルアクセストークンの設定とリクエスト判定

まずはじめにチャンネルアクセストークンを設定します。先ほど発行したチャンネルアクセストークンを変数に代入しましょう。

次にユーザから送られてくるリクエスト判定を行います。event.typeによって友達追加かメッセージかを判定します。

// チャンネルアクセストークンを設定
var channel_access_token = "先ほど発行したチャンネルアクセストークン";

// ユーザからのリクエスト判定(友達追加またはメッセージ)
function doPost(e) {
  var events = JSON.parse(e.postData.contents).events;
  events.forEach(function(event) {
    if (event.type == "message") {
      sendMessage(event);
    }
    if (event.type == "follow") {
      sendFollowMessage(event);
    }
  });
}

友達追加時の挙動

ユーザから友達追加された際に返すメッセージを設定します。setFollowMessageで友達追加時のメッセージ用意し、ユーザに返します。

function sendFollowMessage(e) {
  var followMessage = setFollowMessage(e);
  var postData = {
    "replyToken": e.replyToken,
    "messages": followMessage
  };
  var options = {
    "method": "post",
    "headers": {
      "Content-Type": "application/json",
      "Authorization": "Bearer " + channel_access_token
    },
    "payload": JSON.stringify(postData)
  };
  UrlFetchApp.fetch("https://api.line.me/v2/bot/message/reply", options);
}

// 友達追加された際に返すメッセージ
function setFollowMessage(e) {
  var message = [{
    "type": "text",
    "text": "友達追加ありがとうございます！"
  }];
  return (message)
}

メッセージが送られてきた際の挙動

友達追加時と同様にsetMessageに送られてきたメッセージに対応する返信を用意します。

switch文でそれぞれのメッセージに対応する返信を書いていきます。これがユーザとの応答形式Botの中身になります。LINE謎の場合は答えやヒントなどに対応する返信を書いていくことになります。

defaultは想定していないメッセージが送られてきた場合の返信を書きます。

function sendMessage(e) {
  var message = setMessage(e);
  var postData = {
    "replyToken": e.replyToken,
    "messages": message
  };
  var options = {
    "method": "post",
    "headers": {
      "Content-Type": "application/json",
      "Authorization": "Bearer " + channel_access_token
    },
    "payload": JSON.stringify(postData)
  };
  UrlFetchApp.fetch("https://api.line.me/v2/bot/message/reply", options);
}

// メッセージが送られてきた際に返す返信の条件分岐
function setMessage(e) {
  switch (e.message.text) {
    case "答え":
      var message = [
        {
          "type": "text",
          "text": "正解です。"
        }
      ];
      return(message)
      break;

  case "ヒント":
    var message = [
      {
        "type": "text",
        "text": "ヒントは〇〇です。"
      }
    ];
    return(message)
    break;

  default:
    var message = [
      {
        "type": "text",
        "text": "ヒントが欲しい場合は「ヒント」と入力してください。"
      }
    ];
    return(message)
    break;
  }
}

以上で応答形式Botの完成です。完成後は、「公開」→「ウェブアプリケーションとして導入」を選択し、バージョンを「new」にして再度デプロイしましょう。すると反映されていることが確認できると思います。

返信メッセージをリッチにしたい

返信メッセージをもっとリッチにしたい場合は、先ほどインストールしたLINE Bot Designerを使ってみましょう。

インストールが完了後、プロジェクトを作成を選択します。

プロジェクトの設定を行います。

設定完了後、プロトタイプをGUIで作成することができます。プロトタイプ完成後、右下のJSONをコピーすることで、そのまま使用することができます。

ここで画像・動画、テンプレートメッセージなどを設計し、JSONコードをそのままGASにコピペで使うことができます。LINE謎を作成する場合は画像などを使うと思いますので、こちらを積極的に活用してみましょう。

実際にLINE謎を作ってみた

実際にLINE謎を作ってみました。ざっくりストーリーから考え、次にストーリーにあわせた謎を作り、開発という流れで行いました。こういう謎解きを作るのは初めてでしたが、丸一日かけて公開まで漕ぎ着けることができました。

初心者向けのLINE謎で10分くらいで解けるので、もし時間があればやっていただけると嬉しいです。

地球最後の日に残された謎：https://lin.ee/tV2tCPuy

せっかくやるなら何か成果物を作りたいと思い、Chrome拡張機能を作ることを目標に勉強を進めていきました。ということで冬休みの時間を活用して、Vue.jsで電卓を作ってみました。

作ったもの

シンプル電卓機 Simple Calculator

シンプル電卓機 Simple Calculator - Chrome ウェブストア

電卓として使うことができます。ちょっとした計算や確認がすぐに実行できて便利です。

chrome.google.com

難しく簡単すぎない電卓を作ってみることにしました。仕事でもたまに使うので個人的に有用なツールになると思いました。

ポップアップで電卓機能を使えるため、すぐに計算をしたい時にとても便利です。実際に作った後、活用しています。

Vue.jsの環境は以下の記事を参考に構築しました。

Vue.js を vue-cli を使ってシンプルにはじめてみる #JavaScript - Qiita

Vue.js を vue-cli でシンプルに過不足なくスタートする はじめに …

qiita.com

電卓のボタン部分の実装

<table align="center">
    <tr>
        <td><button @click="clear()">C</button></td>
        <td><button @click="clearAll()">CA</button></td>
        <td><button @click="chooseArithmetic('%');">%</button></td>
        <td><button @click="chooseArithmetic('×');">×</button></td>
    </tr>
    <tr>
        <td><button @click="chooseNumber('7');">7</button></td>
        <td><button @click="chooseNumber('8');">8</button></td>
        <td><button @click="chooseNumber('9');">9</button></td>
        <td><button @click="chooseArithmetic('÷');">÷</button></td>
    </tr>
    <tr>
        <td><button @click="chooseNumber('4');">4</button></td>
        <td><button @click="chooseNumber('5');">5</button></td>
        <td><button @click="chooseNumber('6');">6</button></td>
        <td><button @click="chooseArithmetic('-');">-</button></td>
    </tr>
    <tr>
        <td><button @click="chooseNumber('1');">1</button></td>
        <td><button @click="chooseNumber('2');">2</button></td>
        <td><button @click="chooseNumber('3');">3</button></td>
        <td><button @click="chooseArithmetic('+');">+</button></td>
    </tr>
    <tr>
        <td><button @click="chooseNumber('0');">0</button></td>
        <td><button @click="chooseNumber('.');">.</button></td>
        <td><button @click="calculationResult();">=</button></td>
    </tr>
</table>

電卓のボタン部分です。数字や記号押下時にそれぞれのメソッドが発動します。必要最低限の四則演算機能を実装しました。

電卓の実装

電卓の計算表示部分の実装

computedは紐づいた値が変更されると、その値に依存している全てのバインディングが更新されます。

今回の電卓の場合は、ボタンを押下する度に入力値や四則演算記号が変わるため、以下のような実装となります。

選択した数字と計算結果の数字は、計算中かどうか(inputNumberFlgフラグ)で判定しています。

computed: {
    showArithmetic() {
        return this.selectedArithmetic;
    },

    showNumber() {
        let showNumber;
        if (this.inputNumberFlg) {
            var selectNumber = String(this.selectedNumber);
            showNumber = selectNumber.replace(/^0{1,}([^.])/, "$1");
        } else {
            showNumber = this.chooseNumberArray.reduce((prevNumber, currenNumber, index, array) => {
                return this.calculateNumber(prevNumber, currenNumber, index - 1);
            });
        }

        return Number(showNumber).toLocaleString(undefined, {maximumFractionDigits: 20});
    }
}

計算処理の実装

計算部分はswitch文で判定し、実行しています。

calculateNumber(prevNumber, currenNumber, index) {
    switch (this.chooseArithmeticArray[index]) {
        case "+":
            return prevNumber + currenNumber;
            break;
        case "-":
            return prevNumber - currenNumber;
            break;
        case "÷":
            return prevNumber / currenNumber;
            break;
        case "×":
            return prevNumber * currenNumber;
            break;
        case "%":
            return prevNumber % currenNumber;
            break;
    }
}

C(Clear)とCA(ClearAll)の削除処理の実装

C(Clear)ボタン押下時は選択した数字列から1つ前の数字を削除します。CA(ClearAll)ボタン押下時は全ての数字・記号を初期化します。

// Clear押下時
clear() {
    if (this.selectedNumber === "0") return;
    this.selectedNumber = this.selectedNumber.slice(0, -1);
},
// ClearAll押下時
clearAll() {
    this.chooseNumberArray = [];
    this.chooseArithmeticArray = [];
    this.selectedNumber = "0";
    this.selectedArithmetic = "";
    this.inputNumberFlg = true;
}

電卓のデザイン

電卓のボタンはキーボードのような雰囲気にしました。クリックするとキーが押されたような動きになっています。

button {
    height: 40px;
    min-width: 60px;
    padding: 0 10px;
    margin: 5px 5px;
    background: #EFF0F2;
    border-radius: 4px;
    border-top: 1px solid #F5F5F5;
    box-shadow: 0 0 25px #E8E8E8 inset, 0 1px 0 #C3C3C3, 0 2px 0 #C9C9C9, 0 2px 3px #333333;
    color: #AAAAAA;
    text-shadow: 0 1px 0 #F5F5F5;
    font: bold 14px arial;
    text-align: center;
    line-height: 41px;
    display: inline-block;
}

button:active {
    box-shadow: inset 0 0 2px rgba(128, 128, 128, 0.1);
    transform: translateY(2px);
}

Vue.jsで実装が完了したらビルドする

実装が完了したら以下のコマンドで、プロジェクトをビルドします。

npm run build

ビルドが成功すると以下のように表示されます。

Hash: d37a099a70e29c8f2173
Version: webpack 3.12.0
Time: 16257ms
    Asset Size Chunks Chunk Names
    static/js/vendor.42fc6c515ccdfe89bd76.js 113 kB 0 [emitted] vendor
    static/js/app.293cb31b95d7a655e6e8.js 4.68 kB 1 [emitted] app
    static/js/manifest.2ae2e69a05c33dfc65f8.js 857 bytes 2 [emitted] manifest
    static/css/app.f9db14073482cd26a153303c43800d43.css 1.14 kB 1 [emitted] app
    static/css/app.f9db14073482cd26a153303c43800d43.css.map 2.45 kB [emitted]
    static/js/vendor.42fc6c515ccdfe89bd76.js.map 560 kB 0 [emitted] vendor
    static/js/app.293cb31b95d7a655e6e8.js.map 20.4 kB 1 [emitted] app
    static/js/manifest.2ae2e69a05c33dfc65f8.js.map 4.97 kB 2 [emitted] manifest
    index.html 527 bytes [emitted]

Build complete.

Tip: built files are meant to be served over an HTTP server.
Opening index.html over file:// won't work.

ビルド後、distディレクトリが作成されます。

あとはChrome拡張用にマニフェストファイルなどを追加し、zip化したら完成。今回の場合は、以下のようなディレクトリ構成になりました。

images
    -16.png
    -19.png
    -38.png
    -48.png
    -128.png
static
    -css
        -ビルドされたファイル
    -js
        -ビルドされたファイル
index.html
manifest.json

imagesディレクトリにはChrome拡張機能のアイコンの画像がサイズごとに分けて格納されています。

マニフェストファイルの説明など、Chrome拡張機能登録に必要なことは以下の記事で詳しく説明しています。

【Chrome拡張機能】シンプルなToDoリスト・メモ帳を開発してみた

個人的に開発して使っていたToDoリストをたくさんの方に使ってもらうにはどうした…

mintaku-blog.net

以上、Vue.jsでChrome拡張開発をした流れを紹介しました。

よろしければ開発したシンプル電卓機 Simple Calculatorを使ってみてくださいね。

シンプル電卓機 Simple Calculator - Chrome ウェブストア

電卓として使うことができます。ちょっとした計算や確認がすぐに実行できて便利です。

chrome.google.com

元々はサーバサイドをPHPで書いていたので、JSに書き直してChrome拡張機能で使えるようにしました。

Chrome拡張機能「Simple ToDo List」を開発してみた

「Simple ToDo List」の概要

やることをシンプルに管理できるToDoリスト。

簡易的なメモ帳としても使うことができます。入力するだけで保存できたり、優先順位を変更したり、ワンクリックで削除できます。

「Simple ToDo List」のChrome追加はこちら。

Simple ToDo List - Chrome ウェブストア

やることをシンプルに管理できるToDoリスト。簡易的なメモ帳としても使うことがで…

chrome.google.com

「Simple ToDo List」の使い方

＋(追加ボタン)を押下して、タスクを生成します。

タスクを入力します。タスクの内容は入力する段階で保存されます。

タスクの優先順位を変更する場合は、↑↓ボタンを押下します。

タスクを削除する場合は、ゴミ箱マークをクリックします。(削除時に確認ダイアログは出ないので注意)

Chrome拡張機能のDBってどうなってるの？

Chrome拡張機能開発をしようと思った時に疑問に思ったのがDBってどうなってるんだろう？ということです。ということでChrome拡張機能のDBを調べてみました。

sync

Chromeにより同期されるストレージエリアです

Chromeにログインしていれば、どのパソコンからでもアクセスすることができます。

local

ブラウザ内に閉じたストレージエリアです.

パソコン単位で保存しているため、例えログインアカウントが一緒でも異なるパソコンからではアクセスできません。

managed

ドメイン管理者によって設定され、読み取り専用のストレージエリアです。

以上の3つが、Chrome拡張機能のDB(ストレージエリア)となっています。詳しくはこちらの公式サイトに記載されています。

本拡張機能では制限の少ないlocalを使用しました。

localストレージ内を全て削除する場合は

chrome.storage.local.clear();

localストレージ内に登録する場合は

chrome.storage.local.set();

localストレージ内から取り出す場合は

chrome.storage.local.get();

以上でlocalストレージエリアを操作することができます。

本拡張機能が呼び出された際に、ストレージに格納されているデータが入ったDOMを生成します。

chrome.storage.local.get(function(items) {
    if (items !== undefined) {
        $.each(items, function (index, elm) {
...
        // DOM生成処理
...
        });
    }
});

タスクの登録処理は以下のように行なっています。

// タスク登録処理
$(".smoothswap_form").each(function(i, elm){
    var $content = { content : $(elm).find('*[name=content]').val() };
    chrome.storage.local.set({[i]: $content}, function() {
        console.log('content stored');
    });
});

Chrome拡張機能を登録するのに必須なマニフェストファイルの書き方

Chrome拡張機能を登録するのに必須なマニフェストファイルの書き方をまとめておきます。

マニフェストファイルには、拡張機能名や説明文、アイコン画像などの設定を記述します。

manifest_version

マニフェストファイルのバージョンを示しています。最新版は2なため、2を使用しています。

version

拡張機能のバージョンを示しています。1から4つまでの数値で区切ることができます。

また、拡張機能を更新する際には必ずバージョンが上がってなくてはなりません。

name

提供する拡張機能の名称です。45文字までですが、short_nameで略称を定義することもできます。

description

拡張機能を紹介する説明文です。132文字までです。

browser_action

・default_icon

アドレスバーの右に表示するアイコンを指定します。サイズは19pxが推奨されます。Retina用に38ピクセルのアイコンも用意しておきます。

・default_title

アドレスバーの右に表示するアイコンにカーソルをかざした時に表示されるツールチップです。省略するとname が使われます。

・default_popup

アドレスバーの右に表示するアイコンをクリックした時にに表示されるポップアップのHTMLファイルを指定します。

icons

拡張機能のアイコンです。Chrome Web Storeやファビコンなどに使われます。また、画像の形式はpngが推奨されています。

permissions

特定のAPIを使うためにあらかじめ設定する必要があります。

どんなAPIがあるのかは以下から確認できます。

以上を踏まえた上で、本拡張機能のマニフェストファイルは以下のようになりました。

{
    "manifest_version": 2,
    "version": "1.0.0",
    "name": "Simple ToDo List",
    "description": "やることをシンプルに管理できるToDoリスト。簡易的なメモ帳としても使うことができます。入力するだけで保存できたり、タスクの優先順位を変更したり、ワンクリックで削除できます。",
    "browser_action": {
        "default_icon": {
            "19": "images/icon/19.png",
            "38": "images/icon/38.png"
        },
        "default_title": "Simple ToDo List",
        "default_popup": "index.html"
    },
    "icons":{
        "16": "images/icon/16.png",
        "48": "images/icon/48.png",
        "128": "images/icon/128.png"
    },
    "permissions": [
        "storage"
    ]
}

以上で、Chrome拡張機能の登録準備は完了です。

あとは、Chrome ウェブストアからデベロッパーダッシュボードにアクセスし、登録手続きをするだけです。最初に登録する場合は5$払ってデベロッパー登録する必要があります。

具体的な手順は以下の記事が参考になりました。

超最低限の Chrome エクステンションを開発しウェブストアで公開するまでの手順 #JavaScript - Qiita

つい最近、初めて作った Google Chrome エクステンション「Feedl…

qiita.com

思った以上に簡単にできるので、また何か思いついたら作って登録してみようと思います。

「Simple ToDo List」のChrome拡張機能追加はこちら。よかったら使ってみてください。

Simple ToDo List - Chrome ウェブストア

やることをシンプルに管理できるToDoリスト。簡易的なメモ帳としても使うことがで…

chrome.google.com