Twitterの検索結果をtumblrに自動で吐き出すやつ②

 Twitterの検索結果をtumblrに自動で吐き出すやつができつつある。

 Yahoo!PIPESを使ってフィードをつくろうとしたけど、Twitterの仕様変更でatomが使えずに断念。調べた結果、Google Apps ScriptでTwitterRSSフィードがつくれることがわかったのでつくる。

<やったこと>

  1. Twitterで検索結果を表示するウィジェットをつくる
  2. そこからIDを取得
  3. Google Apps ScriptでTwitterRSSフィードを作成
  4. IDを貼り付けて、検索結果を取得するRSSフィードが完成
  5. IFTTTでフィードとtumblrを連携

<困ったこと>

  • tumblrに自動で書き出すときに、Twitterのユーザー名(EntryAuthor)が表示されない

【参考】
サポートが終わってしまった今、TwitterのRSSフィードを取得する方法 : ライフハッカー[日本版]
How to Create RSS Feeds for Twitter - Video Tutorial

Twitterの検索結果をtumblrに自動で吐き出すやつ

 久津川さんがdream apartっていういろんなひとの見た夢のツイートを自力で拾ってくるtumblr始めてたので、おもしろいなと思いながらも自力ってめんどくせえだろうなと思った。これは別にいいとか悪いとかじゃないんだけど、自力で選んでくるからには作為が入る。編集っていうのはそういう作業だしいいんだけど、どうせなら編集しない、作為のない、混沌とした夢についてのツイートが勝手に集まってくるやつができたらおもしろいだろうなと思う。思うので、作り方をいろいろ調べてみた。調べてみたのだけど、わからん。

 それで今日てくてく歩いててふと思い出したのだけど、nomolkさんがmazusouっていうまずそうな食べ物の写真を自動収集してtumblrに上げる仕組みを作ってたのを思い出して、nomolkさんのブログとかmazusouとか見たのだけど、ソース書いてなくて残念。フィルタだけ書いてあった。

 で、あとせっかくつくったからと思ってIFTTTでどうにかできないかなと思ったんだけど、どうにもできなさそう。どうにもできなくはないんだけど、思いつくのはツイッターで検索結果を吐き出すためのアカウント作って、そのアカウントとtumblr関連づけるっていうやつなんだけど、そんなことするくらいならいちいちtumblrに吐き出さないでそのアカウントがあれば十分という気がする。

 まあいずれどうにかなりそうな感じがするので、のんびり気長に作り方調べてみようと思う。

HTML5 Boilerplateを使う

 表題の通り。HTML5ボイラープレートを使ってサイトを作ってる。Bootstrap3を使おうかとも思ったけど、ラクしないでっていうか結局作りたいサイト作るときには決まったテンプレートでどう実装できるか調べるよりも一から作った方が早いし無駄がなさそうだったので、ボイラープレート使うことにした。

 ブラウザごとに、特にIEはバージョンごとに癖というか対応できない技術のばらつきがあるので、まずそれをリセットしましょうというCSSがあるのだけど、ボイラープレートはそれがnormalize.cssというやつで、それでIEの7くらいからブラウザごとに対応してくれる。このnormalize.cssに手を焼いたという話。

 ナビゲーションバーを作るのにulとかliとか使うのだけど、ulだったかなんかにpadding-leftの指定がしてあって、厳密にいうとmenu,ol,ulにそういう指定がしてあって、これのせいで思った位置にリストが表示されないので大変困った。

 normalize.cssのあとにmain.cssというのを読み込ませていて、こっちのmain.cssで設定しなおしたらそっちが反映されるのかと思ってたけど、なんかそのへんよくわからん。とにかく(あんまりいじりたくなかったけど)normalize.cssのpadding書き換えて対応した。

h1タグの中でサイトのロゴ画像を表示する

 text-indent=-9999px;というのがどうも時代錯誤の技術に思えて(実際そうなのだけど)、いまサイトのタイトルロゴってどうやって表示してるんだろうと思って調べた。

<h1>
  <a href="#">
    <span>サイトタイトル</span>
  </a>
</h1>
h1 a {
  display:block;
  width:280px;
  height:100px;
  background-image:url("../img/logo_dummy.gif");
  background-repeat:no-repeat;
}
h1 span {
  display:none;
}

 前はaタグのなかにサイトタイトル書いて、CSSでtext-indent=-9999px;とかして文字を画面外に飛ばしてたんだけど、今の時代それやるとあんまよろしくないっぽい。このやり方は、spanで文字を囲んでおいて、display:none;で囲んだ箇所を消すというもの。で、h1 aに画像が表示されるようにしてある。

 他にも前ならh1タグ=テキスト飛ばし+画像表示されるようにCSS書いてたと思うけど、今ではh1をサイト内で複数回使えるようにしておいた方がよいっぽいので、h1そのものはCSSでいじらないのが無難みたい。

【参考】
文字列(h1など)を画像で置き換える(span要素使用) - bnote
blog*citron | タイトルロゴを画像にする

サイト見まくってる

 とあるサイトを作ることになりそうっぽいので、いろんなサイトを見まくっている。なんとなくこんな感じの方向性なのではないだろうかと当たりはつけているんだけど、とりあえずいろいろ見てみることにした。たくさん見て損はないし。

 ちょっと前に見つけた「WHO DID IT?」というサイトからいろいろ探している。いろいろ見てるなかで、自分で実装できるできないは別として、ちょっと感動したサイトがいくつかあったので、備忘録も兼ねて書いておく。下に行くにつれて、感動度が高かったやつ。

アダルトあ
鞍知 on 鞍知 [クラッチオンクラッチ]
すごいWEB
のらもじ発見プロジェクト
E.H
株式会社リクサス
東京タワーズ | Tokyo Towers

カテゴリをランダムに選んで出力

//記事のカテゴリを準備する
NSMutableArray *array = [NSMutableArray arrayWithObjects:@"【社会】", @"【政治】", @"【スポーツ】", @"【経済】", @"【文化】", @"【天気】", @"【地域】", @"【芸能】", @"【音楽】", @"【交通】", @"【速報】", @"【佐賀】", nil];

// シャッフル(Fisher–Yates shuffle)
// 配列の中身をランダムに入れ替え
int count = [array count];
for (int i = count - 1; i > 0; i--) {
    int randomNum = arc4random() % i;
    [array exchangeObjectAtIndex:i withObjectAtIndex:randomNum];
	}
NSLog(@"%@", array);

//シャッフルされたカテゴリの中の4番目の要素を取り出す
NSString *title = [array objectAtIndex:3];

 NSMutableArrayで(NSArrayでもいいんだろうか?)配列(*array)を作って、「Fisher–Yates shuffle」というらしいやり方でシャッフル。シャッフルされた「*array」の○番目の要素をNSStringで取り出して、「*title」にした。合ってるのかな。

 はてなブログでシンタックスハイライトされる書き方があるのは知ってたけど、そのまま書いてもObjective-Cは全然反映されないなと思っていたら、ハイライトさせたいファイルタイプを指定してあげたらいいみたい。

【参考】
Array – 配列の要素をランダムにシャッフルする
はてなブログでシンタックスハイライト - 開発初心者メモ( ..)φ
入力したプログラムコードを色付けするスーパーpre記法 シンタックス・ハイライトの実装について - はてなダイアリー日記

ナポリタン

  • スパゲティ(1.8mmのやつ) 150g
  • 玉ねぎ 中1個
  • ピーマン 2個
  • マッシュルーム 4つ
  • ハムかソーセージ お好み
  • バター 20g
  • 塩・こしょう 少々
  • パプリカ(赤)の粉末 少々
  • ケチャップ 80g
  • 顆粒コンソメ 小さじ2
  • 牛乳 大さじ2
  1. バターをこがし、野菜とハム的なやつを炒め、塩・こしょうなどで調味
  2. 野菜がしんなりしたらパスタを投入、コンソメとケチャップで調味
  3. 仕上げに牛乳を一振り

肉の赤ワイン煮

  • 肉(牛の固い肉とか鶏もも肉とか) 400g
  • 赤ワイン 400cc
  • 玉ねぎ 1/2個
  • コンソメ 1個
  • にんにく 2片
  • ローリエ 2枚
  • マッシュルーム缶 1/2缶
  • カットトマト缶 1/3缶
  • デミグラスソース 大さじ3 
  1. 肉を焼き、玉ねぎを飴色になるまで炒める
  2. ワインを加え強火にかけたあと、コンソメ、ローリエ、にんにくを入れる
  3. 1時間ほど弱火で煮込んだら、トマト缶、デミグラスソースを加えて2時間煮込む

喫茶店のホットケーキ

  • ホットケーキミックス 1袋
  • 牛乳 80cc(記載されている分量から20cc減らす)
  • 溶かしバター 大さじ1
  • みりん 大さじ1
  • たまご 1個
  1. パッケージの裏に書いてある通りにつくる

むかしtumblrで見た「市販のホットケーキミックス、記載の分量から牛乳を20ccほど減らして溶かしバターとみりんを各大さじ1足すだけでびっくりするほど喫茶店の味に」というやつ。ほんとにおいしかったけど作り方忘れるのでメモ。

グリッチ画像の生成

 Macのターミナルからグリッチ画像を生成するやり方。

  • 素材を用意、jpg、仮に001.jpgとする
  • 素材はホームフォルダに入れておく
  • sedコマンドで s/検索文字列/置換文字列/g で数字を置換することで画像を加工
  • ホームフォルダに生成画像が出力される、仮にglitch.jpgという名前にしておく
$cd
$LANG=C

$sed -e 's/0/1/g' 001.jpg > glitch.jpg

 0と1の部分にほかの値を代入することでエフェクトがいろいろ変わる。2桁でもいけるし、数値だけじゃなくてアルファベットでも可。s/6a/xT/gとか。

f:id:fmmzk:20130905121437j:plain

f:id:fmmzk:20130905121443j:plain