Help us understand the problem. What is going on with this article?

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

More than 1 year has passed since last update.

解決したい問題

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

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

要件

  1. 画像の内容的に外に公開はしたくない
    • リリース前のプロジェクトのキャプチャであったり
    • 内部の設計の図解であったり
  2. 何度か差し替えたりする都合も考えるとgitリポジトリに画像ファイル置くのは面倒でつらい
    • GitHubのリポジトリ内のファイルへのURLはリンク切れよく起こすよね
    • commit->push->URL取る->貼ってみる->「差し替えたい…」
  3. イントラネットにアクセスできる人なら確実に見えてくれないと困る
    • 全員が使ってるクラウドストレージって前提があると良い

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

Demo

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用に作るとかとか、まぁ色々できるのでは

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");
        }
    }
}

以上です

参考リンク

VoQn
デジタルプロダクトデザイナー
http://voqn.github.io
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした