orange_alien(@_orange_alien_)です。プロのITエンジニアではありません。

個人開発でWebサービスを作ったので、サービスの概要や開発時に得た知見などを書いていきます。

作ったWebサービスの概要

Twikmark(ツイックマーク)
https://twikmark.com/
※サービス名の由来は「Twitter」 + 「Bookmark」 = 「Twikmark(ツイックマーク)」です

Twitterのツイートをタグ付きでブックマークすることができます(利用は無料)。
保存したいツイートのURLとタグ(任意)を入力して「ブックマーク」ボタンを押せばブックマーク完了です。

※ツイートURLの取得方法は以下の通り

ブックマークしたツイートはタグで絞り込んで表示できます(ブックマークしたツイートは他のユーザーには見えません)。

利用にはTwitterアカウントによるログインが必要です。
権限は「読み取り専用」なので勝手にツイート・フォロー・DMなどはしません。

作った理由

単純に自分が欲しかったからです。

Twitterを眺めていて面白いツイートやレシピなどを保存しておきたいと思うことは少なくありませんが、Twitterのブックマーク機能だとブックマークしたツイートを「ブックマーク」という1つの箱に入れておくだけなので
件数が増えてくると後から見返すのが大変という問題がありました。

そういった理由により、ツイートにタグを付けてブックマークできれば便利だなと思った次第です。

なお、はてなブックマーク等のサービスを使えばツイートをタグ付きでブックマークすることは可能ですが、個人的には、はてブは気になったニュース記事にブコメをしたり他人のブコメを眺めるためのサービスという認識なのではてブでツイートを保存するという選択肢はありませんでした。

使った技術・ツールなど

Laravel
PHP
MySQL
HTML / CSS / Javascript / jQury
GitHub

特に珍しいことや変わったことはしていません。
プログラミングが得意な中学生や高校生に「Twikmarkと全く同じものを作れ」という課題を出したら余裕で作れると思います。

開発で得た知見など

自分が欲しいものを作って正解だった

開発中は常に「完成した後に使ってくれる人はいるのだろうか？」とか「こんなサービスを作って役に立つのだろうか？」とか色々と考えたりしてしまいましたが、最終的には「誰も使わなくても自分が使うから良いか！」という感じで開発のモチベーションを保てました。

逆に「自分は使わない(= 誰かに使ってもらうためだけの)サービス」を作っていたとしたら、「他人が使ってくれるのか？」・「他人に評価されるのか？」という不確定要素がモチベーションの源となってしまうため開発を継続するのは結構しんどかったと思います。

あと、Webサービスは公開して終了ではなくメンテナンスや機能追加などがあるので、自分が使うサービスだと公開後のモチベーション維持もしやすいはずです。

完成形を明確にイメージしてから取り掛かるべきだった

開発に取り掛かった時点で「Twitterのツイートをタグ付きでブックマークする」という概要は決まっていましたが
画面レイアウトなどはほとんど決めていませんでした。
そのせいで開発中に「これはなんか違うな・・・」とメニュー・フォーム・ボタン等のデザインや位置などの修正を何度も繰り返すことになり、無駄に手間と時間がかかってしまいました。

最低でも開発を始める前に紙とペンを使って画面レイアウトをある程度決めておいた方がスムーズに開発できると思いました。

他サービスの良いところを参考にして省力化

https://twikmark.com/

のトップページの入力フォームは

https://tweetsave.com/
(ツイートの魚拓サービス)

を参考にしました(パクりました)。

サービス内容こそ「魚拓」と「ブックマーク」で異なりますが、ツイートURLからツイートを取得するという部分は同じなので、そのまま使えると考えました。

完成形(ツイートURLのフォームとボタン)が分かっていると開発がスムーズに進んで省力化に繋がります。

使える機能を使って省力化

https://twikmark.com/では、ブックマークしたツイートの表示にTwitterの「埋め込みコード」を使用しています(TwitterのAPIで取得)。

TwitterのAPIには埋め込みコードではなくツイートそのもの(本文・リンク・画像などを含む)を取得するAPIもあるのですが、取得したツイートはDisplay requirementsに従ってレイアウトを整えて表示しないといけないため結構大変です。

一方で、埋め込みツイートなら取得したコードを貼り付けるだけでレイアウトが整うのでお手軽です。
埋め込みコードのおかげでレイアウトを整える作業がなくなったのはもちろん、DBの構造も単純になって開発が非常に楽になりました。

不要な機能は削る

https://twikmark.com/ではタグでツイートを絞り込むことができますが、開発中は「ツイートを投稿したユーザー」でツイートを絞り込む機能もありました(@orange_alienなどの"screen_name"で絞り込む機能でした)。

しかし、大量のブックマークを行うと「並んだscreen_nameを見ても誰がどのユーザーなのかが全く分からない」という問題が判明したため、「ツイートを投稿したユーザー」でツイートを絞り込む機能は削除しました。

「せっかく作った機能を削除するのはもったいないな・・・」とも思いましたが、使えない機能があっても仕方ありません。
機能が減るとソースコードも減って管理しやすくなるのでメリットも大きいです。

今後の予定

一度登録したタグを削除・編集する機能がないので、それを作る予定です。
(ツイートに紐付けしたタグを付け替えることは可能です。現状ないのは「タグそのものを削除・編集する機能」です)

全Twitterユーザーに刺さるサービス内容だと考えているので、英語対応もしたいです。

最後に

Twitterのブックマーク機能に不満がある方はhttps://twikmark.com/を是非一度使ってみて下さい。
気に入らなければ退会も簡単です。