tag:crieit.net,2005:https://crieit.net/users/rubys8arks/feed かしい@お笑いSNS作成中の投稿 - Crieit Crieitでユーザーかしい@お笑いSNS作成中による最近の投稿 2018-12-14T02:51:07+09:00 https://crieit.net/users/rubys8arks/feed tag:crieit.net,2005:PublicArticle/14657 2018-12-14T02:28:39+09:00 2018-12-14T02:51:07+09:00 https://crieit.net/posts/100-Slack 100個入ってわかった! 人が集まるSlackコミュニティ運営術 <p>この記事はCrieitの<a href="https://crieit.net/advent-calendars/2018/crieit">「アドベントカレンダー Advent Calendar 2018」</a>の14日目の記事です。<br /> 昨日は<a href="https://crieit.net/users/manzyun">まんじゅ(´ん`)@CoderDojo駄Mentor</a>さんの<a href="https://crieit.net/posts/b2fa8f9298b905174336d05675775ed9">論理を煮詰めた正論は常に正しいだろうけど、時によっては鋭利なナイフにもちろんなるぞ</a>でした!</p> <h1 id="はじめに"><a href="#%E3%81%AF%E3%81%98%E3%82%81%E3%81%AB">はじめに</a></h1> <p>駆け出しエンジニアのかしい(<a target="_blank" rel="nofollow noopener" href="https://twitter.com/rubys8arks">@rubys8arks</a>)です。<br /> 個人開発を始めた頃、情報をもとめて地域のもくもく会やネット上のオープンコミュニティなどのSlackに入っていたら、気づいたら100個ものSlackに参加していました…。<br /> いろんなSlackに参加する中で見えた、「こんなSlackは参加したい」という盛り上がっているコミュニティの特徴をまとめました。</p> <h1 id="1. Slack参加のハードルを低めにする"><a href="#1.+Slack%E5%8F%82%E5%8A%A0%E3%81%AE%E3%83%8F%E3%83%BC%E3%83%89%E3%83%AB%E3%82%92%E4%BD%8E%E3%82%81%E3%81%AB%E3%81%99%E3%82%8B">1. Slack参加のハードルを低めにする</a></h1> <p>だれでもつよいエンジニアとつながりたいですが、つよいエンジニアはそうはいません。<br /> 「rubyに詳しい人」「毎日ブログを更新できる人」「バズった経験がある人」など、母数が少ない人をターゲットにSlack参加者を募集すると集まりにくくなります。<br /> 「個人開発をはじめたい人」「プログラミングを勉強しはじめた人」など、初心者歓迎にした方がコミュニティの参加人数は多くなります。<br /> 基本的にはコミュニティ全体の参加人数が多い方が、コミュニティで積極的に発言してくれるメンバーも多くなります。<br /> ※ 有料サロンなど、全メンバーのコミットメントを高く管理したい場合は別</p> <h1 id="2. 分報はつくった方が定着率高め"><a href="#2.+%E5%88%86%E5%A0%B1%E3%81%AF%E3%81%A4%E3%81%8F%E3%81%A3%E3%81%9F%E6%96%B9%E3%81%8C%E5%AE%9A%E7%9D%80%E7%8E%87%E9%AB%98%E3%82%81">2. 分報はつくった方が定着率高め</a></h1> <p>分報とは、「自分が今かんがえてること」ならなんでもOKな個人チャンネルです。<br /> <a target="_blank" rel="nofollow noopener" href="http://c16e.com/1511101558/">Slackで簡単に「日報」ならぬ「分報」をチームで実現する3ステップ〜Problemが10分で解決するチャットを作ろう</a><br /> 「途中からつくる」ということはあまりないと思うので、最初に「分報を作ってください」というルールにした方がよいです。<br /> 分報チャンネルへの加入は任意なことが多いですが、全メンバーの割合に対して見る人が少なくなるので反応が少なくなる懸念もあります。<br /> 「反応ない」→「書かない」→分報つくった意味ない<br /> になるので、自己紹介に分報を貼ってもらうなど、新規チャンネルができた場合の導線があるとよいです。<br /> 反対に、コミュニティが盛況でメンバーが増えてくると、メンバー数の分だけ分報が作られるので全部追うのが難しくなります。<br /> その場合は、人気ランキング(絵文字のリアクション数などで判断)などをつくって、見るべき分報をある程度運営側でピックアップしてあげると、ライトなメンバーにもやさしいつくりとなります。</p> <h1 id="3. カスタム絵文字は随時追加して充実させる"><a href="#3.+%E3%82%AB%E3%82%B9%E3%82%BF%E3%83%A0%E7%B5%B5%E6%96%87%E5%AD%97%E3%81%AF%E9%9A%8F%E6%99%82%E8%BF%BD%E5%8A%A0%E3%81%97%E3%81%A6%E5%85%85%E5%AE%9F%E3%81%95%E3%81%9B%E3%82%8B">3. カスタム絵文字は随時追加して充実させる</a></h1> <p>コメントするのはめんどくさくても、誰かが押したリアクションに追従するのはカンタンです。<br /> コミュニティにおいて「反応がない」→「人が来なくなる」なので、旬のアイコンやネットスラングの日本語リアクションを用意して、みんなが反応しやすくするのは大事です。<br /> <a href="https://crieit.now.sh/upload_images/af4f47081a0dbf600db7bdaa7770def95c06b6c905f6d.png" target="_blank" rel="nofollow noopener"><img src="https://crieit.now.sh/upload_images/af4f47081a0dbf600db7bdaa7770def95c06b6c905f6d.png?mw=700" alt="スクリーンショット 2018-12-05 1.37.55.png" /></a></p> <h1 id="4. Slackボットを活用してコミュニケーションを盛り上げる"><a href="#4.++Slack%E3%83%9C%E3%83%83%E3%83%88%E3%82%92%E6%B4%BB%E7%94%A8%E3%81%97%E3%81%A6%E3%82%B3%E3%83%9F%E3%83%A5%E3%83%8B%E3%82%B1%E3%83%BC%E3%82%B7%E3%83%A7%E3%83%B3%E3%82%92%E7%9B%9B%E3%82%8A%E4%B8%8A%E3%81%92%E3%82%8B">4. Slackボットを活用してコミュニケーションを盛り上げる</a></h1> <ul> <li>特定のワードがコメントされたら特定のリアクションをする (例:誰かが「おめでとう!」と言ったらくす玉のGIFが流れる)</li> <li>特定の絵文字がリアクションされたら特定のチャンネルに流す (例:誰かが「有益」絵文字をつけたら「有益」チャンネルに流す)</li> <li>新メンバー、新チャンネルができたら特定のチャンネルに流す (例:新メンバー、新チャンネルお知らせ用のチャンネルをつくっておく)</li> <li>特定のサイトからRSSでチャンネルにニュースを流す(ただこれは多すぎると結局読まなくなるので意味なし。記事を選別しつつ、手動でコメントしてあげると興味を惹かれる。)<br /> など、作業をSlackボットで自動化しておくとコミュニティ運営がラクになります。<br /> 自分ではSlack botを作れていないので、下記のサイトなどを参考にするとよいかと思います。<br /> <a target="_blank" rel="nofollow noopener" href="https://qiita.com/namutaka/items/233a83100c94af033575" target="_blank" rel="noopener">Slack Botの種類と大まかな作り方 #Slack - Qiita</a></li> </ul> <h1 id="5. Slackの創始者が積極的に発言する"><a href="#5.+Slack%E3%81%AE%E5%89%B5%E5%A7%8B%E8%80%85%E3%81%8C%E7%A9%8D%E6%A5%B5%E7%9A%84%E3%81%AB%E7%99%BA%E8%A8%80%E3%81%99%E3%82%8B">5. Slackの創始者が積極的に発言する</a></h1> <p>Slackワークスペースの作成者もしくは運営コアメンバーが顔を出してくれないと、「もうこのSlackワークスペースは動いてないのかな」「やる気なくなっちゃったのかな」という感じがします。<br /> 忙しい場合は一言「しばらく離れます」と言ったり、場合によっては他の人に管理を譲る、コミュニティを閉じるなど責任のある対応が必要です。</p> <h1 id="6. リアルイベントを開催する"><a href="#6.+%E3%83%AA%E3%82%A2%E3%83%AB%E3%82%A4%E3%83%99%E3%83%B3%E3%83%88%E3%82%92%E9%96%8B%E5%82%AC%E3%81%99%E3%82%8B">6. リアルイベントを開催する</a></h1> <p>実際にメンバーと会って話すことができると、やはり格段に親近感が湧いてオンラインでも交流しやすくなります。<br /> イベントはconnpassに登録するようなテーマを決めた勉強会でもよいし、単純にメンバー同士の交流会やもくもく会でもよいと思います。<br /> ただ、「運営が大変・・・」「だんだん人が集まらなくて開催されなくなる…」というのもあるあるです。<br /> 開催頻度や開催日程を固定して参加しやすくしたり、テーマを設定してメンバーやコミュニティ外の人の興味を惹けるようなイベントを作っていくのが大切かと思います。</p> <h1 id="7. 内輪な雑談しかないのはツライ、励ましあいつつ知見を提供しよう"><a href="#7.+%E5%86%85%E8%BC%AA%E3%81%AA%E9%9B%91%E8%AB%87%E3%81%97%E3%81%8B%E3%81%AA%E3%81%84%E3%81%AE%E3%81%AF%E3%83%84%E3%83%A9%E3%82%A4%E3%80%81%E5%8A%B1%E3%81%BE%E3%81%97%E3%81%82%E3%81%84%E3%81%A4%E3%81%A4%E7%9F%A5%E8%A6%8B%E3%82%92%E6%8F%90%E4%BE%9B%E3%81%97%E3%82%88%E3%81%86">7. 内輪な雑談しかないのはツライ、励ましあいつつ知見を提供しよう</a></h1> <p>雑談チャンネルで盛り上がるのもコミュニティでは大切です。<br /> ただ、「○○さんが××らしい」といった内輪ネタや、アニメ・ゲームなどの「前提知識がないとわからないネタ」が多いと新規参加者には入りづらいです。<br /> 基本的には「有益な情報(ブログ記事だったりニュースだったり)」や「参加者の悩みや喜びに対する共感・励まし」が大事だと思います。<br /> <a href="https://crieit.now.sh/upload_images/f00e454a6902b006d11d98d065c49d715c06b6e493783.png" target="_blank" rel="nofollow noopener"><img src="https://crieit.now.sh/upload_images/f00e454a6902b006d11d98d065c49d715c06b6e493783.png?mw=700" alt="sns_nakamahazure_woman.png" /></a></p> <h1 id="まとめ"><a href="#%E3%81%BE%E3%81%A8%E3%82%81">まとめ</a></h1> <p>キリストは「与えよ、さらば与えられん」と言いましたが、コミュニティ運営においても似たようなことが言えます。<br /> 自分がやってほしいこと(積極的な発言や反応、アドバイスなど)をまずメンバーに自分がやってあげると、「私もやってみようかな」という気にメンバーがなりやすいです。<br /> あなたのSlackコミュニティが活発になることを願っております!</p> <p>明日は<a href="https://crieit.net/users/yahsan2">yahsan2</a>さんが最近リリースしたサービス<a target="_blank" rel="nofollow noopener" href="https://poiit.me/">poiit(ポイート)</a>について書いてくれます!</p> かしい@お笑いSNS作成中 tag:crieit.net,2005:PublicArticle/14650 2018-12-12T17:46:44+09:00 2018-12-13T10:51:42+09:00 https://crieit.net/posts/15-Slack 15分でできる!Slackのオープンコミュニティの作り方 <p>この記事はCrieitの<a href="https://crieit.net/advent-calendars/2018/crieit">「アドベントカレンダー Advent Calendar 2018」</a>の12日目の記事です。<br /> 昨日は<a href="https://crieit.net/users/fk2000">fk2000</a>さんの<a href="https://crieit.net/posts/Hugo">Hugoでブログ付きのポートフォリオサイト</a>でした!</p> <h1 id="はじめに"><a href="#%E3%81%AF%E3%81%98%E3%82%81%E3%81%AB">はじめに</a></h1> <p>駆け出しエンジニアのかしい(<a target="_blank" rel="nofollow noopener" href="https://twitter.com/rubys8arks">@rubys8arks</a>)です。<br /> 技術書典でアンソロジー(合同誌)を出す関係で、Slackのコミュニティを新しく作成しました!<br /> そのときに気づいたSlackのワークスペース作成の手順とTipsをまとめます。</p> <h1 id="1. ワークスペースの作成"><a href="#1.+%E3%83%AF%E3%83%BC%E3%82%AF%E3%82%B9%E3%83%9A%E3%83%BC%E3%82%B9%E3%81%AE%E4%BD%9C%E6%88%90">1. ワークスペースの作成</a></h1> <p>とにもかくにも<a target="_blank" rel="nofollow noopener" href="https://get.slack.help/hc/ja/articles/217626298-Slack-のはじめ方-ワークスペース作成者編">Slack公式</a>から新しいワークスペースを作成します。<br /> メールアドレスを入力すると確認コードが届くので、入力して作成を完了します。<br /> ワークスペース名・ワークスペースURLは後から変えられますが、わかりやすいものがよいです。<br /> <a href="https://crieit.now.sh/upload_images/9220040c10b757f955e15a049d46a4e95c10cc6b5f83b.png" target="_blank" rel="nofollow noopener"><img src="https://crieit.now.sh/upload_images/9220040c10b757f955e15a049d46a4e95c10cc6b5f83b.png?mw=700" alt="スクリーンショット 2018-12-12 17.47.18.png" /></a></p> <h1 id="2. チャンネルの作成"><a href="#2.+%E3%83%81%E3%83%A3%E3%83%B3%E3%83%8D%E3%83%AB%E3%81%AE%E4%BD%9C%E6%88%90">2. チャンネルの作成</a></h1> <p>デフォルトではgeneral(一般)とrandom(雑談)チャンネルが作成されます。<br /> Gmailで作成する場合、ワークスペースの設定言語を日本語/英語にしておかないとデフォルトのチャンネル名や説明文が英語以外で作成されてしまうので注意。<br /> (私はGmailをフランス語設定にしていたので、チャンネルがフランス語で作成されてしまい焦りました)<br /> <a href="https://crieit.now.sh/upload_images/2f6cc6d15066b03acd15ae921997bb815c06b752099f9.png" target="_blank" rel="nofollow noopener"><img src="https://crieit.now.sh/upload_images/2f6cc6d15066b03acd15ae921997bb815c06b752099f9.png?mw=700" alt="スクリーンショット 2018-12-05 1.35.12.png" /></a></p> <p>よくあるチャンネル<br /> - ランディングページ(readme):Slackの目的、コミュニティのガイドラインなどを説明<br /> - 自己紹介(member_profile):初めて来た人がまず挨拶する場所</p> <p>立ち上げの段階でチャンネルがありすぎても使い分けが難しいので、テーマに応じて3〜5つ程度あれば十分かと。<br /> チャンネルごとのトピックも念のため設定しておくとわかりやすいです。</p> <h1 id="3. デフォルトチャンネルの設定"><a href="#3.+%E3%83%87%E3%83%95%E3%82%A9%E3%83%AB%E3%83%88%E3%83%81%E3%83%A3%E3%83%B3%E3%83%8D%E3%83%AB%E3%81%AE%E8%A8%AD%E5%AE%9A">3. デフォルトチャンネルの設定</a></h1> <p>Slackに入ると同時にメンバーが自動的に入室できるチャンネルを設定しておきます。<br /> 後からチャンネルに個別に入室するのはめんどう&入り忘れる人が必ず出るので、メンバーをInviteする前にやっておくとよいです。<br /> 基本的には分報(メンバーの個人チャンネル)以外のメインのチャンネルを設定しておけばOKかと。<br /> モバイルアプリからだと設定できない?ので、デスクトップから設定します。<br /> もしくは、https://ワークスペース名.slack.com/admin/settings から設定画面にアクセスできます。<br /> <a href="https://crieit.now.sh/upload_images/74970601501f309ce92d4f6b126b75e15c06b7697064d.png" target="_blank" rel="nofollow noopener"><img src="https://crieit.now.sh/upload_images/74970601501f309ce92d4f6b126b75e15c06b7697064d.png?mw=700" alt="スクリーンショット 2018-12-05 1.35.29.png" /></a></p> <h1 id="4. ワークスペースのアイコンの設定"><a href="#4.+%E3%83%AF%E3%83%BC%E3%82%AF%E3%82%B9%E3%83%9A%E3%83%BC%E3%82%B9%E3%81%AE%E3%82%A2%E3%82%A4%E3%82%B3%E3%83%B3%E3%81%AE%E8%A8%AD%E5%AE%9A">4. ワークスペースのアイコンの設定</a></h1> <p>設定しなくてもワークスペースのイニシャルが自動で設定されますが、ある方が愛着が湧きます。<br /> デザインに凝る必要はないので、フリーアイコンなどを使用すればOK。<br /> こちらもモバイルアプリからだと設定できない?ので、デスクトップから設定します。<br /> もしくは、https://ワークスペース名.slack.com/admin/settings から設定画面にアクセスできます。<br /> <a href="https://crieit.now.sh/upload_images/d8fcae68f4627ec8b82189dd9309adad5c06b779c4827.png" target="_blank" rel="nofollow noopener"><img src="https://crieit.now.sh/upload_images/d8fcae68f4627ec8b82189dd9309adad5c06b779c4827.png?mw=700" alt="スクリーンショット 2018-12-05 1.37.23.png" /></a></p> <h1 id="5. カスタム絵文字(日本語リアクション)の設定"><a href="#5.+%E3%82%AB%E3%82%B9%E3%82%BF%E3%83%A0%E7%B5%B5%E6%96%87%E5%AD%97%28%E6%97%A5%E6%9C%AC%E8%AA%9E%E3%83%AA%E3%82%A2%E3%82%AF%E3%82%B7%E3%83%A7%E3%83%B3%29%E3%81%AE%E8%A8%AD%E5%AE%9A">5. カスタム絵文字(日本語リアクション)の設定</a></h1> <p>「すごい!」「ありがと」など、日本語リアクションのカスタム絵文字はSlack上のコミュニケーションを円滑にしてくれます。<br /> 1個1個設定するのは大変なので、既存のSlackグループから一括でコピーさせてもらうのがオススメ。<br /> 基本的にはこの記事のとおりにやれば、カスタム絵文字のExport/Importができます。<br /> <a target="_blank" rel="nofollow noopener" href="https://qiita.com/ne-peer/items/cbdef4f02b1bb6103e51">Slackの絵文字(emoji)を一括エクスポート&インポートする</a><br /> 記事内でオススメされているChrome拡張機能ですが、カスタム絵文字が0個の状態だと表示されなかったので、テストで1個絵文字をアップロードするとよいです。<br /> <a href="https://crieit.now.sh/upload_images/af4f47081a0dbf600db7bdaa7770def95c06b798ef259.png" target="_blank" rel="nofollow noopener"><img src="https://crieit.now.sh/upload_images/af4f47081a0dbf600db7bdaa7770def95c06b798ef259.png?mw=700" alt="スクリーンショット 2018-12-05 1.37.55.png" /></a></p> <h1 id="6. メンバーをInviteする"><a href="#6.+%E3%83%A1%E3%83%B3%E3%83%90%E3%83%BC%E3%82%92Invite%E3%81%99%E3%82%8B">6. メンバーをInviteする</a></h1> <p>下準備完了!ということで、いよいよメンバーをInviteしてSlackコミュニティを立ち上げます。<br /> 自己紹介してもらったら、カスタム絵文字だけでなくコメントもしてあげるとウェルカム感が強くなります。</p> <h1 id="まとめ"><a href="#%E3%81%BE%E3%81%A8%E3%82%81">まとめ</a></h1> <p>Slackコミュニティの作成って、「Slackのワークスペースつくるだけでしょ?」と思いきや、いろいろ設定することがあります。<br /> 初めてSlackのワークスペースを作る場合は設定がこんがらがるので、余裕をもって作業した方がよいです。<br /> あなたのSlackオープンコミュニティが活発になることを願っています!</p> <p>明日は<a href="https://crieit.net/users/manzyun">まんじゅ(´ん`)@CoderDojo駄Mentor</a>の記事です!</p> かしい@お笑いSNS作成中 tag:crieit.net,2005:PublicArticle/14643 2018-12-11T01:50:38+09:00 2018-12-13T10:35:17+09:00 https://crieit.net/posts/SNS-Tumblr ブログSNS『Tumblr』を無理やりユーザー投稿型メディアとして運営した話 <p>この記事は、<a href="https://crieit.net/advent-calendars/2018/technology">「個人開発サービスに用いられている技術 Advent Calendar 2018」</a>11日目の記事です。<br /> 10日目の昨日は<a href="https://crieit.net/users/tRiaeZ1">iotas</a>さんの<a href="https://crieit.net/posts/WorldType">「創作支援ツール「WorldType」に使われている技術」</a>でした!</p> <h1 id="はじめに"><a href="#%E3%81%AF%E3%81%98%E3%82%81%E3%81%AB">はじめに</a></h1> <p>駆け出しエンジニアのかしい(<a target="_blank" rel="nofollow noopener" href="https://twitter.com/rubys8arks">@rubys8arks</a>)です。<br /> 2017年10月〜2018年11月まで、お笑いライブの検索サービス「wArally!」(現ワラリー!)をTumblrのサブブログ(※)サービスを使って運用していました。<br /> Tumblrのいいところ、悪いところを紹介しつつ、WEBサービスとして使う場合の無理やり改変ポイントを解説します。</p> <h1 id="運営していたサイト"><a href="#%E9%81%8B%E5%96%B6%E3%81%97%E3%81%A6%E3%81%84%E3%81%9F%E3%82%B5%E3%82%A4%E3%83%88">運営していたサイト</a></h1> <p><a target="_blank" rel="nofollow noopener" href="https://warally.tumblr.com/">wArally! - お笑いライブ検索</a><br /> データは更新されていませんが、無料ブログなので今でも閲覧はできます。<br /> 運営していたときはこのページに独自ドメインを設定していました。<br /> <a href="https://crieit.now.sh/upload_images/a54bd4efa7b8a73add4462e38b5bcd9f5c06d1796b514.png" target="_blank" rel="nofollow noopener"><img src="https://crieit.now.sh/upload_images/a54bd4efa7b8a73add4462e38b5bcd9f5c06d1796b514.png?mw=700" alt="スクリーンショット 2018-12-05 4.11.25.png" /></a><br /> 「Esten」というTumblrのテーマをカスタマイズしているのですが、オリジナルはこちらから閲覧できます。<br /> <a target="_blank" rel="nofollow noopener" href="http://esten-theme.tumblr.com/">http://esten-theme.tumblr.com/</a><br /> <a href="https://crieit.now.sh/upload_images/03249b4627e2542715009e29f6f4b6125c0e9995abce4.png" target="_blank" rel="nofollow noopener"><img src="https://crieit.now.sh/upload_images/03249b4627e2542715009e29f6f4b6125c0e9995abce4.png?mw=700" alt="スクリーンショット 2018-12-11 1.51.03.png" /></a><br /> 記事ヘッダーのLIKE数とコメント数、記事フッターの「VIEW|LIKE|REBLOG|SHARE」の部分などを削除しています。</p> <h1 id="Tumblrのよいところ"><a href="#Tumblr%E3%81%AE%E3%82%88%E3%81%84%E3%81%A8%E3%81%93%E3%82%8D">Tumblrのよいところ</a></h1> <h2 id="広告なし、デザインがすっきりキレイ"><a href="#%E5%BA%83%E5%91%8A%E3%81%AA%E3%81%97%E3%80%81%E3%83%87%E3%82%B6%E3%82%A4%E3%83%B3%E3%81%8C%E3%81%99%E3%81%A3%E3%81%8D%E3%82%8A%E3%82%AD%E3%83%AC%E3%82%A4">広告なし、デザインがすっきりキレイ</a></h2> <p>Tumblrの特徴は、なんといってもおしゃれなテーマが無料で豊富にあることです。<br /> 特に写真をメインにしたタイル型のサイトデザインが映えます。(Esten、Elise、Indyなど)<br /> サーバー依存の広告もないので、スタイリッシュなサイトを誰でもさっと作ることができます。</p> <h2 id="無料・かんたんに独自ドメイン+SSLの設定が可能"><a href="#%E7%84%A1%E6%96%99%E3%83%BB%E3%81%8B%E3%82%93%E3%81%9F%E3%82%93%E3%81%AB%E7%8B%AC%E8%87%AA%E3%83%89%E3%83%A1%E3%82%A4%E3%83%B3%EF%BC%8BSSL%E3%81%AE%E8%A8%AD%E5%AE%9A%E3%81%8C%E5%8F%AF%E8%83%BD">無料・かんたんに独自ドメイン+SSLの設定が可能</a></h2> <p>Tumblrの設定画面から独自ドメインとSSLの設定ができます。<br /> Cloudflareなどの外部サービスを使う必要はありません。(DNSレコードでCNAMEの設定は必要)<br /> <a href="https://crieit.now.sh/upload_images/a44be96a741cd5d053eb70c2cf77dd025c06d1d991ea0.png" target="_blank" rel="nofollow noopener"><img src="https://crieit.now.sh/upload_images/a44be96a741cd5d053eb70c2cf77dd025c06d1d991ea0.png?mw=700" alt="スクリーンショット 2018-12-05 3.24.33.png" /></a></p> <h2 id="シングルページでフロントエンドのみ自由にカスタマイズできる"><a href="#%E3%82%B7%E3%83%B3%E3%82%B0%E3%83%AB%E3%83%9A%E3%83%BC%E3%82%B8%E3%81%A7%E3%83%95%E3%83%AD%E3%83%B3%E3%83%88%E3%82%A8%E3%83%B3%E3%83%89%E3%81%AE%E3%81%BF%E8%87%AA%E7%94%B1%E3%81%AB%E3%82%AB%E3%82%B9%E3%82%BF%E3%83%9E%E3%82%A4%E3%82%BA%E3%81%A7%E3%81%8D%E3%82%8B">シングルページでフロントエンドのみ自由にカスタマイズできる</a></h2> <p>既存のテーマからHTMLやCSSをカスタマイズできるほか、JavascriptやjQueryも使用可能です。(その他のライブラリは試してないのでわかりません)<br /> Tumblrの記事一覧ページ、記事詳細ページ、検索フォームなどの基本機能がそのまま使えます。<br /> 「ページを追加」ボタンから静的ページを99個まで追加することも可能です。<br /> Tumblr独自のタグを使って環境変数を設定したり、記事ごとの変数を取得することもできます。<br /> (参考:<a target="_blank" rel="nofollow noopener" href="http://tagblr.tumblr.com/">Tumblr で使えるタグ</a>)<br /> <a href="https://crieit.now.sh/upload_images/b0e2297e508b0006ad227962f05142195c06d1fce76dd.png" target="_blank" rel="nofollow noopener"><img src="https://crieit.now.sh/upload_images/b0e2297e508b0006ad227962f05142195c06d1fce76dd.png?mw=700" alt="スクリーンショット 2018-12-05 3.28.26.png" /></a></p> <h1 id="Tumblrの無理やり改変ポイント"><a href="#Tumblr%E3%81%AE%E7%84%A1%E7%90%86%E3%82%84%E3%82%8A%E6%94%B9%E5%A4%89%E3%83%9D%E3%82%A4%E3%83%B3%E3%83%88">Tumblrの無理やり改変ポイント</a></h1> <h2 id="「ゲスト投稿」機能を使ってユーザーからの投稿を受け付ける"><a href="#%E3%80%8C%E3%82%B2%E3%82%B9%E3%83%88%E6%8A%95%E7%A8%BF%E3%80%8D%E6%A9%9F%E8%83%BD%E3%82%92%E4%BD%BF%E3%81%A3%E3%81%A6%E3%83%A6%E3%83%BC%E3%82%B6%E3%83%BC%E3%81%8B%E3%82%89%E3%81%AE%E6%8A%95%E7%A8%BF%E3%82%92%E5%8F%97%E3%81%91%E4%BB%98%E3%81%91%E3%82%8B">「ゲスト投稿」機能を使ってユーザーからの投稿を受け付ける</a></h2> <p>Tumblrには「ゲスト投稿」という機能があり、ユーザーからブログへの投稿を受け付けることができます。<br /> この機能を使って、「ユーザーからのライブ情報の登録を受け付ける」というかたちをとっていました。<br /> <a href="https://crieit.now.sh/upload_images/523316c6073b847dbfa5a8b7ffa8f5535c06d21f818b3.png" target="_blank" rel="nofollow noopener"><img src="https://crieit.now.sh/upload_images/523316c6073b847dbfa5a8b7ffa8f5535c06d21f818b3.png?mw=700" alt="スクリーンショット 2018-12-05 3.27.38.png" /></a><br /> - 名前やメールアドレスの入力が必須<br /> - Tumblrにログインしていない場合、reCAPTCHAによる非ロボット認証が必須<br /> - ゲスト投稿後、管理者による投稿の承認が必須<br /> - ゲスト投稿の通知はないので、都度Tumblrにログインして投稿がないか確かめる必要がある(だいたい来てなくて落ち込む)<br /> と制約は多くあったのですが、たまにライブ主催者の方やファンが登録してくれて、1ヶ月に50件程度はユーザーが記事を投稿してくれていました。<br /> (首都圏で開催されるお笑いライブの全数は1ヶ月に約1000件くらいあり、手動で登録できていたのは300〜400件程度)<br /> しかし、旅行で1ヶ月サービス運営をお休みした後から、如実にユーザーからの投稿数が減ってしまって悲しくなりました…。<br /> 休むことはお知らせはしていたのですが、ユーザーからするとせっかく投稿したのに放置される、投稿習慣がなくなるわけですから厳しかったです。<br /> 終盤はユーザーからの投稿が1ヶ月数件レベルにまで落ち込んでいたので、スクレイピングで自動登録できる現サービスに移行できてよかったです…。</p> <h2 id="「フォローする」ボタンを消す"><a href="#%E3%80%8C%E3%83%95%E3%82%A9%E3%83%AD%E3%83%BC%E3%81%99%E3%82%8B%E3%80%8D%E3%83%9C%E3%82%BF%E3%83%B3%E3%82%92%E6%B6%88%E3%81%99">「フォローする」ボタンを消す</a></h2> <p>TumblrをSNSではなく静的サイトとして運用する場合、Tumblr固有の「フォローする」ボタン(右上)は邪魔になります。</p> <p>PCでは表示を消せないようなのですが、モバイルではCSSで表示を消せるのでひょいっと消しちゃいましょう。</p> <pre><code>iframe#tumblr_controls { display:none; } </code></pre> <h2 id="「スキ!」「リブログ」ボタンを消す"><a href="#%E3%80%8C%E3%82%B9%E3%82%AD%21%E3%80%8D%E3%80%8C%E3%83%AA%E3%83%96%E3%83%AD%E3%82%B0%E3%80%8D%E3%83%9C%E3%82%BF%E3%83%B3%E3%82%92%E6%B6%88%E3%81%99">「スキ!」「リブログ」ボタンを消す</a></h2> <p>「フォロー」ボタンと同様、Tumblrユーザー向けの「スキ!」(Twitterでのいいね)と「リブログ」(TwitterでのRT)ボタンも不要です。<br /> サイトのターゲットにもよりますが、日本ではTumblr利用者が少ないため、SNSとしてTumblrを利用するメリットはあまりありません。<br /> テーマの中から「LIKE」「REBLOG」に関連する部分のhtmlを削除します。</p> <h3 id="LIKE数、コメント数を表示する部分を削除"><a href="#LIKE%E6%95%B0%E3%80%81%E3%82%B3%E3%83%A1%E3%83%B3%E3%83%88%E6%95%B0%E3%82%92%E8%A1%A8%E7%A4%BA%E3%81%99%E3%82%8B%E9%83%A8%E5%88%86%E3%82%92%E5%89%8A%E9%99%A4">LIKE数、コメント数を表示する部分を削除</a></h3> <pre><code><div class="post-counts"> {block:IfShowPostNotesCount} <span class="notes-number">{NoteCount}</span> <span class="icon-heart icon"></span> {/block:IfShowPostNotesCount} {block:IfDisqusShortname}{block:IfShowPostCommentsCount} <span class="dsq-comment-count"><a href="{Permalink}#disqus_thread">0</a></span> <span class="icon-comment icon"></span> {/block:IfShowPostCommentsCount}{/block:IfDisqusShortname} </div> </code></pre> <h3 id="LIKEボタンとREBLOGボタンを削除"><a href="#LIKE%E3%83%9C%E3%82%BF%E3%83%B3%E3%81%A8REBLOG%E3%83%9C%E3%82%BF%E3%83%B3%E3%82%92%E5%89%8A%E9%99%A4">LIKEボタンとREBLOGボタンを削除</a></h3> <pre><code><div class="like-button"> {LikeButton} <div class="like-btn">{text:Like label}</div> <div class="unlike-btn">{text:Unlike label}</div> </div> <div> <a href="{ReblogURL}">{text:Reblog label}</a> </div> </code></pre> <h1 id="Tumblrでサービス運営する際の注意点"><a href="#Tumblr%E3%81%A7%E3%82%B5%E3%83%BC%E3%83%93%E3%82%B9%E9%81%8B%E5%96%B6%E3%81%99%E3%82%8B%E9%9A%9B%E3%81%AE%E6%B3%A8%E6%84%8F%E7%82%B9">Tumblrでサービス運営する際の注意点</a></h1> <h2 id="コードのバックアップは必須"><a href="#%E3%82%B3%E3%83%BC%E3%83%89%E3%81%AE%E3%83%90%E3%83%83%E3%82%AF%E3%82%A2%E3%83%83%E3%83%97%E3%81%AF%E5%BF%85%E9%A0%88">コードのバックアップは必須</a></h2> <p>Tumblrには、Gitやはてなブログのようにファイルをブラウザ上でバージョン管理してくれるなんて便利な機能は存在しません。<br /> 変更を加えた都度、自分でテキストエディタに保存してバックアップする必要があります。<br /> プレビュー機能もあるのですが、いかんせん挙動が安定せず、結局「保存」ボタンを押して一度管理画面を閉じないと変更が反映されません。<br /> そしてなぜか<strong>「保存できとらんやん!!」</strong>という事態も発生します。<br /> ブラウザ上で保存したはずのコードは戻ってこないので、管理画面を閉じる前に必ずローカルのテキストエディタにバックアップを取ることを推奨いたします…。<br /> Tumblrのサブブログは無料で10個まで作成できるため、本番用のブログとは別に、同じテーマのブログを作っておくとオリジナルテーマと自分がカスタマイズしたテーマの差分を確認することができます。</p> <h2 id="SEOが弱い"><a href="#SEO%E3%81%8C%E5%BC%B1%E3%81%84">SEOが弱い</a></h2> <p>もともとTumblrはサービス内で交流を完結させるという思想のため、GoogleのSEOは強くありません。<br /> 設定で「検索から除外する」のチェックボックスを入れなければ一応クローリングの対象にはなるのですが、あまり検索結果の上位に表示されることはないようです。<br /> TwitterなどSNSで集客する場合はよいですが、GoogleのSEOで集客したい場合はかなりのウィークポイントとなります…。<br /> <a href="https://crieit.now.sh/upload_images/1620d7cfc4ffdf578217c1888413da925c06d0b49da00.png" target="_blank" rel="nofollow noopener"><img src="https://crieit.now.sh/upload_images/1620d7cfc4ffdf578217c1888413da925c06d0b49da00.png?mw=700" alt="スクリーンショット 2018-12-05 3.24.53.png" /></a></p> <h1 id="まとめ:TumblrでWEBサービス運営は無理がある、素直にポートフォリオサイトとして使おう"><a href="#%E3%81%BE%E3%81%A8%E3%82%81%EF%BC%9ATumblr%E3%81%A7WEB%E3%82%B5%E3%83%BC%E3%83%93%E3%82%B9%E9%81%8B%E5%96%B6%E3%81%AF%E7%84%A1%E7%90%86%E3%81%8C%E3%81%82%E3%82%8B%E3%80%81%E7%B4%A0%E7%9B%B4%E3%81%AB%E3%83%9D%E3%83%BC%E3%83%88%E3%83%95%E3%82%A9%E3%83%AA%E3%82%AA%E3%82%B5%E3%82%A4%E3%83%88%E3%81%A8%E3%81%97%E3%81%A6%E4%BD%BF%E3%81%8A%E3%81%86">まとめ:TumblrでWEBサービス運営は無理がある、素直にポートフォリオサイトとして使おう</a></h1> <p>上述のほかにもTumblrには固有の制約がかなり多くあり、サービスの実運用で使うのは<strong>全くおすすめできません!!</strong><br /> ログインなしで記事投稿しようとするとreCAPTCHAの画像認証が入るため、プログラムで記事を一括自動登録、ということができず個人的につらかったです…。<br /> 結局6000記事以上を手動でぽちぽち登録するはめになり、途方もなさすぎて1年間運営している途中で何度もくじけそうになりました…。(実際放置気味の月もありました。データがたくさん入ってても入ってなくてもアクセス数はそんなに変わらず、それも徒労感を増してました(逆に言えば毎日とりあえず見る、というリピーターがついてくれてたのでありがたいですが))<br /> <strong>Tumblrは素直にポートフォリオとして使いましょう!!</strong><br /> それか、さっと作れるので、細かいCSSを気にせずになんとなくの個人開発プロダクトのデザイン(モックアップ)を作ってみるのにはいいと思います。<br /> <strong>結局ほしいものは自分の手でつくるしかないんや!!がんばれ個人開発者!!!!!!!!!!!!!!!</strong></p> <p>明日は<a href="https://crieit.net/users/tecco_master">Tecco XIII</a>さんです!</p> <p>※ Tumblrにはメインブログとサブブログの2種類のブログがある。メインブログは自分のタイムライン用という感じなので、静的サイトを作りたいのであればサブブログ推奨。Tumblrのメインブログとサブブログの違いについては公式ヘルプページを参照 <a target="_blank" rel="nofollow noopener" href="https://tumblr.zendesk.com/hc/ja/articles/226340048-%E3%83%A1%E3%82%A4%E3%83%B3%E3%83%96%E3%83%AD%E3%82%B0%E3%81%A8%E3%82%B5%E3%83%96%E3%83%96%E3%83%AD%E3%82%B0">メインブログとサブブログ</a>)</p> かしい@お笑いSNS作成中 tag:crieit.net,2005:PublicArticle/14602 2018-11-14T03:54:58+09:00 2018-12-01T00:48:50+09:00 https://crieit.net/posts/9e9335bba9fc889376930efc04478276 日本脱出するなら?初心者でも作れる診断サービスの仕様を考えてみる <p>こんにちは、かしいです。<br /> 2018年11月12日、はじめて作ったWEBサービスをリリースしました!<br /> <a href="https://crieit.net/posts/Web-100">Web未経験から100日でリリース!「お笑いライブの検索サイト」をつくりました【個人開発】</a></p> <p>でもこの「検索サイト」というWEBサービスは、初心者が作るにはハードルが高すぎました…。<br /> データのほとんどを管理者側で用意する必要があり、検索機能も充実させ…と考えるとかなり実装に手間取ってしまいました。<br /> 本来『初心者が作るべきは診断メーカー』、というせせりさんのアドバイスを元に、次回作として「診断メーカー」のサービス案を考えてみます。<br /> <a target="_blank" rel="nofollow noopener" href="http://blog.sesere.net/entry/2017/10/30/105325">【最高のサービスは診断メーカー】資金力も知名度も無い初心者のwebサービス運営者が現実的にユーザーを獲得できるサービスの設計方法</a></p> <h1 id="サービスのコンセプト"><a href="#%E3%82%B5%E3%83%BC%E3%83%93%E3%82%B9%E3%81%AE%E3%82%B3%E3%83%B3%E3%82%BB%E3%83%97%E3%83%88">サービスのコンセプト</a></h1> <p>「日本が生きづらい」と考えてる人に、「今より自分に合ってる場所があるんだ」と知ってもらう<br /> <a href="https://crieit.now.sh/upload_images/18f16b6ad35f2666d82c00ea25eb3e505beb2f013ab26.jpg" target="_blank" rel="nofollow noopener"><img src="https://crieit.now.sh/upload_images/18f16b6ad35f2666d82c00ea25eb3e505beb2f013ab26.jpg?mw=700" alt="Dr6H8NKVAAAUTaV.jpg" /></a><br /> 「日本が生きづらい」と考えてる人はたくさんいる<br /> (例) 「村」「世間」などの密着した共同体のあり方、能力よりしきたりを優先する、年功序列、出る釘を打つ文化(同調圧力)など<br /> →だったら自分の性格が合う文化の国に移住すればよいのではないか?<br /> →自分の性格に合っている国がどこにあるか事前に知れれば、言語の勉強もしやすいしムリして日本に馴染もうとしなくて悩む必要もなく済むのでは?</p> <h1 id="サービスの仕様"><a href="#%E3%82%B5%E3%83%BC%E3%83%93%E3%82%B9%E3%81%AE%E4%BB%95%E6%A7%98">サービスの仕様</a></h1> <h2 id="質問画面"><a href="#%E8%B3%AA%E5%95%8F%E7%94%BB%E9%9D%A2">質問画面</a></h2> <p><a href="https://crieit.now.sh/upload_images/d949aa4860b3000abb937633364aaa065beb2f2d7f8b5.jpg" target="_blank" rel="nofollow noopener"><img src="https://crieit.now.sh/upload_images/d949aa4860b3000abb937633364aaa065beb2f2d7f8b5.jpg?mw=700" alt="Dr6H8XgU8AA29Ya.jpg" /></a><br /> 質問を5問くらい答えたら結果が出る<br /> (5問×55種類の回答にすれば243通りなので世界の国を網羅する196か国以上になる。<br /> ただ196種類回答を用意するのは大変すぎるので回答の種類を減らす。<br /> 5問×2種類で32通りか、3問×3種類で27通りにしてはどうか)<br /> アプリみたいな感じですいすい進める。</p> <h2 id="結果の表示"><a href="#%E7%B5%90%E6%9E%9C%E3%81%AE%E8%A1%A8%E7%A4%BA">結果の表示</a></h2> <p><a href="https://crieit.now.sh/upload_images/07dfb974baa7bc9bef8dc18579219a675beb30ed11580.jpg" target="_blank" rel="nofollow noopener"><img src="https://crieit.now.sh/upload_images/07dfb974baa7bc9bef8dc18579219a675beb30ed11580.jpg?mw=700" alt="Dr6JoK0U8AAm1aS.jpg" /></a><br /> 結果「あなたの脱出先は…『国名』です!」<br /> 結果画面では回答に応じて、その国になった理由が5枚のスライドで確認できる<br /> 結果はTwitterにツイートして公開できる<br /> Twitterカードで世界地図が出る、自分のタイプが該当する国がハイライトされる<br /> →世界地図だと小さすぎて見えない?<br /> ハッシュタグ # 日本脱出するなら</p> <h1 id="サービスの懸念点"><a href="#%E3%82%B5%E3%83%BC%E3%83%93%E3%82%B9%E3%81%AE%E6%87%B8%E5%BF%B5%E7%82%B9">サービスの懸念点</a></h1> <ul> <li><p>データはどうやって集める?(どうやって196か国の指標を集めるのか?)<br /> ちゃんと事実に基づいて診断結果を考えようとすると大変すぎる!!!<br /> →フツーに考えると民主主義じゃない国、治安が悪すぎる国(紛争地帯とか)は移住先として除外されるので実際の診断結果は196種類より少なくなるはず。10〜30種類に絞るとして、どの国を脱出先に選ぶか?</p></li> <li><p>バズる気がしない<br /> 「あなたが合う国はここ!」とやるより「あなたは何人と付き合える!」とかやった方がわかりやすい気がする<br /> 診断サービスは「何が出るかな?」という期待感が大事で結果が学術的に妥当かどうかはあまり関係ないので、単純に結果をランダムで表示する方がシステム的にはカンタンになる。</p></li> </ul> <p>喫茶店のルーレット式おみくじ器と同じで、入り口は違うけど結果は同じという構造でいい気もする<br /> (※古きよき喫茶店に置いてあるやつ。干支や星座に応じた穴に100円を入れて占いができる。中の構造は入れてある紙が順番に出るだけなので、どの入り口からお金を入れても結果には関係ない。)<br /> <a href="https://crieit.now.sh/upload_images/5804ab562482089f55fd3a8d1cb923255beb341c46475.jpg" target="_blank" rel="nofollow noopener"><img src="https://crieit.now.sh/upload_images/5804ab562482089f55fd3a8d1cb923255beb341c46475.jpg?mw=700" alt="Dr6MxlyUUAAfRfQ.jpg" /></a><br /> 参考:<a target="_blank" rel="nofollow noopener" href="https://omikuji-seisakusho.stores.jp/items/55dd00b7ef33772898002870">ルーレット式おみくじ器</a></p> かしい@お笑いSNS作成中 tag:crieit.net,2005:PublicArticle/14601 2018-11-14T03:32:24+09:00 2018-11-14T04:10:54+09:00 https://crieit.net/posts/Web-100 Web未経験から100日でリリース!「お笑いライブの検索サイト」をつくりました【個人開発】 <p>こんにちは、かしい(<a target="_blank" rel="nofollow noopener" href="https://twitter.com/rubys8arks">@rubys8arks</a>)と申します。<br /> SIerで働いていましたが、WEB業界への転職を目指しプログラミングの勉強を始めました。<br /> データベースなどの知識は少しあったものの、Webアプリケーションの開発は今回が完全に初めてです!</p> <h1 id="作ったもの"><a href="#%E4%BD%9C%E3%81%A3%E3%81%9F%E3%82%82%E3%81%AE">作ったもの</a></h1> <p>お笑いライブの検索サイトです。日付やキーワードで東京近郊のお笑いライブを横断検索できます。<br /> - <a target="_blank" rel="nofollow noopener" href="https://warally.info">ワラリー! - お笑いライブ検索(東京)</a></p> <blockquote class="twitter-tweet" data-lang="fr"><p lang="ja" dir="ltr">🎊Web系未経験の初心者が100日間で初めてのrailsサービスをリリース🎊👉<a target="_blank" rel="nofollow noopener" href="https://t.co/qL6fAtOi5i">https://t.co/qL6fAtOi5i</a>首都圏のお笑いライブを日付やキーワードで横断検索できるサービスです!・5秒で使えるTwitterログイン・わかりやすいUI・13サイトからデータを毎日スクレイピングよかったら見てください〜✨ <a target="_blank" rel="nofollow noopener" href="https://t.co/7js7F9Bs8p">pic.twitter.com/7js7F9Bs8p</a></p>— かしい@お笑いSNSつくった (@rubys8arks) <a target="_blank" rel="nofollow noopener" href="https://twitter.com/rubys8arks/status/1061748089751515137?ref_src=twsrc%5Etfw">11 novembre 2018</a></blockquote> <p><img width="337" alt="スクリーンショット 2018-11-13 18.58.19.png" src="https://qiita-image-store.s3.amazonaws.com/0/238801/068ccb8d-ab67-c558-9e04-b279ddb801ce.png"><img width="337" alt="スクリーンショット 2018-11-13 19.01.57.png" src="https://qiita-image-store.s3.amazonaws.com/0/238801/e9b5e0c0-51d7-29ed-ff64-c8305d9fd755.png"></p> <p>データはプレイガイドや劇場のサイトから自動でスクレイピングするほか、誰でもライブ情報を登録できるようになっています。</p> <p><img src="https://qiita-image-store.s3.amazonaws.com/0/238801/13926ae2-5133-570c-86ca-0901e79b055f.jpeg" alt="ワラリー!ビジネスモデル図.jpg" /><br /> * <a target="_blank" rel="nofollow noopener" href="https://note.mu/tck/n/n95812964bcbb?magazine_key=m91891e5390bc">ビジモ図鑑</a>で配布されているキットをお借りしました。</p> <h1 id="サービスを作ったきっかけ"><a href="#%E3%82%B5%E3%83%BC%E3%83%93%E3%82%B9%E3%82%92%E4%BD%9C%E3%81%A3%E3%81%9F%E3%81%8D%E3%81%A3%E3%81%8B%E3%81%91">サービスを作ったきっかけ</a></h1> <p>もともと「Walive!」というお笑いライブの検索サイトがあったのですが、そのサイトが2017年9月で突然閉鎖してしまったことがきっかけです。<br /> せっかくお笑いファンの間で愛されているサイトだったのにもったいないなと思い、同じ機能(+α)を持った新しいサイトを作ろうと考えました。<br /> <img width="600" alt="スクリーンショット 2018-11-13 19.23.50.png" src="https://qiita-image-store.s3.amazonaws.com/0/238801/756b7047-435e-a639-0421-e4f4a4395b07.png"></p> <h1 id="どういう技術で動いてるか"><a href="#%E3%81%A9%E3%81%86%E3%81%84%E3%81%86%E6%8A%80%E8%A1%93%E3%81%A7%E5%8B%95%E3%81%84%E3%81%A6%E3%82%8B%E3%81%8B">どういう技術で動いてるか</a></h1> <p>初心者なのであまり凝った技術は使っていません!</p> <h2 id="バックエンド"><a href="#%E3%83%90%E3%83%83%E3%82%AF%E3%82%A8%E3%83%B3%E3%83%89">バックエンド</a></h2> <h3 id="Ruby on Rails"><a href="#Ruby+on+Rails">Ruby on Rails</a></h3> <p>webスクレイピング用に<a target="_blank" rel="nofollow noopener" href="https://github.com/sparklemotion/mechanize">Mechanize</a>のgemを使ってます。サービス層は悪!と言われてることもあるのですが、コントローラーやモデルが見やすくなるのでサービス層、ヘルパー層も使いました。</p> <h2 id="サーバー"><a href="#%E3%82%B5%E3%83%BC%E3%83%90%E3%83%BC">サーバー</a></h2> <h3 id="Heroku"><a href="#Heroku">Heroku</a></h3> <p>手軽にデプロイできるHerokuのサーバーを使っています。<br /> アクセスできない時間ができるのが嫌だったので、Herokuの有料プランにしています。<br /> - Hobby Dyno $7/月 (システムダウンタイムなし、独自ドメインのかんたん設定)<br /> - Heroku Postgres Premium $9/月(1000万行まで保存できる)</p> <p>Herokuの有料プランは使わずにもっと安くする方法もあるみたいなんですが、一旦は設定のしやすさを優先しています。</p> <h2 id="フロントエンド"><a href="#%E3%83%95%E3%83%AD%E3%83%B3%E3%83%88%E3%82%A8%E3%83%B3%E3%83%89">フロントエンド</a></h2> <h3 id="JQuery"><a href="#JQuery">JQuery</a></h3> <p>さんざん「JQueryはオワコン」と言われていますが、ぐぐったときに出てくる情報が多いので一旦JQueryで実装しました。<br /> 日付の選択をカレンダ(<a target="_blank" rel="nofollow noopener" href="https://flatpickr.js.org/">flatpickr</a>)で行えるようにしたり、アンケート結果をアコーディオンでぬるっと表示させたりしています。<br /> <img width="339" alt="スクリーンショット 2018-11-13 19.32.12.png" src="https://qiita-image-store.s3.amazonaws.com/0/238801/a15b6af6-0ca5-398f-3a51-22a54bf96210.png"></p> <h3 id="fontawesome"><a href="#fontawesome">fontawesome</a></h3> <p>みんな大好き<a target="_blank" rel="nofollow noopener" href="https://fontawesome.com/">fontawesome</a>です。<br /> フォームのplaceholderにも使っています。</p> <h1 id="こだわったこと"><a href="#%E3%81%93%E3%81%A0%E3%82%8F%E3%81%A3%E3%81%9F%E3%81%93%E3%81%A8">こだわったこと</a></h1> <h2 id="UIとデザイン"><a href="#UI%E3%81%A8%E3%83%87%E3%82%B6%E3%82%A4%E3%83%B3">UIとデザイン</a></h2> <p>「とにかく人に使ってほしい」という思いからUIとデザイン(特にライブの入力フォーム回り)にこだわりました。<br /> 実際にサービスへの反応も「デザインがいい!」というものが多く、ありがたい限りです。<br /> CSSのフレームワークは使わず、TumblrのEstenテーマ、Twitter、InstagramなどのSNSを参考にしました。<br /> <img width="312" alt="スクリーンショット 2018-11-13 20.32.23.png" src="https://qiita-image-store.s3.amazonaws.com/0/238801/a45d9e30-287d-a752-ee65-e7f4fbe33380.png"><img width="336" alt="スクリーンショット 2018-11-13 20.32.33.png" src="https://qiita-image-store.s3.amazonaws.com/0/238801/3385c57f-2855-7b5e-5b60-a95cf021cc56.png"></p> <ul> <li>URLを貼り付けたらogp情報を取ってライブの説明や出演者、画像などを自動入力できるように</li> <li>会場をセレクトボックスで選択できるようにしつつ、自由入力欄も作ったり</li> <li>フォーム数が多くなると入力したくなくなるので、重要でない項目はモーダルで分けたり</li> </ul> <p>自分にとってはだいぶ使いやすくなったのですが、フォームはまだまだ改善の余地があるなと思っています。</p> <h2 id="SNSログイン"><a href="#SNS%E3%83%AD%E3%82%B0%E3%82%A4%E3%83%B3">SNSログイン</a></h2> <p>お笑いファンはだいたいTwitterで情報収集しているので、既にアカウントを持っているであろうTwitterアカウントで登録・ログインできるようにしました。<br /> 知らないサービスにいきなり「メールアドレスで登録できます!」と言われてもユーザー登録しないなと思ったので、SNS連携としました。</p> <h2 id="いいね機能"><a href="#%E3%81%84%E3%81%84%E3%81%AD%E6%A9%9F%E8%83%BD">いいね機能</a></h2> <p>旧サイト「Walive!」にはなかった機能として、ライブへのいいね機能を2種類実装しました。<br /> ライブに行く人あるあるとして、自分のスケジュールを把握できずに同じ日の同じ時間帯のライブ(いわゆる『被り』)のチケットを間違えて買っちゃったりします。<br /> そういうのを防止したいなと思い、すでにチケットを買った・予約したライブは『絶対いく』、まだ買ってないけど行けたら行きたいライブは『気になる』で管理できるようにしました。</p> <h1 id="Webサービスをつくってみた感想"><a href="#Web%E3%82%B5%E3%83%BC%E3%83%93%E3%82%B9%E3%82%92%E3%81%A4%E3%81%8F%E3%81%A3%E3%81%A6%E3%81%BF%E3%81%9F%E6%84%9F%E6%83%B3">Webサービスをつくってみた感想</a></h1> <p>最初の1ヶ月はプログラミングスクールでhtml/cssとruby/Ruby on Railsを学んだのですが、スタッフの「1ヶ月ですぐ作れるよ!」という甘い声をうのみにして痛い目にあいました…。<br /> スクールを終えた知識で作ってみても「え、いいねボタン自動で切り替わらないの?(JQueryが必要)」、「孫モデルまでアソシエーションしてデータ取るのどうやるの?」などなどわからないことだらけ。<br /> 最初の頃、家で同じエラーに1週間くらいわんわん言ってた私に「macbookを買え、もくもく会に行け」と言いたいです。<br /> Twitter、Slack、もくもく会などでド初心者の質問に親切に答えてくださった皆さん、本当にありがとうございました!!</p> <p>エンジニアの方にはあまりお笑いライブに馴染みはないかもしれませんが、せっかく作ったのでちら見してもらえれば幸いです。<br /> 出演者ですぐ探せるので、「こないだテレビで見た芸人面白かったな」というときはぜひ使ってみてください!</p> <p><a target="_blank" rel="nofollow noopener" href="https://warally.info">ワラリー! - お笑いライブ検索(東京)</a></p> かしい@お笑いSNS作成中