2014-07-03

README.md で画像を表示するぜよ編

git gitbucket

GitBucketの使用方法で度々困ってる人がいるっぽいのが、WikiやらIssueやら、リポジトリのmarkdown やらで画像を添付・表示する方法です。

というわけで、使い方を簡単に解説をします。（GitBucket version2.0 時点の情報となります。and 基本的にGitHubと同じ方法でできるようになっているはずです。）

1. Wikiに画像を表示する方法

GitBucketでは、GitHubと同様に Wikiも gitリポジトリになっています。 Wikiで画像を表示したい場合は、画像のリンクを指定して埋め込みます。（例: ![image_alt_text](http://example.com/image_link.png）表示したい画像がすでにWeb上にある場合はいいですが、Wikiでしか使わない画像等は、Wiki内で管理したいという場合もあります。そのような場合のため、Wiki用のgitリポジトリに画像ファイルをpushして、それを使用できるようになっています。

手順は以下のとおりです。

Wikiのgitリポジトリを clone する
- 右の方に Clone this wiki locally とあり、clone用のURLを表示してますので、それを使って git cloneします
画像ファイルを gitリポジトリに追加してpushする
- 普通のgitリポジトリのように addして commitしてpushしてください
- ディレクトリを作ってその中に画像ファイルをおいてもOKです
Markdownのテキストファイルで、画像埋め込みのテキストを入れる
- ![image_alt_text](image.png)
  - リポジトリの直下にimage.pngというファイルを作った場合は、こんな感じで指定します
- ディレクトリを作ってサブディレクトリ内にいれることもできます。
  - ![image_alt_text](images/image.png)

これでWiki内に画像が表示できるようになります。実際には、image.pngのように指定された画像は、http://<GITBUCKET_BASE_URL>/<USER>/<REPOSITORY>/wiki/_blob/image.pngのリンクに書き換えられます。

2. Issueに画像を表示する方法

GitBucketでは、Issueへの画像添付もサポートしています。使い方はもっとも簡単で、画像ファイルをドラッグアンドドロップするか、下部を左クリックすれば画像選択ダイアログ経由でできます。

f:id:tanacasino:20140703211924p:plain

画像を選択・ドラッグアンドドロップすると自動的にGitBucketにアップロードされ、画像を表示するためのURLが割り当てられ、コメント欄に以下のような画像埋め込み用のテキストが追加されます。

![image.png](http://localhost:8080/user1/repo1/_attached/1404388830604KbRPlfr2ki)

f:id:tanacasino:20140703211941p:plain

これでIssueに画像を添付できます。バグ報告やUI修正等でスクリーンキャプチャを出したい場合に便利です。

3. リポジトリのMarkdownテキストで画像を表示する方法

リポジトリのトップに、README.md とかを置くのが通例となっているので、このファイル内にそのgitリポジトリで管理しているアプリのスクリーンキャプチャを埋め込んだりしたい場合等があると思います。そのような場合は、リポジトリ内に画像をpushした上で、画像のURLを指定することで画像を表示できます。

GitBucketでは、リポジトリ内の画像のrawデータにアクセスするURLを提供していますので、これを埋め込み用画像のリンクに使用します。

例: user1のrepo1というリポジトリ内のREADME.md で画像を埋め込む場合。またリポジトリ内に image.png というファイルが存在する場合

![image_alt_text](http://<GITBUCKET_BASE_URL>/user1/repo1/blob/master/image.png?raw=true)

というテキストをREADME.md内に記述することで埋め込めるようになります。

ポイントは、/blob/master/image.png?raw=true のとこですね。

以上 GitBucketで画像を扱う方法を3種類を紹介しました。ぜひご活用ください。

GitBucketでは、直接コミッターと質問や相談が出来る場所としてGitterのチャットルームを開設しています。お困りの際は、こちらにふらっとどうぞ。

英語部屋 : https://gitter.im/takezoe/gitbucket
日本語部屋 : https://gitter.im/takezoe/gitbucket_ja

2014-05-27

ag the sliver searcher を CentOS 6.5 にインストールするメモ

ソースコードの検索grepといえばの ag のメモ。ちょっと自分的に必要なので。

agのインストールメモ gist

2014-05-19

GitHubでコラボレータの一覧を見る方法

github

表題の件、GitHubで自分がownerじゃないリポジトリの collaborators のリストを見たかったんですが、どう探しても画面が見つからなかった。ググったら一瞬で出てきて、API 呼び出しで開けると判明。

書式 : https://api.github.com/repos/:user/:repo/collaborators

:user と :repo はいつものアレです。

GitBucketのリポジトリの場合 : https://api.github.com/repos/takezoe/gitbucket/collaborators

開くとこんな感じの JSON が返却されます。やっぱAPIはあると便利そうだなぁ。ツールによるエコシステムが作れる。

[
  {
    "login": "takezoe",
    ...
  },
  {
    "login": "tanacasino",
    "id": 748569,
    "avatar_url": "https://avatars.githubusercontent.com/u/748569?",
    "gravatar_id": "41a305def5c9002faf646e11be0a657a",
    "url": "https://api.github.com/users/tanacasino",
    "html_url": "https://github.com/tanacasino",
    "followers_url": "https://api.github.com/users/tanacasino/followers",
    "following_url": "https://api.github.com/users/tanacasino/following{/other_user}",
    "gists_url": "https://api.github.com/users/tanacasino/gists{/gist_id}",
    "starred_url": "https://api.github.com/users/tanacasino/starred{/owner}{/repo}",
    "subscriptions_url": "https://api.github.com/users/tanacasino/subscriptions",
    "organizations_url": "https://api.github.com/users/tanacasino/orgs",
    "repos_url": "https://api.github.com/users/tanacasino/repos",
    "events_url": "https://api.github.com/users/tanacasino/events{/privacy}",
    "received_events_url": "https://api.github.com/users/tanacasino/received_events",
    "type": "User",
    "site_admin": false
  },
  {
    "login": "shimamoto",
    ....
  }
]