rails 独学して軽くにちゃんまとめつくる

インターン中大学生のブログ

ぐるぐる回って何をしたいのかが変わってく。今はマッチングサイトを作りたい、もしくは論文のキュレーションサイトかな。

『ストリートアカデミー』をプログラマ的視点から見る

教師の登録画面

 

まあしっかりしている。教師の信頼性の担保をどこに置くかが問題で、顔写真の必須とつかっている sns を1つ以上書く必要がある。おそらく運営者側で一度確認するのだろう。こういう主催者側の登録がガバガバのやつは、顔写真必須でなかったり、ブログやsns アカウントを要請しないのもある。

 

ただ、twitter を登録するとき URL で登録させるのはいかがなものか。だいたいの人はスマホsnsしているから @ からはじまる id も可能にしたほうがいいよな。facebook はユーザー id を使えればいいのに(ただfacebook の場合は id を出すのにも面倒)

 

f:id:mooooooooooriiiiii:20170430113528p:plain

f:id:mooooooooooriiiiii:20170430113543p:plain

 

ちなみに本人確認はちゃんとある。ぼくの場合は始めたばかりだから未登録になっている。

f:id:mooooooooooriiiiii:20170430122005p:plain

 

教室主催画面

f:id:mooooooooooriiiiii:20170430122328p:plain

f:id:mooooooooooriiiiii:20170430122341p:plain

f:id:mooooooooooriiiiii:20170430122357p:plain

 

・開催形式
・タイトル
・キャッチコピー
・教える内容
・受講料とその補足
・開催エリア
・対象者
・写真
・当日の流れ

が書かれてある。まあなかなかええんじゃないか思う。テンプレートもついてるのが親切。ただ、この『教える内容』が自由記述欄すぎて見た目をととのえられないんだよな。テンプレート A を引用させてもらうと

<こんなことを学びます>
革細工を自宅で行いたい方の為に、材料選びのポイント、
下ごしらえから制作の作業工程まで、一連の流れを学びます。

<こんなことが出来るようになります>
自分だけの革細工を90分で完成させる事が出来ます。
ワークショップ体験後は自宅でも一人でハンドメイド製品を作るようになれます。

<こんな風に教えます>
屋外で、少人数制のグループで丁寧に教えます。
レクチャーとワークを組み合わせた二部構成です。
講師の一方的な説明にならずに参加者の皆さんと対話する形式で、
自由に楽しく学んで頂きます。

<持ち物>
はさみ、タオルをご持参下さい。

<定員>
基本 ○○名
(要望と開催スペースに応じて変わります)

こんな感じになる。せっかく詳細画面では見た目も css で整えられていてカラフルでいいのに、ここ邪魔をしてしまって、見た目が悪くなる。<> とか 【】これで見た目を整えるのってなんかダサいんだよなあ。簡単なテキストエディタを作れるようにしたらええのに。たしかマイナビでもこういう自由記述欄がださかった。自作 Markdowncss を整えるなりなんなりができたらいいのだが。あ、でもそうしたらモデルにほぞんする保存する内容 に html タグが付いてしまうから、エスケープを解除するために rails なら sanitize メソッドがつかえる。

<%= sanitize msg, tags: %w(br p a), attributes: %w(id class href) %>

としたら、 br, p, a タグとその内部にある id, class, href 属性のみが残されて、それ以外はすべて消されるようになる。すると javascript を流し込まれたり、 <script> をいれられずに済む。

 

たしか qiita が Markdown つかっておしゃれに仕上げてるからそれを参考にしてみる。

こりゃいいな~。てかマークダウンつかってるんだな。違和感がなかったから、案外自作の Markdown つくらなくても見た目ってきにならないのかも。

 

ためしに絵文字をかってみるとマークダウンのが、html に変換されている。ただ、やはり自作エディタはつくれたほうがいいよな。たとえばニュースサイトだと装飾されている。ライターすべてが html を使いこなせるとも思えない。

 

あっ、もしかしたらこんな感じのをいっぱい作るのかな。 + ボタンをおしたらそんなのが増殖され、小見出しをつくるのかな。いやまて。そしたらモデルに保存するカラムがいっぱいになるやんけ。となると絶対に使わないような文字列をつかってパーサーするのか? ##### で囲んだものを一区切りにするなど。

f:id:mooooooooooriiiiii:20170430130730p:plain

いや、そのやり方がどうもわからん。てかハテナブログのやり方がわかればええのに。こんな感じにつかいたい。jQueryプラグインを使えばいいのかな。

 

f:id:mooooooooooriiiiii:20170430131317p:plain

 

 

簡単なMarkdownエディタを作る - Qiita

これとか役に立つ。だが、markdown だけなんだよなあ。

 

f:id:mooooooooooriiiiii:20170430124408p:plain

 

 

埋め込み機能&告知配信もある

しっかりしてるな~。講座の登録は実際にやってないからわからないができるそうだ。

 

参加者が見えてしまう

この手のやつに参加した人、参加予定の人などはのせないほうがいいな。たとえばこれをクリックしたらユーザーのプロフィールがみえてしまう。それはセキュリティ上よくないな。ストーカーできたりしてしまうからな。信頼性の保証は参加者にはいらんとおもう。

ただ、他人のユーザーの詳細画面では「参加したイベント」だけで「参加予定のイベント」は見えないのはいいな。いや待てよ。だったらなんで感想の欄はなぜ匿名化されてるのだろうか。

 

f:id:mooooooooooriiiiii:20170430131729p:plain

 

 ただ、詳細画面に関しては非公開機能がある。ただどうなんだろな。イベントページで参加者の情報をのせるのは、もうエンジニアの好みしだいということになる。見せないサイトもあるし、見せるサイトもあるし。たしかオモコンというサイトは見せてなかった。

f:id:mooooooooooriiiiii:20170430140458p:plain

 

 

同一イベント

こんな感じで同じイベント名だが日付を変えてまた開催するとき、おなじぺーいに開催されるようになっている。カラムに user_id と class_num が保存されていて紐づける感じかな。それで現在時刻と開催する時刻を比較しているのかな。

 

f:id:mooooooooooriiiiii:20170430132949p:plain

 

こんな感じでプラスボタンを追加するのかな。もしくは新規作成するときに上のほうに選択のプルダウンメニューを作成するのかな。

f:id:mooooooooooriiiiii:20170430133714p:plain

 

ツイートボタン

ツイートボタンをするときに、同時に画像も載せられるようにしたらええんちゃうか。このサイトならわかりやすいんちゃうんか。

[ruby][twitter]画像付きのツイートをする – hello-world.jp.net

 

ホーム画面

これいいな。明日参加できるとかいうのはいいわ。ナイスアイディア

f:id:mooooooooooriiiiii:20170430134348p:plain

この新着情報はけっこう下のほうにあるが、できれば上のほうにしてほしいな。ストアカでは上のほうにサービス説明とかカテゴリ分けがあるが、業者的な視点ではなくユーザー視点ならこの新着を上にもっていくべきだな。

具体的なの持ってきてくれたほうがわかりやすい。

f:id:mooooooooooriiiiii:20170430134626p:plain

 

友達招待機能

こんなかんじで URL の末尾にハッシュ値がある。おそらくこのハッシュを primary_key にして、invite_id にぼくの id が入っていて invited カラムに true が入っているはず。これがユーザーコントローラーの new アクションにいって if invited == true

みたいにしてそしたら user.point += 500 みたいにして、 User.find(invite_id).point += 500 みたいにするのかも。金銭にかかわることだからトランザクションすればいいのか。

 

https://www.street-academy.com/friend_invites/hAZ20sYe

f:id:mooooooooooriiiiii:20170430140839p:plain

 

API作成機能

もやってる。

企業の従業員向けの参加機能

なるほど。サービスが大きくなれば企業向けというのも作るようになるのか。このばあい授業料の一部を会社側が負担できるような制度になっている。ほかの事例でいうとプログラミングの独学できるサービスのプロゲートなら学校向けのサービスがある。

 

f:id:mooooooooooriiiiii:20170430141616p:plain