Google Colaboratory を起動する画像リンクを作成する方法【HTML版、Markdown版】

2 min

ブログや Jupyter などでよく見かける「Open in Colab」という、Colab を起動する画像リンクを作成する方法を紹介します。

Open In Colab

※リンク先の処理については詳しくは下記を参照してください。

広告_零号機

GitHub にアップした ipynb を Colab から直接起動する方法

※ご参考

Colabで編集した ipynb ファイルを GitHub にアップする方法については下記記事をご参考ください。

Colab から直接起動するリンクの作成方法

GitHub にアップされている下記ノートブックを Colab から直接実行するリンクを作成する方法を紹介します。

GitHubイメージ

実は、上記 Web ページのURLの前半(https://github.com)を “https://colab.research.google.com/github” に置き換えるだけで Colab から直接実行できます。

下記コードを Colab などで実行してください。
※ p_url の値を必要に応じて書き換えてください。

# ① github上のURL
p_url = "https://github.com/Kewton/kewton.blog.colab/blob/master/JupyterDash.ipynb"

# ②githubのコードをColabで実行するURLの取得
aft_url = p_url.replace('https://github.com', 'https://colab.research.google.com/github');
print(aft_url)
Colab での実行イメージ

↓ リンクをクリックすると Colab から直接実行できます。

リンクをクリック後 Colab から直接実行可能

画像リンク作成方法【HTML版】

Colab から直接実行出来るURLが取得できたので次は画像リンクにする方法です。

HTML では下記を埋め込むことで画像リンクが作成出来ます。

<a href="https://colab.research.google.com/github/Kewton/kewton.blog.colab/blob/master/JupyterDash.ipynb">
<img src="https://colab.research.google.com/assets/colab-badge.svg" alt="Open In Colab">
</a>

画像リンクイメージ

Open In Colab

画像リンク作成方法【Markdown版】

Markdown では下記を埋め込むことで画像リンクが作成出来ます。

[![Open In Colab](https://colab.research.google.com/assets/colab-badge.svg)](https://colab.research.google.com/github/Kewton/kewton.blog.colab/blob/master/JupyterDash.ipynb)

まとめ

本記事では、ブログや Jupyter などでよく見かける「Open in Colab」という、Colab を起動する画像リンクを作成する方法を紹介しました。ご参考になりましたらtwitterをフォローしてSNSでシェアして頂ければ幸いです。

ご参考

ちなみに今回は下記 Chromebook を使用しました。
14.0型フルHD × Core i3 × メモリ8GB を満たす数少ない端末です。
軽くて持ち運びしやすく開発に耐えうるスペックなのでおすすめです。

富士通|FUJITSU ノートパソコン FMV Chromebook 14F(タッチパネル) ダーククロム FCB143FB [14.0型 /Chrome OS /intel Core i3 /メモリ:8GB /SSD:128GB /タッチパネル対応 /2021年12月モデル]【point_rb】

価格:70,510円
(2022/2/23 18:35時点)
感想(1件)

Chromebook でプログラミングを始める方法については下記記事をご参考下さい。

広告_零号機-エリア2
kewton

kewton

大学院卒業後、某大手SIerで10年以上SEとして従事。
社会人3年目までに基本情報・応用情報技術者、データベーススペシャリスト、簿記3級・2級を取得。
基幹系システム・IoTシステム開発のプロジェクト経験多数。AI活用システムの企画・プロト開発経験あり。
強みは、プロマネだけでなく自身で開発も実施してきたこと。
【扱える言語】
C#、java、python、javascript、Excel VBA
【扱えるDB】
oracle、sql server、postgreSQL、mongoDB

FOLLOW

関連記事

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

CAPTCHA