Edited at

GoogleDriveにある画像ファイルをMarkdownに出したい


解決したい問題


GitHub:e での Wiki なり Gist に使うカジュアルな画像ファイル置き場が欲しい

今回はコレをどうにかしたいって話になります。


要件


  1. 画像の内容的に外に公開はしたくない


    • リリース前のプロジェクトのキャプチャであったり

    • 内部の設計の図解であったり



  2. 何度か差し替えたりする都合も考えるとgitリポジトリに画像ファイル置くのは面倒でつらい


    • GitHubのリポジトリ内のファイルへのURLはリンク切れよく起こすよね

    • commit->push->URL取る->貼ってみる->「差し替えたい…」



  3. イントラネットにアクセスできる人なら確実に見えてくれないと困る


    • 全員が使ってるクラウドストレージって前提があると良い



今回は、 「GoogleAppsっていうかGoogleDriveを皆が使ってくれている前提」 だとこういう風に解決できるっていうのを紹介します


Demo

↑ の画像は個人用のGoogleDriveを共有設定 [ウェブ上で一般公開] に指定したフォルダにつっこんであるgifです

![LGTM](https://drive.google.com/uc?export=view&id=0B2wZU2hYh05XVVZmM19Ca3l2enc "LGTM")

GitHub:e の中でクローズドに見せたい場合は「特定のユーザーのみ閲覧可」とか、GoogleAppsのユーザーなら閲覧可などに指定しておけば大丈夫です


1. GoogleDriveの共有リンクについて

「共有リンクを取得」で以下2種類のURLが取れます

(っていうか、結局これ飛び先一緒なのになんで2つに分けてあるのか謎)

# ファイル一覧からコンテキストメニューで取得できる共有用リンク

https://drive.google.com/a/${APP_DOMAIN}/open?id=${FILE_ID}&authuser=0

# プレビューから取得できる共有用リンク
https://drive.google.com/a/${APP_DOMAIN}/file/d/${FILE_ID}/view?usp=sharing

ここでの FILE_ID は英数字、つまり [0-9a-zA-Z]+ の正規表現で取り出せます

対して、今回は画像を直で見せたいのでこのままだと上手く貼れません。URLをこのように差し替えます

https://drive.google.com/a/${APP_DOMAIN}/uc?export=view&id=${FILE_ID}


2. 正規表現で雑に置換


雑なRubyでも書いておきます


drive-direct-url.rb

#!/usr/bin/env ruby

FILE_ID = "([[:alnum:]]+)"
PATTERN = [
/(.*)\/open\?id=#{FILE_ID}.*/,
/(.*)\/file\/d\/#{FILE_ID}.*/
]

def convert(url)
unless url =~ /^https:\/\/drive\.google\.com/
return "[INFO] It is not url of GoogleDrive."
end

if url =~ /(.*)\/uc\?export=view&id=#{FILE_ID}/
return "[INFO] already converted."
end

PATTERN.each do |re|
if url =~ re
return "[INFO] convert => #{$1}/uc?export=view&id=#{$2}"
end
end
end

puts(convert($*[0]))


雑ですね。


雑JavaSciptも書いておきます

これをUserScriptなりブラウザ拡張なりに使うとか、(Markdownにある画像リンクに対して正規表現で引っ掛けて置換する)Atom用に作るとかとか、まぁ色々できるのでは

function getDriveImageURL(url) {

var pattern = [
/(.*)\/open\?id=([0-9a-zA-Z]+).*/,
/(.*)\/file\/d\/([0-9a-zA-Z]+).*/
];

for (var i = 0; i < pattern.length; i++) {
if (pattern[i].test(url)) {
return url.replace(pattern[i], "$1/uc?export=view&id=$2");
}
}
}

以上です


参考リンク