1. VoQn

    Posted

    VoQn
Changes in title
+GoogleDriveにある画像ファイルをMarkdownに出したい
Changes in tags
Changes in body
Source | HTML | Preview
@@ -0,0 +1,110 @@
+## 解決したい問題
+### GitHub:e での Wiki なり Gist に使うカジュアルな画像ファイル置き場が欲しい
+今回はコレをどうにかしたいって話になります。
+
+#### 要件
+
+1. 画像の内容的に外に公開はしたくない
+ - リリース前のプロジェクトのキャプチャであったり
+ - 内部の設計の図解であったり
+2. 何度か差し替えたりする都合も考えるとgitリポジトリに画像ファイル置くのは面倒でつらい
+ - GitHubのリポジトリ内のファイルへのURLはリンク切れよく起こすよね
+ - commit->push->URL取る->貼ってみる->「差し替えたい…」
+3. イントラネットにアクセスできる人なら確実に見えてくれないと困る
+ - 全員が使ってるクラウドストレージって前提があると良い
+
+今回は、 **「GoogleAppsっていうかGoogleDriveを皆が使ってくれている前提」** だとこういう風に解決できるっていうのを紹介します
+
+## Demo
+![LGTM](https://drive.google.com/uc?export=view&id=0B2wZU2hYh05XVVZmM19Ca3l2enc "LGTM")
+
+↑ の画像は個人用の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用に作るとかとか、まぁ色々できるのでは
+
+kobito とかね(@mizchi)
+
+```js
+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");
+ }
+ }
+}
+```
+
+以上です
+
+## 参考リンク
+- [Permalinks for Google Drive Images](http://googlesystem.blogspot.jp/2013/02/permalinks-for-google-drive-images.html)
+- [stackoverflow - Displaying files (e.g. images) stored in Google Drive on a website](http://stackoverflow.com/questions/10311092/displaying-files-e-g-images-stored-in-google-drive-on-a-website)