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
サンプルを作成
- FizzBuzz
- Fibonacci
- Prime
- Eto
の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
- markdowns/fizzbuzz.md
# 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ボタンを押してコードを公開します。
Demo
以下のリンクから確認可能です。
また、コードの埋め込み機能も利用できます。
以下に個別に埋め込みします。
FizzBuzz
Fibonacci
Prime
Eto
まとめ
Tech.io 便利なのでは・・・。
Dockerベースということもあり、イメージに関してももっとこったことができそうだったり、
今回は単にコードを実行可能にしただけですが、期待された実行結果になっているかテストを付属することもできるようです。
他の方の掘り下げた記事に期待です。