Hatena::ブログ(Diary)

PARAGRAPHS

 

2014-09-21

prgrphs.tokyo の使い方

この記事では、to に影響を受け作成したブログツール prgrphs.tokyo の使い方について説明します。

ユーザー登録・ログイン

左上に admin という隠しリンクがあるので、これをクリックすると画面下部にナビゲーションメニューが出ます。

メニューのログインっぽいアイコンをクリックすると Twitter 認証のページに飛びます。

なお、もう一度隠しリンクをクリックすると、ナビゲーションメニューを消せます。

見る/書く

REST っぽい URL 設計なので、基本はアドレスバーURL を手打ちすることで操作してください。

ユーザーページ http://prgrphs.tokyo/${ユーザー名}
段落新規作成ページ http://prgrphs.tokyo/${ユーザー名}/new
段落個別ページ http://prgrphs.tokyo/${ユーザー名}/${パラグラフID}
段落編集ページ http://prgrphs.tokyo/${ユーザー名}/${パラグラフID}/edit
  • ユーザーページで段落のパーマリンク (>) に 1.5 秒マウスオーバーすると、編集ページへのリンクに変化します
  • 段落新規作成および編集ページで publish のチェックを外すと、プライベートな記事を書くことができます
スマートフォン

ユーザーページで各段落を左にスワイプすると、その段落のパーマリンクへ遷移します。

各段落のページで左にスワイプすると、段落の編集ページへ遷移します。

キャプチャ機能

段落の作成・編集を行うと、自動的に段落のキャプチャが撮影されます (少しタイムラグがあります)。

キャプチャされた画像は http://prgrphs.tokyo/${ユーザー名}/${パラグラフID}.png で取得できます。

※この機能はリソースおよびオブジェクトストレージの領域を圧迫するため、将来的に一部ユーザーのみへの提供、または有料化する可能性があります。

フィード/IFTTT 連携

IFTTT で段落のキャプチャ画像を URL つきで twitter へポストする例:

エクセルダウンロード機能

http://prgrphs.tokyo/${ユーザー名}.xlsx でエクセル形式のファイルとしてユーザーの全段落をダウンロードできます。

自分のページの場合には created_at カラムにも情報が入ります。

その他

2014-08-09

常に 1 つ前の段落しか読めないマルコフ連鎖のようなリレー小説投稿サイト、R E L A Y R

R E L A Y R

ソース: tily/relayr

漠然と前から作りたいと思っていて 14 日間の片想い を作ったときにどんな風にしたいか分かってきたので作ってみた。

  • リレー小説だけど常に 1 つ前の段落を読みながら続きを書くしかない
  • ただし登場人物の一覧だけはいつでも登録したり参照したりすることができる
  • 小説を書きはじめるときに指定した段落数に達するまで全文は読めない

「親以外の参加者は全体像がわからない、進行状況もわからないという曖昧模糊とした状態におかれるので、」 (メールでリレー小説 index) そのほうがおもしろいんじゃないかな。子供しかおらず全体像がわからない。どうでもいいけどサイト名は Yes ではなく Relayer3 から。

(中略)

最近 bootstrap 3 が使いやすくて好きになってきたのもあって、wiki とか tropy とか darekagakaku みたいなシンプルで仕組みがおもしろい Web アプリケーションを作るのにはまっていたんだけど、そろそろ飽きてきたので何か別のものを作りたい。

2014-07-26

SlideShare の複数スライドから新しいスライドを作れるやつを作った (弘前市の写真つき)

SLIDE MIX

ソース: tily/slide-mix

人のパワポコピペして自分のパワポを作るみたいな、仕事で普通にやっていることをウェブでもできるといいなと思って作ってみました。

こんな感じの SlideShare のスライド内個別ページの URL を入力していくと、

http://www.slideshare.net/xiangshiqin/slide-share-3257592/5
http://www.slideshare.net/benschwarz/sinatra-rack-and-middleware-1509268/82
http://www.slideshare.net/justlaputa/lt-reveal-js/24
http://www.slideshare.net/AkshayMathur7/coffee-script-32261774/13
http://www.slideshare.net/paramisoft/haml-32848604/11
http://www.slideshare.net/andrefaria/introduction-to-underscorejs/90
http://www.slideshare.net/jeresig/jquery-internals-cool-stuff-presentation/37
http://www.slideshare.net/mongodb/using-mongodb-asatickdatabaseaug2013/34
http://www.slideshare.net/bbayou/redis-8021392/41
http://www.slideshare.net/ayumin/heroku-inside/45
http://www.slideshare.net/ronreiter/bootstrap-26583904/32

こんな感じで入力したページが順番に表示される新しいスライドを作成することができます。

このウェブサービスを作るのに利用した技術に感謝するスライドを作ってみたので例として貼っておきます。

SlideShare にあまり負荷をかけないようにサーバーサイドでキャッシュしたりクライアントサイドで全部ではなく少しずつ取得するようにしたり一応していますが、問題があれば @tily までご連絡ください。

URL をいい感じに埋め込むノウハウが溜まってきている気がする。

2014-07-19

URL を入力していくだけでポートフォリオを作成できる n n a d e というウェブサービスを作った

n n a d e

https://play.google.com/store/apps/details?id=cc.omora.android.brokencamera
https://farm6.staticflickr.com/5139/5424801771_31c06cda96.jpg
https://farm6.staticflickr.com/5281/5370261826_b39d075609.jpg

https://farm6.staticflickr.com/5288/5378307020_f5281d5b2d.jpg
https://farm6.staticflickr.com/5211/5458451676_1e3a81741b.jpg
http://d.hatena.ne.jp/tily/20110129/broken_camera
https://github.com/tily/java-android-broken-camera

ソース: tily/nnade

ポートフォリオというほど大げさなものではないのですが、最近作ったものや書いた文章のまとめ (2010/05 〜 2011/12) - PARAGRAPHS のように自分が作ったものをまとめたブログ記事を書くのが面倒くさいので、簡単に作れるウェブサービスを作ってみました。

冒頭の例ではリンクと画像しか埋め込んでいないけど、YouTube とか SoundCloudURL を貼ると適切なプレイヤーに変換してくれたりします。 (「何を見ても何か思い出す」と同じ embed.ly を使っています。)

主に自分用に作ったものだけど、WEB で色々公開している人には便利な気がするのでよかったらご利用ください (embed.ly の無料版の制限で、1 時間に 5000 ユニーク URL 以上アクセスされるとうまく動かなくなるっぽいので、控えめに使って下さい)。あと作ったものリストに限らず、年代別に何かをまとめる他の用途にも使えそうだなと思った。

追記 (2014/07/21)

favicon が取得できた場合にはリンクの先頭に favicon を表示するようにしてみました。

追記 (2014/07/24)

settings ページで「自分だけ編集できる」「nnade を利用しているユーザーなら編集できる」「誰でも編集できる」を選択できるようにしてみました。

http://i.gyazo.com/0cac768b182986f1f76d4f75c4c5f606.png

作りながら「Wiki みたいに誰でも編集できるようにしたほうがいいんじゃないか」とか思っていたのですが妥当な落としどころになったんじゃないかと思います。これによって tako3about.me中間ぐらいの自由さになったような気がします。

追記(2014/08/17)

ユーザー設定でポートフォリオを傾ける角度が指定できるようになりました。

http://i.gyazo.com/bec59ecdc098584bb43b796a2a80002a.png

2014-07-08

14 日間の片想い

14 日間の片想い

ソース: tily/kataomoi-14days

1. 手紙をおくれます
2. 手紙をうけとれます
3. 14 日たつと消えます

メッセージキューは基本的にはプログラムがメッセージを送受信するためのものだけど、人が使ったらおもしろいんじゃないかと思ってメッセージキューで動くウェブアプリを作ってみた。裏側では q3-global が動いています。

「14 日間」は Amazon SQS で指定できるメッセージ保持期間の最大値です。「何を見ても何か思い出す」「ゴミ文庫」に続く 3 作目としてふさわしく、 自分が作ったウェブアプリの中でも最大級に意味不明な感じになった。

参考

追記(2014/07/12)

先に送られた手紙ほど頻繁に受け取られてしまう問題があり、メッセージキュー的には正しい挙動のような気もするのですが、自分で手紙を読んでいてなかなか新しい手紙にたどり着けないのが不便だったので、手紙を受け取るときにランダムで受信されるように修正しました。