ソースを埋め込むのでそのやり方を勉強してみた

投稿日:2017/03/17

Programming_on_Web

クリックで拡大表示されます。

前置き

皆さんこんにちは、お久しぶりです。
春休みの間は、PythonとJavaScriptの基礎学習に時間を割いてしまい、なかなかこのサイトの改良に至るまで行きません・・・お待たせしてしまうこと、申し訳ございませんが、お手柔らかにお願いします。(´・ω・`)

さて、今回は、このサイトで日記を書いていくうちに、きっと行うであろう「 ソースの埋め込み」について、私自身のメモとして書いていきます。ですが、参考にしていただいても構いません。

今回二つのWeb上実行環境と、それらを用いてのソース埋め込みに触れていきました。

CodePen

【画像1】
クリックで拡大表示されます。

Paiza

【画像2】
クリックで拡大表示されます。

2つのWeb実行環境とソース埋め込み

以下に述べる2つは、どちらも便利なWeb上実行環境です。
ほかにも、Wandboxやrepl.itなどありましたが、登録がめんどくさかったので!以下の2つに厳選しました"(-""-)"

①CodePen
CodePenは、HTMLやCSS、JavaScriptのWeb上実行環境となっており、また公開サイトにもなっています。
【画像1】の画面の「Sign me up」から、「Free Plan」で登録をして、試しにちょっくら「Hello!」で遊んでみると・・・

See the Pen hello by Reeg0000 (@Reeg0000) on CodePen.

上のように、HTML/CSSのみで書いていますが(JavaScriptは勉強中!(; ・`д・´))、こんな感じで書いてコンソールを出して、サイトに埋め込み・公開することができます!
しかも見映えが良いですね!
HTML/CSS・JavaScriptを組み合わせてグラフィックなコンソールを出せて、公開できるのがCodePenの強みかもしれません。
CodePenサイト

②Paiza
こちらは、Java、C、C++、C#、Python2、Python3、R、Ruby、Go、Swift、・・・・・多いな、これほどのプログラム言語を、それぞれ書いて処理できるWeb上実行環境です。
それでは、【画像2】の画面から登録をして、一部実行してみましょうか。「Hello、〇〇!」という感じで( *´艸`)
なお、Paizaでは、こちらに張り付けても、皆さんが編集して実行することができるようなので、一覧を作ってそのテーマに飛ぶようにしておきますね、ぜひご活用ください。
Java(クリックするとそれぞれの言語の入力画面に飛びます。)
C++
C#
Python3
Ruby

とりあえず一部挙げてみました。めっちゃ便利ですね!
ただ、Paizaの場合、公開したその場で、他者がいじって実行できてしまうところが、公開者にとっては痛いところでしょうか。まぁ、オープンソースと言えばそこまで気にする必要はないと思いますが・・・|д゚)
Paizaサイト

最後に

上に述べた二つを、プログラム言語に応じて、このサイトで公開する際に活用していこうかなと思います。よろしくお願いします。
てゆか、CodePenとPaizaたくさん挙げたから、このページくそ重いな( ゚Д゚)

タグ:

Comment

コメントはありません。
There's no comment.