「Twitter」の記事 - Crieit

個人開発でTwitter広告を使っていい感じになった例

2023-06-01T15:35:19+09:00

時々Twitter広告を使ってみたけど全然だった、という話をよく見ますが、最近僕も使っていてなんとなくいい感じに運用できている気がするので紹介します。とにかく、Twitter広告は超おすすめなサービスだと思っています。

Twitter広告を使ってるサービス

AIバトラーというChatGPTのAI審判がバトルを判定してくれる異能力バトルゲームを運営しているのですが、そちらの集客のため利用しています。

何がそんなにおすすめなのか

Twitter広告は他の広告サービスと異なるところがあります。それは…、そう、広告がツイートなのです！

つまり、広告が表示され、それをユーザーがクリックして流入を得ることができるだけでなく、いいねやRTによってさらに集客力が加速するのです。しかもその場合、どうもクリック単価が安くなるっぽいのです。実際どうなのかはわかりませんが、もしかしたら広告として表示した場合以外のクリックには料金がかからないのかもしれません。

実際どうなのかぼくもあまり良く仕組みはわかっていません。ただ、広告を始めたばかりの頃はクリック単価100円とか200円とかかかっていました。１日1000円の予算でやっているので、4,5回クリックされたらもうそれで終わりです。一瞬で1000円が溶けます。月あたり3万円です。

ところが今はクリック単価数円です。1000円で流入が当時の100倍くらいになっています。

どの広告サービスも予算内でなるべく多くの流入になるよう徐々に調整してくれます。Twitter広告はその効果が半端ないのです。続ければ続けるほど効率がと効果が上がっていきます。

とにかく、自分で育てていく広告サービス、とでもいうのでしょうか。僕もみんなの体験談や、時々5000円くらい使って試した経験からTwitter広告はむちゃくちゃ高い、という印象しかなかったのですが、今回じっくり使ってみて完全にその印象はくつがえりました。やばいサービスです。

コツ

だからこそ色々とコツはある気がします。適当な広告を出していても多分うまく行かないパターンはあると思います。

興味を引きやすい広告にする

これはどの広告サービスを使う場合も同じだと思いますが、特にTwitter広告の場合はいいねやRTしてもらいやすそうな、Twitterで過ごしているユーザーの興味を引くようなツイートを作りましょう。

例えばすごい！　と思うような動画や画像をつけることも良いですし、面白いツイートの内容でも良いと思います。僕の場合は完全にChatGPTの流行りに乗った感じです。

ターゲッティングを調整する

Twitter広告を始めてみるとわかりますが、かなりターゲッティング方法がバラエティに富んでいます。例えば下記のような基本的な項目。

性別
年齢
居住地
Android、iOS
ユーザーの興味関心

その他にも特定の機種、キーワード、面白いのがフォロワーが似ているアカウント、というもので、あるTwitterアカウントを指定するとそのユーザーのフォロワーに似ている人がターゲッティングされます。僕もAIやChatGPTについてよく発信している人をターゲッティングしています。（あわよくばそのインフルエンサーに届いて利用してもらえたらいいなとかも思いました）

とにかく一度この辺は試してみると面白いです。

その他、場所としても検索結果に表示するなどの設定もあったりします。なのでこのターゲッティング方法を逆に利用して宣伝しやすいサービスを作ってみる、というのも面白いかもしれません。逆に言うと、サービスを作る上でどうやって集客を行うか？　このあたりの知識を深めるためにも一度やってみるのがおすすめです。集客方法を知らないのにむやみにサービスを作っても利用してもらえなければ悲しいです。

そもそも個人開発サービスで広告使うのってどうなの？

どう思われますか？　僕は以前は微妙だな…と思っていました。やはりお金がかかって大変だし、可能であればうまいことやってバズらせて無料でガンガン集客できる方法を編み出して集客したい、と思っていました。売れてるサービス開発者のようにかっこよくサービスを流行らせたいです。

でも実際やってみて、それはほとんど絵空事であると思っています。もちろんそのやり方でうまくいく場合もあると思いますが、稀です。たとえたまたまTwitterでバズってむちゃくちゃいいね＆RTされたとしても、その後うまく運用できなければ一瞬輝いたようにみえるだけど終わってしまうサービスもいくつもあったと思います。うまくいった人はうまくいったとそれを正解のように言いますが、じゃあ全部うまくいくかというとそうではありません。その人達も色々やって、うまくいくものもいかないものもあるのです。（もちろんうまくいくものをそうやって作れる人はそれなりに確率をあげる方法を知っているので間違いということもありません）

まず自分はちっぽけな存在であることを認識する必要があります。自分はそんな世の中に影響力を持った人間ではありません。何もせずにガンガンサービスを使ってもらうことなんてできません。

じゃあどうやってサービスを使ってもらうのか？　やはり行き着くところは広告です。

そもそも個人開発サービスでうまく行かない理由の一つに、自分のサービスを使いたいと思うであろうユーザーに届かないということなのです。サービス集客のためにTwitterのフォロワーを増やすとかみんなやると思いますが、それではユーザーには届きません。自分をフォローしてくれている人にしか届かないのです。Twitterのつながりは、サービス開発者とユーザーとの関係では無いのです。ぶっちゃけ意味がありません。

広告はその問題を解決してくれます。設定により、ダイレクトに自分のサービスをユーザーに届けることができます。しかも流行り廃り関係なく、利用していればいつでも届けてくれます。この効果はとても大きく重要なものです。

利用するときのコツ

とはいえ広告です。お金がかかります。大事なことは 広告利用料金 < 収益 を目指すことです。これができなければひたすら赤字のため意味がありません。つまり、収益化する方法がある、というのは大前提になります。収益化する方法が無いのに広告で集客してもひたすらお金を捨てるだけです。

ちなみにこれはすぐに達成できなくても構いません。例えばですが、リリース当初 広告利用料金 > サブスクリプション収益 となってしまっていても、毎月の解約率が100%でないかぎり、いつか逆転する可能性があります。そこまで含めて計算しましょう。とはいえ、情勢や見込みユーザーの現象により必ずしもサブスクリプション契約数が毎月同じだけ増えるとは限りません。最近これくらいのスピードで成長してるからだいたいこれくらいには達成できるだろう…という計算はよく裏切られます。その場合は達成できなくなる可能性があります。広告を使う以上、続けるか、終わるか、判断を迫られる時もいつかは来ます。

僕のサービスもOpenAIのAPIをつかっているので突然諸々の収益方法が停止されられたりしたらひたすら広告費も含めた経費だけが膨れていくため、すぐに停止しないと大変なことになります。そういったことも想像しておくことが必要です。

お金を使って貰う場合は買い切りとサブスクリプションがありますが、これはどちらでも良いと思います。ただ、買い切りの場合はサブスクリプションと違って自動的に継続はされないので、何度も購入してもらえる魅力的な商品を売ってファンになってもらう必要はあると思います。リピーターになってくれる人がほとんどいない買い切りサービスなどは運営は厳しいのではないかと思います（もちろんそれでも収益のほうが高い状態を維持できるのであれば問題ないかもしれませんが）

とにかく、毎月しっかり計算をしましょう。

まとめ

Twitter広告ほんと最高でおすすめです。おじいちゃんになっても使い続けたいサービスです。

…とはいえやっぱ最初は高いし実際どうなるかやってみるまでわからないので新しい広告を作る時は怖いと思います。

また、途中も色々書きましたがうまく行かないパターンも多いと思います。その場合は最悪の場合サービスを止めたり終了する勇気も必要です。

「引用」をいい感じに展開してくれるサービス「inyoo.jp」をリリースしました

2022-01-17T18:28:45+09:00

inyoo.jp は「引用」をいい感じに展開してくれる短縮 URL サービスです。

ウェブの記事などを読んでいて、文章の一部を SNS に「引用」をしたくなったとき、該当箇所を選択して右クリックから「選択箇所へのリンクをコピー」して、

このリンクの URL を inyoo.jp のトップページのフォームに貼り付けて「引用を作成」を押します。

作成された「引用」を Twitter や Facebook などにシェアすると、こんな感じで引用部分のテキストが画像でいい感じに展開されます！

ちなみにこのリンクは開くとページが自動的にスクロールされて、引用の該当箇所がハイライトされるようになっています。説明を読んだだけだと何がなんだか分からないかなと思いますので、ぜひ試しに使ってみてくださいね！

また、Google Chrome 以外のブラウザや、スマートフォンからの利用方法など、詳しい使い方はトップページの「使い方」に詳しく書いてありますので、そちらをご参照ください。

ここまで読んでくれた方へ

ぜひ試しに inyoo.jp を使ってみてください！！

ご意見や不具合の報告、フィードバックや改善の要望など、何かありましたら Twitter で @inyoo_jp までメンションか DM をお願いします！また、いいねやコメント、SNS での共有などをしていただけると今後の励みになります。

よろしくお願いします！！！

【Twitter連携サービス】連続ツイートをスレッドまるごとダウンロードできるWebサービスを公開しました

2021-11-26T13:02:23+09:00

Twitterを見ていると、とても参考になる連続ツイートをしている人がいらっしゃいます。

私はそういうツイートを見つけるとブックマークしておき、後でいつでも見返せるようにしていました。

ただ、そういう有益なツイートも、もしツイートしたご本人がツイ消ししたり、アカウント自体が消えてしまったりすると 後で見れなくなってしまいます。

そこで、連続ツイートをWordファイルとしてダウンロードしておけるWebサービス を開発いたしました。

「ツイスレバックアップ」 というサービスです。
https://twibackup.com/

作ったきっかけ

個人開発者界隈で有名（と私は勝手に思ってる）な方が、先日個人開発について参考になる連続ツイートをされていました。

https://twitter.com/sesere115/status/1459167602094133254

「ヒトリッター」というサービスを土日に開発しながら、サービスをリリースしていく中で考えるべきことを連続ツイートする内容です。

定期的に読み返したいような内容だったのですが、ふと「もしせせりさんがツイ消ししたら見れなくなるよな…」「念のため手元にずっと残しておきたいな」と思いました。

そこで、連続ツイートをスレッドまるごとダウンロードする、つまり手元にバックアップしておくためのサービス「ツイスレバックアップ」を開発しようと思い立ちました。
（※せせりさんはよくツイ消しする人、という意味ではありません。）

なぜWordファイル？

PDFファイルでのダウンロードも考えたのですが、以下の理由によりWordファイルでのダウンロードにしました。

画像もWordファイル内に入れ込めるので便利。（これはPDFでも出来ますが）
あとで自分でメモを追記できる方が便利。（PDFだとメモしずらい）
なんならそのままマニュアル化しても良い。

このサービスを使うと何が嬉しい？

このサービスを使うと、やはり一番は 「いつ連続ツイートが消える（見れなくなる）か分からない不安」 から開放されるのが嬉しいですね。
自分で開発して、自分で使ってます笑

あと、Wordファイルでダウンロードしておけば仲間内での共有等も格段にしやすくなりますね。

今後の展開

今後はPDFファイルでのダウンロード等、ニーズに合わせて機能追加していきたいと思います。

なにか欲しい機能があれば教えてください！

WEB版Twitterの色を元に戻すぞ

2021-08-14T13:55:16+09:00

Twitterの仕様がまた変更されました。個人的には頻繁に仕様を変えて色々とっかえひっかえ試していき、より良いものを追求するという姿勢自体には賛成ですが、今回の仕様変更はちょっと困るなあ、という感じです。

今回の仕様変更は配色の変更です。これはとても困ります。特に白と黒逆やろ！と思います。絶対間違えて誤フォローや誤フォロー解除が発生しまくるでしょう。なので、私の環境ではWEB版だけでも戻します。内容としてはWEB版Twitterのトレンドとかトピックを非表示にすると同じようなことをします。

使うのはStylebotという拡張機能。分かる人向けに書くと、サイトごとに独自のCSSを記述して上書きして見た目を好きなように変更したり、見たくない要素を非表示にしたりできるというものです。

Chromeの拡張機能ですが、対応するブラウザで使えます。私の場合はBraveというブラウザでも問題なく使用できています。Braveに関して興味があればメインブラウザをChromeからBraveに変えた話をご覧ください。

Stylebotで以下のコードを貼り付けてください。色は好みに合わせて自由にカスタマイズできます。詳しくはHTMLカラーコードなどでググってください。

/* フォロー中の背景色 */
div.css-18t94o4.css-1dbjc4n.r-1niwhzg.r-1ccsd61.r-sdzlij.r-1phboty.r-rs99b7.r-15ysp7h.r-4wgw6l.r-1ny4l3l.r-ymttw5.r-o7ynqc.r-6416eg.r-lrvibr {
    background-color: #09f;
}

/* 保存の背景色 */
div.css-18t94o4.css-1dbjc4n.r-14lw9ot.r-42olwf.r-sdzlij.r-1phboty.r-rs99b7.r-16y2uox.r-6gpygo.r-1b7u577.r-peo1c.r-1ps3wis.r-1ny4l3l.r-1udh08x.r-1guathk.r-1udbk01.r-o7ynqc.r-6416eg.r-lrvibr.r-3s2u2q.r-1glkqn6 {
    background-color: #09f;
}

/* 保存の文字色 */
div.css-18t94o4.css-1dbjc4n.r-14lw9ot.r-42olwf.r-sdzlij.r-1phboty.r-rs99b7.r-16y2uox.r-6gpygo.r-1b7u577.r-peo1c.r-1ps3wis.r-1ny4l3l.r-1udh08x.r-1guathk.r-1udbk01.r-o7ynqc.r-6416eg.r-lrvibr.r-3s2u2q.r-1glkqn6 div {
    color: white
}

/* 未フォローの背景色 */
div.css-18t94o4.css-1dbjc4n.r-14lw9ot.r-42olwf.r-sdzlij.r-1phboty.r-rs99b7.r-15ysp7h.r-4wgw6l.r-1ny4l3l.r-ymttw5.r-o7ynqc.r-6416eg.r-lrvibr {
    background-color: transparent;
    border: solid 2px white;
}

 /* 未フォローの文字色 */
div.css-18t94o4.css-1dbjc4n.r-14lw9ot.r-42olwf.r-sdzlij.r-1phboty.r-rs99b7.r-15ysp7h.r-4wgw6l.r-1ny4l3l.r-ymttw5.r-o7ynqc.r-6416eg.r-lrvibr div{
    color: white;
}

今回行ったのは、開発者モードで該当の要素を見つけ出してStylebotで設定の付与です。Stylebotでも要素選択は可能なのですが、開発者モードで行った方が小回りがきいてやりやすいです。

本来は共通クラスのみ抜き出して少ない記述でやりたかったのですが、あまりにも面倒くさくてベタ書きしました。

上記コードはTwiterの仕様変更で無効になる可能性がありますが、その時はまた同じことをすればいいです。

それでは素敵なTwitterライフを！

TwitterのツイートログをEvernote経由でObsidianに落とし込んでいる手順

2021-05-08T00:09:10+09:00

やりたいことはつまりTwitterのログをObsidianで保存したいということなのだが、なぜEvernoteを経由という無駄っぽいことをしているかと言えば、元々Evernoteでツイートを管理していたからだ。個人的にはもはやEvernoteを使うことはなく、以前のログ置き場にしかなっていない。元々のやり方を踏襲しているのでEvernoteを経由しているだけで、別にEvernoteを経由する意味は本質的にない。

が、さすがに老舗のサービスだけあって、連携したサービスやソフトも多くあるので、それらを使うことで、プログラミングをすることなく、TwitterのログをObsidianに保存するという目的は達成できたので、とりあえず今はそのようにしている。この記事は、その手順のメモである。そのうちにはEvernote部分を取っ払いたい。

ツイエバでTwitter→Evernote

まずTwitter→Evernoteだが、これは「ツイエバ – TwitterのツイートやメンションをEvernoteとEmailへ」のサービスを利用している。

なぜツイエバを使っているのかと言えば、もともとEvernoteに情報を集約させていたからだ。しかし、昨今あまりにもEvernoteが使いづらくなり、先行きも不安しかなく、正直もはやEvernoteを経由する意味はない。

まぁでも、老舗なだけあってなお種々のサービスとの連携があるのは強みかもしれない。

evernote2mdでEvernote→Obsidian

さて、問題はEvernoteからどうやってObsidianにするか。だが、これはつまりEvernoteのノートをいかにしてmarkdown形式に変換するか、という問いに等しい。

まずEvernoteのノートをローカルに落とすには、Evernoteのデスクトップアプリで、普通に「エクスポート」を使って.enex形式で落とせば良い。いつの間にか、50個までしかまとめてエクスポートできなくなっていた……そういうことするから、みんな離れていくんやで……。

問題は.enexをどうやって.mdに変換するかだが。

これはGitHubで公開されている「wormi4ok/evernote2md: Convert Evernote .enex files to Markdown」がもっとも楽だと思う。

インストールはREADME.mdにあるとおり、Macなら

brew install evernote2md

でOK。

で、使い方は、以下。

evernote2md <エクスポートした.enex>

これを実行すると、notesディレクトリができていて、その下にmd形式に変換されたノートがある。あとは、これをObsidianのユーザーディレクトリ下に打ち込むだけ。

これでけっこううまいこと変換される。

うん。満足。

着々とEvernoteからの乗り換えが進む

既にメモ用途としてはほとんどObsidianにうつっている。

Web Clipさえも、最近はnoteを使っているが、しかしWeb Clip、なんだかもう使わなくなっちゃったな……。

Evernote、もうダメかもなぁ。昨年末の大改造は大不評だった。みんな、課金体系とかじゃなくて、アプリの安定性や機能に文句を言っていた。僕もそう。

以前はプレミアム会員だったこともあるのだけれどね。。。

WEB版Twitterのトレンドとかトピックを非表示にする

2021-04-18T21:20:18+09:00

TwitterのWEB版では、右側に「いまどうしてる？」(トレンド)や「おすすめユーザー」「おすすめトピック」などが表示されています。

トレンドはともかく、トピックに関しては全然使っていないのでハッキリいって邪魔なんですよね。そもそも機能として不要と思うのですが、それに加えてフォローしていないトピックも突然TLに出てきて本当に邪魔です。不必要な情報が視界に入るとイライラするので消してしまいます。

今回はGoogle Chromeで拡張機能を使用しますが、Microsoft EdgeやFirefoxなどもChromeの拡張機能を使用できるので、同じ方法で対応できます。

使用する拡張機能は「Stylebot」という拡張機能です。

手順は次の通りです。

拡張機能「Stylebot」をインストール
非表示にしたい部分を選択して非表示設定

簡単ですね。

まずは、こちらからアクセスし、「Chromeに追加」をクリックして有効化してください。

次に、Twitterを開いて、拡張機能より「Stylebot」を開きます。

すると、次のような画面が開きます。

非表示にしたい項目を選択して、「レイアウト」の「隠す」を選択します。

選択した「いまどうしてる？」が非表示になりました。

同様に他の項目を選択すると、スッキリしました。

この「Stylebot」は他にも文字の色などもカスタマイズすることができます。自分好みのTwitter環境にして、素敵なツイ廃ライフをどうぞ！

ちなみに、手っ取り早く「いまどうしてる？」「おすすめユーザー」「おすすめトピック」を非表示にする場合、「Stylebot」の下の<> コードのところに以下をコピペしてください。

なお、Twitterの仕様などにより無効になったりレイアウトが崩れたりする可能性があります。

.css-1dbjc4n.r-1ysxnx4.r-k0dy70.r-1867qdf.r-1phboty.r-rs99b7.r-1ifxtd0.r-1udh08x {
  display: none;
}

Windowsでスクショをツイートする個人的に楽な方法

2020-09-24T09:55:18+09:00

普段何気なく行っていましたが、WindowsでスクショをとってTwitterやSlackに画像を投稿するので一番簡単で慣れている方法があるのでせっかくなので共有してみます。ちなみにこの記事にも同様の方法で貼っています。

追記

この記事を書いた後にWin＋Shift＋Sを教えてもらいました。とても簡単でおすすめです！

おわり

スクショをとる

まずはスクショキーを無心でポチッと押してスクショを取ります。

ペイント3Dで切り取る

加工はペイント3Dで行います。

ペイント3Dを開く

ペイント3Dをちゃちゃっと開きます。しょっちゅう使うのでタスクバーかスタートメニューに登録しておくと楽です。

貼り付ける

開いたらそのままCtrl+Vで貼り付けます。

範囲指定する

トリミングしたい部分を範囲指定します。貼り付けた状態ですでに全体が範囲指定されているので、一旦画像の外をクリックして範囲を解除してから範囲指定します。

あとはトリミングボタンを押すとトリミングされます。

トリミングできました。

一応キャンバスボタンでサイズを見てみます。

ちょっと大きすぎるので横幅600くらいまで縮小しても良いかもしれません。Ctrl+Aで全体選択し、Shiftを押しながらサイズ調整すると縦横比を維持したままリサイズできます。リサイズ後は再度トリミングで余白を切り取ります。

コピーする

トリミングやリサイズが完了したら、Ctrl+Aで全選択、Ctrl+Cでクリップボードにコピーします。これでもうTwitterなどには貼り付けられる状態です。

貼り付ける

ツイート欄を出してからCtrl+Vで貼り付けるだけです。ファイルに保存したりもしなくていいので後片付けも気にしなくても良いです。すごく楽です！

まとめ

とにかくディスクも汚さないし一瞬でスクショを投稿できるのですごく早くて楽です。ぜひ試してみてください。

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

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」が含まれる場合はサーバにプロキシさせて画像を読み込むようにした。

ご意見

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

React/NodeJS/Passportでtwitterログインを実装してみた

2020-04-14T20:37:13+09:00

こちらの記事をベースにしてReactJS/NodeJSのシステムにtwitterログインを組み込んでみた。
https://qiita.com/itagakishintaro/items/e5a0481b51e6a17b304c

主に異なるのは型指定が緩めななんちゃってtypescriptを使っているところか。

実装したもの

蓋々交換機能

https://cap-baseball.com/cap_exchange

技術的なこと

passport-config.ts

export default function passportConfig() {
  var TWITTER_CONSUMER_KEY = "*****";
  var TWITTER_CONSUMER_SECRET =   "*******";
  var passport = require("passport"),
    TwitterStrategy = require("passport-twitter").Strategy;

  // Sessionの設定
  passport.serializeUser(function (user, done) {
    done(null, user);
  });
  passport.deserializeUser(function (obj, done) {
    done(null, obj);
  });

  passport.use(
    new TwitterStrategy(
      {
        consumerKey: TWITTER_CONSUMER_KEY,
        consumerSecret: TWITTER_CONSUMER_SECRET,
        callbackURL: "https://********/auth/twitter/callback",
      },
      function (token, tokenSecret, profile, done) {
        passport.session.user = profile;

        // tokenとtoken_secretをセット
        profile.twitter_token = token;
        profile.twitter_token_secret = tokenSecret;
        process.nextTick(function () {
          return done(null, profile);
        });
      }
    )
  );
}

auth.ts

NodeJSでtwitter認証からのコールバックなどを担当するコントローラ。

import * as express from "express";
import * as session from 'express-session'; 
import { Request } from "./interface/express.Request";
const passport = require("passport");

export class Auth{
    public router: express.Router;
    constructor() {
        this.router = express.Router();
        this.router.get("/twitter", passport.authenticate('twitter'));
        this.router.get("/twitter/success", this.success);
        this.router.get("/twitter/callback",
                passport.authenticate('twitter', 
                    { successRedirect: 'https://******/api/v2/auth/twitter/success',
                      failureRedirect: 'https://******/' })
        )}


    private success(req:Request,res:express.Response):void{
       if(req.session.passport !== undefined){
        res.json(req.session.passport.user.username);
       }else{
           res.sendStatus(401);
       }
    }
}

express.Requestインターフェースの拡張

import * as Express from 'express';
export interface Request extends Express.Request {
 session:any;
}

app.ts

import { Auth } from './auth';
import * as session from 'express-session';
import passportConfig from './passport-config';
passportConfig();
const passport = require("passport");

app.use(passport.initialize()); 
app.use(passport.session()); 
app.use(
  session({
    secret: '********',
    resave: false,
    saveUninitialized: false,
    cookie:{
      httpOnly: true,
      secure: true,
      maxage: 1000 * 60 * 30
    }
  })
);

ReactでNodeJS/Passportから認証情報を受け取る

credentialsオプションが必要。

  const response = await fetch('/auth/twitter/success',
  {
    method:'GET',
    credentials: "include",
    headers: {
      Accept: "application/json",
      "Content-Type": "application/json",
      "Access-Control-Allow-Credentials": true
    }
  });

認証が終わったタイミングで認証情報を受け取る

認証のためのウインドウを開き、
そのウインドウが閉じられたタイミングで親の画面をリロードする。
リロードの際に認証情報を受け取っている。

onClick={()=>{
                    const authWindow = window.open('/auth/twitter','newTab');
                    var timer = setInterval(function() { 
                        if(authWindow.closed) {
                            clearInterval(timer);
                            window.location.reload();
                        }
                    }, 1000);
                }}

インフルエンサーも教えてくれないTwitterでフォロワーを増やす方法

2020-01-29T07:32:39+09:00

個人でサービスやアプリを作ったりする人は年々増えていると思いますが、それらのリリースのあとに問題となるのが「集客」です。その解決の一つとしてTwitterアカウントで運用を行っている方も多いのではないかと思います。また、業務でもマーケティングのためにTwitterアカウントを運用されている方、もしくは会社も増えていると思います。

その際に問題となるのが「フォロワー数」です。効率よく集客を含めたマーケティングを行うためには一度の発言でなるべく多くのかたに声が届くようにできる方が望ましいでしょう。そのフォロワー数の増やし方を考察してみました。

当記事は有料記事です。記事の後半は有料となっています。

記事を書いている人は？

僕はしがない一般人で、個人でWebサービスを色々作ったりしています。Twitterのフォロワー数は現時点でもうすぐ2千になるという感じで、はっきり言ってしまうと「別にフォロワー数は多いというわけでもないし、増える早さもめちゃくちゃ遅い」です。

それどころか現在はフォロワーを増やそうという気も全くありませんし、何も対策なども行っていません。

もちろんTwitterで活動をはじめた頃はフォロワーを増やせば増やすほどサービスへの集客もやりやすくなるしいいことづくめだし頑張ろう！　とやっていました。しかし頑張ってもそんなに増えるもんでもないですし、頑張ってるその横で他の人はもっととんでもない早さでフォロワー数を増やしていきます。

そのため途中からやる気を失いました。というか、その早くフォロワー数を増やしている人たちを見ることで増やし方がなんとなく分かってきたのですが、はっきりいってやってられないと思いました。なぜかというと、大変すぎるのです。

僕はものぐさだし、そもそもやりたいのはサービスを作って活性化させることです。別に根本的な話を考えるとフォロワー数を増やしたいわけではありません。そのためフォロワーを増やすことに時間も費やしたくないですし、そんな大変なことをいちいちやってられないという結論に至りました。もしやったとしても嫌になって途中でやめてしまってどのみち今のようなのんびり気ままスタイルに変えてしまうでしょう。

ということで、僕自身はフォロワーを増やすことが得意でもなんでもない単なる一般人です。

じゃあ一体何を書く気なのか？

そんな人間がどうやってフォロワー数を増やす方法を書くのかというと、前述の通りまわりのフォロワー数が多い方やフォロワー数の増え方が早い方を色々と見てきたので、そこから得たことをヒントとして色々と考察したことを書こうと思います。

そのため実践した方法でもないですし本当に役立つ情報なのかは不明です。ですので有料部分の価格は100円ですし、まあ一応暇つぶしで見てみようか、と思った方だけ購入していただければいいかなと思って書きました。

有名な方々が書いている増やし方との違い

ただ、前述の通り地道なやり方をメインに書いていくため、恐らくインフルエンサー等がよく書いている「フォロワー数のふやし方！」的な記事にはあまり書かれてはいないような方法なのではないかと思います。

インフルエンサーのフォロワー数のふやし方は？

そもそもフォロワー数が多い人の中にはフォロワー数が多くなってからさらに増えた方法が書かれている場合もあったりします。そういうのははっきり言って普通に人には無益でしょう。

そうではなく、フォロワー数何人までの間はこういった方法で増やして、その後の何人までの間はこう、といった感じで書いてくれている方もいたりします。まだそちらの方がマシだとは思います。

ただ、個人的にはそのあたりもあまり有益には感じません。というのも、彼らはそういった方法でフォロワー数をふやしているわけではないと思うからです。具体的に言うと、下記の２パターンのふやし方がメインなのではないかと思います。

裏で色々やっている

フォロワー数が何万とかのインフルエンサーは結構みんな裏で色々やっています。というか、そもそもTwitterが裏みたいなものなので実際には表というべきかもしれません。マーケティングのためにしっかりフォロワー数を増やそうとしている方々は、そもそもTwitterばっかやってふやしているわけがないと思います。

現実世界で色々な営業を行い、それをTwitterと絡めて更に効果を高めるような総合的なマーケティングを行っているのではないかと思います。そもそも元々の所属や経歴がすごい方だったりする事が多いですし。正直それを真似ることは不可能ですし、真似たところで同じような効果は得られないでしょう。彼らが発信しているのはあくまでもそういったバックグラウンドがあってこその意味があるフォロワー数を増やすテクニックです。

とんでもないことをやっている

とはいえ人類の全員がものすごいバックグラウンドを持っているわけではありません。そのためものすごいバックグラウンドを自ら作り出してフォロワー数をふやしているパターンもあります。例えば無職なのにすごいとか、フリーランスですごいとか、何もしてないのにすごいとか、とにかく普段普通に生活している上では誰も絶対に普通やらないようなことをやって目立つことで、フォロワーを増やしているパターンです。

ちなみに自ら作り出して、と言いましたが、わざわざ作らなくても、普段その方が好きでやっていることがとてもすごいことで、単に人の目を惹いてフォロワーを自然に増やしてしまう場合もあります。

個人的に前者はあまり興味を持てませんが、後者は本当に技術的にだったりアイデア的にだったり、本当におどろくようなことをしていて、見ていて楽しいですし尊敬できます。

真似できない

ということで、上記のようなインフルエンサーがフォロワー数を増やす方法は明白なのですが、はっきり言って真似できるものではありません。逆にそういった方々が発信しているフォロワー数を増やす方法を真似したところで再現はできません。

ツイート文の作り方だったりとか、個人的には全く参考にする意味はないと考えています。もちろんやってはいけない、というものでもないため使うかどうかは自由です。

とくに他のインフルエンサーに頻繁にリプライしたり引用ツイートする、といった手法は、正直インフルエンサーにとっては見ず知らずの人から毎回謎のウケ狙いのリプライ等が送られてきても迷惑なだけでしょうし、そもそもそういったリプライが頻繁に行われるので興味を失っているでしょう。個人的にはそこまでする意味は全然ないかなと思います。もちろんこちらも自由ではありますが。

有料部分について

最初の方にも書きましたが、書いた本人が実際に実践していない方法です。性格的に向いていないのと、大変なことなのでやってられませんし興味も持てません。どうしても気になってしまうという方のみ買っていただいた方が良いと思います。

また、これはインフルエンサーが書いたりするような裏技でもなんでもありません。ひたすら地道に続ければ増える、というだけの努力の方法を書いてあるだけです。ですのであまり期待はしないでください。

また、読んで参考になる部分があってもあまり鵜呑みにしないでください。急にTwitterでの活動スタイルを変えると「あの人急にどうしたの…？」と思われるでしょう。もちろん完全にマーケティング用のTwitterアカウントなどであればそれで良いと思いますが、普段遣いアカウントで急にいつもと違うことをし始めると友達を失う可能性もあります。あくまで、自分らしくTwitterをやるのが一番だと思います。

Node.jsで画像/動画つきツイートをTwitterに投稿すると大変だった...

2019-12-29T11:22:37+09:00

JavaScriotでツイートしたいなと思って、いろいろ試していたら、
30秒以上動画つきツイートが結構めんどくさかったので、その時の備忘録。

Node.jsでTwitter APIを使う

Node.jsでTwitter APIを使うときは、desmondmorris/node-twitterを使うのが良さそう

インストール

$ npm install twitter

ツイートしてみる

文字だけをツイートするのは、こんな感じ。

import Twitter from "twitter";

// 初期化
const client = new Twitter({
  consumer_key: TWITTER_CONSUMER_KEY,
  consumer_secret: TWITTER_CONSUMER_SECLET,
  access_token_key: ACCESS_TOKEN_KEY,
  access_token_secret: ACCESS_TOKEN_SECRET
});

// 文字だけをツイート
async function tweet(text: string) {
  const tweet = await client.post("statuses/update", { status: text });
}

tweet("ツイート").then();

Twitterクラスに.post()や、.get()が用意されているので、
Twitter APIのドキュメントを見ながら、呼び出していく感じ。

ツイートするのはPOST statuses/updateなのでドキュメントを参照。

画像つきでツイートしてみる

画像とか動画とかメディアつきだとちょっとめんどくさく...

ツイートと一緒に画像をアップロードできないので、

最初に画像をアップロードしてからmediaIdを取得し、
mediaIdと一緒にstatuses/updateでツイート

という段階的な感じになる。

import Twitter from "twitter";
const client = // 略


async function tweetWithImage(text: string, filePath: string) {
  const data = require('fs').readFileSync(filePath);

  // 画像をアップロード
  const media = await client.post('media/upload', {media: data});

  // mediaIdをパラメタに追加して、ツイート
  const params = { status: text, media_ids: media.media_id_string };
  const tweet = await client.post("statuses/update", params);
}

tweetWithImage("ツイート", "./imange.jpg").then();

複数の画像をつけたい場合は、それぞれアップロードして、
media_idsにカンマ区切りでmediaIdを指定する。

ただ、このmedia/uploadを1度だけ呼び出すシンプルな方法には制限があり、
GIFや動画はアップロードできない...

30秒以下の動画付きツイートをしてみる

動画やGIFをアップロードしたい場合は、Chunked media uploadという形でアップロードする必要がある。

この方法は、大きく3ステップに分かれている

初期化: command=INIT
アップロード: command=APPEND
完了: commaind=FINALIZE

import Twitter from "twitter";
const client = // 略


async function tweetWithChunkedMedia(text: string, filePath: string) {
  const mediaType = 'video/mp4';
  const mediaData = require('fs').readFileSync(filePath);
  const mediaSize = require('fs').statSync(filePath).size;

  // 動画をアップロード: INIT
  const media = await client.post('media/upload', {
    command    : 'INIT',
    total_bytes: mediaSize,
    media_type : mediaType
  });
  // INITでmediaIdが発行されるので、取得しておく
  const mediaId = media.media_id_string;

  // 動画をアップロード: UPLOAD
  await client.post('media/upload', {
    command      : 'APPEND',
    media_id     : mediaId,
    media        : mediaData,
    segment_index: 0
  });

  // 動画をアップロード: FINALIZE
  await client.post('media/upload', {
    command : 'FINALIZE',
    media_id: mediaId
  });

  // mediaIdをパラメタに追加して、ツイート
  const params = { status: text, media_ids: mediaId };
  const tweet = await client.post("statuses/update", params);
}

tweetWithChunkedMedia("ツイート", "./video.mp4").then();

動画やGIFのような大きいサイズのメディアは、分割してアップロードできるこの仕組みを使うっぽい。

ただ、30秒以上の動画や1MB(チャンクサイズ上限)を超える場合は、
INIT時にmedia_categoryを指定して、非同期アップロードをしないといけない。

30秒を超える動画付きツイートをしてみる

30秒を超える動画は、media_categoryをつけ、非同期アップロードで対応しないといけない。

media_categoryは、tweet_image, tweet_gif, tweet_videoを指定できるので、
アップロードするメディアに合わせて指定する。

また、チャンクサイズの上限が1MBなので、APPENDでデータをPOSTする際には注意。
1MB以上の場合は、1MB以下になるように分割し、segment_indexでindexを指定する。

import Twitter from "twitter";
const client = // 略


async function tweetWithChunkedMedia(text: string, filePath: string) {
  const mediaType = 'video/mp4';
  const mediaData = require('fs').readFileSync(filePath);
  const mediaSize = require('fs').statSync(filePath).size;

  // 動画をアップロード: INIT
  const media = await client.post('media/upload', {
    command    : 'INIT',
    total_bytes: mediaSize,
    media_type : mediaType,
    media_category: "tweet_video" // media_categoryを指定
  });

  const mediaId = media.media_id_string;

  // 動画をアップロード: UPLOAD
  await client.post('media/upload', {
    command      : 'APPEND',
    media_id     : mediaId,
    media        : mediaData,
    segment_index: 0
  });

  // 動画をアップロード: FINALIZE
  await client.post('media/upload', {
    command : 'FINALIZE',
    media_id: mediaId
  });

  // 動画をアップロード: STATUS
  while(true) {
    // アップロードのステータスをポーリング
    const status = await client.get('media/upload', {
      command : 'STATUS',
      media_id: mediaId
    });

    if (status.processing_info.state == "succeeded") {
      // 完了したら、ポーリングを終了
      break;
    } else if (status.processing_info.state == "failed") {
      // エラーになったら、例外を投げる
      throw new Error(status.processing_info.error.message);
    } else {
      // 処理中(in_progress)の場合は、指定された秒数分待つ
      await sleep(status.processing_info.check_after_secs + 1);
    }
  }

  // mediaIdをパラメタに追加して、ツイート
  const params = { status: text, media_ids: mediaId };
  const tweet = await client.post("statuses/update", params);
}

function sleep(time: number) {
  return new Promise((resolve, reject) => {
    setTimeout(() => resolve(), time * 1000);
  });
}

tweetWithChunkedMedia("ツイート", "./video.mp4").then();

かなりハマったのが以下の2点。

STATUSはFINALIZEしてからじゃないと、404が返ってくる
FINALIZEのレスポンスにもprocessing_infoがあるが、
STATUSをしないと永遠にpending状態。(STATUSを呼ぶと処理が始まる)

このあたり、ドキュメントに詳しい説明がなくて、かなりハマった...

axiosを使って外部URLのメディアをツイートする

Cloud Storageにある画像/動画を含めてツイートしたかったので、
axiosを使って外部URLを取得する処理を加えてみたのがこれ。

new TwitterApi().postTweet("ツイート", ["https://..."]);
みたいに呼び出すと、ダウンロード/アップロード/ツイートできる。(はず...)

import Twitter from "twitter";
import axios from "axios";

/**
 * スリープ処理
 * @param time スリープする秒数
 */
function sleep(time: number) {
  return new Promise((resolve, reject) => {
    setTimeout(() => resolve(), time * 1000);
  });
}

export default class TwitterApi {
  private client: Twitter;

  constructor() {
    this.client = new Twitter({
      consumer_key: // TWITTER_CONSUMER_KEY,
      consumer_secret: // TWITTER_CONSUMER_SECLET,
      access_token_key: // ACCESS_TOKEN_KEY,
      access_token_secret: // ACCESS_TOKEN_SECRET
    });
  }

  /**
   * ツイートするメイン処理
   * @param text ツイート文
   * @param medias 添付する外部URLのリスト
   */
  public async postTweet(text: string, medias: string[] = []) {
    let mediaIds: string[] = [];
    if (medias.length > 0) {
      // メディアファイルがあれば、アップロードしてmediaIdを取得
      mediaIds = await Promise.all(
        medias.map(async v => await this.uploadMedia(v.url))
      );
    }

    const res = await this.tweet(text, mediaIds);
  }

  /**
   * メディアのアップロード処理
   * @param url メディアのURL
   */
  private async uploadMedia(url: string) {
    // axiosを使って、メディアのデータを取得
    const res = await axios.create({ responseType: "arraybuffer" }).get(url);

    const mediaData: ArrayBuffer = res.data;
    const mediaSize = res.headers["content-length"];
    const mediaType = res.headers["content-type"];

    // INIT: mp4かgifなら、media_categoryを指定する
    const initParams = {
      command: "INIT",
      total_bytes: mediaSize,
      media_type: mediaType
    };
    if (mediaType == "video/mp4") {
      initParams["media_category"] = "tweet_video";
    } else if (mediaType == "image/gif") {
      initParams["media_category"] = "tweet_gif";
    }
    const data = await this.client.post("media/upload", initParams);

    const mediaId = data.media_id_string;

    // APPEND: 500Bくらいにチャンクを分けてアップロードする
    const chunkSize = 500000;
    const chunkNum = Math.ceil(mediaSize / chunkSize);

    for (let index = 0; index < chunkNum; index++) {
      const chunk = mediaData.slice(chunkSize * index, chunkSize * (index + 1));
      const resAppend = await this.client.post("media/upload", {
        command: "APPEND",
        media_id: mediaId,
        media: mediaData.slice(chunkSize * index, chunkSize * (index + 1)),
        segment_index: index
      });
    }

    // FINALIZE
    const resFinalize = await this.client.post("media/upload", {
      command: "FINALIZE",
      media_id: mediaId
    });
    if (!resFinalize.processing_info) {
      // media_categoryをしていないと、processing_infoがない
      return mediaId;
    } else if (resFinalize.processing_info.state == "succeeded") {
      return mediaId;
    } else if (resFinalize.processing_info.state == "failed") {
      throw new Error(resFinalize.processing_info.error.message);
    }

    // STATUS
    while (true) {
      const resStatus = await this.client.get("media/upload", {
        command: "STATUS",
        media_id: mediaId
      });
      if (resStatus.processing_info.state == "succeeded") {
        return mediaId;
      } else if (resStatus.processing_info.state == "failed") {
        throw new Error(resStatus.processing_info.error.message);
      } else {
        await sleep(resStatus.processing_info.check_after_secs + 1);
      }
    }
  }

  /**
   * ツイート処理
   * @param text ツイート文
   * @param mediaIds メディアIDのリスト
   */
  private async tweet(text: string, mediaIds: string[] = []) {
    const params = { status: text };

    if (mediaIds.length > 0) params["media_ids"] = mediaIds.join(",");

    const tweet = await this.client.post("statuses/update", params);
    return tweet;
  }
}

若干ハマったのが、以下の2点

axiosで取得する場合は、{ responseType: "arraybuffer" }でcreateしないといけない
cloudStrageでデータを取得できないので、downloadURLを取得しておかないといけない

Twitter APIむずい...

以上!!

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

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

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

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

参考にしたサイト様

Twitterでツイートできる文字数を正確に数える(絵文字もURLも)

2019-12-29T11:18:43+09:00

Nuxt.jsでツイートするアプリを作りたいなと思い、
文字数ってどうやって計算するんだろ？って思ったら、
公式でライブラリ(twitter-text)が用意されているらしいので、使ってみたときの備忘録

Java版/Ruby版/JavaScript版/Objective-C版などいろいろあるらしい。

インストール

$ npm install twitter-text

使い方

const twitter = require('twitter-text');

// ツイートするテキスト
const tweetText = "This is a test tweet";

// twitter-textで計算
const result = twitter.parseTweet(tweet);
console.log(result)
/* Returns:
  {
    weightedLength: 20,
    permillage: 71,
    valid: true,
    displayRangeEnd: 19,
    displayRangeStart: 0,
    validRangeEnd: 19,
    validRangeStart: 0
  }
*/

// 日本語版の場合、文字数を2で割るとツイッターと同じになる。
const textLength = result.weightedLength / 2;

以上!!

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

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

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

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

参考にしたサイト

シモネタサイトを全力で作ったよ

2019-12-15T08:56:58+09:00

この記事はクソアプリ2 Advent Calendar 2019 15日目の記事です。14日目はendo_hizumiさんの「お前らのクソアプリは間違えてる」。わーい！寿司が回ってるよ！ぼくの思ってた廻る寿司となんか違う！

クソアプリが作れない

ということで、年末のお祭りを名目に、肩の力を抜いてなんでも公開するといいよ！という趣旨のクソアプリカレンダー、ずっと眺めていたのですが、なかなか参加できなかったのですよね。あっという間にうまるのもあるけど、それ以上に、自分マジメなので、そういうのを作るのが苦手なのです。

どれくらいマジメかというと、中学高校と学級委員長を歴任していました。委員長は何がいいかというと、委員長という役割をしておけば、クラスのなかに居場所がなくなることがないのですよね！

そんな人間にクソアプリを作れだと？無理に決まっている。予約日が15日なのに一週間も前に完成させてバグバッシュしちゃったじゃないか！

誰でもできるクソアプリ

こうなることはわかっていたので、対策を立てておきました。出来栄えがクソなんじゃなくて、ネタがクソならクソアプリ。小学生のごとくウンコとかオシッコとか言っておけばなにを作ってもクソアプリになるに違いない！

【警告】以降、全力でシモネタです。そういうのがお好きでない方はこれ以上読まないことをおすすめします。

(警告したからね？もう遠慮しないよ！？)

というわけで作りました。

ギガントおちんちんランキング

ギガントおちんちんランキング🎉

おちんちんの太さを測って入力すると、日本で何番目くらいの太さなのかわかります。
もちろん結果をTwitterでシェアしてみんなに自慢することが出来ます。

なんで太さ？

いにしえの昔、ハイパーオチンチンランキングというサイトがあったのです。
おちんちんの長さを入力すると順位を調べてくれるこのサイト、それはもうバズりました。

https://b.hatena.ne.jp/entry/pandora.nu/pha/ochinchin/

しかし、このサイトが登場したその当時、SNSは今ほど一般的ではなくて、どんなサイトでもtwitterシェアボタンがあるのが当たり前という時代ではなかったのです。

これだけ面白いサイトが！ここにシェアボタンがあれば！絶対バズるのに！

何回か持論を展開したのですが、みんなおもしろネタとして受け取るばっかりで作る人がいないので自分で作ることにしました。

リスペクト的な意味を込めて、長さじゃなくて太さにしてあります。

技術的な話

大前提として、このサイトをいつまでもメンテしたくないというのがあります。今クソアプリ用のテンションで吹っ切れてるからおちんちんとか平気で書いているけど、年が明けてこれのメンテナンスを継続する自信はない。おちんちんのことは完全に忘れて次のサービスに取り掛かりたい。

自前サーバに載せてなんかの弾みにうっかり消して「もぎゃさん、おちんちんが落ちてるんですけど？」とかいうメンションをもらったりしたら、確実にそんなサイトはなかったことにしてしまう気がします。

だからといってFirebaseみたいなのも、お財布に火が付きそうで怖い。

放っておいたらいつまでも維持されて、アクセス従量課金じゃないサーバ。

あります。Github pagesです。Githubのアカウントさえあれば無料で使えて、リポジトリを消さない限り維持される、高負荷でもそうそう落ちたりしない、理想のサーバ！

Github Pagesは静的サイトしか保持してくれないので、開発言語はJS
しかありえない。去年作ったqiitaRank では、index.htmlにvue.jsをscriptタグで取り込む簡単実装だったので、これをコピペしてサクッと作りました。

OGP問題

Twitterシェアが命のサービスなので、シェアしたときの見た目が大事です。くすっと笑ってぼくも使ってみようと思えるサイトでないといけない。そのためにはOGP画像が必須ですが、Twitterのクローラーはそんなに賢くないので、JSで生成した動的画像をOGPとして使うことが出来ません。
かといってSSRみたいな高度なことをするためにはホストするサーバが必要、CircleCIで頑張る...うー、めんどくさいな。

3日くらい考えてひらめきました。「そもそも動的である必要はないよね」

ソースコード見ていただくとわかりますが、結果ページは独立したHTMLファイルになっています。結果ページの役割は、TwitterにOGP画像を返すこと。人間がアクセスしてきたらトップページにリダイレクトさせます。


 
 
 
ギガントおちんちんランキング

違いはOBP画像だけなんだから、nuxt.jsみたいなの使えば生成できそうですが、意識低く、結果と同じだけのHTMLファイルをそのまま保持しています。

あとはindex.htmlで、結果に応じてシェアするURLを分けてあげれば出来上がりです。

IE対策

サイトの趣旨がとてもオチンチンなので、エンジニアではない方がアクセスすることを想定する必要があります。IEで開くと．．．動かん。

Vue.jsのコードは近代的なブラウザを前提にしているので、IEで動かすのは難しいのです。Polyfill.io入れたら動くんでしょ？と思っていたのですが、scriptタグで取り込むvue.jsは、script部分で新しい記法(テンプレートリテラルとか)をつい使っちゃうので、かなり無理があります。

しばらく頑張ったのですが、どうにもならんので、さっき回避したはずのNuxt.jsを入れてgenerateモードでページを生成してもらうことにしました。このやり方ならbabelがIEの差異を吸収したページを生成してくれるので、IEでも動かすことが出来ます。

Nuxt.js on Github pages

Nuxt.jsで生成したページをGithub pagesで動かす方法はここに載っています(vue.js周りのドキュメント充実度すごいよね)

簡単にいうと、URLがexample.com/_nuxt/hoge.js みたいなんじゃなくて https://mogya.github.io/ochinRank/ という具合にサブディレクトリになるので、それを考慮したHTMLが生成されるように設定する必要があります。

export default {
  router: {
    base: '//'
  }
}

あと、github pagesは基本レポジトリにあげたコードを全部公開してしまいます。generateしたファイルだけ公開するために、「masterブランチのdocsディレクトリ下だけを公開」モードを使うことにしました。

nuxt.config.jsの設定を変更して、distの代わりにdocsディレクトリにHTMLを生成するようにします。

export default {
  generate: {
    dir: 'docs'
  },

docsディレクトリはそんな使い方をするものじゃない？クソアプリだからね。

シモネタライセンス問題

いらすとやライセンス

当初このサイト、イラストは安定のいらすとやを使わせていただく予定でした。自由に使えてなんでも揃ってるぼくらの素材サイト。くすっと笑うのにトーンもあってるよね。しかし。

ですよね。おちんちんランキングはジョークサイトであってアダルトサイトじゃないと思っているのですが、こういうのは結局の所いらすとやさんがどう受け止めるかの問題になってしまいます。
いらすとやさんがあれだけ寛容な条件を用意してくれているのに、「ぼくはアダルトサイトじゃないと思いました」っていう名目で利用を強行して炎上したりすると、いらすとやさんにご迷惑がかかりそう。

ということでお金出してイラストレーターさんに描いてもらいました。クソアプリなのに！
【一点で応募可能】 Twitterのシェア用画像5点の依頼/外注｜イラスト作成の仕事

でもおかげでなかなかいいデザインになったと思います。太さに応じてTwitterシェアしたときの画像が変わるようになっているので、ぜひシェアして見てくださいね。

GASでいいねしたツイートをいいねの数とリツイートの数と一緒に記録するやつ

2019-10-07T09:13:01+09:00

特定のユーザーのいいねしたツイート一覧を、ツイートに付いたいいねの数とリツイートの数も一緒に記録したくなって作りました。トリガー機能を使うと、定期的にいいねが記録されるようになります。

GASで自分のツイートを取得してスプレッドシートに記録するやつ

この記事も合わせて読むとわかりやすいかもしれません。

このように記録されます。



function getFav(){
  var service  = twitter.getService();
  var json = service.fetch("https://api.twitter.com/1.1/favorites/list.json?screen_name=いいねを取得したいアカウントのscreen name&count=100");
  var array = JSON.parse(json);

  var ss = SpreadsheetApp.getActiveSpreadsheet();
  var sheet = ss.getSheetByName('いいねを記録したいシートの名前');
  var lastRow = sheet.getLastRow() +1;
  var lastId = sheet.getRange("F2").getValue();

  for(var i = 0; i <= array.length -1; i++) {

    var int = parseInt(i);

    if(i === 0){
      var recId = array[int]["id"];
      sheet.getRange("G2").setValue(recId);
    }

     var id = array[int]["id"];

     if(id > lastId){
       var time = array[int]["created_at"];
       var userId = array[int]["user"]["id_str"];
       var json = service.fetch("https://api.twitter.com/1.1/users/show.json?user_id="+userId+"&include_entities=false");
       var array2 = JSON.parse(json);
       var screenName = array2["screen_name"];
       var text = array[int]["text"];
       var favorite_count = array[int]["favorite_count"];
       var retweet_count = array[int]["retweet_count"];


       sheet.getRange(lastRow,1).setValue(time);
       sheet.getRange(lastRow,2).setValue(screenName);
       sheet.getRange(lastRow,3).setValue(text);
       sheet.getRange(lastRow,4).setValue(favorite_count);
       sheet.getRange(lastRow,5).setValue(retweet_count);
       sheet.getRange(lastRow,6).setValue(id);
     }
    lastRow = lastRow + 1;
    }

いいねを１００件取得して、idが以前記録したツイートより大きければ記録する…といった感じです。
何かあったら気軽にコメントください。

GASで自分のツイートを取得してスプレッドシートに記録するやつ

2019-10-07T09:10:43+09:00

急にツイ消ししたくなった場合に備えて、自分のツイートをグーグルスプレッドシートに記録しておくことにしました。

GASでTwitterの投稿とタイムライン取得
こちらの記事を参考にして書いてみました。

画像のように記録されます。


 var twitter = TwitterWebService.getInstance(
 '**********',       // 作成したアプリケーションのConsumer Key
 '**********'  // 作成したアプリケーションのConsumer Secret
);

// 認証を行う（必須）
function authorize() {
  twitter.authorize();
}

// 認証をリセット
function reset() {
  twitter.reset();
}

// 認証後のコールバック（必須）
function authCallback(request) {
  return twitter.authCallback(request);
}

function getMyTweets() {
  var service  = twitter.getService();
  var json = service.fetch("https://api.twitter.com/1.1/statuses/user_timeline.json?screen_name=ツイートを取得したいユーザーのid&count=30");
  var array = JSON.parse(json);

  var ss = SpreadsheetApp.getActiveSpreadsheet();
  var sheet = ss.getSheetByName('ツイートを保存したいシートの名前');
  var lastRow = sheet.getLastRow() +1;
  var lastId = sheet.getRange("D2").getValue();

  for(var i = 0; i <= array.length -1; i++) {

    var int = parseInt(i);

    if(i === 0){
      var recId = array[int]["id"];
      sheet.getRange("D2").setValue(recId);
    }

     var id = array[int]["id"];

     if(id > lastId){
       var time = array[int]["created_at"];
       var text = array[int]["text"];

       sheet.getRange(lastRow,1).setValue(time);
       sheet.getRange(lastRow,2).setValue(text);
       sheet.getRange(lastRow,3).setValue(id); 
     }
    lastRow = lastRow + 1;
    }
  }

自分のツイートを最新のやつから30件まで取得して、idが以前取得したツイートより大きければスプレッドシートに書き込む……という感じです。

ここ違うよ〜とかもっと良い書き方あるよ〜って場合は気軽にコメントください。

puppeteer初心者がTwitterブックマークをエクスポートするツールを作りながら、使い方をまとめてみた

2019-10-01T20:31:32+09:00

ふと、puppeteerがおもしろそうだなと思い、前から欲しかった
TwitterブックマークをJSONファイルにエクスポートするツールを題材に、
いろいろ遊んでみた時に備忘録。

puppeteerはサクッと使えるので、すてき(´ω｀)

作ったもの

こんな感じで勝手に操作してエクスポートしてくれます(´ω｀)

puppeteerで自動ログインして、ブクマをJOSNでエクスポートできるように(*´ω｀*)わかりやすいように背景色を変えたりしてる(*´ω｀*) pic.twitter.com/UJiGAiw5KN
— 積読ハウマッチ📚きらぷか (@kira_puka) October 1, 2019

最終的なソースコードはGitHubで公開中。
- memory-lovers/export_twitter_bookmarks_puppeteer: Twitter Bookmark Export Tool using Puppeteer

ただ、注意事項がたくさんですが。。(-_-;)

puppeteerの使い方

インストール

$ npm install -S puppeteer

基本的な雛形

基本的にはこんな感じ。

ブラウザを起動
ページを作成
なんか処理する
ブラウザの終了

const puppeteer = require("puppeteer");
const fs = require("fs");

async function main() {
  let browser = null;
  try {
    // ブラウザの起動
    browser = await puppeteer.launch();
    // ページの作成
    const page = await browser.newPage();

    // 何らかの処理

  } catch (error) {
    console.error(`Error: ${error}`, error);
  } finally {
    // ブラウザの終了
    if (!!browser) await browser.close();
  }
}

main().then();

puppeteerでできること

ブラウザの起動/停止

// ブラウザの起動: headlessで起動
const browser = await puppeteer.launch();

// ブラウザの起動: headlessじゃなく起動
const browser = await puppeteer.launch({ headless: false, slowMo: 10 });

// ブラウザの終了
await browser.close();

headless: falseにすると、ブラウザが立ち上がって、動作確認画できる。
slowMo: 10の値を大きくすると、スローモーションのように操作がゆっくりになる。

ページの開く/閉じる

// 新規ページの作成
const page = await browser.newPage();

// 画面サイズの設定
await page.setViewport({ width: 1280, height: 1200 });

// ページを閉じる
await page.close();

指定したURLへ移動

// 指定したURLへ移動
await page.goto("https://www.google.com", { waitUntil: "networkidle2" });

// 指定したURLへ移動: waitを設定
await page.goto("https://www.google.com", { waitUntil: "networkidle2" });

オプションのwaitUntilを指定すると、その条件が満たされるまでwaitする。
指定できるのは、以下の4つ。

load: loadイベントが発火するまで
domcontentloaded: DOMContentLoadedイベントが発火するまで
networkidle0: ネットワーク接続が0個である状態が500ミリ秒続いたとき
networkidle2: ネットワーク接続が2個である状態が500ミリ秒続いたとき

SPAとかの場合は、networkidle2とかまで待つと良さそう。

参考: PuppeteerによるJavaScriptレンダリングされたHTMLの取得 - コードログ

要素の取得

// 最初の`.button`の要素を取得
const button = await page.$('.button');

// すべての`.button`の要素を取得
const buttonList = await page.$$('.button');

実際はElementHandleが返ってくる。

1件取得と全件取得があるので注意。
セレクタの書き方はCSS selectorsが使える。

XPATHで書けるpage.$x();というのもある。

要素のクリック

// クリック: ページからセレクタで指定
await page.click('.button');

// クリック: ElementHandlerからクリック
const button = await page.$('.button');
await button.click();

// クリック: ページからElementHandlerを使ってevaluate
const button = await page.$('.button');
await page.evaluate(v => v.click(), button)

// クリック: ElementHandlerからevaluateでクリック
const button = await page.$('.button');
await button.evaluate(v => v.click())

クリックなど、JavaScriptを実行する方法はいくつかある。
SPAなサイトだとうまく行かない場合があるが、page.evaluaateなどを使うとうまくいく時がある。

入力する

// テキストを入力する: ページからセレクタで指定
await page.type('#text-input', "Hello");

// テキストを入力する: ElementHandlerで指定
const inputText = await page.$('#text-input');
await inputText.type("Hello");

待つ/waitする

// 1000ms待つ
await page.waitFor(1000);

// 指定した要素が表示されるまで待つ
await page.waitForSelector(`.foo`);
// or 
await page.waitFor('.foo');

// 条件を満たすまで待つ
await page.waitFor(() => !!document.querySelector('.foo'));

// 移動するまで待つ
await Promise.all([
  page.waitForNavigation(),
  page.click('a.my-link'),
]);

// or 
const navigationPromise = page.waitForNavigation();
await page.click('a.my-link'),
await navigationPromise;

その他もろもろ

evaluateを使うとHTML要素に対して実行できるので、いろいろできる


// innerTextを取得
const innerText = await elm.evaluate(node => node.innerText);

// textContentを取得
const textContent = await elm.evaluate(node => node.textContent);

// href属性の取得
const href = await elm.evaluate(node => node.href);

// 背景色変更
await elm.evaluate((v, color) => (v.style.backgroundColor = color), "gray");

// URLの取得
const url = await page.evaluate(_ => location.origin);

// スクロール: 1画面分
await page.evaluate(_ => window.scrollBy(0, window.innerHeight));

// スクロール: 指定要素まで
await page.evaluate(elm => window.scrollBy(0, elm.getBoundingClientRect().top), elm);

スクリーンショットの取得

// スクリーンショットの取得: 表示範囲のみ
await page.screenshot({ path: "screenshot.png" });

// スクリーンショットの取得: フルページを指定
await page.screenshot({ path: "screenshot.png", fullPage: true });

// スクリーンショットの取得: 指定要素のみ
const element = await page.$('h1');
await element.screenshot({path: 'screenshot_h1.png'});

描画されたHTMLの取得

const fs = require("fs");

// HTMLの取得: ページ全体
const html = await page.content();
fs.writeFileSync("output.html", html);

// HTMLの取得: 指定要素のみ
const bodyHandle = await page.$('body');
const html_body = await page.evaluate(body => body.innerHTML, bodyHandle);
fs.writeFileSync("output_body.html", html_body);

エクスポートするツールを作ってみる

やりたいことは、こんな感じ。

ブラウザ起動
ログイン
ブックマークページに移動
以下繰り返し: 取得できる情報がなくなるまで
- ブックマークの情報を取得
- ブックマークの削除
取得した情報を.jsonファイルに書き出し
ブラウザの停止

メインの処理はこんな感じ

async function exportBookmarkMain() {
  let browser = null;
  try {
    // ブラウザの起動
    browser = await puppeteer.launch({ headless: false, slowMo: 10 });

    // ページの作成
    const page = await browser.newPage();
    await page.setViewport({ width: 1280, height: 1200 });

    // ログイン: ログインページに移動&認証
    await login(page);

    // ブックマークのエクスポート: ブックマークページに移動&ツイート上の取得
    const bookmarks = await getTwitterBookmarks(browser, page);
    console.log(`bookmarks size is ${bookmarks.length}`);

    // 取得した情報の書き出し
    const timestamp = dayjs().format("YYYYMMDD_HHmmss");
    const outputFile = `twitter_bookmarks_${timestamp}.json`;
    fs.writeFileSync(`output/${outputFile}`, JSON.stringify(bookmarks));

  } catch (error) {
    console.error(`Error: ${error}`, error);
  } finally {
    // ブラウザの停止
    if (!!browser) await browser.close();
  }
}

ログイン処理

/**
 * ログイン処理
 */
async function login(page) {  
  // dotenvからアカウント情報の取得
  const account = process.env.TWITTER_ACCOUNT;
  const password = process.env.TWITTER_PASSWORD;

  // 指定したURLへ移動: waitを設定
  await page.goto("https://twitter.com/", { waitUntil: "networkidle2" });
  await page.waitForSelector(`.LoginForm > .LoginForm-username > .text-input`);

  // アカウントとパスワード入力
  await page.type(`.LoginForm > .LoginForm-username > .text-input`, account);
  await page.type(`.LoginForm > .LoginForm-password > .text-input`, password);

  // ログインボタンを押して、ページ遷移するまで待つ
  const navigationPromise = page.waitForNavigation();
  await page.click(` .LoginForm > .EdgeButton`);
  await navigationPromise;
}

ブックマークのエクスポート処理

くり返す処理はこんな感じ。
ツイートは

タグのようなので、それを起点に処理を進めていく。

async function getTwitterBookmarks(browser, page) {
  const bookmarks = [];

  try {
    // ブックマークに移動
    const bookmarksURL = "https://twitter.com/i/bookmarks";
    await page.goto(bookmarksURL, { waitUntil: "networkidle2" });

    // ブックマークしたツイートのHTML要素の取得
    const articles = await page.$$("article");

    for (let i = 0; i < articles.length; i++) {
      const article = articles[i];

      // ツイートまでスクロール
      await page.evaluate(elm => window.scrollBy(0, elm.getBoundingClientRect().top), article);
      await page.waitFor(1000);

      // articleから情報を取得(別処理)
      const data = await toArticleData(browser, page, article);
      bookmarks.push(data);

      // ブックマークの削除(別処理)
      await deleteBookmark(browser, page, article);
    }
  } catch (error) {
    console.error(`** Error occuerred: ${error}`, error);
  }
  return bookmarks;
}

無限ローディングを持つような場合、適宜スクロールしないと要素が表示されないので、
ツイートごとにスクロールしている。

ブックマークしたツイートから情報を取得

かなりTwitterの仕様によっているけど

取得したい要素を特定して、
その要素を取得するセレクタを書き、
innterTextやtextContentで文字を取得する

といった、感じのことをしている。

async function toArticleData(browser, page, article) => {
  // 初期化
  const articleData = {
    accountName: "",
    accountId: "",
    accountURL: "",
    tweetText: "",
    tweetURL: "",
    links: []
  };

  // ツイートしたユーザのアカウント名とTwitterIdを取得
  const account = "div > div:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(1)";
  const accountName = await article.$(`${account} a > div:nth-of-type(1) > div:nth-of-type(1)`);
  const accountId = await article.$(`${account} a > div:nth-of-type(1) > div:nth-of-type(2)`);
  articleData.accountName = await accountName.evaluate(node => node.innerText);
  articleData.accountId = await accountId.evaluate(node => node.innerText);

  // ツイートの内容を取得
  const tweetData = "div > div:nth-of-type(2) > div:nth-of-type(2)";
  const tweet = await article.$(`${tweetData} > div:nth-of-type(2)`);
  const tweetText = await tweet.evaluate(node => node.innerText);
  articleData.tweetText = tweetText;

  // ツイートに含まれるリンク()をすべて取得
  const aTags = await article.$$(`${tweetData} a`);
  for (let i = 0; i < aTags.length; i++) {
    const aTag = aTags[i];
    const text = await aTag.evaluate(node => node.textContent);
    const link = await aTag.evaluate(node => node.href);
    articleData.links.push({ link: link, text: text });
  }
  // の1つ目はユーザのURL
  articleData.accountURL = articleData.links[0].link;
  // の2つ目はツイートのURL
  articleData.tweetURL = articleData.links[1].link;
  articleData.links.splice(0, 2);

  return articleData;
};

ブックマークの削除

async deleteBookmark(browser, page, article) {
  const waitTime = 1500; // 待ち時間

  // 削除対象までスクロール
  await page.evaluate(elm => window.scrollBy(0, elm.getBoundingClientRect().top), article);
  await page.waitFor(1000);

  // 「ツイートを共有」ボタンをクリック
  const button = await article.$("div[aria-label='ツイートを共有']");
  await page.evaluate(v => v.click(), button);
  // すこし待つ
  await page.waitFor(waitTime);

  // クリックするとメニューが出てくるので、取得
  const menuItems = await page.$$("div[role='menuitem']");

  // 非公開アカウントかどうかにより、メニューの数が変わるの処理を分ける
  if (menuItems.length === 3) {
    // 通常、メニューが3つあり、2つ目が削除ボタン
    await menuItems[1].click();
    await page.waitFor(waitTime);
  } else if (menuItems.length === 1) {
    // 非公開の場合は、削除ボタンのみ表示
    await menuItems[0].click();
    await page.waitFor(waitTime);
  }
};

こんな感じで、「要素を探す→クリック→少し待つ」のくり返し。
ただ、ブラウザで操作しているときでも、削除されないときがある。。

使ってみた感想

スクレイピング自体始めてだったけど、puppeteer自体がすごくよく、簡単に使うことができた(´ω｀)

ただ、Twitterみたいなのを対象にするのは結構大変だった。。

1. どうセレクタを書けば、期待する要素をとってこれるのかを考えないといけない

特にscoped CSSを使っていて、class名がないdivばかりだとつらい

2. SPAなど動的に変わる部分が多いサイトだと、クリックなどがうまく動かないことがある

対象サイトのJavaScriptが正しく動作しない場合がある。。

3. 実行や動作確認に時間がかかるので、テストにかなり時間がかかる

あと、サイトのデザインが変わると追従対応しないといけない。。
便利だけど、かなり大変そうな感じ(´ω｀)

けど、ポイントを守ればかなり便利だなと、今更ながら体感(´ω｀)

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

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

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

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

参考にしたサイト様

TwitterのTLを見せあいっこできるミニサービスを作りました

2019-05-31T21:35:43+09:00

Twitterの自分のタイムラインは自分しか見ることができない特別な世界ですが、それをシェアして見せあいっこすることができる「TLシェア」というミニサービスを作りました。

使っているもの

PHP7.3
Laravel5.8
Vue.js2.5
Buefy
Google Compute Engine (f1-micro)
Google Cloud SQL (MySQL5.7)

どうやっているのか

TwitterのAPIは当然のように自分のTLを取得できます。それを自分用ではなく公開用として誰でも閲覧できるように表示している、というだけになります。

具体的な処理

Laravel Socialite

Laravel Socialiteを使うと簡単にTwitter認証ができますので、ちょちょいと入れて認証します。今回はミニアプリにする予定だったので、ログイン機能もつけませんでした。認証した時にタイムラインをデータベースに保存します。

ただ、一応タイムラインの定期更新機能もあるため、トークンなどは保存しています。

タイムラインの定期更新

上記で行った処理を、LaravelのCommandで定期的に実行しているだけです。

こんな感じでTLが古くなっている人から優先的に、１時間に１回くらいの頻度でタイムラインを更新していきます。

```php:UpdateTimeline.php
public function handle()
{
$user = User::where('is_auto', true)->orderBy('timeline_updated_at')->first();
if (Carbon::parse($user->timeline_updated_at)->gt(Carbon::now()->subHour())) {
return;
}

    try {
        Timeline::createAndActivate($user);
    } catch (\Exception $e) {
        // 例外を握りつぶす
        $this->error($e);
    }
    DB::table('users')->where('id', $user->id)->update(['timeline_updated_at' => new Carbon]);
}


最後DBを使っているのはupdated_atを更新させないためです。

### APIの実行

下記を使っています。

[abraham/twitteroauth: The most popular PHP library for use with the Twitter OAuth REST API.](https://github.com/abraham/twitteroauth)

こんな感じでTLを取得できます。

```php
        $connection = new TwitterOAuth(
            config('services.twitter.client_id'),
            config('services.twitter.client_secret'),
            $userSocial->token,
            $userSocial->token_secret
        );
        $contents = $connection->get('statuses/home_timeline', ['count' => 200]);

home_timelineは1分に1回程度しか呼べませんのでTwitterクライアントを作る時はなかなか厳しい制限ですが、今回のパターンだとさほど更新頻度は必要ないため問題なさそうです。

気をつけていること

ツイートを公開するにあたりいくつか気をつけていることがあります。ツイートを表示してはいけない、という部分ではありますが、これを提示することで安心して使ってもらえるようにして利用してくれる方を増やす、という部分としても役に立つのではないかと思います。（まあそれはあくまでもガチ運用したい場合になると思いますが）

鍵アカウントのツイートを表示しないようにする

自分のタイムラインには鍵アカの人のツイートも表示されてしまいます。そのまま公開すると不正にその方々のツイートを表示してしまうことになりますので、それを表示しないようにする必要があります。

具体的にはUser objectにprotectedという値がありますので、それがtrueの場合は表示しないようにします。

センシティブなツイートを表示しないようにする

センシティブなツイートを適当に公開してしまうと問題がありますので、それも同様に表示しないようにします。

Tweet objectのpossibly_sensitiveがtrueの場合は表示しないようにします。

ただ、これに関してはデフォルトでは非表示にして、確認ボタンを押してくれた人だけ閲覧可能、というふうにすれば一般公開されないのでアリかもしれません。

こだわった所

Twitterと同じようなUI

~~どうでもいい部分なのですが、~~ Twitterっぽく見せた方が安心感があるし、真似てみるのも面白いかなと思い見た目を同じ感じにしてみました。（OGPは表示できませんがそれ以外を）

追記）
表示要件が定められているためそちらに従う必要があるようです。（対応できていない部分がありそうですので随時調整していきます）

Buefyをsassで読み込む前にprimaryカラーだけTwitterの色と同じにしています。

$primary: rgb(29, 161, 242) !default;
@import '~buefy/src/scss/buefy-build';

アイキャッチ画像

最近、ぱっと見て一瞬でサービス内容が分かるかわいい画像づくりにハマっているので今回も冒頭に貼っていたような画像を作りました。トップページに貼ってアクセスしてくれた人にすぐ分かってもらえるようにし、あとTwitterでシェアされた際もOGPとして表示することで興味を持ってもらいやすくしてみました。

文字でダラダラ説明を書くよりもぱっと見で分かる画像を作った方が理解してもらえる確率も上がるのではないかと思います。

僕はデザイナーでもなく有料のソフトを使っていないので、昔からInkscapeを使っています。自分でガッツリ画像を作るとなるとわかりませんが、フリー素材を切り貼りして画像を作るのであればそれで十分快適だと思います。

今回は下記の素材を使いました。おすすめです。

ゆるくてかわいい無料イラスト素材屋「ぴよたそ」

画像中のフォントは下記です。これも最近かなりハマっています。

無心 - フリーフォントのMODI工場

まとめ

ということで、元々思いつきのアイデアをミニサービスとして作る、という感じだったので一瞬で完成しました。（多分一番こだわったUIの調整と画像作成に一番時間がかかっているかもしれません）

よろしければ遊んでみてください～。

TLシェア - みんなのTwitterタイムラインを公開しよう

もし少しでも参考になった部分があったらぜひ「いいね」をお願いします！

JobLvマネージャーをリリースした話

2019-04-21T22:51:18+09:00

作ったサイトの紹介

今回作ったサイトは、こちら。
　「JobLvマネージャー」です。

自分のJob（職業）を管理、LvUpをしながら、
Twitterと連携（現時点では、名前変更）することが出来ます。

作ろうと思ったキッカケ

Twitterで繋がったユーザーさんが、名前の後ろに「〇〇Lv1」みたいなのをつけているのを見て思いつきました。
いつの間にか、こっそりLvアップしていたり、新しいものに変わっていたり。
そういう遊び心に興味が湧いて、この仕組みをもっと簡単に、管理や変更ができるようにしたサービスを作ってみたいと思ったのが始まりです。

ストックすることの大切さと、一歩踏み出す大切さ

これをタイトルした理由は、本システム、３日（時間だと８時間）で作りました。
内容からして、これが早いのかわかりませんが、これだけの時間でサービスリリースまでいけたのは、

Railsのおかげ
素材サイト様のおかげ
API(Twitter)のおかげ
今まで色々プロダクトを作ったおかげ（機能のより集め（コピペ））

Railsを使うと、簡単のWebシステムが作れます。
いろんなGemが用意されています。
規約にそえば、簡単に作れます。

素材サイト様、画像にアイコンにフォントまで、いろんなものが無料で使えます。
いつもありがとうございます！

API使えば、別のシステムの機能を自分のもののように使えます。どんどん使いましょう！

新しいもの、面白そうなものがあったら、とりあえず触ってみましょう！
形にならなくても問題ありません。いつか使える時が来ます。ストックしておきましょう。
最新の技術だからと追いかけて、サービスリリースする必要も無いと思います。
触ってみてストックする事が大事。

誰でも新卒年収800万宣言できる、Twitter就活サービス「Negomo（ネゴモ）」をリリースした。【個人開発】

2019-04-09T22:21:31+09:00

「Twitter就活の促進」をテーマにしたサービス「Negomo（ネゴモ）」をリリースしました！

自分が欲しい報酬額をツイートしてTwitter就活できるサービス「Negomo(ネゴモ)」を作ってみました！下のような画像がツイートできます。Twitterアカウントで利用できるのでぜひ使ってみてください！https://t.co/JRXFe8lHov #Negomo #RT拡散お願いします
— TaKO8Ki (@takoyaki3160) April 7, 2019

Twitterアカウントで利用できるので、もしよかったら使ってみてください！

リリースしたサービス

Negomo（ネゴモ） - もっとTwitter就活しよう！

サービスの概要

「Negomo（リンク）」は、自分が欲しい報酬額をツイートしてTwitter就活できるサービスです。

何か技術を身につけている人が、Twitterで欲しい報酬額（時給・年収）を積極的にアピールすることで、適切な報酬をもらえることを理想としています！
もちろん、エンジニア以外の方も大歓迎です！

こんな感じのツイートができます。

京都でWEB系のインターン探してます！！ https://t.co/JRXFe8lHov #Negomo #Twitter就活
— TaKO8Ki (@takoyaki3160) April 7, 2019

参考：Negomo（ネゴモ）とは

追記

単位で「兆」を選ぶことができるようになりました！
時給・月収・年収によって画像の色を変えたほうが見やすいというアドバイスをいただいたので、そのように仕様を変更しました！
既に画像を作成されている場合は、金額を変えて編集していただくと色が変わります。

デザイン

デザインはSpeakerDeckを参考にしました！

トップページ

画像作成ページ

アピールポイントのフォームの高さは可変的になっていて、コンパクトになるように心がけました。また、ポートフォリオなどのURLが入力された場合は、自動的にリンクに変換されるようになっています。

画像表示ページ

作成した画像をクリックすることでツイートできるようになっています。
アピールポイントの欄では、どれがリンクでどれが普通の文字列なのか分かりやすくするようにしました。

使用した技術

Ruby・Ruby on Rails
- IMGKit（HTMLから画像をレンダリングできるgem）
- google-analytics-rails（google analyticsが簡単に導入できるgem）
- activestorage-cloudinary-service（Active StorageとCloudinaryを繋げるgem）
JavaScript・jQuery
Cloudinary
画像を保存するストレージです。Herokuのアドオンとして利用できるので非常やりやすかったです。Active Storageと連携させて利用しています。
Git・GitHub
Postgresql
Heroku
今の所Hobbyプランを利用しています。
build pack
画像を作る部分の実装で利用しました。
アイコン
アイコンは、相変わらずフリー画像にお世話になってます。

苦労した点

今回苦労したのは、画像生成の部分です。
コードとしては下のような感じで、 HTMLから画像をレンダリングするwkhtmltoimageをRailsで利用できるようになるgem、IMGKitを利用しています。
ローカルでは比較的簡単に動かすことができましたが、Heroku上で動かすのに少し時間がかかりました。
最終的に、build packを使うのが一番良さそうだと分かったので、元からあったbuild packのレポジトリをforkして少し自分用にカスタマイズして使いました。

wkhtmltoimageをHerokuで使うためのbuild packカスタマイズ版

画像作成部分のコード

```ruby def create_image Tempfile.create(["#{@profile.id}", '.png'], :encoding => 'ascii-8bit') do | file | file.write(IMGKit.new(get_html, quality: 20, width: 800).to_png) file.rewind @profile.image.attach(io: file, filename: "q_#{@profile.id}.png", content_type: "image/png") end end def get_html <<~HTML

#{@profile.adjust_money_style}
#{@profile.title}

#{}

#{assets_image_tag('negomo.png').html_safe}

HTML end ```

リリースする上で心がけたこと

アイデアを形にするスピード

少しずつWEBサービスを作ることにも慣れてきたので、自分が思いついたアイデアを形にするスピードを意識するようにしました。それでも、このサービスを作るのに１週間ほど費やしてしまったので、まだまだだなと感じます。

ユーザーにとって分かりやすいサービスかどうか

今までも「ユーザーにとって分かりやすいサービス作り」を意識するようにはしてきましたが、イマイチ分かりやすさを追求できていないように感じていました。特に、非エンジニアの人に使ってもらうとなると非常に難しいと感じます。
そのため、今回は、大まかに言えば「画像をツイートできるだけのサービス」というシンプルな設計にしました。

最後に

タイトルに「誰でも新卒年収800万宣言できる」と書きましたが、最近、コミさんという技術的に強い方が新卒年収800万円芸なるものを行なって、話題になっているのを1フォロワーとして眺めていました。エンジニアだけでなく、他の分野にもコミさんのように優れた人材はたくさん居られると思うので、その方達がTwitterなどを利用して、しっかりといい待遇を受けられるようになればいいなと思います。
僕もその方達に加われるように頑張っていきます!
また、このサービスをきっかけに、もっとTwitter就活が当たり前になれば嬉しいです。

ここまで読んでいただきありがとうございました！

もしよろしければ、いいねボタンを押していただけたら嬉しいです！

Negomo、ぜひ使ってみてください！！

Negomo（ネゴモ） - もっとTwitter就活しよう！

参考

OGP取得用クローラのユーザーエージェントを、TwitterやLINEなど8サービスで調べてみた

2019-03-29T23:00:19+09:00

SNSなどで、投稿されたWebサイトのリンクがリッチに表示される「OGP (Open Graph Protocol)」機能。
Webサイトに簡単なメタタグを組み込むだけでOGP表示されるため、対応するサイトは増えています。
しかし、OGP用のメタタグは一般ユーザーからは見えないし、サムネイル動的生成などでサーバーに大きな負荷がかかることもあるので、できればOGP取得用クローラ以外にはメタタグを生成しないようにしたいもの。
そこで、UA(ユーザーエージェント)からクローラによるアクセスか判定するために、実際にOGP取得用クローラのUAを記録して調べてみました。

結果

2019年3月28日に記録された文字列をそのまま掲載しています。

サービス	User Agent
Twitter	Twitterbot/1.0
Facebook	facebookexternalhit/1.1 (+http://www.facebook.com/externalhit_uatext.php)
LINE	facebookexternalhit/1.1;line-poker/1.0
メッセージ(iOS)	Mozilla/5.0 (Macintosh; Intel Mac OS X 10_11_1) AppleWebKit/601.2.4 (KHTML, like Gecko) Version/9.0.1 Safari/601.2.4 facebookexternalhit/1.1 Facebot Twitterbot/1.0
Discord	Mozilla/5.0 (compatible; Discordbot/2.0; +https://discordapp.com)
Skype	Mozilla/5.0 (Windows NT 6.1; WOW64) SkypeUriPreview Preview/0.5
Slack	Slackbot-LinkExpanding 1.0 (+https://api.slack.com/robots)
Plurk	Mozilla/5.0 (compatible; PlurkBot/1.0; +https://www.plurk.com/) Firefox/61.0

もし他にもOGP表示に対応しているサービスをご存知でしたら、@barley_uralまでご連絡いただければ調査して追記していきます。

おわり