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 をいい感じに埋め込むノウハウが溜まってきている気がする。

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 とか SoundCloud のURL を貼ると適切なプレイヤーに変換してくれたりします。 (「何を見ても何か思い出す」と同じ 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

Amazon 互換 API を超簡単に作れる sinatra エクステンションを作った

一見釣りエントリっぽいタイトルのようでごく一部の人にしか刺さらない感が満載ですが、タイトル通りの sinatra エクステンションを作成して公開しました。

gem install sinatra-ace でインストールできます。(ace というのは Amazon Compatible Environments の略で、Transcend Computing | Amazon Compatible Environment で使われていたのをそのまま使っている感じです。)

下記のようなコードを書いて ruby app.rb するだけで、

require 'sinatra'
require 'sinatra/ace'

action 'DescribeDreams' do
  response_xml do |xml|
    xml.Dreams do
     %w(NiceDream Nightmare DayDream).each {|member| xml.member member }
    end
  end
end

dispatch!

下記のような AWS っぽいたいへんな感じの XML を返却できます。

$ curl "http://localhost:4567/?Action=DescribeDreams"
<?xml version="1.0" encoding="UTF-8"?>
<DescribeDreamsResponse>
  <DescribeDreamsResult>
    <Dreams>
      <member>NiceDream</member>
      <member>Nightmare</member>
      <member>DayDream</member>
    </Dreams>
  </DescribeDreamsResult>
  <ResponseMetadata>
    <RequestId>3f5a54f4-2781-4903-98e4-8977cdc184ef</RequestId>
  </ResponseMetadata>
</DescribeDreamsResponse>

Version パラメーターによる挙動の切り分けも簡単に行えます。

require 'sinatra'
require 'sinatra/ace'

version '2014-06-18' do
  action 'GetMessage' do
    response_xml do |xml|
      xml.Message 'old version'
    end
  end
end

version '2014-07-12' do
  action 'GetMessage' do
    response_xml do |xml|
      xml.Message 'new version'
    end
  end
end

dispatch!
$ curl "http://localhost:4567/?Action=GetMessage&Version=2014-06-18"
<?xml version="1.0" encoding="UTF-8"?>
<GetMessageResponse>
  <GetMessageResult>
    <Message>old version</Message>
  </GetMessageResult>
  <ResponseMetadata>
    <RequestId>d98216a5-19bc-476c-99ab-ea377c284a9b</RequestId>
  </ResponseMetadata>
</GetMessageResponse>
$ curl "http://localhost:4567/?Action=GetMessage&Version=2014-07-12"
<?xml version="1.0" encoding="UTF-8"?>
<GetMessageResponse>
  <GetMessageResult>
    <Message>new version</Message>
  </GetMessageResult>
  <ResponseMetadata>
    <RequestId>0c7085ba-f4d5-4d1f-928b-0971e85e57ee</RequestId>
  </ResponseMetadata>
</GetMessageResponse>

Amazon SQS のようにリクエストパスの概念があるシステムも記述することができるのですが、この機能については q3/lib/q3.rb#L60 あたりを見ると使い方が分かると思います。

自分で作りたいもので必要がでてきたら、認証機能とか最近の AmazonJSON っぽい API にも対応していきたいと思います。
たまには REST ではなく Amazon 互換っぽいインタフェースでオレオレ API を作ってみると、荘厳な感じになっておもしろいんじゃないかと思います。

14 日間の片想い

14 日間の片想い

ソース: tily/kataomoi-14days

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

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

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

追記(2014/07/12)

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

250 行ぐらいの Amazon SQS 互換 API を作ってエンドポイントを公開した

redis の勉強も兼ねて、redis + sinatra250 行ぐらいの Amazon SQS 互換 API を作ってみた。本当は 100 行ぐらいで作りたかったんだけど、色々機能を足していたら 250 行ぐらいになってしまった。

250 行なのでバリデーションをあまりしていなくて、異常系はあまり動かないけど、正常系はだいたい動くと思う。

Wiki みたいに誰でも手紙を送ったり受け取ったりできるメッセージキューシステムがあるとおもしろいだろうなと思っていてたので、認証が要らず誰でもキューを作成したり、キューに対してメッセージを送信・受信したりできるようにしてある。

heroku + redis to go に公開しているので、

http://q3-global.herokuapp.com/?Action=CreateQueue&QueueName=tily.hatenablog.com

とかやるとキューを作れるし、

http://q3-global.herokuapp.com/*/tily.hatenablog.com?Action=SendMessage&MessageBody=hello

とかやるとキューに対してメッセージを送信できるし、

http://q3-global.herokuapp.com/*/tily.hatenablog.com?Action=ReceiveMessage

とかやるとメッセージを受信できる。

基本機能の統合テストを書いたので、割とちゃんと動くと思う。メッセージを遅延させるやつ (DelaySeconds) とか、VisibilityTimeout も普通に使える。

Amazon SQS と互換しているので、Amazon SQS 互換のクライアントからなら自由にメッセージを送受信できるはず。

q3-global は何の役に立つかよく分からないので、これから使い方を考える。ローカルに redis さえ立ち上がっていれば、gem install q3 して q3 コマンドを打つだけで気軽に API を立ち上げることができるので、よかったら使ってみてください。

AWS Simple Icons のセキュリティグループの赤黒の囲みを CSS で再現してみた

非常に地味な話なんですが、AWS Simple Icons ではセキュリティグループを赤と黒のボーダーによる枠線で囲むことになっており、シンプルでかっこいいので HTML+CSS で実現できないかなーと思って色々試していたらそれっぽいものができたので書いておきます。こんな感じのやつ。

security group

ソースは上記リンクのページに載っています。CSS に詳しくないので他のスタイルシートと組み合わせるとうまく描画されないとか色々あるかも。昔から CSS 苦手なので勉強したいと思った。

ニフティクラウドの情報取得系 API を RESTful なインタフェースで利用できるようにする Sinatra アプリ

ニフティクラウドの APIAWS 互換なのですが、レスポンスの形式が独特で少々扱いづらいので、REST っぽいインタフェースから情報取得できるようにしてみました。

/computing/instances でサーバー一覧がとれたりするので、Backbone.js の Collection から使ったりすると便利なんじゃないかと思います。

ひまなときにニフクラ RDB/MQ/ESS/DNS/Automation にも対応したい。

追記 (2014/06/27)

現在のバージョンで v0.0.3 で RDB/MQ/DNS に対応しています。