post Image
ブラウザ上で動作する[開発|実行|チュートリアル|デモ]環境を作成できるCodePicnic

codepicnic01.png

デモ

いきなりですが以下のURLをクリックしてみてください。
ターミナルがブラウザ上で開き、Githubリポジトリを検索するCLIツールのghsを試すことができます。

ghs – Trial page
ghs 探したいリポジトリでGithubのリポジトリを検索可能です。

概要

CodePicnicとは上記のように作成した環境をWeb上で公開することができるサービスです。

作成者は環境を更新して保存することができます。利用者は基本的には保存することはできませんが、ファイルを作成して再アクセスするとファイルは残っています。他のブラウザからアクセスするとファイルは残っていないので、恐らくクッキーなどでセッション管理をしていてセッションごとに環境が作成されていると考えられます。

価格

1ヶ月20時間の制限はありますが無料で使うことができます。
また$9.99で制限がなくなるお買い得な価格設定になっています。

CodePicnic 価格

ユースケース

このターミナルはWebページに埋め込むこと可能なので、以下のようなチュートリアルを簡単に作成することが可能です。プログラミング学習サイトの作成にも便利だと思います。
Try Prediction.IO

また単純にコンソール環境を提供するだけではなく、簡易的なWebサーバで動作確認することや1つのエディタを複数に共有してリモートペアプログラミングが可能になっています。
CodePicnicの機能

対応環境

  • Go
  • HTML, CSS, Javascript
  • NodeJS
  • Ruby
  • Python
  • Eclixer
  • Bash
  • C#
  • PHP

環境の作成方法

  1. CodePicnic – https://codepicnic.com/ にアクセス。

  2. Sign up and try us now!からログイン。
    codepicnic2.png

  3. 左の NEW CONSOLE から作成したい環境の言語を選択
    codepicnic3.png

  4. Create で作成
    codepicnic4.png

  5. New Name your consoleに適当な名前を入力して、下記のTerminalタブを開きたい環境を作成していく。終わったらターミナルの右上のsaveアイコンをクリック。
    codepicnic5.png

  6. ターミナルを公開したい場合は、下部のChange mode:をDraftからPublicに変更
    codepicnic6.png

  7. 最後に右上のoptionsアイコン -> Shareで公開URLを取得。
    codepicnic7.png

codepicnic8.png
8. 公開するターミナルのUIの設定
デフォルトではサイドバーやその他アイコンが表示されてしまいますが、以下のようにsidebar=closehide=saveをURLに追加すると非表示にすることができます。
https://codepicnic.com/consoles/ghs/embed?sidebar=closed&hide=save,show_result,download,options,run,second_terminal,readme

またREADME.mdを作成しておくとREADMEタブを表示することが可能です。

詳細は、以下をご覧ください。
Embed Documentation – CodePicnic

以上で、完了になります。

類似ツール

CodePicnicはクラウドサービスですがOSSでcodetainerというツールが存在します。
自前の環境をプライベートでブラウザ上から使う用途では良いかもしれません。
公開となるとセキュリティが不安です。

まとめ

CodePicnicを利用すると公開したツールのトライアル環境を簡単にユーザに提供できるようになりました。
今後多くのツールがCodePicnicでトライアル環境が提供されるようになると嬉しいです。


『 Go 』Article List
Category List

Eye Catch Image
Read More

Androidに関する現役のエンジニアのノウハウ・トレンドのトピックなど技術的な情報を提供しています。コード・プログラムの丁寧な解説をはじめ、初心者にもわかりやすいように写真や動画を多く使用しています。

Eye Catch Image
Read More

AWSに関する現役のエンジニアのノウハウ・トレンドのトピックなど技術的な情報を提供しています。コード・プログラムの丁寧な解説をはじめ、初心者にもわかりやすいように写真や動画を多く使用しています。

Eye Catch Image
Read More

Bitcoinに関する現役のエンジニアのノウハウ・トレンドのトピックなど技術的な情報を提供しています。コード・プログラムの丁寧な解説をはじめ、初心者にもわかりやすいように写真や動画を多く使用しています。

Eye Catch Image
Read More

CentOSに関する現役のエンジニアのノウハウ・トレンドのトピックなど技術的な情報を提供しています。コード・プログラムの丁寧な解説をはじめ、初心者にもわかりやすいように写真や動画を多く使用しています。

Eye Catch Image
Read More

dockerに関する現役のエンジニアのノウハウ・トレンドのトピックなど技術的な情報を提供しています。コード・プログラムの丁寧な解説をはじめ、初心者にもわかりやすいように写真や動画を多く使用しています。

Eye Catch Image
Read More

GitHubに関する現役のエンジニアのノウハウ・トレンドのトピックなど技術的な情報を提供しています。コード・プログラムの丁寧な解説をはじめ、初心者にもわかりやすいように写真や動画を多く使用しています。

Eye Catch Image
Read More

Goに関する現役のエンジニアのノウハウ・トレンドのトピックなど技術的な情報を提供しています。コード・プログラムの丁寧な解説をはじめ、初心者にもわかりやすいように写真や動画を多く使用しています。

Eye Catch Image
Read More

Javaに関する現役のエンジニアのノウハウ・トレンドのトピックなど技術的な情報を提供しています。コード・プログラムの丁寧な解説をはじめ、初心者にもわかりやすいように写真や動画を多く使用しています。

Eye Catch Image
Read More

JavaScriptに関する現役のエンジニアのノウハウ・トレンドのトピックなど技術的な情報を提供しています。コード・プログラムの丁寧な解説をはじめ、初心者にもわかりやすいように写真や動画を多く使用しています。

Eye Catch Image
Read More

Laravelに関する現役のエンジニアのノウハウ・トレンドのトピックなど技術的な情報を提供しています。コード・プログラムの丁寧な解説をはじめ、初心者にもわかりやすいように写真や動画を多く使用しています。

Eye Catch Image
Read More

Pythonに関する現役のエンジニアのノウハウ・トレンドのトピックなど技術的な情報を提供しています。コード・プログラムの丁寧な解説をはじめ、初心者にもわかりやすいように写真や動画を多く使用しています。

Eye Catch Image
Read More

Rubyに関する現役のエンジニアのノウハウ・トレンドのトピックなど技術的な情報を提供しています。コード・プログラムの丁寧な解説をはじめ、初心者にもわかりやすいように写真や動画を多く使用しています。

Eye Catch Image
Read More

Scalaに関する現役のエンジニアのノウハウ・トレンドのトピックなど技術的な情報を提供しています。コード・プログラムの丁寧な解説をはじめ、初心者にもわかりやすいように写真や動画を多く使用しています。

Eye Catch Image
Read More

Swiftに関する現役のエンジニアのノウハウ・トレンドのトピックなど技術的な情報を提供しています。コード・プログラムの丁寧な解説をはじめ、初心者にもわかりやすいように写真や動画を多く使用しています。

Eye Catch Image
Read More

Unityに関する現役のエンジニアのノウハウ・トレンドのトピックなど技術的な情報を提供しています。コード・プログラムの丁寧な解説をはじめ、初心者にもわかりやすいように写真や動画を多く使用しています。

Eye Catch Image
Read More

Vue.jsに関する現役のエンジニアのノウハウ・トレンドのトピックなど技術的な情報を提供しています。コード・プログラムの丁寧な解説をはじめ、初心者にもわかりやすいように写真や動画を多く使用しています。

Eye Catch Image
Read More

Wordpressに関する現役のエンジニアのノウハウ・トレンドのトピックなど技術的な情報を提供しています。コード・プログラムの丁寧な解説をはじめ、初心者にもわかりやすいように写真や動画を多く使用しています。

Eye Catch Image
Read More

機械学習に関する現役のエンジニアのノウハウ・トレンドのトピックなど技術的な情報を提供しています。コード・プログラムの丁寧な解説をはじめ、初心者にもわかりやすいように写真や動画を多く使用しています。