Hatena::ブログ(Diary)

はなちん C-x C-c

2012-06-19

はてなダイアリーにslideshareを貼る

はてなダイアリーに slideshare のスライドが貼れない件 - /var/log/messagesを見て、@さんも困ってたなぁ、と思いググりました。

この記事を見て試してみたら出来ました!

slideshareの仕様変更(?)ではてなダイアリーに表示出来なくなった件について - Shinya’s Daily Report

iframeのstyle属性とallowfullscreen属性をばっさり削ればいけた。

<div style="width:425px" id="__ss_13377626">
  <strong style="display:block;margin:12px 0 4px">
    <a href="http://www.slideshare.net/yamanetoshi/android-fundamentals-13377626" title="Android Fundamentals" target="_blank">Android Fundamentals
    </a>
  </strong>
  <iframe src="http://www.slideshare.net/slideshow/embed_code/13377626" width="425" height="355" frameborder="0" marginwidth="0" marginheight="0" scrolling="no"></iframe>
  <div style="padding:5px 0 12px">
    View more <a href="http://www.slideshare.net/" target="_blank">presentations</a> from <a href="http://www.slideshare.net/yamanetoshi" target="_blank">Toshiaki Yamane</a>
  </div>
</div>

2012-03-21

はてなからお引っ越し

hanachin C-x C-c

Bloggerからはてなダイアリーに移行したのが何ヶ月前だっけ?

Bloggerに戻って独自ドメインblog.hanach.inで運用しようかと思います。

はてなは凄く好きなんですがアクセス解析等との連携を考えた場合Bloggerの方が楽かなと。

あとBloggerで記事書いてKloutスコアをあげたいというのもあります。

当面はBloggerでやって行きますが準備が整い次第WordPressに移行しようと思います。

理由は

  • サーバーを貸して頂けそうなのでWordPress動かすサーバーの維持費が必要なくなる
  • ブログ以外のPortfolioサイトもhanach.inで作りたいと考えており、全て自分でカスタマイズ出来る方が使い勝手が良さそう
  • WordPressの使い方を覚えておいた方が今後仕事する際に便利そう

などです。

記事はすべてはてなダイアリーの方から移行済みです。

それではみなさん、blog.hanach.inでもよろしくお願いします。

2012-03-05

僕はGumroadで猫のふんを売ります

2日連続、3度目。もう10うんこぐらい一人で片付けたのでこれはもうお金とってもいいかなと思って猫のふん写真の詰め合わせを売ります。

no title

2012-02-20

WordPressにAmazonアフィリエイトの商品を貼る

経緯

ギークハウス沖縄ブログアフィリエイトをやることにしました。

本を頂いたら記事を書き、読んだらレビュー記事を書き、その記事を読んだ方がAmazonで本を買ってくだされば、頂いた本から収益が得られ、そのお金でまた本が買えます。

新しい本が買えると本を寄贈してくださった方も喜んでくださるのではないでしょうか。


ギークハウス沖縄ではブログにfluxflex+WordPressを使用しています。

WordPressAmazonアフィリエイトのリンクを貼れるようにするのが本記事の目的です。

参考にするサイト

no title

こちらの記事を参考に進めていきます。

アフィリエイトマクロを追加する

WordPressのバージョンは3.3.1です。

1.Macro Expanderをインストールする
  1. WordPressの管理画面に入り、左側サイドバープラグインから新規追加を選びます。
  2. キーワードの入力欄に「Macro Expander」と入力
  3. プラグインの検索ボタンを押す

f:id:h6n:20120220060138j:image

Macro Expanderが出てきたら、いますぐインストールを押す

f:id:h6n:20120220060139j:image

インストールが完了した、というメッセージを確認する。

f:id:h6n:20120220060140j:image

2.Amazonのリンクを作成するマクロを登録する
  1. 左側サイドバーの外観からテーマ編集を選びます。
  2. 右側のテンプレートの一覧の中から「テーマのための関数」を選ぶ
  3. 「< ?php」の後ろに以下の内容をコピペし、amazon_tracking_idの中の文字を自分のトラッキングIDに変更
  4. ファイルを更新ボタンを押す。

f:id:h6n:20120220060141j:image

確認記事を書く

記事の中で

[[amazon2][427406767X][4873113679]]

のような感じで、amazon2の後ろにasinを角括弧でくくって並べていくだけ。

f:id:h6n:20120220060142j:image

プレビューするとこんな感じ。ちゃんと動いてるっぽい。

f:id:h6n:20120220062329j:image

まとめ

これでAmazonアフィリエイト貼り放題。

ぜひ皆さんもギークハウス沖縄から本を購入してください!

2012-02-19

embed.lyを利用してサイトにURLのプレビュー機能を埋め込む方法

#Favtileにembed.lyの埋め込み機能をつけました。

これによりリンク先の動画・写真・OpenGraphで設定されたサイトのアイコン等を埋め込み表示出来るようになりました。

f:id:h6n:20120220000031p:image:w640

今回はembed.lyを利用する過程を紹介します。

embed.lyって何が出来るの?

f:id:h6n:20120220000030p:image:w360

embed.lyを使うと、Webサイトの中に他のサイトの動画や写真やWebサイトを埋め込み表示することが出来ます。

Twitter向けの写真サイト(yfrogやTwitpic)やUstreamYouTubeはもちろん、InstagramAmazonなど、218ものコンテンツサイトの埋め込み表示に対応しています。

有料プラン以外に、無料プランがあります。1万URLまで無料で埋め込み表示できます。

登録方法

無料プランへの申し込み方法を説明します。

1.embed.lyの登録画面へ行く

Pricing on Embedly Products. | Embedly

今回はFreeプランなんで、Freeプランの下のGet this Planをクリック。

f:id:h6n:20120220012134j:image

2.登録画面埋める

まず、ユーザー名、パスワードメールアドレス、First name、Lastネーム、Organizationの項目を入力しましょう。*1

次にサービスの規約に同意するチェックボックスにチェックを入れます。

最後にSign Up!ボタンをクリックすると完了です。

f:id:h6n:20120220012135j:image

フォーム入力が完了すると次のような画面が出るので、リダイレクトされて別の画面へ切り替わるのを待ちます。

f:id:h6n:20120220012136j:image

この画面が出ると、登録は完了です。

f:id:h6n:20120220012137j:image

embed.lyをウェブサイトで使う前に

embed.lyをウェブサイトで使うためには「このURLウェブサイトから呼び出されるのを許可する」設定が必要です。

1.設定画面へ行く

Manage your Referrersの欄のManageボタンをクリック

f:id:h6n:20120220024531j:image

2.ウェブサイトURLを設定に追加する

Add Referrerの入力欄に、WebサイトURLをhttp://抜きで入力し、Addボタンをクリック。

このとき、「http://favtile.com/hanachin_」など、「http://favtile.com/」のうしろに何かついたURLでもアクセス出来るようにしたい場合は、*をつけて「favtile.com/*」のような感じで入力する。

あと、開発環境がlocalhostサーバーに上がってるときは

等々を追加しておくと便利です。

f:id:h6n:20120220024532j:image

追加が完了するとReferrersに出てきます。

f:id:h6n:20120220024533j:image

3.URLが設定出来てるか確認する

自分のウェブサイトで使えるか確認してみましょう。

使いたいURLhttp://favtile.com/hanachin_」をTest Urlボタンの左の入力欄に入れ、Test Urlボタンをクリックします。

f:id:h6n:20120220024534j:image

そのURLで使える場合は緑色で「Matched」と出ます。

f:id:h6n:20120220024535j:image

赤で「No match」と出たら、そのURLでは使えません。確認してください。

f:id:h6n:20120220033745j:image

embed.lyを使う

ではembed.lyを実際どうやって使うのかのサンプルです。

全容
<!DOCTYPE html>
<html>
  <head>
    <title>embed.ly!</title>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
    <script src="http://scripts.embed.ly/jquery.embedly.min.js"></script>
    <script type="text/javascript">
      $(function(){
        $("a").embedly({
          // ここはそれぞれのAPIキーに置き換えてください
          key:"4c0281125b1211e188dc4040d3dc5c07"
        });
      });
    </script>
  </head>
  <body>
    <header>
      <h1>embed.ly!</h1>
    </header>
    <article>
      <h1>Favtile</h1>
      <a href="http://favtile.com/">Favtile</a>
    </article>
    <article>
      <h1>node.js + socket.io + Arduinoでイイネ! クローン</h1>
      <a href="http://www.youtube.com/watch?v=WsjvgkjYWS4">youtube</a>
    </article>
  </body>
</html>
1.必要なファイルをscriptタグで指定

jQueryと、embed.lyのjQueryプラグインを読み込みます。

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="http://scripts.embed.ly/jquery.embedly.min.js"></script>
2.embed.lyでリンク先を埋め込む

「"a"」など、埋め込みたいリンクをjQueryで指定し、「$("a").embedly({key: "key"})」のような感じでembed.lyのプラグインを呼び出すだけで、リンクを埋め込めます。

<script type="text/javascript">
  $(function(){
    $("a").embedly({
      // ここはそれぞれのAPIキーに置き換えてください
      key:"4c0281125b1211e188dc4040d3dc5c07"
    });
  });
</script>

keyに指定してある文字はembed.lyのYour API Keyに表示されている文字で置き換えてください。

f:id:h6n:20120220040409j:image

3.確認

確認してみましょう。上手く行けばこのような感じで、サイトの画像や動画が埋め込まれて表示されます。

f:id:h6n:20120220040410j:image

うまくいかなかったらこんな感じでただのリンクのまま、ですね。

f:id:h6n:20120220040411j:image

まとめ

embed.lyを使うと結構簡単な手順で色んなコンテンツを埋め込めるのでお勧めです。

皆さんも是非使ってみてはいかがでしょうか?

Favtileのユーザーの背景表示をやめました。

#Favtile

前々からフィードバックの意見を貰っていました。

  • Favtileでユーザーが見たいのは背景ではない
  • 背景があると情報過多

一方で背景を表示すると

  • ユーザーの切り替わりが分かりやすい

僕がFavtileに背景画像を設定していた理由は、そのユーザーが設定した背景なのでそのユーザーの雰囲気が出る(かな?)と思っていたからです。

Twitterで背景を設定する理由

Twitterの背景には何の画像を設定していますか?

僕の場合、前までλの画像を敷き詰めていました。

理由は関数型言語、無名関数が好きなんだよアピールのためです。


僕は専用のクライアントでしかTwitterしません。Twitterの背景を設定しても、自分で自分の背景を見ることはほぼないです。

なのでいくらチカチカする画像でも、個性を主張する画像でも、どんな普通な画像でも、気になりません。(見ないから)

もしも僕がケータイでしかTwitterを使わない場合も設定しないと思います。ケータイでは背景を表示する余白のスペースがあるとは思えないからです。


しかし、TwitterWebサイトTwitterをやっている人は常に自分が設定した背景画像を目にする事になると思います。

タイムラインを見るときも、自分のお気に入りを見るときも、返信をチェックするときも、サイドバーで他人のプロフィールを表示するときも、常に自分の背景を目にするはずです。

これはパソコンのデスクトップでも同じですよね。

色んな作業をしていても見えるのは自分が設定した背景です。


Twitterのサイトで背景が変わるタイミングはいつでしょう?

別のユーザーのページへ移動した時です。

いつも見えてる背景が変わると別のユーザーのページなんだと気づきやすいですね。

Favtileに背景を設定する理由がない

TwitterのWebの画面と同じように、自分のFavを眺めるなら、自分の背景が見えるのは自然です。

Favtileでは他の人のツイートもだらだらと眺めてもらいたいと思っています。

もしも自分がツイートを眺めるなら、自分が設定した画像がみたいのではないか?

ツイートを眺めるときの背景は、普段のTwitterの背景と同じでいいのか?

他人のツイートを眺めるとき、他の人の背景を見たい訳ではないのでは?

と色々出てきて、背景設定する必要がない事に納得いきました。

まとめ

というわけで、僕の中での結論として

もしも自分がツイートを眺めるなら、自分が設定した画像がみたいのではないか?

という風にまとまって、背景表示をやめました。

大事なのは考えること

背景画像については前々からあったのですが、自分の中での結論が出ていませんでした。

んで色々と突っ込まれても「うーん」みたいな感じではっきりせず。

つけた理由も「その人の雰囲気が出そう」って感じでやっぱりちゃんとした理由なし。(そもそも背景だけでその人の雰囲気が出るのか、その人の雰囲気って必要なのか、とか色々ありますが)

背景についてようやくちゃんと考えてみると「背景画像って作業中にでも眺めたい自分の好きな画像設定してるなー」と気づいて納得して消せました。

レキサスアカデミーで突っ込みいっぱい受けてはじめて「俺あんまり考えてねーなー」と思えた一日でした。

もうちょっと考えて生きていきたい。

*1:キャプチャで「ギークハウス沖縄」って入れてるけど通らなかったので別のに変更しました。

Connection: close