ウェブ雑記

tushuhei が奮闘する日記

Imagerous* つくったよ!

サービス作るって楽しいよね

ゴールデンウィークどうでしたか?楽しかったですか!?
僕は「1 ゴールデンウィーク 1 サービス」ということで Imagerous* という新しいウェブサービスを作っていました!
さっそくリリースしたので、紹介したいと思います!

どんなサービス?

Imagerous* はひとことで言うと壁紙キュレーションサービスです。
その時々の気分で壁紙として使える画像を探して、ダウンロードすることができます。
ただ眺めるだけでも楽しめますよ!

使い方はとってもかんたん!

1. さがす

おすすめをクリックしたり、検索したりして、気になるテーマを探しましょう。

2. 眺める

テーマを選んだら、眺めて気になった写真を選びます。

3. 落とす

気に入った画像があったら、早速ダウンロードして使っちゃいましょう!

たったこれだけです!

通な使い方

Imagerous* はただ画像をダウンロードするだけではなく、他にも遊び機能を備えています。

「遊ぶ」ボタンをクリックすると・・・


ピンクになっちゃった!


画像をクリックすると・・・


お、おおお!


おおおおおお!見える!見えるぞ!


上手くできたら保存して自慢しちゃいましょう!

完成品はこちら

開発した経緯

実はこのサービス、東京大学の理系院生メンバーでつくられています。

チームに分かれてウェブサイトをつくり、AdSense の収益で競う激アツな講義の一環でつくりました。
(TMI の名物講義「ウェブ工学とビジネスモデル」というやつですね!)
本当の意味で学生発ウェブサービスです!

大事な事なのでもう一度言います!AdSense の収益で競ってます!

さらにグローバル

「画像に国境はない!」ということで中国版もあります。
COOL JAPAN をここから発信していきたいです。

さいごに

オシャレな壁紙をサクサク集めることが出来るお役立ちサービスでありながら、
本当にゲスくてくだらないムダ機能まで備えた Imagerous*
「そろそろ壁紙変えたいなー」と思ったとき、ぜひ使ってみてください!

ダイナミックフォワーディングしてみた

論文書いてます><

参考文献なんかを探すとき CiNii を使うわけですが、
物によっては会員しか見られなかったり、有料だったりします。。

大学のネットワークから接続すれば「〇〇大学様」名義で閲覧できるのですが、
基本僕は僻地茨城の実家で作業しているので、できれば家から使いたい。

そんなときはダイナミックフォワーディング!

まず firefox の環境設定->詳細->ネットワークで接続設定

手動でプロキシを設定する。ポートは1080とかご自由に

ターミナルで ssh -D ポート番号 ユーザ名@ホスト名で大学のネットワークにつないだら

ヽ(´ー`)ノ

これで家から出なくて済むね!(泣)
素敵な研究ライフをあなたに。

参考: SSHダイナミックフォワーディング http://www.s.kyushu-u.ac.jp/~3HE11026G/manual/sshdwin.html

(いいわけ)卒論提出直前の友人のために書きました。乱文でごめんなさい。

ドワンゴの開発研修に行ってきたよ!


今日はドワンゴの開発研修+ハッカソンにお邪魔してきました!
一年に一度あるかないかのエンジニアが一堂に会する研修だそうで、「これ全員エンジニアなの!?」と圧倒されてしまいました。

フリーな講義 & ハッカソン形式

研修は大きく二つの部屋に分かれていて、ひとつの部屋で講義、もうひとつの部屋でハッカソンが行われていました。
講義のテーマはは HTML5 で、

  • 新しい HTML タグ
  • Geolocation API で位置情報を取得してみる
  • Web Strage で簡単なカウンタを作ってみる

といった内容でした。
講義:実習 = 1:1 くらいの比率で、たっぷりコーディングに没頭する時間もとっていました。

書きたい人はハッカソンへ!

ずっとコーディングしていたい!という人は別室のハッカソンに取り組んでいました。
研修でこれがあるってすごいですね!自由ですね!
ただ、講義室の音声は流れていて、スクリーンにはスライドも映し出されていたので、ハッカソンにいてもバッチリ講義の内容をチェックすることが出来ました!

ライトニングトークもある!

そしてこれが(たぶん)普通の研修と違うところで、研修の最後にはライトニングトークが用意されていました。
ハッカソンでつくったものや、最近取り組んでいるものを3分間でプレゼンします。

など、個性溢れる発表で楽しかったです!
僕がプロジェクトリーダーを務めるお花サプライズ!(https://hanasup.jp)もがっつり紹介させていただきました。

↑ライトニングトークに出たい人が話す内容を書くボード。飛び込み参加も OK!

最後はピザパーティー

最後はみんなでピザとソフトドリンクで歓談タイム。楽しかったです。

エンジニア天国

研修を通して思ったことはエンジニアの皆さんが活き活きしてるなーってことです。
やっぱり自分の好きなことに打ち込んでいるって素晴らしいなと思います。
そして、髪型・服装自由ということも相まって、なんかみなさん若い!若い!
こういう夢中になれるパワーでタイムスリップできる職場、いいなーと思います。

最後に

何かに夢中で打ち込んでる人は若い。
そして会社もそれを縛らないフリーな環境を提供することで、その才能を存分に発揮させることに一生懸命なんだなと感じました。
今回の研修は、晴れてドワンゴ・エンジニア最高評議会評議員になられた溝口さんのご厚意で参加させていただきました。ありがとうございました!
またお邪魔します!(^_^)/

【OSX】PDF のファイルサイズをプレビュー.app で小さくする

こんにちは、tushuhei です。

I love Evernote


自分は Evernote ヘビーユーザで、とにかく身の回りのあらゆるものをデータ化して Evernote ノートに突っ込んでいます。
紙で頂いた資料もその日のうちにスキャンして PDF 化して、Evernote に突っ込みます。
そうすれば、かさばる紙資料を持ち運ばなくて済みますし、検索すればいいので資料を探すのも楽になりますよね。

ただ、自炊マニアのみなさん。

一度はこんな経験をしたことがあるのではないでしょうか。
取り込んだ PDF のファイルサイズが大きすぎた!
取り込んでみたら必要以上に解像度が良いとか、画像が鮮明だとか。
枚数が多い資料や画像が多いカラー資料を取り込むときは、ちょっと解像度の設定を間違えるだけで一気にファイルサイズが跳ね上がりますよね。
また設定を変えてスキャンしなおすのも時間がもったいないですし、専用のアプリケーションをインストールするのも面倒です。

そんなときは!

mac OSX にプリインストールされている プレビュー.app を使いましょう!

今回はこの資料を題材に説明します。

画像が入ったカラーの PDF。この一枚だけで 2.2 MB もあります。

拡大しても非常に鮮明です。

初級編:「サイズを調整」を使う(PDF ファイル以外ならね)

中には「そんなの簡単だよ!『サイズを調整』を使えばいいんでしょ!」と思う方がいらっしゃるかもしれません。
しかし、PDF ファイルを扱うときには

ので、別の手を打ちます。

中級編:Quartz フィルタ「Reduce File Size」を使う

プレビュー.app で、ファイルサイズを減らしたい PDF ファイルを開いて、「別名で保存」を選択します。すると、

ダイアログの下部に「Quartz フィルタ」と書かれた項目があります。
初期設定では「なし」になっていますが、この中の「Reduce File Size」を選択して保存すると、劇的にファイルサイズを減らすことができます。

なんと 2.2 MB -> 45 KB!
劇的に減りましたね。では、実際にファイルを開いてみましょう。

ファイルサイズが減ったのはいいことですが、かなり荒くなってしまいました。

小さい文字は読むのが難しいです。
つまり、Quartz フィルタ「Reduce File Size」の初期設定はちょっとやりすぎなんです。

上級編:自分でフィルタをつくる

ここからが本編です。
Quartz フィルタの初期設定は圧縮が効き過ぎるので、もうちょっと圧縮が"ゆるい"フィルタを自作しましょう。
方法は簡単です。


「Reduce File Size」フィルタは「イメージのサンプリング」と「イメージの圧縮」によって出来ていることがわかります。
それでは、さっそく自作フィルタづくりに移りましょう!




以上でフィルタの作成は終了です。

圧縮してみよう!

それでは、さっそくファイルサイズを減らしたいファイルを開いて、今作ったフィルタを使って「名前を付けて保存」してみましょう!

すると・・・

ほとんど原本と遜色ないクオリティです!

なんとファイルサイズも 2.2 MB -> 750 KB に減少! 十分ファイルサイズを減らすことができましたね!

小さい文字も十分読むことができます。

最後に

プレビュー.app は他にも高機能な「注釈」機能、「トリミング」機能などを有しています。
どんどん PDF ファイルのサイズを小さくして、Evernote に突っ込んで、あなたのカバンのウェイトを小さくしちゃいましょう ;P

参考

Macのプレビュー.appでPDFのファイルサイズを小さく圧縮する方法 - inforati
http://inforati.jp/apple/mac-tips-techniques/multimedia-hints/how-to-compress-a-pdf-file-with-mac-preview-app.html

Macbook Air の SSD を交換するの巻

こんにちは!tushuhei です。
最近はサイトのデザインを書く機会が増えたので、IllustratorPhotoshop をインストールしようと思ったら

「らめぇ・・・!そんな大きいの入らないよぅ・・・・」

ってなったので、SSD を交換しようと思います。

なぜ換装か

もちろん他の選択肢もあります。

買い換え

Lion 搭載、CPU も大きく進化を遂げた新しい MBA に買い換える手もあります。
ただ、お金かかるし、Snow Leopard が今のところ気に入ってるんです。

小型 USB フラッシュメモリを付ける

今はちっちゃい USB メモリもあって、ほとんど邪魔にならず、低コストで 8GB も増設できる。すばらしい。
のですが、8 GB じゃ足りないのよね・・・(´・ω・`)

掃除

Evernote のオフラインノートが 5GB ちかくあって、それを削除すれば結構節約できる。けど不便になる。iPhoneiPod も持ってないからバックアップファイルがあるわけでもなし。
(他にも節約できるところはあるみたい!→「MacBookAirをダイエット!SSD使用量を30G減らすために行った7つのこと」http://harutomo-ryu.com/archives/2011-08-12/065224.html

というわけで

換装することにしました。

準備するもの

全体の流れ

1.今の mac の状態をそっくりそのまま外付け HDD にバックアップ
2.SSD 交換
3.SSD のフォーマット、復元
4.外付け HDD から以前の状態を復元
( ・`ω・´)

1.今の mac の状態をそっくりそのまま外付け HDD にバックアップ

外付け HDD を USB 接続すると・・・

「バックアップに使用」します。

フォーマットしまーす。

バックアップに使います。

しばらくするとバックアップが始まります。

2.SSD 交換

この動画を見ながら、裏面のネジを外して、蓋を開けて、SSD 付け替えて、ネジを締めなおします。

静電気には十分に気をつけましょう。

3.SSD のフォーマット、復元

SSD を交換した後は MBA に付属しているリカバリ USB をつけて起動します。
OSX のインストールに進みます。
メニューバーの「ユーティリティ」メニューから「ディスクユーティリティ」を選択します。
左のドライブ一覧に先ほど交換した SSD が表示されているので、それを選択します。
次に、右の「パーティション」タブを選択します。

パーティションは特にドライブを複数のボリュームに分けたくなければ、1で OK です。
「オプション」を選んでパーティションの方法を指定します。MBAIntel-based なので、GUIDパーティションテーブルを選択しましょう。

最後に「適用」をクリックすれば完了です。フォーマットが完了すると、TImeMachine の復元先に先ほど交換した SSD
が指定できるようになります。
(参考:http://eshop.macsales.com/tech_center/index.cfm?page=HDDppcintelformat/HDDppcintelformat.html

換装を終えて

illustrator 入れたり photoshop 入れたり VirtualBoxUbuntu 入れたりして存分に遊んでいます。今のところ特に不満はないです。

注意

すべて自己責任でお願いします。

ではヽ(´ー`)ノ

ウェルカムページメーカーつくったよ!

みなさん、こんにちは!
先日、こんなサービスをリリースしました。
ウェルカムページメーカー

どんなサービスなの?

よく facebook ページに、「いいね!」ボタンを押すと絵柄が変わるタイプのページありますよね。
たとえばこういうの。(「じゃらんnet facebookページ」 http://www.facebook.com/jalan.net

これらはウェルカムページと言われてるのですが、実はコレを作るのって難しい。というか、面倒くさいんです。

  • facebook デベロッパー登録してー
  • ページを乗せるためのサーバ用意してー
  • 「いいね!」判定のプログラム書いてー

ちょっと本を一冊買わなきゃならないレベルですよね。
他にも facebook ページをつくることができるサービスはありますが、

  • アプリのインストール・登録が必要
  • HTML書くとかメンドクセ(°△°)
  • 「え、お金かかるの・・・?」

画像を貼り付けるだけで充分なのに!もーヽ(`Д´)ノ
というわけで、これをたった10秒で作れるようにしちゃいました。

使い方

ウェルカムページをつくりたい facebook ページを選びます。

「いいね!」前と「いいね!」後の画像を選びます。

最後に「ウェルカム!」を最初に表示されるタブに設定します。


以上。超簡単!一瞬!

ウェブアプリ勉強会のページも・・・



ビフォーアフターを意識すると「いいね!」をしたくなる画像になりますね!

製作秘話

今回のサービスはインターン先の株式会社オーマ(SPYSEEやってるとこです。 http://spysee.jp/help/ohma/)で天野さん @amachang との会話でポッと生まれました。
僕:「そういえば A さんこんなの欲しいって言ってましたね〜。」
amachang:「つくっちゃおうか」
僕:「えっ」
その後タクシー車内開発しながら打ち合わせ先まで向かったのはいい思い出です。
ちなみに打ち合わせの様子は @amachangIT戦記からどうぞ。

作って思ったこと

核の部分は一瞬でできても、リリースまでの道のりは長い

IT戦記にもあるように、中核の部分は打ち合わせ中に出来たのですが、その後インデックスページを作ったり、画像をサニタイズバリデーションするコードを書いたり、各種ブラウザ対応したりでリリースまでには+2日要しました。とにかく簡単で直感的なサービスを構築すべく、「神は細部に宿る」をモットーに改良を重ねました。

どんなに簡単なサイトでも、シナリオとスケッチは欠かすべからず

僕はインデックスページを担当したのですが、はじめにシナリオとスケッチを描かずに書きだしてしまったため、後ほど大改修をするハメになりました。どんなサイトでもちゃんとこの手順は踏まないとダメですね。

と、いうわけで

@amachang さんとサービスをつくるという激アツな経験をすることができて本当に幸せです。
これからもがんばるぞーヽ(´ー`)ノ

gitの覚書

新しくEC2でサーバを立てた!既存のgitレポジトリからクローンするぞ!
でもパスワードとかポートとかどう指定するんだろう・・・(´・ω・`)

git clone ssh://username@xxx.xxx.xxx.xxx:yyyy/var/www/zzz.git

xxx.xxx.xxx.xxx: IPアドレス
yyyy: ポート
zzz.git: bareレポジトリ名

こんな感じで!