Speaker Deckを貼れないサイトにEmbedlyを利用して貼る方法

2012年04月21日

プレゼンの資料を公開するのに今回Speaker Deckを使ってみたのですが、自分のブログに資料を貼ろうとしても上手く表示されず。ちょっと工夫が必要だったのでメモ。

結論から言うとEmbedlyを活用すれば出来る。

Embedly | Embed any URL through one powerful API

Speaker Deck自体のScript

Speaker Deck自体で表示されるのは下記のようなscript

<script async class="speakerdeck-embed" data-id="4f9008a649bc250022016265" data-ratio="1.299492385786802" src="//speakerdeck.com/assets/embed.js"></script>

上を貼ってもそのまま表示されてプレゼン資料は表示されず。

いろいろ調べてみると、Speaker Deck自体が貼れないブログサービス、 CMSが結構あるらしく上手く貼るために別途プラグインが用意されているというのを理解。

やっぱSlideShareに変更しようかと迷いながら、なんとかする方法は無いか調べていたら公式のFAQを読んでいたら下記のような記載を発見。

Every presentation on Speaker Deck has the oEmbed endpoint as a link tag in the header so it can be automatically detected by sites like Embed.ly.
How do I use oEmbed to display a presentation on my site? speakerdeck.com/faq#oembed/…

Embedlyを利用

下記のように自分の資料のURLを入力

すると下記のように変換される

Embedlyで表示されるiframeを利用した形式

<iframe style="border:0; padding:0; margin:0; background:transparent;" mozallowfullscreen="true" webkitallowfullscreen="true" frameborder="0" allowtransparency="true" id="presentation_frame_4f9008a649bc250022016265" src="//speakerdeck.com/embed/4f9008a649bc250022016265" width="700" height="601"></iframe>  

上を貼るとちゃんと表示されるようになりました。
これで「2012年にもなってSlideShare使ってんじゃねえよ」とかdisられなくて済みます。たぶん。

MySQL Casual Talks Vol.3でLTをさせて頂きました

2012年04月20日

MySQL Casual Talks Vol.3でLTをさせて頂きました。
登壇の機会を与えてくれた主催の@myfinderさん、会場を提供していただいた日本オラクルさん、運営に携わった方々ありがとうございました！

以前blogに書いた内容に、実際の状況などを加えCacualに話させて頂きました。
詳しい内容は下記エントリをご覧ください

あと下記のようなエントリを書いておいて、何事も無かったかのようにしれっとkeynoteでCasualにLT。

2012年のプレゼンはgithub pages+markdown2impressで決まり!! - Glide Note - グライドノート

私が運悪く担当サービスのメンテ日と重なってしまい、懇親会に出れなくて残念でしたが、 @n0tsさん、@sugyanさんにお会いできて感激しました。

またどこかで登壇する機会があれば、そのときは皆様よろしくお願いします。

CUIなスニペットツールsheetが便利なのでzshでsheetファイルを補完

2012年04月16日

コマンドラインで動作するスニペットツール「sheet」を使ってみたらめちゃくちゃ便利だったので、zshでsheetファイルを補完するようにしてみました。

Sheet - Text snippets for the command line

ついでにsheetの導入方法と使い方も案内。 sheetの要件の記載が特に無いですが、恐らくRuby 1.9以上は必要かと。導入環境はLionです。

導入方法

gem install sheet

sheetの使い方

sheetの確認

sheet

もしくは

sheet list

sheetの作成

sheet new シート名

たとえば、apacheのログ確認用のスニペットファイルを作成するときは

sheet apache

とかでファイルを開いてエディタで編集。

sheetの編集

sheet edit シート名

sheetのクリップボードへのコピー

Macのpbcopyでしか動作確認していないですが、

sheet copy シート名

でシートの中身をクリップボードにコピー出来ます。 (linuxもxclipでクリップボードと連携出来るようですが、私のFedora16環境では動作しなかったので誰かlinuxでの検証を!!)

sheetの削除

シートの削除自体が、今のところ実装されていないので ~/.sheet/内のファイルをrmする感じです。

URLを開く

定型フォーマットでURLを記載しておくとブラウザで開くことが出来ます。

sheetファイルを用意。(googleというシートファイルを作成)

sheet new google

下記のようなフォーマットで用意

url: https://www.google.co.jp/

下記コマンドでブラウザにurlを渡されます。

sheet google

活用方法

とりあえず私は

sheet new apache

とかでapache,mysqlとかでソフトウェアごとに分類して、よく使うコマンドを下記のように登録してます。

# 直近5000アクセス中、アクセスが集中しているURLを調べ、上位4件を表示。 tail -5000 /usr/local/apache2/logs/access_log|awk '{print $1}'|sort | uniq -c |sort -gr|head -n 4 # 直近5000アクセス中、アクセス元のIPアドレスを調べ、上位4件を表示。 tail -5000 /usr/local/apache2/logs/access_log|awk '{print $2}'|sort | uniq -c |sort -gr|head -n 4 # 直近5000アクセス中アクセスの多いリダイレクト元（アクセス元)を調べ、上位4件を表示。 tail -n 5000 /usr/local/apache2/logs/access_log | awk '{print $12}' | sort | uniq -c | sort -gr | head -n 4 # 直近5000アクセス中アクセスの多いU/Aを調べ、上位4件を表示。 tail -n 5000 /usr/local/apache2/logs/access_log | awk '{print $13}' | sort | uniq -c | sort -gr | head -n 4

# ユーザの確認 select user,host,password from mysql.user; # レプリケーションエラー対応用 stop slave; SET GLOBAL SQL_SLAVE_SKIP_COUNTER=1; start slave; show slave status\G # mk-slave-restart mk-slave-restart -uroot -p --error-numbers 1062 --verbose

そしてzshでsheetファイルが補完されるように.zshrcに下記のような設定を記載

sheetで呼び出してterminalやら、tmuxのコピーモードで必要な行だけコピーして利用してます。
普段あんまり利用しないコマンドとかを一式用意しておくと楽が出来そうです。

zsh+MoshでHostnameを補完出来るようにした

2012年04月14日

Moshを利用していてHostnameが補完されずに不便だったので、下記を.zshrcに書いて、sshと同じようにmosh [tab]でhostnameを補完するようにしました。ほぼssh補完関数そのままですが。

# mosh function _mosh_hosts { local -a config_hosts local config integer ind # If users-hosts matches, we shouldn't complete anything else. if [[ "$IPREFIX" == *@ ]]; then _combination -s '[:@]' my-accounts users-hosts "users=${IPREFIX/@}" hosts "$@" && return else _combination -s '[:@]' my-accounts users-hosts \ ${opt_args[-l]:+"users=${opt_args[-l]:q}"} hosts "$@" && return fi if (( ind = ${words[(I)-F]} )); then config=${~words[ind+1]} else config="$HOME/.ssh/config" fi if [[ -r $config ]]; then local IFS=$'\t ' key hosts host while read key hosts; do if [[ "$key" == (#i)host ]]; then for host in ${(z)hosts}; do case $host in (*[*?]*) ;; (*) config_hosts+=("$host") ;; esac done fi done < "$config" if (( ${#config_hosts} )); then _wanted hosts expl 'remote host name' \ compadd -M 'm:{a-zA-Z}={A-Za-z} r:|.=* r:|=*' "$@" $config_hosts fi fi } compdef _mosh_hosts mosh

$HOME/.ssh/configと$HOME/.ssh/known_hostsに記載されているものは補完されるようになりました。

2012年4月23日追記

@n0tsさんがブログで紹介していた方法のほうが楽なので追記。

mosh コマンドで ssh コマンドと同等の補完をする方法 | Carpe Diem

.zshrcに下記を1行追加だけでホスト名が補完されるのでこっちの方が楽です。 (ホスト名だけでなくsshのオプションも補完されてしまいますが)

compdef mosh=ssh

ますますMosh生活が快適になりました。

Octopress利用時のrel=’canonical’の問題

2012年04月12日

Octopressを利用していて、はてブが分散されてしまう問題があって原因がよく分かっていなかったんですが、@sugyanさんに指摘して頂いて解決しました!!@sugyanさん、ありがとうございます!!

Octopressのソースで修正した箇所

結論から言うと、下記のように修正して解決。

diff --git a/source/_includes/head.html b/source/_includes/head.html index 0fdc401..198cd0d 100644 --- a/source/_includes/head.html +++ b/source/_includes/head.html @@ -17,7 +17,7 @@ <meta name="viewport" content="width=device-width, initial-scale=1"> {% capture canonical %}{{ site.url }}{% if site.permalink contains '.html' %}{{ page.url }}{% else %}{{ page.url | remove:'index.html' | strip_slash }}{% endif %}{% endcapture %} - <link rel="canonical" href="{{ canonical }}"> + <link rel="canonical" href="{{ canonical }}/"> <link href="{{ root_url }}/favicon.png" rel="icon"> <link href="{{ root_url }}/stylesheets/screen.css" media="screen, projection" rel="stylesheet" type="text/css"> <script src="{{ root_url }}/javascripts/modernizr-2.0.js"></script>

問題エントリの一例

エントリが重複している…

『Glide Note - グライドノート』の新着エントリー - はてなブックマーク

@sugyanさんの指摘

glidenoteさんスゴいなー手が早い…このブログ、link rel=”canonical”で指定されてるURLが末尾スラッシュ無しなのに目次などからのurlはスラ有りだったりで、はてブが分散されてる気がする
— すぎゃーんさん (@sugyan) 4月 11, 2012

問題の原因

Octopress自体が生成するURLがhttps://blog.glidenote.com/blog/2012/02/29/autojump-zsh/というような末尾に/有りのURL
htmlソースに記載されているcanonicalはhttps://blog.glidenote.com/blog/2012/02/29/autojump-zshと末尾に/無しのURL

これにより、別エントリとして解釈されており、よく調べてみたらgithubでも問題は指摘されていました。

Octopress利用していて残念だった点が解消しました!!@sugyan++
感謝の意を表して@sugyanさんの好きな画像を貼って起きますよ

← Older Blog Archives Newer →