Tbpgr Blog

Employee Experience Engineer tbpgr(てぃーびー) のブログ

Tech.io で実行可能なサンプルコードをブログに埋め込む

Tech.io で実行可能なサンプルコードをブログに埋め込みます。

Tech.io とは?

Tech.io is a collaborative platform to discover, share and experiment technologies directly from your browser.
Craft hands-on tutorials, demos or articles on topics that matter to you.

The free knowledge-sharing platform for technology

目的はあれこれありますが、ブラウザで実行可能なコードとその説明文をシェアできるサービスです。

デモ

さっそく試してみましょう。

Playground の作成

このドキュメントに沿って作成します。

Choose Ruby

新規Playground作成画面でRubyを選択します。

※初回はGitHub連携を許可する必要があります

Clone

作成されたリポジトリをcloneします。

$ git clone https://github.com/tbpgr/playground-qFCHPtnU.git

こんな構成になっています。

.
┠ cover.png
┠ markdowns
┃ ┗ welcome.md
┠ README.md
┠ ruby-project
┃ ┠ Gemfile
┃ ┠ universe.rb
┃ ┗ universe_test.rb
┗ techio.yml

各種ファイルを編集する

techio.yml

プロジェクトの設定をするメタファイルです。

項目 内容
title playgroundのタイトル
plan lessonのリスト。個別のlessonのタイトルとファイル名を指定する
projects Docker Imageで言語環境を設定します

デフォルトでは以下のようになっています。

title : Ruby template

# Table of content
plan:
  - title: Welcome # Set the page title
    statement: markdowns/welcome.md # Set the file path to the page content
#  - title: Another Page
#    statement: markdowns/another-page.md


# Settings for your programming projects and the associated Docker images
projects:
  ruby:
    root: /ruby-project # Set the root path to your ruby project

    # Set the docker image. This image can run ruby commands using this syntax:
    # @[Code Editor Title]({"stubs": ["EditorFile1.ruby", "EditorFile2.ruby", ...], "command": "ruby example.rb"})
    # More details here: https://github.com/TechDotIO/ruby-bundler-runner
    runner: techio/ruby-bundler-runner:1.1.0-ruby-2.4

サンプルを作成

の4つのサンプルを作ってみます。
全体に関わるファイルとして以下の2ファイルを編集しておきます。

  • techio.yml
title : Ruby template

plan:
  - title: FizzBuzz
    statement: markdowns/fizzbuzz.md
  - title: Fibonacci
    statement: markdowns/fibonacci.md
  - title: Prime
    statement: markdowns/prime.md
  - title: Eto
    statement: markdowns/eto.md

projects:
  ruby:
    root: /ruby-project
    runner: techio/ruby-bundler-runner:1.1.0-ruby-2.4
  • ruby-project/Gemfile.rb

私の自作ライブラリである eto を追加します

source 'https://rubygems.org'

gem 'eto'

FizzBuzz

# FizzBuzz

@[FizzBuzz]({"stubs": ["fizzbuzz.rb"], "command": "ruby fizzbuzz.rb"})
(1..100).each do |n|
  puts case 0
  when n % 15 then :FizzBuzz
  when n % 3 then :Fizz
  when n % 5 then :Buzz
  else n
  end
end

Fibonacci

  • markdowns/fibonacci.md
# Fibonacci

@[Fibonacci]({"stubs": ["fibonacci.rb"], "command": "ruby fibonacci.rb"})
  • ruby-project/fibonacci.rb
def fibonacci(i)
  return i if (0..1).include?(i)
  fibonacci(i - 1) + fibonacci(i - 2)
end
print (1..20).map{|i|fibonacci(i)}

Prime

  • markdowns/prime.md
## Prime

@[Prime]({"stubs": ["prime.rb"], "command": "ruby prime.rb"})
  • ruby-project/prime.rb
require 'prime'

print Prime.take(20)

Eto

  • markdowns/eto.md
## Eto

@[Eto]({"stubs": ["eto.rb"], "command": "ruby eto.rb"})
  • ruby-project/eto.rb
require 'eto'
puts Eto.names

Publish

完成したコードをpushし、Previewで動作確認します。
問題なければPublishボタンを押してコードを公開します。

f:id:tbpg:20170813182521j:plain

Demo

以下のリンクから確認可能です。

また、コードの埋め込み機能も利用できます。
以下に個別に埋め込みします。

FizzBuzz

Fibonacci

Prime

Eto

まとめ

Tech.io 便利なのでは・・・。
Dockerベースということもあり、イメージに関してももっとこったことができそうだったり、
今回は単にコードを実行可能にしただけですが、期待された実行結果になっているかテストを付属することもできるようです。
他の方の掘り下げた記事に期待です。

関連情報