「Vue」の記事 - Crieit

【個人開発】作るのも、答えるのも簡単なWebアンケート「ankeyto」を作りました！

2022-08-31T09:35:31+09:00

2つ目の個人開発サービス公開

アプリケーションのモダン化を勉強しようと個人開発を始めて、以下の記事のように公開していました。もう振り返ると1年経つんですね…　こういった個人開発活動を続けることにより、少しずつ知識も身についてきて、開発スピードも上がってきていました。

Github Issuesをキレイに外部公開するサービス「2go」作ってみた
- https://qiita.com/nice2have/items/28449ae4ef45fef2c671
海外進出を目指して、ProductHuntへ個人開発サービスを投稿するまでにやったこと&やった結果を全面的にシェアする
- https://qiita.com/nice2have/items/f59a27c266efb9b8821c

実際には公開していないのですが、atodyという「Twitterでいいねしたツイートに含まれるリンク・画像だけを自動でまとめてブックマーク化できるサービス」を開発したのですが、いまいちサービスの完成度に納得がいっていなく、開発したサービスとしては3つとなったのですが、公開したサービスは２つとなります。

簡単Webアンケート

今回は会社の一定の範囲で簡単にアンケートを取りたいときに、Google FormｓやMicrosoft Formsを作るのは手間だな、もっとライトな感じで反応を知りたいなと思ったのがきっかけです。

また、アンケートの回答を得るまでのハードルが結構高いと思ったんです。アンケートURLにアクセスして、回答を入力して、、、となると、答えてくれる人が少なくなってしまって、アンケートの価値が薄まってしまうような気がしたんですよね。

機能を最小限に絞ったアンケートをリリースしよう

これらの課題を解決しようと、ankeytoというアンケート機能を最小限に絞ったサービスを開発しようということに至りました。ankeytoはアンケートのモジりで「アンキート」と名付けることにしました。ちなみに、先程のatodyも「あとで」のモジりで「アトディ」と名付けています。

https://ankeyto.com

開発する前の大まかなコンセプトは、A3ノートにまとめる用にしているのですが、汚い字で申し訳ないですが、公開してみます。

サービスのコンセプトは以下の２つと設定しました。
+ 最大３つまでの選択肢
+ 選択肢ごとのURLにアクセスすればもう回答済みになる

そのため、選択肢を表示して回答ができるページをSNSでシェアするのではなく、アクセスしたら回答できるURLをSNSでシェアするだけで良くなるのです。例えば、「これが良いと思ったら、このURLにアクセスして！」と言えば良くなり、アンケート回答のステップとハードルを減らすことができるのです。つまり、個人個人で対象への「いいね」を調査・獲得できるイメージです。

画面イメージ

こちらのようにアンケート回答がリアルタイムにグラフやUIに反映されるので、回答が多いと変化を楽しめるかもしれません。例えば、プレゼン最中の意見を軽く聞きたいときや、勉強会のフィードバックを簡単に得たいときなどに利用できるかもしれません。

アンケートを作るときの画面も極力シンプルにしています。こちらもログインが必要だと手間が増えてしまったり、入力項目数が多いと途中で離脱してしまう可能性が高くなってしまうので、最小限にすることを意識しています。

利用技術

個人開発者としてはまだまだペーペーなので、利用技術も運用負荷が最小限になることを意識しています。
- Firebase(Firestore/Functions/Hosting)
- Vue.js
- Tailwindcss
- Slack

サービス自体がとてもシンプルなので、HostingでWebページを表示し、質問作成や回答をFunctionsで処理し、結果をFirestoreでリアルタイムに反映しているだけです。一応、モチベーション維持のために、質問が作成されたり、回答されたりしたら、FuncitonsからSlackに通知されるようにしています。

将来に向けて

最後に、将来は以下のロードマップを考えています。
- URLにアクセスするよりもさらにハードルを下げるために、URLをQRコード化できるように。
- Cookie等を利用した重複回答者の防止機能
- 質問IDをランダムでなく、わかりやすいIDを提供できる機能
- API機能（UIだけでなく、いいねAPIを提供）
- 英語対応

最後に。

まさにこのankeytoを利用して、このWebサービスってどうですか？とアンケートを取って終われればと思います。以下が質問ページから、SNS共有用にコピーできる文章になります。「いい！」か「まあまあ」のURLにアクセスすれば回答が完了しますので、ぜひよろしくお願いします！

Q. このWebサービスってどうですか？
https://ankeyto.com/q/BbDJA3P11

いい！ : https://ankeyto.com/BbDJA3P11/1
まあまあ : https://ankeyto.com/BbDJA3P11/2

また、個人開発の進捗などを垂れ流すTwitterもやっていますので、こちらもよろしければフォローお願いします。
https://twitter.com/jnakajima1982

サブスクの解約忘れ・無駄遣いを防止するサービス「Subreco」を開発して得た3つの学び

2022-06-26T14:43:49+09:00

筆者について

「多くのユーザーが実際に使って、価値があるものはなんだろう？」と考えながら、個人開発を趣味ではなく「収益を出す」ために行なっています。

技術だけでなく、デザインやグロースハックも好きで、色々な視点からWebサービスを作り上げていくのが好きです。

今回ご紹介する「Subreco」は個人開発を始めて3つ目のサービスとなります。

Subrecoの公式サイトはこちら

なぜ、サブスク管理サービス「Subreco」を作ったのか？

自分自身、何度もサブスクの「解約忘れ」で失敗した経験があったからです。

あなたも、サブスクなどで使っていないサービスを解約し忘れて"無駄な支払いをしてしまった経験"ありませんか？

家計簿アプリ、クレジットカード会社が提供しているアプリは時々見ていたものの、「あっこのサービス使ってないのに解約し忘れたぁ！(絶望…)」ということが何回かあったんですね。

1回だけならいいのですが。何回も経験したので「さすがにどうにかしたいなぁ」と思って、次はメモアプリとカレンダーアプリを併用して使っていました。

これでサブスクと契約更新日を両方管理できる！対策バッチリ！

、、、と思いきや、だんだんメモとカレンダーアプリで二重管理するのが面倒くさくなり、結果的に続かなかったんです。。

メモアプリやカレンダーアプリだと「毎回今月は〇〇を使っていたっけ…？」とわざわざ自分が使っているサービスを"意識"して見直さなければなりません。

でも、そんなの毎回意識できないし、面倒ですよね？

この経験から、使っているサブスクを「定期的に見直す仕組みを自動化」しようと生まれたのがSubrecoです。

Subrecoの特徴

Subrecoの使い方はシンプルに3STEPで完結します。

①今使っている全てのサブスクを一括管理して把握する
②各サブスクの契約更新日があるたびに自動通知する
③通知があるたびに「利用継続」or 「利用停止」を判断する

契約更新日はメールで自動通知するため、わざわざメモを見直したり、毎回カレンダーで契約更新日を設定し直さなくて済むのがポイント。

使っているサブスクを登録しておくだけで、自動でSubrecoが契約更新日をお知らせします。

Subrecoの公式サイトはこちら

「Subreco」を作って得た学び

①慣れないことはしない
②コア機能を徹底的に絞る
③自分は使うのかを考える

ここからは実際にSubrecoを開発して、得た学びを3つ紹介します。

①慣れないことはしない

実は、当初SubrecoはNuxt.jsで作っていました。(ちなみにNuxt.jsを使うのが今回が始めて)

最初は順調だったものの、徐々にハマるポイントが多く、開発スピードが落ちてきたので、思い切ってLaravel×Vue.jsでリプレイスしました。

結果、開発スピードは3倍以上にUP。

ここから分かったのは、収益目的で個人開発をする場合、絶対に自分が慣れているフレームワークで開発すべきだということ。

ただでさえ開発以外にもすべきこと(デザイン、マーケetc.)が多いのに、開発に負荷がかかる進め方は合理的でないと痛感しました。

②コア機能を徹底的に絞る

テレビのリモコンを想像してみましょう。

・電源の入/切ができる
・チャンネルで主要な局が切り替えられる

一番使う機能が多いのは上記だと思います。

しかし、実際にテレビのリモコンを見ると他にもボタンがありますよね。
で、実際にほとんどのボタンを使っていないという方も多いのではないでしょうか？

そう。実際にユーザーが求めている機能はシンプルであることが多いです。

これはWebサービスも同じ。

Subrecoの場合、

・サブスクの管理が一覧で見れること
・カレンダー形式で契約更新日を確認できること
・契約更新日を自動でメール通知してくれること

これさえあれば、Subrecoが提供したい価値の必要条件は満たせていると判断して実装していました。

実装前に大事なのは、Webサービスの機能として「必要条件」と「十分条件」を分けて考えること。

これは過去の自分に何回も言い聞かせたいです。

③自分は使うのかを考える

個人開発でアイディアを出す際に、

①自分起点・・・自分の課題を解決するアイディア
②相手起点・・・自分以外の人が抱えている課題を解決するアイディア

の2パターンがあります。

今回思ったのが、個人開発をするという前提に立って言えば、圧倒的に自分起点で開発するのが良いと思いました。

なぜなら、スタート地点で需要が少なくとも「1つ」は存在しているから。
需要が0の場合はそこからスケールさせようがないですが、1であればスケールさせられる可能性は残っています。

また、1番のヘビーユーザーは自分になるため、あった方が良い機能や操作する中で潜在的なバグに気付くことができます。
最悪、誰も使わなくても自分を助けてくれるツールとして機能するので"一石三鳥"ですね。

まとめ

収益目的で個人開発をすると考えることは膨大にあります。

もしかしたら、あなたも「個人開発で収益を出したい！」と、もがいて、あがいている途中かもしれません。

僕もあなたと一緒です...！

ただ、辛いことや苦しいことがつきものの個人開発ですが、その過程で得られる

「うひょ〜！」という小さな成功体験(考えていた機能が完成した時etc.)
「よし進んでるな」という実感(Todoリストにチェックを入れる瞬間)

これらは圧倒的な揺るぎない自信、資産として必ず残っていきます。

だからこそ、個人開発を続けている方は諦めないで、一緒に頑張りましょう！

僕は引き続きSubrecoの改善を続けていきます！ではでは！

Subrecoを実際に利用してみて、ご要望・感想などありましたら、メッセージ頂けると嬉しいです！^^

【個人開発】踏破した都道府県を日本地図でシェアできるWebサービス「日本踏破図🗾」を作りました

2021-12-27T23:20:34+09:00

はじめに

「日本踏破図🗾」というWebサービスをNuxt × Vuetifyで個人開発しました！

日本踏破図🗾

どんなWebサービスか

踏破した都道府県を日本地図でチェックすることができ、自分が今までに日本をどれだけ踏破したかをみんなにシェアできます👍
以下のように日本地図上で都道府県をチェックできます。これをシェアボタンでシェアすると・・・

以下のようなOGP画像でシェア可能です！地図のカラーも好きな色に変更することができます。

使用したフレームワーク・インフラなど

NuxtJS（Nuxt Bridge）
Vuetify
vuex（vuex-module-decorators）
PWA
Vercel（Serverless Functions）

主なものになります。多機能なWebサービスではないのでそんなに色々使ってはいません。
よく使うNuxtとVuetifyでフロントを構築して、NuxtのNitroエンジンを使ってVercelのServerless Functionsへデプロイしています。

当初はSSRにするつもりはなかったのですが、動的OGPを実装するために色々試行錯誤した結果SSRにしました。ただ、Nuxt3／Nuxt Bridgeから使えるようになったNitroエンジンのおかげで高速&ゼロコンフィグでVercelを利用できます。

苦労したところ

動的OGPをどう実装するか

正確に言うと「いかに簡単かつ無料で実装するか」に苦労しました。
検索するとfirebaseを使ってmetaだけSSRしたものを返してリダイレクトさせる等々、実現方法自体は色々でてきます。

ただ、正直なところこの規模・機能のWebサービスにそこまでしたくなかったんですね（できるだけシンプルな作りにするということも最初に決めていました）

最終的に実装した方法は以下です。

OGP画像を生成して画像を返すServerless Functionsを用意する
Functionsへ画像生成に必要な情報(チェック済みの都道府県、地図カラー)を渡す

必要な情報をURLパラメータに持ち、それを利用してmetaタグのog:imageのエンドポイントを作っています。
そのためサービス自体はSSRする必要がありますがVercelを使えば十分な無料枠でServerless FunctionsでSSRできます。

個人的には下手にhackyな方法をとるよりも、SSRが必要な場面ではおとなしくSSRしておいた方が良い気がします🤔
（結局のところTwitter・Facebookのクローラーのためだけにあれこれやりたくない）

ちなみにNetlifyにPrerenderingという機能があるのですが、これを有効にすることで事前レンダリングされたHTMLを返すことができます。
SPA構成にしてPrerenderingを試してみたのですが、どうもPrerenderingの対象はUserAgentを見ているだけらしくTwitterクローラーであればNetlify Functionsのエンドポイントも問答無用でPrerenderingされるみたいでした。
なのでOGP画像を返すはずのFunctionsがTwitterクローラーの時はPrerenderingされてHTMLを返すようになってしまい、OGP画像が表示されず使えませんでした。。

まぁ、NetlifyのPrerenderingはキャッシュ時間(24〜48時間)もコントロールできないし、なによりBETAなのでまだ実用的ではないですね。。

サイトデザイン

デザインというのはセンスだと思っています。つまるところ、それを磨くためには多大な時間・努力が必要ということです😉
私はデザイナーではないのでそこについて時間をかけて勉強するのは得策ではありません。
悩み・試行した結果、全体的にカードベースのデザインになりました。

また、根本のデザインはいわゆるUIフレームワークに頼るわけですが今回はよく使うVuetifyを利用しました。Vuetifyのコンポーネントを使うことで何も考えずそこそこきれいなサイトができあがります。

https://vuetifyjs.com/ja/

ただ、今回は個人的にやってみたいと思っていたGlassmorphism（グラスモーフィズム）チックなデザインを実装しました。
これが間違いで、Vuetifyはマテリアルデザインを実装するフレームワークなんですね。それに対してマテリアルデザインからかけ離れるようなものを実装すると色々と歪みが生じます🙃

importantを使ってVuetifyのcssを上書きして実装しましたが、こういうことをする場合はTailwind CSSを利用するべきでした。。

https://tailwindcss.com/

運営コストについて

現状、ドメイン代オンリーです。
上の方でも少し書いていますが個人開発においては無料で運営できることにこだわっています。

まぁ、お金はかからないに越したことはないし、お金がかかってくるとちゃんとメンテしなくちゃとか、マネタイズ考えないと！とか思ってしまうわけですが無料であればひとまず放置で問題ないですからね。

ちなみに、このWebサービスでは最初からマネタイズは一切考えていません。機能的にサービス自体がマネタイズにつながるものでもないですがアドセンス等の広告等も一切はらないと決めて開発をスタートしました。

サイトパフォーマンスについて

使っている技術からもわかるかと思いますが、パフォーマンスは問題なく良いです。
特にSSRするとやっぱり初期描画のパフォーマンスがすごいです（コールドスタート時以外）

いくら無料のインフラにこだわっているかといってパフォーマンスを犠牲にしたらお話にならないですからね😉

機能の説明

日本踏破図🗾でできることを改めて説明させていただきます。

日本地図で踏破した都道府県をチェック

日本地図上の都道府県を選択することができます。選択状況した数によって日本をどれくらい踏破したかがわかります。
また、シェアボタンから踏破した都道府県をシェアすることができます❗

日本地図のメニュー

地図メニューから、それぞれの機能を利用できます。

地図をリセットする（都道府県の選択状態・色をリセットする）
地図の色を変える（日本地図の色を変更できます）
日本を踏破する（すべての都道府県を選択状態にします）
コピー（日本地図をクリップボードへコピーします）
ダウンロード（日本地図をpng画像としてダウンロードします）

チェックボックス

日本地図上から都道府県を選択する以外に、チェックボックスでも選択することができます。チェックボックスで選択すれば連動して日本地図上の都道府県も選択状態になります。

ソースコード

日本踏破図🗾のソースコードはMITライセンスで公開しています👉

https://github.com/k-urtica/traverse-japan

さいごに

登録ログイン不要で使えるのでぜひ使ってみてください。
よろしくおねがいします！

🌐 サイト：https://traverse-japan.dev/
👀 開発：K
🚩 ソース：https://github.com/k-urtica/traverse-japan

おまけ

Web ToolBoxというブラウザで無料で使えるツール集を公開しています。
こちらもよろしくおねがいします。

https://web-toolbox.dev/

【個人開発】（Nuxt.js + Rails）OSSやプロジェクトの、ソースコードを管理するGitHubのように、web上で結合テストをチームで同時に管理・実行・記録出来るプラットフォームを開発しました！

2021-10-25T15:29:45+09:00

はじめに

今回、個人で開発したWebサービス「Itamaster」の本番稼働版をリリースすることが出来ました！
こちらのサービスを開発しようと思った経緯は、ある日会社で、統合テストの管理・実行を行っていたときに、「何故ソースコードの管理プラットフォーム（GitHub等）はあるのに、結合テストの管理プラットフォームは無いんだろう」と思った事がきっかけです。
開発期間は八ヶ月ほど、作業工数は大体700時間です。

弊社、私の所属しているチームは結合テストはExcelによって管理しており、実行記録もExcelを利用しています。
Excelでの管理・実行には、以下のような不便な点がありました。

Excelでの作業は、PCにかかる負荷が大きかったこと。
会社のPCは自宅で扱うようなハイスペックなものではないため、Excelで作業を行っていると、セルをコピーしたりした時にPCがフリーズしたり、突然Excelが落ちて、保存していないデータが復旧しなかったりと、作業中に感じるストレスがとても大きかったです。
Excelだと、複数人で一つのファイルに対する作業が出来ないこと。
共有設定にして複数人で同時に作業すると、Excelが一層重くなったりして、とても実用出来るものではありませんでした。
Excelだと、一つのファイルは同時に一人でしか作業が出来ず、待ち時間の発生するメンバーがいました。
ローカルで作業しているメンバーの作業状況が把握出来ないこと。
私は管理者経験はありませんが、毎日の定時報告会や、Slackでのメッセージを見る限り、作業状況の把握が少しアナログに感じました。
Redmine等の進捗管理ツールも利用していますが、結局は自己申告であり、「どのくらいの作業が終わっていて、残っているのか」を管理者が一目で把握することが出来れば、課題を解決できると考えました。
サマリーレポートや、結果一覧表の作成が面倒
Excelから情報を整理して、Excelに表を作って、割合を求めて、グラフ化して......
テストが追加されたり、状況が変わると、また、情報を整理して、Excelに表を作って、割合を求めて、グラフ化して......
「あ"あ"あ"あ"あ"あ"あ"あ"あ"あ"あ"あ"あ"あ"あ"あ"あ"！！！！！！！」
ってなりました。

開発告知記事を書くのは初めてで、至らない点が多々あるかと思いますが
サービスの紹介、開発時の苦労や反省、所感を統括して書きたいと思います。
最後まで読んでいただければ幸いです。

【Twitterリンク】
https://twitter.com/@itamaster_

【Itamaster】
https://itamaster.work
PC推奨です。

【Itamaster　操作ガイド】（Itamasterのヘッダーと、フッターにも操作ガイドリンクを設置しています。）
https://qiita.com/Itamaster/items/3c271181e0c9c06d1d08

使用技術

npm 7.6.3
nuxtjs 2.15.3 (SPA モード)
- サクサクと、Excelのようなもっさり感やストレスの無いUXにしたかったため、SPAによって構築しました。
@nuxtjs/storybook 4.0.2
- コンポーネントのレイアウト・動作を開発中にリアルタイムで確認出来る、コンポーネントカタログ作成ツール。
  フロントエンドの単体テストの役割も果たします。
vuetify (@nuxtjs/vuetify 1.12.1)
- MaterialDesignベースのデザインライブラリです。
  少し挙動が不安定な点が目立ちました。
ruby 2.6.8
Ruby on Rails 6.1.4 (APIモード)
Device
- ログイン周り。フロントエンドにはトークンを渡します。フロントエンドではトークンをsession storageに一時保存し、axiosのインターセプターに噛ませることで、ログイン機能付きの認証認可を実現しました。
EC2(t2.small)
S3
ALB
ACM
RDS (mysql)
Route53
nginx
Stripe
- クレジットカード決済機能をAPI利用できます。
  顧客情報や、クレジットカード情報を自サーバーで持たなくてよいため、セキュアなシステムの構築が可能です。
  また、同様に、決済機能のAPI利用はリスク管理の面からも有効です。

アプリ概要

結合テストの自動化を行わないチームや、手動でのテストを行いたい状況が対象のWebサービスです。
ユーザーをメールアドレスで招待し、チームを結成。
プロジェクトを立ち上げて、テストスイート毎にテストケースを管理・実行が出来ます。

⇓チームの情報を表示するダイアログ

⇓プロジェクト、プロジェクト内のテストスイートの管理を行う画面

⇓テストスイートの情報を表示するダイアログ

⇓テストケースの情報を表示するダイアログ

⇓テストスイート内のテストケースを実行する画面

また、テスト結果一覧表や、テストサマリーレポートも出力可能です。

こだわった箇所

全体的に、明るい色を起用すること

テストという地味な作業は、設計書作成の次に気が滅入り易くなります。
暗い気持ちになってしまわぬよう、明るい色を起用しつつ、
緑や薄めの青色をメインに使う事で、ユーザーのモチベーションを維持します。

アイコンを多用し、直感的な操作を可能にすること

画面にはアイコンを多用して、文字を読まなくても色とアイコンから、ボタンの機能を推測することが可能です。
直感的に操作することが可能で、作業の効率を向上します。

進捗バーをプロジェクトと、テストスイート毎に表示可能にし、一目で状況を確認可能に

色分けされた進捗バーは、ホバーすることでそれぞれのステータスの件数を確認可能です。

チームの管理者が、「現在プロジェクト全体で、どれだけのテストが完了しているのか」を一目で確認することが可能です。

自分独自のアイコンを設定可能にすること

Itamasterは、GitHubのように、OSSのテストをオープンに行う事の出来るプラットフォームを目指します。
アイコンを設定可能にし、画面に多用することで、今後実装するSNS的な機能が違和感なく利用できます。
（Publicなプロジェクトを表示・検索し、運営しているチームとダイレクトにメッセージをやり取りし、テストを世界中のメンバーと共同して行うような）

サービス改善告知

2021/10/17 サービスに、操作ガイドページ・Demoページを追加実装しました！

操作ガイドページでは、サービス内の全てのボタンや、項目の意味、操作方法やユースケースを記述しております。
Demoページでは、実際の画面にモックデーターを流し込んだものを使い、操作感や使用イメージを持っていただくことを目的としています。
どちらも無料でご利用いただける機能ですので、よろしければお楽しみください！

2021/10/20 トップページのレイアウトを変更しました！

旧：

新：

変更にあたって、具体的に意識した点

設計思想をメインコンセプトとして表示
注目線を意識し、印象付けたい文言を左側に配置する

アニメーションが少しだけ配置されているので、実際に見ていただければ、と存じます！

サービスのこれから

トップページのレイアウト改善

とりあえず、第一課題です。
現状注目線があっちこっちに行ってしまっており、とてもわかりにくいページになっています。
デザインを勉強しつつ、わかりやすく、「使ってみたい」と思っていただけるようなトップページにしたいと思っております。

チーム公開機能の実装

public設定のチームをいくつか表示し、興味の出たOSSのテスト等に世界中から参画希望を出せるようにします。
本来の設計思想である、「何故OSSをGitで管理するように、テストを世界中のエンジニアと管理実行するプラットフォームは無いのか」という疑問を解決する機能なので、じっくり作り込みたいと思っています。
現状は、
・Topics
・Search
・Explore
の三画面を開発して、世界中のチームを見られるようにしたいと思っています。

海外進出を目指して、ProductHuntへ個人開発サービスを投稿するまでにやったこと&やった結果を全面的にシェアする

2021-09-30T07:19:35+09:00

初めて作った個人開発サービスで海外進出しようという無謀な挑戦

以下の記事の通り、9月頭に2goというサービスを作って公開しました。サービスの詳細は以下のURLから見てもらえればと思いますが、いくつかの理由から世界での公開を元から視野に入れていました。
https://crieit.net/posts/Github-Issues-2go

英語圏のユーザーも含めたほうがサービスの規模感が大きくなる
サービス内容が日本だけに留まらない共通の需要があると思った
どこかで挑戦しなくてはならないのなら、ここで挑戦しようと思った（無謀）

こういった背景があり、全てのインターフェースは英語で作ってきました。そして、MVPが9月に完成したので、日本でのアナウンスをしました。海外を意識していたので、日本での進め方はあくまでフィードバックを貰えればくらいに思っていましたが、今思えばここからが既に問題なんだなと考えられます。

私の経験をまとめましたので、自分への戒めと今後トライされる方の参考になれば。

日本でやったことと、その結果

日本でリリースしたときにやったことを書いていきます。

Twitterでの開発進捗の共有による露出

私のTwitterアカウントはコチラですが、元々は現在働いている会社のAwarenessを上げるために、自分自身の考えやnoteなどの記事を共有するために使っていたものでした。そのため、インフラやクラウドなどのトピックが中心のため、100強のフォロワーもそういった傾向がありました。ただし、インフラやクラウドもこれからはアプリケーションレイヤーがわかっていないと語れないなと思い、個人開発をすることで開発者の気持ちを理解していこうとしている途中でした。
https://twitter.com/jnakajima1982

Twitterでの取り組み内容

そのため、絶対数としてこういったアプリレイヤーに興味がある人が少ないということもあり、開発進捗を共有したとしても反応がほぼもらえないという状況が続きました。そこで、私は以下を取り組みました。
1. 「#個人開発」や「#今日の積み上げ」といったハッシュタグを使った投稿を増やした
2. 上記ハッシュタグにまつわる個人開発者を中心にフォローを増やした
3. 自分自身で話題を作るより、フォローしている人のTweetに引用RTするようにした
　

結果と考察

「#個人開発」に関しては普段よりはインプレッションが増えましたが、反応が劇的に増えた感じはしませんでした。これには2つの原因があると考えています。「どんなサービスかわかりにくかった（プロフィールもわかりにくかった）」のと、「作っているサービスが英語」だったため、ハードルが高かったのだと思っています。それでも少しずつフォロワーは増え、最終的には今回の取り組みで50フォロワーくらい増えたので、コツコツやっていくことが重要で、指数関数的に上がることになるのではないかなと思っていますので、継続が必要です。

ただし、私のアカウントが公共分野（デジタル庁など）のインフラ・クラウドと、個人開発が混ざっているので、アカウントを分けるべきか非常に迷っています。フォロワー0から作り直すリスクと、複数アカウントを運用することの大変さに応えられるのかに解がないため、一旦は1つのアカウントとしています。

また、「#今日の積み上げ」は、インプレッションが非常に増え、リアクションも同時に増えるのですが、フォロワーが増えません。これは個人開発に留まらないユーザーが大量に流入しているせいだと思いますが、どちらかと言うとお互いに励まし合おうというハッシュタグの位置づけになっていると思われるので、このような結果になっているのだと思います。自分自身の精神安定の観点で、たまに投稿して安心するくらいが丁度いいと思っています。

3については、私自身が有益なことをTweetすることができればいいのですが、いざTwitterの画面を開いてなにか書こうと思ったときに、思いつくことには限界があったんですよね。特に、何がウケるのかみたいなことを考えだしたのもいけなかったんだと思います。なので、フォローしている人は私が興味があってフォローしているわけで、その人が話題にしていることに対して引用RTすることにして、自分の意見を言っていこうと考えました。

これは意外と効果があります。Twitter上での表示のされ方も、元Tweetが強ければ同時に表示されることもあります。また、何より引用RTした相手からのコメントを頂ける確率も高く、それがインプレッションの増加に繋がる結果が多かったと思います。

反省と今後

いずれにしても、Twitterでの認知度向上は一朝一夕ではいきませんので継続した活動が必要ということが身に沁みました。後ほど触れますが、ProductHuntなどは、このようなフォロワーの数が少ない開発者を掘り出して世に出すためのサービスという大前提があるのですが、現実問題として規模の戦いは存在すると実感しましたので、Twitter等のSNSでコミュニティを形成する必要を感じさせられました。

特に英語圏での情報発信を考えると、英語用Twitterアカウントを作ったのですが、日本語用Twitterアカウントだけでも苦労しているのに、英語で書いて運用していくというのはとても大変なことです。そのため、英語用Twitterアカウントはほとんど活動ができていません。

運営者ギルドへの参加

Twitterを徘徊していると、運営者ギルドという存在を知りました。まさに私が陥っているような状況が冒頭に書かれていました。
https://qiita.com/organizations/admin-guild

作ったWebサービス、全然使われない……
どうやってマネタイズしよう
どこまで作り込んでからリリースすればいいんだろう
デザイン難しすぎ
利用規約はどうすれば？
この先どうやってサービスを伸ばしていけばいいのか……
Slackでの運営形態になっており、中の活動が全く見えなかったので、入れていただくかを非常に悩んだのですが、何事もチャレンジだと思ったので、連絡させて頂き、無事入らせて頂きました。

結果と考察

結果から言うと、個人開発をしている人は入ったほうが良いです。下手な質問をしたら、ぶっ飛ばされるのではないかとビクビクしていましたが、そんな事は全くありませんでした。唯一あるとするならば、自分自身で発信したことには多くの意見がもらえてモチベーションに繋がりますが、自分自身で発信しない方はここで何をしていいかわからなくなってしまうと思います。

私は、実運用ではどのようにしているかなどは、こういった限定されたユーザーだけが参加するコミュニティだからこそ聞ける生の声が本当に貴重だと思いました。また、今回のProductHuntのチャレンジなどを好意的に捉えてくださるだけでなく、普段の自分自身の開発の進捗にコメントいただける方もいらっしゃり、個人開発の課題となりがちなモチベーション維持にもなりました。

だからこそ、私自身がコミュニティの一部として、他の方が同様な状況にいる場合には、積極的に自分の経験を還元する必要があると思い、いろいろな方のチャンネルに入るようにしました。

技術コミュニティメディアへのサービス開発記事の投稿

Twitterや運営者ギルド以外では、とにかくサービスを知ってもらえるチャネルを増やそうとしていました。そこで以下の技術コミュニティメディアに記事を投稿してみました。
- Zenn：https://zenn.dev/nice2have/articles/aa15eccd13a23c
- Qiita：https://qiita.com/nice2have/items/28449ae4ef45fef2c671
- Crieit： https://crieit.net/posts/Github-Issues-2go
- ツクログ：https://creators.eightbit.jp/service/item4309.html

以下にそれぞれのメディアの現時点での結果をまとめます（Google Analytics調べ）。Zennは正直きちんと取れているのかわかりません。ツクログは投稿して間もないのと、どこからデータが取れるのかわからずなので、外しています。

メディア	記事閲覧数	サービス流入数	LGTM
Zenn	34	10	4
Qiita	1468	261	7
Crieit	1198	66	1

結果と考察

いずれにせよ、どのメディアにも投稿することは確実に認知度とサービス流入に繋がっていると言えますので、サービスローンチのタイミングだけでなく、書く内容がある限り、投稿し続けると良いと思います、、、が、やっぱり書くのって大変なんですよね。さらに、メディアによってトレンドがあるから、書く内容を変えたほうがよいというのを見たのですが、全く同じ記事を上げているのが現状です。まずは続けることが大事なので、しばらくはそれを継続しようと思っています。

ダイレクトアプローチ

追加でした作業についても記録しておきます。2goというサービスの特性上、Github Issueを利用している/利用見込みのユーザーがターゲットになります。そのため、メディア上にGithub Issueについて記事を書いている人へ直接連絡して実際に利用していただくことで、フィードバックを受けて改善に生かしていこうと思いました。

Google検索からたどり着いた5件にコメントをしてコミュニケーションを図ってみたのですが、どこからも未だ返事がない状況です。Twitter上でキーワード検索してアプローチしたこともありましたが、ちょっと利用用途が異なったようで、試してもらうまでに至りませんでした。

以上のアプローチで、面白いですとか、良いサービスですねなど言われるものの、今思えば、やはり利用されるだけの魅力やユースケースが見出してもらえなかったのだと思いました。

まとめ：日本での取り組み

海外進出を前提に置いていたため、以下の2点の理由で、Githubアカウントでログインしてまで試してくれた人は、2桁にすら行きませんでした。
- 日本での取り組みを正直本気で取り組んだとは言えない
- 英語のインターフェースのため、伝わりづらかった

そこで、Githubアカウントでログインすることのハードルが高いと思い、ログイン不要で誰にでも触れるサンプルを追加開発して提供してみたのですが、こちらも時たま試す人が現れるくらいで、試すことすらしてもらえないのかと打ちひしがれましたorz

ほとんどのユーザーアクティビティ（サービス登録/ログイン/公開設定）が発生すると、Slackに通知が飛んでくるようにしていたのですが、たまにしか飛んでこず、こちらも現時点では自分のログイン動作だけが通知される閑古鳥が鳴いている状態です。

海外編：Product Hunt

つらつらと書いてきましたが、これからが本編です。当時、海外進出しか見えていなかった私は、海外での認知度を上げるための方策を調査していました。調べていくと以下の2つのサービスがマッチすると思いました。

Product Hunt : https://www.producthunt.com/
Indie Hackers : https://www.indiehackers.com/

これらのサービスでは、個人開発者やスタートアップが自分の作ったプロダクトを投稿して、認知度を上げることが毎日のように行われています。ただ、Indie Hackersの方は招待制でしか入れず、Redditなどを徘徊してもInvitation Codeを求める人はいるものの、なかなか何もない状態でそれがもらえる人は見られなかったので、一旦Product Huntにフォーカスすることに決めました。

Product Huntへの投稿を決心

まずは経験者のまとめを読み漁りました。具体的には以下の記事を読みました。この中でも、本当に有効だったこと、今では有効ではないこと、役に立たないことがあるので、それを自分なりに整理していきました。とにかくやれることはやりきらないと、次につながらないと思い計画していきました。

https://crieit.net/posts/7
https://jp.taishikato.com/posts/i-want-to-prove-that-japanese-can-compete-in-english-speaking-countries
https://blog.notsobad.jp/entry/2019/12/23/232807
https://blog.notsobad.jp/entry/bungo-search-product-hunt

Product Hunt攻略計画

先述の記事を読んで私が立てた当日の計画は以下のとおりです。
1. 太平洋時間 0:01（日本時間 16:01）からその日のランキングレース開始。
2. 1時間くらい様子をみて、Google や Facebook からのプロダクトなどのビッグサービスが投稿されていないのを確認してから投稿。
3. Twitter で Product Hunt への投稿を英語でアナウンス。 @ProductHuntをメンションする。
4. Product Hunt 上の紹介ページ URL が取得できるので、それを基に Product Hunt Card 作成（Medium の場合は URL を貼り付けるだけで OK）し、Medium 投稿。
5. ProductHunt の URL を使って Landing Page に反映し、導線を作る。
6. Medium の記事を、Product Hunt 上のプロダクト紹介ページに関連記事として貼り付け。
7. Medium の記事を、Hacker News に投稿（Show HN:をタイトルにつけて投稿）
8. Reddit に投稿
9. コメントが入ったらそれに返信していく。

また、投稿当日までの計画は以下のとおりです。
1. 投稿用のランディングページを作る
2. 投稿用の動画（英語）を作る
3. Medium/HackersNews/Redditの記事を準備する
4. Product Huntのupcoming Productに登録する
5. Product Hunt投稿内容の準備をする
6. 最低限必要な機能の整備（退会機能・規約）
7. 著名なProduct HuntersにReview Requestをして、認知してもらう

簡単に言ってしまうと、以下の2点に集約されます。すごくシンプルです。
- ProductHuntの投稿を魅力的なものにする
- ProductHuntのupvoteを得るための導線をできるだけ多く作る

投稿当日までの準備と結果

順番は前後しますが、投稿当日までの計画について共有します。

ランディングページ

ランディングページはたいして手間もかからなかったのですが、当日投稿しなければ、貼るURLがわからないため、ボタンだけ作ってVueの機能で表示しない状態で準備しておきました。実際のトップページの見えるところにボタンを置いた程度でした。はっきり言ってダサいですね。

改めて投稿後にいろいろ研究してみましたが、以下のような形で誘導するのはとても有効だと感じました。後にわかりますが、こんなレベルの問題ではないことがわかります。

投稿用の動画

ProductHuntの投稿にYoutube動画を付けると、Product紹介の一番最初に表示され、自動的に再生される仕組みになっています。そのため、インパクトがあると思ったのと、これをやらねばやらなかったときの効果が今後わからなくなると思い、動画制作に手を付け始めました。しかしながら、以下の問題にぶつかります。

動画編集に知見がない
動画ナレーションは英語の必要性がある

動画編集に知見がないので、いろいろ調べたところ、ダビンチリゾルブという動画編集ソフトが良さそうで試してみたところ、操作が全くわからず、説明記事をウロウロしていたのですが、わからなすぎて挫折しそうになっていました。ところが、原点に戻って動画のことは動画で、と思ってYoutubeの解説動画を探しました。

そして以下の動画を10分で見たら、一気に進み、こんな私でも動画編集ができるようになりました。基本操作と、動画編集に最低限必要そうな動画を紹介しておきます。

https://youtu.be/duxtN8ixpLo
https://www.youtube.com/watch?v=0J7lqAnP_64&t=194s

ただ、計画もなしに動画編集するとうまく行かなったので、Figmaで整理してみました。ただし、これで一旦動画を作ったのですが、文字だらけでなかなか理解しにくいものになってしまいました。

ここあら紆余曲折があって、ようやく完成した最終版はコチラです。
https://youtu.be/YvcyiAccCBo

先にナレーションの英文を考えて、Google Text to Speechに喋らせて、それに合わせて映像を作成するという手順を踏みました。しかしながら、結果的に動画以前の問題であることも発覚します。

Medium/HackersNews/Redditの記事を準備する

ここから導線となる記事の準備についてお話しいたします。

Medium
https://medium.com/@nice2have/2go-road-to-my-first-webservice-5b38666a7dd8

- 特に制限もないので、自由に書きましたが、タグについては迷いましたね。サービスの特性上、割り当てるべき適切なタグかどれか未だにわかっていません。
- しかしながら現時点でもView数は2です。そのため、こちらもMediumのフォロワーを増やしておくか、単なるプロダクト説明の置き場と割り切るかのどちらかが今後の戦略となりそうです。

HackersNews

- Show HNを付けるというルールを守って投稿
- 付けるURLはMediumのページか、サービス自体のURLかは迷いましたが、サービスにProductHuntへの誘導を用意していたので、後者を選択しました。
- しかし残念ながら、GoogleAnalytics上は、HackersNewsからの流入は０でしたので、もう少し工夫が必要か、流れるのが早すぎて流入が期待できないかもしれません。

Reddit
https://www.reddit.com/r/ProductHunters/comments/px15lq/i_created_my_first_web_site_2go_2go_can_generate/

- Karmaというポイントがないと記事が投稿できないという話を見たので、事前に記事投稿やコメントで参加してみました。特にGithub Issueの必要性などを投稿したりして、反応を窺うなどもトライしましたが、慣れていないせいもあって反応も薄かったです。
- どのSubredditに投稿するかは検討しました。ProductHunt / Github / webdev / SaaS / startups / indieHackers / indieDevelopers等、色々調査しました。ProductHuntのSubredditが最も適切かと思いましたが、あまり活況がないのが心配でした。ただ、それ以外のところでは厳しい反応も予想されたので、シンプルにProductHuntのSubredditを投稿先と決定しました。
- その他細かいことですが、RedditのProfileなどもきちんと整備しました。
- しかしながら、RedditのSpamFilterに引っかかって削除されてしまったみたいです…

Product Huntのupcoming Product

あまり認知されていませんが、以下のようにサービスローンチ前にユーザーとコミュニケーションができるPre-Postサイトを作ることが出来ます。ただここからSubsriberは1人も登録されませんでした。おそらくProductHuntの著名なユーザーが、次期サービスを立ち上げる前にユーザーとコミュニケーションするためのプラットフォームだと感じましたので、私には当分必要ないと思いました。
https://www.producthunt.com/upcoming/2go

Product Hunt投稿内容の準備をする

Product Huntの投稿ページは入力したものが記録されるようになっているので、Submitボタンの直前までを入力しておいて事前に準備しておくことが可能です。今回の画像は、動画作成時に作っていたFigmaデータを画像データに変換して利用することとしました。特に動画は視覚的に、画像は落ち着いて読むように文字を入れるようにしました。

ここで用意しにくいのは、投稿ロゴとして利用できるGIFファイルだと思います。動画や画像イメージは比較的簡単に用意できますが、GIFファイルはどんなものにするところから微妙に悩ましい位置づけです。私は今回動画ファイルを作って出力した後、MovファイルからGIFに変換して利用しました。

目立たせるために、アニメーションというよりは、全体の色が大きく変わることで目につくように意識して作りました。

著名なProduct HuntersにReview Request

先程の記事の中には著名なProductHunterにお願いして、彼らに周知してProductHuntで彼らをフォローしているユーザーに通知されるようにしたほうが良いという記述がありました。一方で、その機能はなくなったのでやる必要ないよというのも見受けられました。ということは、やってみるしかありません。まずは以下のサイトからTop Huntersを探しました。

https://yvoschaap.com/producthunt/

それぞれがどういった方なのかまで抑えられなかったので、上から順番にTwitterを見て、直接DMを送れる人にていねいな英文を書いて送りました。…が、結果的に1人からも返信は返ってきませんでした。おそらく、こういった依頼が定常的に来るので、そもそもDMを開いていない可能性が高いです。既読にすらなりませんでしたので。

では、このアプローチは不要なんでしょうか。その答えは、私のProductHuntの通知ページにありました。以下のようにフォローしているHunterがUpvoteすると、その通知がフォロワーには届きます。つまり、TopHuntersにUpvoteされると知られる確率が高くなるという理解をしています。ただ、彼らからUpvoteされるためにどうしたらよいかは未だにわかりません。Twitterでフォローされるわけもないので、ProductHuntでDiscussionに参加するなどして自分自身の露出が必要なのかもしれません。

その他に可能性があるとすると、以下は検討してみてもよいかと思いました。開発者のクローズドなコミュニティがあり、そこで繋がりが作れるかもしれません。なぜなら、$2,000/yearの有料会員制だからです。だからこそ、人数が爆発的に多いわけでもないですし、コミュニケーションが活発なのかもしれません。ただし、個人開発者がここに投資するのは、英語とお金が必要なので、ハードルが高いとは思います。

https://megamaker.co/club/

投稿当日の結果

改めて、投稿当日の計画を振り返る前に、投稿曜日を検討していました。最初は準備ができた翌日に投稿しようかと思っていましたが、ちょうど週末でした。週末がどう影響するかがわからず、Active User数が減少するのではないかと推測して候補から外しました。また、週明けの月曜日も同様の理由で除外し、現地時間火曜日0時に投稿することとしました。

太平洋時間 0:01（日本時間 16:01）からその日のランキングレース開始。
1時間くらい様子をみて、Google や Facebook からのプロダクトなどのビッグサービスが投稿されていないのを確認してから投稿。
Twitter で Product Hunt への投稿を英語でアナウンス。 @ProductHuntをメンションする。
Product Hunt 上の紹介ページ URL が取得できるので、それを基に Product Hunt Card 作成（Medium の場合は URL を貼り付けるだけで OK）し、Medium 投稿。
ProductHunt の URL を使って Landing Page に反映し、導線を作る。
Medium の記事を、Product Hunt 上のプロダクト紹介ページに関連記事として貼り付け。
Medium の記事を、Hacker News に投稿（Show HN:をタイトルにつけて投稿）
Reddit に投稿
コメントが入ったらそれに返信していく

まず、予約投稿機能があるので、試してみましたが、正常に動作しませんでした。もしかすると私の現地時間の入力時間が間違っているかもしれませんが、念の為日本時間16時にはPCの前にいたほうがいいかもしれません。

投稿後の動きの感想

現地時間0時のタイミングでは、少しでもUpvoteを稼いだProductが上位に行きやすいです。そのため、初速を確保する知り合いやコミュニティへの事前声掛けは重要だと思いました（ただし、Upvoteを直接的に促してはいけません）
必要初速Upvoteは10くらいだと思います。トップページに表示できるProductにも限りがあり、そこに載れなければ閲覧数も獲得できないです。
必ずUpvote順にソートされるわけではありませんでした。コメントなどの他の要素も見ていると思われます。コメントはUpvote同様に初速に影響する可能性があるので、できれば事前に確保しておきたいところです。ただし、日本人のコミュニティにおいて、Upvoteはしてくれても、コメントまでしてくれる人を確保するのは至難の業だと思います。
コメントがないと盛り上がりに欠けるのか、追加のコメントが得られにくいと思います。私はただの1つもコメントを最後まで得られませんでした。他のProductは、共同開発者などがコメントし合うことで盛り上がりを演出している印象を受けました。
コメントが来たら返信しながら、投稿スレッドを盛り上げる準備をして待っていましたが、杞憂に終わってしまいました。

結果と感想

最終的な結果はUpvote x15となりました。結果をまとめていきます。
- Upvote x15(しかし、運営者ギルドから半数くらいはUpvoteしてくれた方がいたと思います)
- 流入トラフィック x5(ほとんど流入が見込めませんでした)
- 新規登録ユーザー数 x0(残念ながら一人も使ってくれませんでした)
- サンプルを試したユーザー数 x2(流入トラフィックの割に確率が高かった)

重要なのは…

とにかく初速Upvoteを増やして、トップページに載らないと何も始まらない
流入さえしてくれれば試してもらえる率はそこそこある
投稿内容（文章・動画・画像）の良し悪しが影響するのかはわからなかった
導線はほとんど影響しなかった（影響するように仕立て上げるには継続的な活動が必要）
TopHuntersに認知される方法があれば、Upvoteを得るための近道になるかも。

ProductHuntへの挑戦は惨敗

多くの方にご協力を頂きましたが、残念ながら私の個人開発サービスのProductHunt挑戦は惨敗に終わったと言って良いでしょう。ただし、考えうる限りのことはやり切ったので、次に繋がる敗戦だと考えています。

海外進出のサービスの難しさを以下の点で痛感しています。
- 海外でウケるサービスとかユースケースが、真の意味で理解できない可能性
- 海外で求められるデザインやマーケティング・言い回しが適切かどうかわからない
- 海外でのコミュニティ参加は更に負荷がかかるため、労力に見合うかが不安
- 番外編）ユーザーに提供する規約の英文精査が難しい

英語で開発すれば、非常に多くのユーザーに対する市場へのアプローチが可能ですが、このような深刻な悩みがついてまわることになります。いくつかの記事にもありましたが、英語圏の感覚を持つ人にヘルプしてもらわないと難しいかもしれません。

最後に…

想像してよりもずっとずっと個人開発は難しいです。プログラミングの世界だけでなく、デザイン・マーケティングまで1人で取り組まなければならず、かつアイデアの捻出とその中からの選定も全部自分の責任です。だからこそ楽しみがあるわけですが、大変さも同時に存在しています。

企業よりも個人開発が気楽な分、企業よりもマーケティングや作業分担にお金がかけられません。特に個人開発はサービスが知られることがなければ、提供するユースケースが知られていないから失敗しているのか、知られていても失敗しているのか判断が難しくなります。

そこでやはり重要となってくるのが、コミュニティだと思います。自分の作るプロダクトに意見を言ってくれる、試してみてくれる、拡散して届けてくれる人たちとともに歩まねば成功はあり得ません。そしてそれは継続的な努力によってのみ得られるものだと感じました。

私にとって今回の開発は本当に作りたいものに対する準備の意味合いも兼ねていますが、コミュニティとともにモチベーションを維持し、成功の模索をしていきたいと思います。

ということで、ぜひ気になる方はTwitterのフォローと、2goの利用をしてみて、フィードバックをいただければと思いますので、最後にリンクを貼って終わりにさせていただきます。

https://twitter.com/jnakajima1982
https://2go.plus/

ありがとうございました！

Github Issuesをキレイに外部公開するサービス「2go」作ってみた

2021-09-10T06:00:03+09:00

はじめに

今回初めて個人開発で作ったサービスを公開します。今までも何回かトライしていたのですが、なかなか公開までに至らないうちに、なにか問題にぶちあたったり、時間がかかりすぎて情熱が冷めてしまったりしていたので、今回はまずはスモールスタートで公開して改善していくことを心がけました。大体今回の公開まで、開発を始めてから1ヶ月程度になります。毎日朝4時半に起きて、子どもたちが起きる7時過ぎまでを開発時間として取り組んできました。

どんな人向け？

自分で作っているサービスの開発ロードマップをユーザーに公開するために、都度ブログを書いたりするのも大変ですよね。もし、自分のサービスのソースコードをGithubで管理していたとして、Github Issuesを見せるとしてもGithubに馴染みのない人にとっては読みにくいですし、外に出すサービスであればあるほど、Githubのレポジトリは非公開になっていると思います。これをなんとかできないかなと思いました。

どんなサービス？

まずはこちらを見てください。
https://2go.plus/nice2h/2go/roadmap
このようにGithubのレポジトリ内のIssueをMilestone区切りにして、Githubに馴染みのない人にも見やすいロードマップサイトを公開するサービスです。もちろん、非公開のレポジトリを公開設定にすることなく、ロードマップだけを外部公開することができます。

Githubアカウントでログインすると、以下の設定画面になります。レポジトリを選択して、どのMilestoneを共有するかをチェックして保存します。すると、自動的にロードマップサイトのURLが生成されるので、こちらにアクセスすれば常に最新のロードマップを見ることができます。このURLをシェアすれば、多くの人にあなたのサービスのロードマップを簡単にキレイに公開できるわけです。

Milestoneを今まで使っていな方は、Milestoneを作成して、Issueを割り当てればロードマップを整理することができます。また、Labelを活用している方もいらっしゃると思いますので、Milestoneの中のLabelでIssueをフィルタすることもできます。これらを駆使することで、Bugは見せずにenhancementだけ表示するなどのことも可能です。
今後の予定としては、今はMilestone基点で表示しているところを、Labelベースで表示できるようにもしたいと思っています。その他は、まさに上記のURLを参考にしていただければ、いつも最新です。

どんな技術を使ってる?

企業での開発経験はないので、全て自己流です。書籍やWebサイトを中心に勉強して開発しながら学んできました。念の為、利用している技術は以下のとおりです。
- Laravel : APIとBlade（SSRはやってみたことあり）
- Vue3 : フロントエンド（今回初挑戦）
- Tailwindcss : デザイン（Bootstrapからの脱却）
- Docker : これらの開発環境と、本番でもDocker利用（いずれ分割予定）
- Cloud : Conoha VPS(インフラに時間を掛けたくなかった)

気になっていること（随時追加予定）

開発環境はLaravel sailを使いましたが、本番は自前でdocker-compose.ymlを使いました。このあたりのコンテナの構成をどのようにしているか気になりました（本番でもsail使う？）
本番環境にコードをpullしてからnpm run prodしてbuildが終わるまでにラグがあり、この間は使えない機能が出てしまったりするが、このあたりをみなさんはどのように工夫しているか？
DBについては、どこまでレコードを暗号化するか。検索機能などとのトレードオフになると思われるが。。

今後は？

現在alphaフェーズですが、alphaとしてもう1段階リリースの予定があります。多くの人に使っていただき、Feedbackをいただきながら改善して、開発経験を増していきたいと思います。また、今回の個人開発は最初から海外も同様の問題を抱えていると思ったので、最初から英語圏も視野に入っており、今の所すべてのUIは英語にしています。以下の英語Twitterアカウントも作成して、情報発信していこうと思っています。

https://twitter.com/2go_plus

もちろん、日本語のTwitterは私の今まで通りのアカウントを利用していく予定です。
https://twitter.com/jnakajima1982
ぜひご感想・ご指摘をいただければと思います。

QnQ開発日誌単体テストなしで大丈夫か？

2021-07-30T02:39:33+09:00

デプロイしたらサインインしていない状態でサイトが見られなくなった、QnQの開発日誌ですこんにちは。今は修正している。

Firebaseのセキュリティルールをミスっていたせいなんだが、Seleniumを使ったUIテストしかなく、匿名ユーザーの挙動がテストケースから漏れていたために気づかなかった。

単体テストがない

この程度のことは単体テストでやるのが良いのだろうと思うのだが、開発メンバーで真面目にフロントエンドをやってきた者がおらず、なかなかハードルが高い。まずVue.jsという時点で経験がないのに、そのうえFirebaseが絡むので、どうにも手を付けられていない。せめて、新しい知識がどちらか片方ならまだなんとかなったと思うのだが……。

UIテストだけ

そんなわけで、せめてこれくらいは……とSelenium IDEを使ってUIテストだけなんとか実行している、というのが現状である。

正直これがあるだけでも実は頑張った。さすがに何のテストもないのはまず過ぎる、と思って作ったのだが、大きな修正のたびに思いもよらないところでテストで引っかかってくれているので、実際役に立っている。

ランスルーテストを流すと普通に数分かかるが、まぁその間はコーヒーでも入れて飲めばいいのだ。

単体テスト入れたいというより

しかしまぁ、さすがにそろそろ単体テスト入れなあかんよなぁと思うのだが、それにしてもハードルが高い……。

というかコードがスパゲッティで非常に汚いし、そもそも抜本的にこのUIどうなの？と非常に思うところあるので、ぶっちゃけフルスクラッチで最初から書き直したほうがいいのかもしれない、とか思う。

ダイエットとバグ修正の話を一緒にできる、そうQnQならね

ちなみにこのバグ修正は、友人とWebサービス上でやりとりしていた。GitHubでもやりとりしたけど。俺の日記帳状態だったが、再び友人との交換日記状態に復帰している。やっぱり複数で使うと楽しい。

もくもく22 2021-07-28 | QnQ

で、上記のスレなのだが、このサービスの特徴が出ている。

上図のように、「ダイエットの話」と「バグ修正」の話を並行している。こういう体験は他ではないはずで、自分たちでは「面白いと思うんだけどなぁ」と言いつつ、閑古鳥が鳴いている僕らのサービスである。

なんか面白そうだなと思ったら、覗いてやってください。

Vue CLIの環境変数でStylusのグローバル変数を入れ替えるし

2021-02-20T20:03:15+09:00

Vue CLIの環境変数でStylusのグローバル変数を入れ替えるし

米：この記事の有効期限：このコードは今は動くが、いずれ動かなくなる。2021年2月20日記す

まず背景として

うう... おれ、JavaScript、わからん。

ぜんぜん、わからん。

何がしたいのか？

Stylusのグローバル変数にVue CLIの環境変数が使えたら便利やろなあ...

結論

うう... おれ、なにも書けない、なにも出来ない。

出来た事だけ書く。

Stylusのグローバル変数が書かれたファイルを2つ用意した。ビルド用と、開発環境用にだ！
Vue CLIの環境変数が書かれたファイルを２つ用意した。ビルド用と、開発環境用にだ！
Vue CLIの環境変数にStylusのグローバル変数が書かれたファイルのパスを記述した
vue.config.jsでStylusのグローバル変数が書かれたファイルをインポートした
yarn serveしたら開発環境用が、yarn buildしたらビルド用が！やったぜ！！

コード

Stylusのグローバル変数が書かれたファイル

これらはプロジェクトフォルダ内の任意の場所に置く

src/assets/stylus-global.styl


// .env.productionで呼び出されるファイル

HaikeiShoku = #cccccc

src/assets/stylus-global-development.styl


// .env.developmentで呼び出されるファイル

HaikeiShoku = #999999

Vue CLIの環境変数が書かれたファイル

これらはプロジェクトフォルダのルートに置く

.env.production


// yarn build したときに呼び出されるファイル

VUE_APP_STYLUS_GLOBAL='src/assets/stylus-global.styl'

.env.development


// yarn serve したときに呼び出されるファイル

VUE_APP_STYLUS_GLOBAL='src/assets/stylus-global-development.styl'

vue.config.jsでStylusのグローバル変数が書かれたファイルをインポートする

これはプロジェクトフォルダのルートに置く

vue.config.js

const path = require("path");

module.exports = {
  css: {
    loaderOptions: {
      stylus: {
        stylusOptions: {
          import: [path.join(__dirname, process.env.VUE_APP_STYLUS_GLOBAL)],
        },
      },
    },
  },
};

App.vueとかどこかにグローバル変数を書いて試す

yarnでserveしたりbuildしたりして余韻に浸る。

vue.config.jsの補足

Yes! Good Look

このコードは動く。人類に未来が訪れる。

const path = require("path");

module.exports = {
  css: {
    loaderOptions: {
      stylus: {
        stylusOptions: {
          import: [path.join(__dirname, process.env.VUE_APP_STYLUS_GLOBAL)],
        },
      },
    },
  },
};

Oh! Not Work

これらのコードは動かない。人類は滅亡する。

FAIL

const path = require("path");

module.exports = {
  css: {
    loaderOptions: {
      stylus: {
        import: [path.join(__dirname, process.env.VUE_APP_STYLUS_GLOBAL)],
      },
    },
  },
};

FAIL

const path = require("path");

module.exports = {
  css: {
    loaderOptions: {
      stylusOptions: {
        import: [path.join(__dirname, process.env.VUE_APP_STYLUS_GLOBAL)],
      },
    },
  },
};

VERDAMMT!!

module.exports = {
  css: {
    loaderOptions: {
      stylus: {
        stylusOptions: {
          import: [process.env.VUE_APP_STYLUS_GLOBAL],
        },
      },
    },
  },
};

参考文献

検証環境

package.json

{
  "name": "try-globalval",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "core-js": "^3.8.1",
    "vue": "^3.0.4"
  },
  "devDependencies": {
    "@babel/core": "^7.12.10",
    "@babel/eslint-parser": "^7.12.1",
    "@vue/cli-plugin-babel": "~5.0.0",
    "@vue/cli-plugin-eslint": "~5.0.0",
    "@vue/cli-service": "~5.0.0",
    "@vue/compiler-sfc": "^3.0.4",
    "@vue/eslint-config-prettier": "^6.0.0",
    "eslint": "^7.15.0",
    "eslint-plugin-prettier": "^3.2.0",
    "eslint-plugin-vue": "^7.2.0",
    "prettier": "^2.2.1",
    "stylus": "^0.54.8",
    "stylus-loader": "^4.3.1"
  }
}

Vue.Draggable　をスマホでも使う時のアレコレ

2020-11-18T11:41:16+09:00

Vueでドラッグ＆ドロップの何かしらを作ろうとした時に便利なVue.Draggableですが、
これまたスマホ対応している最中に困ったことがあったのでメモ。

困ったこと１：スクロールしようとするとドラッグ＆ドロップされてしまう

特にオプションなどの設定をせずデフォルトのままやると、リスト内の要素全体がドラッグ＆ドロップできてしまうので、
スマホだとうまくスクロールができない。


 
   
     {{item.name}}

new Vue({
  el: "#app",
  components: {
   'draggable': draggable,
  },
  data: {
    items:[]
  },

  created() {
    for (var i = 0; i <= 30; i++) {
        this.items.push({id: i+1, name: `リスト${i + 1}`})
    }
  }
});

困ったこと２：要素の中のクリックイベントが動かない（Androidのみ？）

例えば、

のように、削除ボタンをリストの中に入れて、
ボタンクリックで削除処理が行われる…みたいなときに、
ボタンをクリックしても何も起こらない。
※自分はAndroidのみで確認。PC、iosは動く

解決策

２つとも同じ方法で対処。

draggableタグにoptionsを設定して、
ドラッグ＆ドロップができる領域を指定してあげる。

まずは以下のようにドラッグ＆ドロップ可能にする要素を追加。
任意の名前でclassを付けておく。　今回はclass="handle"とした。


 
   
     
     ●
     {{item.name}}

この●をクリックしているときだけドラッグ＆ドロップ出来るようにする。

draggableのoptionsを以下のように設定

...

これで、.handle要素をクリックorタップしたときのみドラッグ＆ドロップが可能になり、
スマホでのスクロールやボタンのクリックも問題なく動くようになった。

いちおうここまでのサンプルを置いておきます。
https://jsfiddle.net/mimimimimi/vx1ksm8c/8/

参考

Vue.Draggableでドラッグ領域を指定する方法
 The click event bound to the drag element using vue-draggable is invalid on Android phones

どうでもいい余談

解決した日に気づいたけど、Youtubeのプレイリストの中身の順番を変える時とかも、同じ様にアイコンをタップしないとドラッグできないようになっていた！
こういう普段何気なく使っているところにヒントが隠されてたりするんだな～と思ったり…。

【Apache Laravel Vue.js Vuetify】webアプリをスマホに対応させるためにやったこと

2020-11-10T18:19:54+09:00

Apache＋Laravel＋Vue.js＋Vuetify　で作った社内ツールをスマホ対応したときに行った作業内容メモ。
~~ほんとにiosが嫌いになりそうだった~~

対応ブラウザは、

chrome(PC, Android, ios)
safari(ios)

まずはiPhone、Androidのデバッグが出来るように準備する

それぞれの端末を持っていれば、PCに繋いでデバッグができる！なんて素晴らしい。
iosはiPhone以外にもiPad、iPod touch　でも問題なし。
それぞれ以下を参考に。

Android:https://qiita.com/hojishi/items/12b726f8b02ef3d713e4
ios：https://webkatu.com/archives/ios-safari-debug-on-windows/

Polyfillを入れる

Vuetifyの公式ドキュメントに則って入れればOK。

npm install babel-polyfill --save
npm install @babel/preset-env --save

インストール後、
import Vue from 'vue' とか
import vuetify from '@/plugins/vuetify
を書いているファイルに、
import 'babel-polyfill' を追加。
（自分の場合は /resources/assets/js/app.js）

ルートディレクトリの .babelrcに、

 {
  "presets": ["@babel/preset-env"]
}

対応していないjsを地道に直す

特に問題なければ、↑を行えば画面は表示されるはず…と思っていたのだが、画面が真っ白だった。

エラーを調べると、どうやら正規表現で後読みを使っているのが原因みたいだったので、該当箇所を修正。
（safariは後読みに対応していない）

※書いている最中に気づいたけど、それってつまりうまくPolyfillが使えていなかったのでは…？？

「Error: Network Error　POST 応答を解析できません」を直す

iosのみ起きる謎現象。これに2日かかった…
自分は、Apacheの設定を変更で直った。


    AllowOverride All
    # Allow open access:
    Header unset Upgrade       ←これを追加

とりあえずここまでで画面が開けるようになりました。
以降は細かい部分です。

スクロールを入れたくないのにスマホだと入ってしまう

webアプリ全体にスクロールを入れたくない場合、bodyにheight:100%とか入れればPCでは大丈夫だったりしたんですが、
スマホだとどうにも謎のスクロールが入ってしまうので、以下のように対応。

…

※jsでhtmlのところにstyleを指定する方法がわからなかったのでid属性を無理やり、、、

const windowHeight = window.innerHeight;   // windowの高さを取得

// の高さを、windowsの高さいっぱいに設定
document.getElementById("content").style.height = windowHeight + "px";
// bodyはheight:100%
document.body.style.height = "100%";

// スクロールバー非表示
// スマホのときはbodyに、PCのときはhtmlにかけないと反映されないっぽいので分ける

const isSP = /iPhone|iPod|iPad|Android/i.test(navigator.userAgent);     
if (isSP) {             
    document.body.style.overflowY = "hidden";
} else {
    document.getElementById("content").style.overflowY = "hidden";
}

…無理矢理感半端ないけど、ひとまずこれでPCでもスマホでも画面いっぱいでコンテンツが収まるようになった。

iosだけ、キーボードのenterでボタンクリック判定されてしまう

PCやAndroidでは大丈夫なのに、iosだけ起きる謎現象。
改行する度にボタンが押されて送信されるという、、、、

※単純にv-formのsubmitイベントが発火してしまっている場合は、こちらを参考に。

根本的な原因はわからなかったため、
入力文字が空欄・改行のみの場合は、ボタンクリックで呼ばれる処理が走らないようにした。


送信


data: () => ({
    inputText: "",      
}),

computed: {
    /**
     * 空文字判定
     */
    isTextEmpty() {
         return !this.inputText || !this.inputText.match(/\S/g);
    },
},

methods: {
    submit() {
        if (this.isTextEmpty) return;

        // 以下送信処理
    }
}

iosだけファイルアップロードができない

ファイル選択のダイアルボックスを開く→ファイルを選択→アップロード
という流れのとき、iosだけダイアルボックスが開かないという謎現象。
エラーも出ない…

調べてみたら、どうやらinput.onchangeが動いていないようだった。

function uplod() {
    return new Promise(resolve => {
        const input = document.createElement('input');
        input.type = "file";
        input.multiple = false;
        input.accept = "image/gif,image/jpeg,image/png";
        input.onchange = event => {
            var file = event.target.files[0];
                resolve(file);                    
            };
            input.click();
        });
}

ios以外は↑でも動いたが、どうやらiosではちゃんと要素をDOMに追加してあげないといけないらしい。
参考：https://stackoverflow.com/questions/47664777/javascript-file-input-onchange-not-working-ios-safari-only

というわけで、以下のように修正

function uplod() {
    return new Promise(resolve => {
        const input = document.createElement('input');
        input.type = 'file';
        input.multiple = false;
        input.accept = "image/gif,image/jpeg,image/png";
        document.body.appendChild(input);     // ←DOMに追加
        input.onchange = event => {
            var file = event.target.files[0];
            document.body.removeChild(input);     // ←DOMから削除
            resolve(file);
        };
        input.click();
    });
}

iosだけ画像が縦に伸びる時

これは別記事にもメモしてあるが、
display:flex;を指定している箇所に、align-items: flex-start;を追記するだけ。
参考：https://nichiyogogo.com/image-looks-stretched/

iosだけ、heightを指定した要素内の「overflow-y: visible scroll;」が効かない

これもiosの一部で起きる現象。
safariのバージョンの問題かもしれない。

ますはここを参考に修正。
自分はこのときにも頑なにoverflow-y: visible scrolと書き続けていたら直らず、
素直に overflow-y:auto; にするだけで解決…。

おわり

ほとんどios対応ですね。
Androidはグリッドをちゃんと設定して、表示崩れしないようにだけしてあげれば殆ど動きました。
マジでiosとsafariが嫌いになりそうだった…。

Nuxt.jsにlintを導入してみた

2020-09-07T14:22:14+09:00

動機

以前からなんとなくeslintは導入してあーだこーだしてたのですが、ポートフォリオサイトやブログサイトをNetlifyからFirebaseに移植する際に、github actions(CI)を使うようになり、せっかくだからもう少し本格的にlintやtestを導入してみようということで、色々調べて導入してみました。

その手順を初心者なりに備忘録としてまとめてみました。
(だいぶ我流な部分もありますが多めに見ていただければ幸いです)

アドバイスなどは大歓迎です。

知識が増えたら随時更新します。

https://blog.taka1156.site

https://github.com/taka1156/nuxt-blog - アトミックデザインの形にプロジェクトを見直し中

↑ブログのプロジェクトで導入してみました。(Nuxt.js + Firebase + microCMS 構成)

環境

mac OS Catalina
Node.js v12.16.1
npm v6.14.3
yarn v1.22.0

手順

これらをインストール
- eslint関連
  yarn add eslint eslint-config-prettier eslint-plugin-prettier eslint-plugin-vue babel-eslint
- stylelint関連
  yarn add stylelint stylelint-config-standard stylelint-config-prettier stylelint-prettier
- prettier
  yarn add prettier
※ なんでprettierを入れたか
eslintだけだとエラーは出すが修正はしない項目(コード整形関連)もあるので併用する。
(逆にprettierは細かい命名規則や処理に関するエラーは出さない?)

設定ファイルを書く

.eslintrc.json

{
    "parserOptions": {
        "parser": "babel-eslint",
        "sourceType": "module"
    },
    "extends": [
        "eslint:recommended",
        "plugin:vue/recommended",
        "plugin:prettier/recommended",
        "prettier/vue"
    ],
    "plugins": [
        "vue"
    ],
    "env": {
        "jest": true,
        "browser": true,
        "es6": true,
        "node": true
    },
    "globals": {},
    "rules": {
        "camelcase": [2,{"properties": "always"}],
        "quotes": [2,"single", { "avoidEscape": true } ],
        "eqeqeq": [2, "always", {"null": "ignore"}],
        "prefer-const": 2,
        "vue/component-name-in-template-casing": "off",
        "vue/no-v-html": "off"
    }
}

.stylelintrc.json

{
    "extends": ["stylelint-config-standard", "stylelint-prettier/recommended"],
    "rules": {
        "color-no-invalid-hex": true,
        "color-hex-case": "lower",
        "selector-class-pattern": "^(?:(?:o|c|u|t|s|is|has|_|js|qa)-)?[a-zA-Z0-9]+(?:-[a-zA-Z0-9]+)*(?:__[a-zA-Z0-9]+(?:-[a-zA-Z0-9]+)*)?(?:--[a-zA-Z0-9]+(?:-[a-zA-Z0-9]+)*)?(?:\\[.+\\])?$"
    }
}

.eslintignore, .stylelintignore
※ storybook-static、coverage は storybookやjestを導入していると生成されるファイル

# ビルドファイル
dist
storybook-static
coverage

# 設定、モジュール
.nuxt
.storybook
node_modules

.prtteirrc.json

{
    "printWidth": 85,
    "tabWidth": 2,
    "singleQuote": true,
    "semi": true,
    "bracketSpacing": true,
    "arrowParens": "avoid"
}

scriptsを追加

"scripts": {
    "lint-js": "eslint --ext .js,.vue .",
    "lint-style": "stylelint \"**/*.vue\" \"**/*.css\"",
    "lint-js:fix": "eslint --ext .js,.vue . --fix",
    "lint-style:fix": "stylelint \"**/*.vue\" \"**/*.css\" --fix",
    "lint:check": "yarn lint-js & yarn lint-style",
    "lint:fix": "yarn lint-js && yarn lint-style",
    ...
}

お好みでvscode設定を追加
保存時に勝手にlint処理が走るようになるので便利
(vscode/setting.jsonに記述)

{
    "comments": "保存時にeslint、stylelintを自動実行",
    "eslint.alwaysShowStatus": true,
    "editor.codeActionsOnSave": {
        "source.fixAll.eslint": true,
        "source.fixAll.stylelint": true
    },
}

まとめ

eslint、stylelintについてざっくりと使い方やルールの指定方法についてわかってきたので、
積極的に活用して読みやすいコードを意識していきたいですね。

また、eslintルールについても、気になるものがあればまとめてみようと思います。

大学祭の参加団体向けウェブシステムをOSS化してみた

2020-06-14T15:24:10+09:00

はじめに

大学祭では、たくさんの参加団体（サークル・部活）が模擬店などの企画を出店し、盛り上げています。

大学祭を成功させるには、実行委員会と参加団体の間の連携が欠かせません。連携するための方法として、実行委員会では、参加団体からの「各種申請」を受け付けています。例えば、大学祭当日に配布されるパンフレットに掲載する内容を参加団体から募集する必要があります。また、実行委員会が貸し出す備品の申請を受け付けることもあります。

こうした申請受付業務は、多くの大学祭では紙による受付であったり、メールや Google フォームでの受付を行っているところが多いかと思います。

紙やメールによる受付の場合、紙・メールに書かれた内容を1枚1枚Excelに入力していく手間がかかります。受付方法によっては対面での対応が必要となり、昨今の状況下では厳しいものがあります。
（そもそも、今年の秋冬に開催される学園祭でも、予定通り開催できるかどうか怪しいところではありますが……）

そのような中、私は大学祭の各種申請などを受け付けるウェブシステムを開発し、今年になってそれを OSS 化してみました。

GitHub : https://github.com/portal-dots/PortalDots
PortalDots 公式ウェブサイト(2020/11/30 公開) : https://dots.soji.dev

私は誰？

私は、東京理科大学の野田キャンパスに通う大学生です。大学名こそ「東京」とついていますが、「野田」は「千葉県」にあります。そんな野田キャンパスで開催される学園祭「野田地区理大祭」の実行委員をしていました。

実行委員時代は、PortalDots の開発のほか、公式ウェブサイト・パンフレットのデザイン・実装なども行っていました。

野田地区理大祭公式ウェブサイト : https://nodaridaisai.com/

参加団体向けウェブシステム「PortalDots」

GitHub : https://github.com/portal-dots/PortalDots
- よろしければぜひ Star お願いします…！

開発環境の動かし方

開発環境を動かすには Git、PHP(7.4以上)、Node.js、Yarn、Docker がセットアップ済みである必要があります。

2020/06/27 追記 : コマンドの実行順序が間違っていたので修正しました。
2021/05/17 追記 : 開発環境の起動方法の変更を反映しました。

$ git clone [email protected]:portal-dots/PortalDots.git
$ cd PortalDots/

# 必要な Node.js パッケージをインストール
# ※ エラーが表示される場合は、Node.js を最新バージョンにアップグレードした上で、再度 yarn install を実行してください。
$ yarn install

# 設定ファイルを作成
$ cp .env.example .env
$ php artisan key:generate

# 開発環境を起動する
$ yarn docker

# マイグレーション(データベースのセットアップ)
$ yarn migrate

# Docker コンテナ内で必要な PHP パッケージをインストール
$ yarn docker-bash
$ composer install
$ exit

# フロントエンド開発サーバーの起動
$ yarn hot
# → ブラウザで http://localhost にアクセスすると、PortalDots の開発環境が起動する
# → フロントエンド開発サーバーを終了するには Ctrl + C を押す

# 開発環境を停止する
$ yarn docker-stop

トップページ

トップページでは、参加団体向け説明会の次回日程の表示機能や、各種お知らせの閲覧、配布資料のダウンロードなどができるようになっています。

企画参加登録の受付期間中は、提出している参加登録の受理状況も確認できます。

企画参加登録

学園祭への企画エントリーもウェブから可能です。

申請フォーム

大学祭の参加団体は、このようなフォームからパンフレット掲載内容などの情報を委員会へ提出することができます。

受付期間を設定することも可能です。

フォームエディター(Vue.js 製)

「フォームエディター」は PortalDots の目玉機能（？） です。

実行委員は、各種申請を受け付けるフォームを Google フォームのようなノリで作成することができるようになっています。

「じゃあ、Google フォーム使えば良いのでは？」と思われるかもしれませんが、Google フォームではログイン・新規登録機能(※1)は利用できない上、回答内容の編集が容易でなかったり(※2)、1団体あたり1回答までに制限できなかったり(※3)するなど、大学祭の申請フォームとしては不便なところもあります。

PortalDots の「フォームエディター」で作成できるフォームは、回答受付期間を設定できたり、1企画につき1回まで回答可能という設定ができたり、あとから回答を簡単に修正できたりします。

※1 : Google フォームでも、一応 Google アカウントでのログインを必須にすることはできます

※2 : Google フォームでも、回答者に回答の編集を許可することはできます。ただ、編集用の URL を紛失してしまうと編集できなくなってしまいます

※3 : Google フォームでは、1ユーザーあたりの回答数を制限できます。1団体あたりのような制限をかけるのは難しいと思われます

参加企画に提出してもらう各種申請もウェブフォームで受け付けられます。動画のように設問ぐりぐりできます。 pic.twitter.com/5rVFRVnUPd
— Soji — PortalDots (@sofpyon) June 11, 2020

CodeIgniter から Laravel への移行途中です → 完了しました！

2021/05/17追記 : 先日、CodeIgniter のコードを全て削除し、Laravel へ完全移行しました！

ついに #PortalDots のコードが、悲願の 100% Laravel 化達成しました…！CodeIgniter 消します！ pic.twitter.com/vt1RKYDfcL
— Soji (@sofpyon) 2021年5月1日

（以下、追記前）

現在、「CodeIgniter」と「Laravel」という、2つのウェブフレームワークを混在して使用しています。

元々 PortalDots は、私がウェブフレームワーク初心者のころ(大学1年の夏)に開発を始めた物でした。それ以前はフレームワークという物自体を使ったことがなく、プレーンな PHP コードでしか書いたことがなかったのですが、「CodeIgniter というフレームワークは簡単」だという話を聞き、試しに PortalDots の開発で使ってみたのでした。

しかし、CodeIgniter の機能は貧弱である点や、なるべくメインストリームにあるフレームワークを使ったほうが今後のメンテナンスがしやすいだろうということで、Laravel への移行をはじめました。

2020年6月現在、CodeIgniter が使われているのは「スタッフモード」（実行委員用のページ）のみとなっており、それ以外のページは Laravel に移行済みとなっています。

おわりに

OSS 化したので PortalDots はどなたでも自由にお使いいただけるようになりました。

学園祭実行委員会に所属しており、かつプログラミング経験のある方がいましたら、ぜひ使っていただきたいです。また、学園祭関係者でなくても、お試しとして実物を触っていただけると嬉しいです！

GitHub : https://github.com/portal-dots/PortalDots
PortalDots 公式ウェブサイト(2020/11/30 公開) : https://dots.soji.dev

週末の時間を使って「みんなのきょうしつ」をアップデートしました。

2020-06-07T19:47:07+09:00

promitsuです。

今週の土日の空いた時間を使って、先日リリースした「みんなのきょうしつ」というウェブサービスのアップデート作業を行いました。

http://class-room.fun/

このアプリは、リアルタイム同期な共同編集機能により、オンライン上の別々の場所やデバイスから、友達と一緒に好き勝手に教室（という名の座席表）を作成し、その画像をシェアできるサービスです。

開発の経緯などについては下記の記事を参照ください。

https://crieit.net/posts/620b85ee075fd93545b20ccfb92d3491

アップデート

先日のリリースは、複数人でリアルタイムに「教室」（座席表）を作成できるという目的のもとに、最低限の機能のみに絞った仕様になっていました。その後、友人などに使ってもらい、フィードバックをもらった内容について、以下のような機能追加や修正などを行いました。

※ 前提としてこのサービスはNuxtjs（Vuejs）とFirebaseを使って開発・運用されています。

主な内容

ステータスのタイプライター表示

黒板に表示される生徒のつぶやきをタイプライター風に１文字ずつ表示するようにしました。
普通に文字列を配列化して、一定間隔おきにv-modelの配列にpushする感じでJavascriptで実装しました。

教室ページのデザイン・レイアウト修正

VuejsもFirebase(firestore)もまともに使ったことがなかった３月ぐらいに一日間の突貫作業で作った時のままだったので、HTML/CSSの構造から、Vueコンポーネントの構成などもリファクタリングしました。

いいね機能

現状ユーザー認証がないので、SessionStorageに自分がいいねした教室の情報を保持し、多重いいねを防ぐようにしました。
実装にはvuex-persistedstateを使っています。
これ以外のデータの読み込みなどはvuexfireを使って、vuexのstoreとfirestoreをシームレスにつないでいるので、moduleとして分けてindex.jsから読み込む構成にしています。

```jsx
store/
  |
  +-- index.js
  |
  +-- like.js

```

store/index.js

import like from './like'
import localStorage from 'vuex-persistedstate'

...

export const plugins = [
  localStorage({
    key: 'like',
    paths: ['like'],
    storage: window.sessionStorage
  })
]

vuex-persistedstate
https://github.com/robinvdvleuten/vuex-persistedstate
vuex-persistedstate
https://github.com/posva/vuexfire

公開教室のトップページでのリスト表示

これがないと他にどんな教室があるかわからんし、アクセスもできないという指摘。ごもっともですね😓

座席削除

作成・編集ができるのに、削除できないとは何事か！？というご指摘。さーせん。

公開・非公開設定

トップページにリストが表示される様になったので、他の人にアクセスしてほしくない人は非公開設定にできるようにしました。秘密の言葉による簡易認証を入れようかとも思ったのですが、ユーザーから見た複雑度が増す気がしたので一旦ペンディングにしました。

教室背景変更機能

だだっ白い無味乾燥な背景が寂しかったので、教室の背景画像を変更できるようにしました。アップロード時の画像リサイズ・クロップなどはまだ実装できていないのでIssue積んどきました。

ドラッグ&ドロップ編集機能

vue-draggableを使って実装しました。（Vuejsは便利なコンポーネント・ライブラリが充実してるので、個人開発者にはとても嬉しい😭）
もちろん編集結果はリアルタイムに他のデバイスに反映されるようになっています。（挙動をもうちょっとかっこよくしたい😓）

動作ムービー

https://www.youtube.com/watch?v=2RCYmpFSae8

vue-draggable
https://github.com/SortableJS/Vue.Draggable

その他の修正（レイアウト変更、バグフィックス等）

背面黒板を廃止して、全面の黒板につぶやきを表示するようにしたり、その他微妙なデザイン・レイアウト調整、及びバグ修正を行いました。

まだまだバグも多いし、実装したい機能や修正したいUX、インタラクションなどもたくさんありますが、地道に少しずつ良いプロダクトにしていこうと思います。

ではまた。

自分の理想の教室を、友達とリアルタイムで一緒に作れるウェブサービス「みんなのきょうしつ」をリリースしました。

2020-06-05T22:29:21+09:00

さっき投稿した記事で、4日前に「musico」というウェブアプリをリリースしたことについて書きましたが、

好きな楽曲について語り合うウェブサービス「musico」を作ってみました。
https://crieit.net/posts/musico
musico | find track you like and talk about it

実は昨日、もう一つウェブアプリをリリースしましたｗ
その名も「みんなのきょうしつ」。

みんなのきょうしつ

開発の動機

このアプリは、もともと３月のコロナ禍による一斉休校をきっかけに、いきなり会えなくなった友達とオンラインで再開して貰い、小中高生のみなさんに、社会の混乱からのストレスを一時的にでも忘れてもらえたら良いなという思いで、二日間ぐらいでガッと基本的な機能を作って公開しようとしていたものでした。ですが、その後なかなか着手する時間が取れず、限定的な公開にとどめて、ほぼ動いていない状態が続いていました。

開発頓挫、からの突貫リリースへ

そんななか、先日の「musico」の開発と公開をきっかけに、テンションとモチベーションがひさびさに爆上がりしたので、この機を逃す手はないと思い、一念発起して昨日・一昨日をかけて最低限の機能を実装し、公開していみました。

どんなアプリ？

このアプリでは、教室を模した座席表的なものに、自分の好きな人やモノの名前と写真を登録していき、自分の理想の教室が作れます。

さらに、URLを共有することで、別の場所にいる友だちとオンラインでリアルタイムで共同編集することが出来ます。（動画は開発中に撮影したものです）

動作ムービー

また、「記念撮影」機能で作った教室の画像を作成・ダウンロードしたり、各種SNSに手軽にシェアすることが出来ます。（写真は友人が作った「あつまれどうぶつの森」のキャラクターが集まる教室です）

https://class-room.fun/classrooms/8jVBr7suU0In1vbE3Ze8

地味にインスタ映えしたりしますｗ

技術的なこと

技術スタック的には「musico」と同じくFirebase+Vuejs（Nuxtjs）という、構成です。「musico」はUniversalモード（SSR）で作りましたが、こっちはSPAとして開発し、OGP取得部分のみCloud Functionsで作りました。

しかし、Firebaseめっちゃ便利ですね〜。

こっちもあんまり凝ったことはしていないのですが、OGPの動的生成あたりとか、記念写真機能あたりについて、あとで技術的なことを書こうかなと思っています。

それではまた。

electron-vueでマークダウンエディターを作ってみた。

2020-05-10T20:43:39+09:00

はい、タイトルのまんまです。

先ほど、オーディオプレイヤー作ってまたかと言われそうですが、とりあえず書いていきます。
(開発順的にはこっちが先)

完成品

フルスクリーンモード

環境

Mac Book Pro (Catalina)
Node.js(v12.16.1)
vue-cli(3系)

ドキュメント: electron-vue 日本語
 ドキュメント: electron

先ほどと変わってないですね(^^;

使用したモジュール

BootStrap4
markdown-it-vue
fs(Node.jsに最初から組み込まれている)

仕様など

プレビューと入力エリアのスクロール同期、保存済みファイルの(差分検知後10~20sの)
オートセーブなど、最低限マークダウンエディターに必要なものは、追加しました。

それに加えて、Ctrl + S などデスクトップアプリならではの、ショートカットも実装し、Qiitaのスライドモード(---や***でsplitしてスライド用の配列を作る)のようなものも作成しました。

また、デスクトップである利点を生かして、フルスクリーン表示で共有できたら良いと思いwebkitのフルスクリーンの処理について調べて、実装してみました。
(electronは、Chromiumベースなので、どのOSの特殊な処理でもWebKitだけカバー、もしくは、Chromeを想定して開発すればいいのも利点?)

振り返り

今後の改良では、使用者がトークンを設定して、QiitaやmicroCMSに気軽に投稿しやすくなる機能も作成したいと思っています。

また、fsモジュールの書き方が少し読みにくいので、もう少し、node.jsのコアな機能について学ぶ必要があると感じました。

その他、electronに触れたことで、細かいブラウザのレンダリングエンジンや、JavaScriptのエンジンなど、単なるウェブ開発を少し超えたところの歴史や文化にも興味を持てたのは良かったと思います。

最近だと、Chromium版のedgeなどでChromiumが使われる機会が増えているので、今後どんな発展をしていくか、またそれらに対してユーザー、エンジニアの両面の立場から関わって行けることに楽しさを感じている今日この頃です。

electron-vueでオーディオプレイヤーを作ってみた

2020-05-10T17:41:44+09:00

Electron-Vueについて

なにそれ

electronというフロントエンド技術で、デスクトップアプリを作れるフレームワークがあり
それをvueで記述してビルドできるようにしてくれたもの(+ cliによる雛形作成)

(electronが使われている例: Atom、VScode、SlackとDiscordのデスクトップ版など)

環境

Mac Book Pro (Catalina)
Node.js(v12.16.1)
vue-cli(3系)

ドキュメント: electron-vue 日本語
 ドキュメント: electron

始め方

vue init simulatedgreg/electron-vue　プロジェクト名
で対話形式で、勝手にプロジェクトが出来上がるので、src/renderer以下にゴリゴリとコンポーネントを書く。

※ 灰色はテストで使用した音源[DOVA-SYNDROME]

mainは、主にウィンドウ関連の設定や開発時のプレビューの設定などが入っている。
rendererが主にいじる部分で、vuex、vue-ruterなどは普通のvueと同じ感覚で書くことができる。

詰まったところ

multispinnerがメンテされてない(githubのセキュリティ警告を気にする人)
listrを使おう
こちらを~~パクッ~~参考に作ったものelectron-vue build設定

(※node-multispinnerは最後の更新が4~5年前になっている。)
Mac系でプレビューもビルドも失敗する。
index.ejsのif (!process.browser) {を
if (!htmlWebpackPlugin.options.isBrowser && !htmlWebpackPlugin.options.isDevelopment) {に書き換え

それ以外は、ドキュメント通りにやればプレビューが見れるはず?

オーディオプレイヤーについて

完成品

※現物のサイズはこちら

使用したモジュール

electron-vue
JsMediaTags

仕様など

基本的には、JavaScriptのAudioオブジェクトを利用して曲の再生、停止を制御しています。
アーティストや曲のアートワークは、JsMediaTagsというものを利用して、トラックが遷移するたびに、ファイルパスを渡して穿り出すという形にしています。
設定はLocalStrageを使用して行う予定(開発中)

反省

vuexの使い方も含めて、課題が色々残っていますが、electron、vue, electron-vueそれぞれのドキュメントを行ったり来たりしながら、自分なりに動けたところは、良かったかなと思っています。

最後に

今後もこまめに成果物を公開していくので、コメント、マサカリなど色々ください〜

Canvasのライブラリ「Konva.js」でOGP生成(Nuxtアプリ)

2020-05-06T15:52:28+09:00

Nuxt.jsとFirebaseで作っていたWebサービスを7月末にリリースして、はや10ヶ月。。
登録総額1億円を突破したので、記念企画として積読レビュー機能をリリースしました!!

そこでKonva.jsというライブラリを使ってOGP画像を生成したので、
その時に調べたことをまとめてみました。

積読・読書前でも書ける『積読レビュー』

読書のレビューというと、読書後の感想を書くものですが、
積ん読が多いとなかなか書く機会がないです。。

「感想は読書後だけではないのでは？」
ということで、読書前でも書けるレビューを2つ用意してみました。

妄想で書く『妄想レビュー』

まだ読んでないけど、本の表紙や帯の印象から妄想で書いてみる『妄想レビュー』

「中身じゃなく外観だけで、読書後のレビューを書いてみるとどうだろう。。？」
というネタ的なレビューです。

いかに読んでる醸し出せるかをチャレンジしてみるとおもしろいかも(´ω｀)

他の使い方としては、読む前に書いておいて、読んだ後との感想を比較してみるのもたのしいかも？
読書前後で感想が同じになっても違っていても、新たな発見があるかもです。

きっかけを書く『きっかけレビュー』

買ったときのきっかけや意気込み・ワクワク感を書いてみる『きっかけレビュー』

「『なぜ買うのか、どうして買いたいのか』という気持ちを残しておくのもどうだろう。。？」
と思いつきつくってみました。

買ったときの気持ちも大事で、
* 技術書やビジネス書なら「こうなりたい！ここを強くしたい！」
* 小説やマンガなら「ひさびさの新刊！たのしみ！」
という思いがあるはず・・

それを記録として残しておくと、いつか見返したときにたのしいかもしれません。

なぜKonva.js？

この企画では、本を選んで、レビューを書いていくのですが、
本の表紙など画像を埋め込む必要があります。

以前、別のサービスで、SVGでOGP用の画像を生成してみたのですが、端末によってはうまくいかなかったりと、画像を埋め込むのがかなり大変でした。。

なので、SVGではなく、Canvasで試してみようと調べたところ、
Konva.jsとFabric.jsが見つけ、
文字の折返しなどのガイドがあったKonva.jsを選んでみました。

$ npm install vue-konva konva --save

今回は、Nuxt/Vueで使うので、KonvaのVueライブラリ(vue-konva)もインストール

プラグインの作成

vue-konvaを使えるようプラグインを作成。

// ~/plugins/vue-konva.ts
import Vue from "vue";
import VueKonva from "vue-konva";

Vue.use(VueKonva);

そして、作ったプラグインをnuxt.config.tsに追加。

// nuxt.config.js
import { Configuration } from "@nuxt/types";

const config: Configuration = {
  mode: "spa",
  // 略

  plugins: [
    { src: "~/plugins/vue-konva", ssr: false },
    // 略
  ],

  // 略
};

これで準備はOK

位置やサイズ、表示する画像は:configを介して、Kanva.js自体の設定値を付与していく。

どんな設定値があるかは、ApiDocを見ていく感じで、
Imageだとここ(Class: Image)をみる

チュートリアルもあるので、それを見つつ、
具体的な設定値はApiDoc参照という流れで進めた。

画像の表示には読み込みが必要

画像の表示は少しめんどくさくて、

HTMLImageElementをつくって
HTMLImageElementで画像をロードして
ロード後のHTMLImageElementをconfigに設定

という流れ。。

それをしているのがこのあたり。
画像読み込みは何度も使うけど、Promiseじゃないので、
ロードが終わったらHTMLImageElementを返す処理を共通化

async mounted() {
  // マウントされたら、背景画像を読み込んで設定する
  this.setupBg().then();
}

// 背景画像の設定
private async setupBg() {
  const image = await this.getImage("/img/review_paple.png");
  this.configBg.image = image;
}

// 共通処理: 画像の読み込み
private async getImage(src: string): Promise {
  return new Promise((resolve, reject) => {
    const image = new window.Image();
    image.onload = () => resolve(image);
    image.src = src;
  });
}

これでできるのがこんな感じ。

でかい。。
CanvasのサイズをOGP画像のサイズ(1200x630)にしているもんね。。

画像を画面サイズにあわせる

ほんとはこんな感じにしたい。。

ので、Windowサイズの変更を検知して、CSSのscaleで調整してみる。

こんな感じ。

これでOK。Konva.jsの話に戻る

画像を加工する(サイズ変更)

次は書影を読み込んで、配置する部分。
書影は本ごとにサイズが違うので、加工が必要。。

こんな感じ。切り取りは、v-imageのcropを指定すればOK。

ここで若干ハマった。。

【ハマり1】cropとscaleを同時に指定するとうまくいかない。。

サイズを調整しようと、いろいろしていたときに、
スケールを変化させるscaleと切り取り処理のcropを同時に指定してみたけど、
あまりうまくいかず、cropのみで対応した。。

【ハマり2】computedだとうまくいかない。。

最初は、以下のような感じで、computedにしてたけど、
cropなど、配下のobjectが変わっても変更が反映されなかったので、
dataのconfigBookImgを用意する形にしてみた。

get configBookImg() {
  // 画像の読み込み
  const imageBook = await this.getImage("/img/notfound_paple.png");

  // v-imageのconfig
  const scale = BOOK_IMAGE_WIDTH / imageBook.width;
  return {
    image: imageBook,
    x: 48,  // 左上からの位置(x)
    y: 112, // 左上からの位置(y)
    width: BOOK_IMAGE_WIDTH,   // 画像のサイズ(横)
    height: BOOK_IMAGE_HEIGHT, // 画像のサイズ(縦)
    crop: {  // 切り取り処理
      x: 0,  // 切り取り位置(x)
      y: 0,　// 切り取り位置(y)
      width: imageBook.width,           // 切り取りサイズ(横)
      height: BOOK_IMAGE_HEIGHT / scale // 切り取りサイズ(縦)
    }
  };
}

画像を加工する(丸く切り取る)

次はこれ。ユーザのアイコン画像。

もともとは、こんな四角い画像だけど、アイコンっぽく丸く切り取りたい。

チュートリアルを見てみると、v-groupを使うとできるっぽい。

v-groupのclipFuncを使うと、Canvaを操作できるようで、
CanvasRenderingContext2Dのarcを使って、丸く切り取り。

注意点は、原点がCanvas(v-stage)の左上であること。
画像の左上が原点だと思っていたので、全然切り取られなかった。。

1行の文字を表示する(省略あり)

画像はここまで。次は文字。本のタイトルを表示したい。

文字を表示するには、v-textを使えばOK

CSSのtext-overflowと同じ感じで、折返しをnoneにすれば、省略記号の表示もできる。

複数行の文字を表示する(省略不可)

次はレビューの文字を表示。

同じくv-textを使う感じ。
wrapを指定しなければ、そのまま複数行に。

改行文字を入れれば改行もしてくれて、widthを指定すれば折返しも自動。

ただ、残念ながら、-webkit-line-clampみたいに複数行の省略はないみたい。。

Canvasを画像にエクスポート

最後に作った画像をエクスポート!!

こんな感じ。Konvaでエクスポートするときには、v-stageから取得する。
DataURL以外にJSONとかでもエクスポートできるので、保存したりもOK

HTML5 Canvas Stage Data URL Tutorial | Konva - JavaScript 2d canvas library

開発しているサービスでは、FirebaseのCloud Storageに保存しているので、DataURL形式でOK。

ハマリポイントは、外部URLの画像を使っているとき。。エクスポートに失敗する。。
Cavans自体の仕様で外部URLの画像がある場合、汚染されたとみなされエラーになるとのこと。。

対処法は以下に書かれている感じで、CORS対応をすればOK
・Resolving "Tainted canvases may not be exported" with Konva | Konva - JavaScript 2d canvas library

おわり

SVGでも外部URLは問題があったけど、Konva.jsでも。。
でも、サクサクできたのと、ドラッグで位置を変えれるみたいなので、いろいろできそう(´ω｀)

積ん読レビューはできたての機能なので、ぜひぜひさわってみてくださいヽ(=´▽`=)ﾉ
■どっちでレビューする？妄想レビュ・きっかけレビュー

Vue/Nuxtのアニメーションするときに参考にしたところ

2020-02-19T19:58:48+09:00

VueとNuxtでアニメーションをするときに調べたところのまとめ。
公式サイトを読みながら、関連するとこをまとめた感じの備忘録。

トランジションクラスってのがあるらしい

参考: Enter/Leave とトランジション一覧 — Vue.js

で囲むと、いくつかのクラスを生成してくれるらしい。
そのクラスに対して、

CSSトランジションやアニメーションをつけたり、
Animate.css のようなサードパーティの CSS アニメーションライブラリと連携

することで、アニメーションをつけていくぽい。


  hello

v-enter-active ... 表示/挿入のトランジション
- v-enter ... 表示/挿入のトランジションの開始
- v-enter-to ... 表示/挿入のトランジションの終了
v-leave-active ... 非表示/削除のトランジション
- v-leave ... 非表示/削除のトランジションの開始
- v-leave-to ... 非表示/削除のトランジションの終了

refs: トランジションクラス｜ Enter/Leave とトランジション一覧 — Vue.js

にすると、v-の部分がfade-のように指定したクラス名にできる。

CSSトランジション/CSSアニメーション

フェード

.fade-enter-active, .fade-leave-active {
  transition: opacity .5s;
}
.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
  opacity: 0;
}

フェードしながらスライド

/* enter、 leave アニメーションで異なる間隔やタイミング関数を利用することができます */
.slide-fade-enter-active {
  transition: all .3s ease;
}
.slide-fade-leave-active {
  transition: all .8s cubic-bezier(1.0, 0.5, 0.8, 1.0);
}
.slide-fade-enter, .slide-fade-leave-to
/* .slide-fade-leave-active below version 2.1.8 */ {
  transform: translateX(10px);
  opacity: 0;
}

バウンスしてイン

.bounce-enter-active {
  animation: bounce-in .5s;
}
.bounce-leave-active {
  animation: bounce-in .5s reverse;
}
@keyframes bounce-in {
  0% {
    transform: scale(0);
  }
  50% {
    transform: scale(1.5);
  }
  100% {
    transform: scale(1);
  }
}

カスタムトランジションクラスでAnimate.cssと連携する

参考: カスタムトランジションクラス | Enter/Leave とトランジション一覧 — Vue.js

enter-active-classやleave-active-classなどを利用すると、
該当するクラスを指定したものに置き換えることができるらしい。

Animate.cssのクラスを指定すれば、該当のアニメーションを設定できる。

[email protected]" rel="stylesheet" type="text/css">


  
  
    hello

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

参考にしたサイト様

Nuxt.jsで編集中に、ページ移動やページを閉じるときに警告を出すやつ

2020-02-19T19:57:45+09:00

よくある編集中に、ページを離れると、
「編集中のデータが消えちゃうよ」
と教えてしてくれるやつを調べたときの備忘録。

ページを閉じるときに出るこんなのや

戻るや別のページに移動しようとするときに出るこんなの

ソースコード

中身はこんな感じ。Mixinで実装してるけど、pageでもOK。

ページを閉じるときと、ページを移動するときとで処理が異なり、

ページを閉じるとき ... windowのbeforeunloadイベントでハンドリング
ページを移動するとき ... vue-routerのbeforeRouteLeaveでハンドリング

という感じになる。

なにも編集してないときに出るのが嫌なので、
isBlockUnloadというフラグを使って制御できるようにしてる。

import Vue from "vue";
import Component from "vue-class-component";

@Component
export default class BlockUnloadMixin extends Vue {
  // 表示するメッセージ
  protected blockUnloadMessage = "編集した内容が消えちゃうけど、移動する？";
  // アラートを出すかのフラグ
  protected isBlockUnload: boolean = false;

  // ****************************
  // * ページを閉じるときの処理: beforeunloadイベント
  // ****************************
  created() {
    if (process.client) {
      // 作成時にイベントリスナーに登録
      window.addEventListener("beforeunload", this.checkWindow);
    }
  }

  beforeDestroy() {
    // 破棄される前にイベントリスナーから削除
    window.removeEventListener("beforeunload", this.checkWindow);
  }

  // 実際の処理
  protected checkWindow(event: BeforeUnloadEvent) {
    if (!!this.isBlockUnload) {
      // unloadをキャンセルして、メッセージを表示
      event.preventDefault();
      event.returnValue = this.blockUnloadMessage;
    }
  }

  // ****************************
  // * ページを移動するときの処理: v-router
  // ****************************
  beforeRouteLeave(to, from, next) {
    if (!!this.isBlockUnload) {
      // アラートダイアログを表示して、結果に応じて遷移
      const msg = this.blockUnloadMessage;
      const answer = window.confirm(msg);
      next(answer);
    } else {
      // next()は必ず呼び出さないといけない
      next();
    }
  }
}

Mixinsを使う例

使うときはこんな感じ。

以上!!

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

「偏愛マップ」を簡単に作れるWebアプリです!

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

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

好きを集めた自己紹介マップ｜へんあいマップ

参考にしたサイト様

SVGでOGP用のPNG画像を生成してみる(折り返し文字、画像埋め込み、PNG化)

2020-01-24T15:25:45+09:00

SVGでOGP画像を作りたいなと思い、いろいろ調べたときの備忘録。

SVGはまるのも多いけど、いろいろできるので、
SVGからOGP画像をつくるのいいかもしれない。

とりあえず、SVGを書いてみる

ちょろっとなるなら、HTMLでベタ書きしてみるのもいい。
動作確認とか楽ちん。

こんな感じ。

で四角を書いて、で丸を書いてる。

上から順に描画されるので、下にある方が前面にくる感じ。
なので、四角の上に丸が描画されてる。

の座標(x,y)は左上の場所なので、
横幅と縦幅分の半分だけ、全体の中心からずらしてる。

$ npm i sharp

変換するコードはこんな感じ。

// generate.js
const sharp = require("sharp");

async function main() {
  await sharp("sample.svg")
    .png()
    .toFile("output.png");
}

main().then();

そして、実行。

$ node generate.js

すると、output.pngというPNGファイルを作成してくれる。

ただ、svgのstyleは反映してくれないので注意。

// generate.js
const sharp = require("sharp");

async function main() {
  await sharp("sample.svg")
    .png()
    .toFile("output.png");
}

main().then();

背景色をつける場合は、sharp側で設定すればOK

// generate.js
const sharp = require("sharp");

async function main() {
  await sharp("sample.svg")
    .flatten({ background: "lightgray" }) // 背景色
    .png()
    .toFile("output.png");
}

main().then();

2. ブラウザ上のSVGを画像化する

ユーザに情報を入力してもらった内容をSVGで表示して、
OGP画像にするという感じが多いので、こっちがメイン。

保存先のFirebase StorageがData URL形式に対応しているので、
PNGのData URLが取得できればOK。

大まかな流れは、こんな感じ。

Canvasを用意する
SVGを読み込むを用意する
を文字列に変換
作成したにDataURL形式でSVGをセットして、読み込み開始
読み込みが完了したら、Canvasに書き出して
CanvasからDataURLを取得する

// svg2DataURL.ts

/**
 * svgをpngに変換
 * @param svgElement

あとは、好きなタイミングで呼び出せばOK。

Nuxt.jsでの例はこんな感じ。

これでSVGがCloud Storage for FirebaseにPNG画像で保存できる(´ω｀)

ブラウザ上 = 全体のCSSが適用
保存画像 = SVG配下のCSSのみ適用

なので、SVGだけで完結しないといけない...

フォントとかも指定しないと、見た目が変わってしまう。。

3. 背景画像など外部リンクがあるとうまく保存できない...

Canvasの仕様っぽく、外部リンクでCORSで引っかかると画像が表示されないよう...

SVGで完結するように、読み込んだ画像をDataURL形式で指定するようにしたらうまくいった(´ω｀)

「SVGで完結」が大事らしい。。

styleでfont-sizeとかも設定できるのでいろいろできそう(´ω｀)

こんな感じ

ただ、foreignObjectはサイズを自動計算してくれるわけではないので、
widthとheightを設定しないといけない。

画像を表示する(image)

SVGで画像を使うときは、を使う。
とは違う。

こんな感じ。

ハマったポイントにも書いたとおり、このままCanvasに書き出すと、
保存時に画像が表示されないので、動的にDataURLを取得してセットするといい感じ。

URLからDataURLに変換するのは、こんな感じ。

// svg2DataURL.ts

/**
 * URLをDataURLに変換
 * @param 変換したい画像のURL
 */
export default function url2DataURL(
  url: string
): Promise {
  return new Promise((resolve, reject) => {

    // 1. Canvasを用意する
    const canvas = document.createElement("canvas");
    canvas.width = 1200;
    canvas.height = 630;
    const ctx = canvas.getContext("2d");
    if (!ctx) {
      reject(Error("Create Canvas Error..."));
      return;
    }

    // 2. SVGを読み込むを用意する
    const image = new Image();
    image.decoding = "async";
    image.onload = () => {
      // 4. 読み込みが完了したら、Canvasに書き出して、
      ctx.drawImage(image, 0, 0, 1200, 630);
      // 5. CanvasからDataURLを取得する
      resolve(canvas.toDataURL());
    };
    image.onerror = e => reject(e);

    // 3. 作成したにURLでセットして、読み込み開始
    image.src = url;
  });
}

画面サイズに合うように表示する(resize対応)

OGP画像としていい感じのサイズで保存したいけど、
表示するときは画面サイズにあった感じにしたい。。

svgにstyleが使えるので、リサイズ時にスケールを計算して、
transform: scale();で縮小する感じにしてみた。

ただ、このまま保存すると縮小されたままになるので、
deepコピーでクローンして、transformをクリアしてから書き出すようにする。

// svg2DataURL.ts

/**
 * svgをpngに変換
 * @param svgElement

以上!!

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

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

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

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

「Vue」の記事 - Crieit

【個人開発】作るのも、答えるのも簡単なWebアンケート「ankeyto」を作りました！

サブスクの解約忘れ・無駄遣いを防止するサービス「Subreco」を開発して得た3つの学び

【個人開発】踏破した都道府県を日本地図でシェアできるWebサービス「日本踏破図🗾」を作りました

【個人開発】（Nuxt.js + Rails）OSSやプロジェクトの、ソースコードを管理するGitHubのように、web上で結合テストをチームで同時に管理・実行・記録出来るプラットフォームを開発しました！

海外進出を目指して、ProductHuntへ個人開発サービスを投稿するまでにやったこと&やった結果を全面的にシェアする

Github Issuesをキレイに外部公開するサービス「2go」作ってみた

QnQ開発日誌 単体テストなしで大丈夫か？

Vue CLIの環境変数でStylusのグローバル変数を入れ替えるし

Vue.Draggable をスマホでも使う時のアレコレ

【Apache Laravel Vue.js Vuetify】webアプリをスマホに対応させるためにやったこと

Nuxt.jsにlintを導入してみた

大学祭の参加団体向けウェブシステムをOSS化してみた

週末の時間を使って「みんなのきょうしつ」をアップデートしました。

自分の理想の教室を、友達とリアルタイムで一緒に作れるウェブサービス「みんなのきょうしつ」をリリースしました。

QnQ開発日誌単体テストなしで大丈夫か？

Vue.Draggable　をスマホでも使う時のアレコレ