フロントエンド言語（HTML、CSS、JS）の記事を書くときにいつもCodePenを埋め込んでいますが、サーバサイド言語はローカルで書いてスクリーンショットを撮っています。あー、サーバサイド言語もCodePenみたいにブラウザで実行できてブログにも埋め込めるオンラインIDE（オンラインエディタ、プログラミング実行環境）を使いたいよー。いくつか試してみた。
【目次】
フロントエンド言語御用達のCodePen
CodePenはこのブログでいつも使っているオンラインIDEです。
ブログに埋め込めます。
上のタブのところで言語（HTML、CSS、JS）と実行結果を切り替えることができます。でも、サーバサイド言語は対応していないんですよねー
サンプルコード（PHP）
検証用に簡単なPHPのコードを使います。
※参考：PHPの基本を理解するためにJSと比較する - クモのようにコツコツと
<?php //役職 $position = "課長"; ?> <h1>推薦漫画</h1> <p><?php echo $position ?>・島耕作</p>
- 変数
$positionに文字列「課長」を代入 p要素の中でechoで変数$positionを出力- 無事に実行されたら
pタグの中は「課長・島耕作」になるはず
それではいってみましょう。
ideone
てっきりイデオンと読むのかと思ったらアイディーワンらしい。
うーむ、埋め込んでみたものの、コードしか表示されないなー。別タブでページを開くと実行できるのだが。
（ちなみに実行結果はHTMLページのプレビュー表示ではなく、HTMLのコード自体でした）
repl.it
次はrepl.it。
※参考：Repl.it - The collaborative browser based IDE
REPLとは黒い画面（コマンドライン）でプログラミングを実行する機能でしたね。
※参考：初めてのPython（インストール〜Hello world）と初めての黒い画面 - クモのようにコツコツと
埋め込んでみたところ、下半分が黒い画面になっている。再生ボタンを押すと処理が実行されます。
実行すると、むむ？赤文字でエラーになってしまいました。
syntax error, unexpected '<', expecting end of file
どうやらPHPの開始タグ<?php、終了タグ?>はコードに含めてはいけないようです。PHPコードの中身（echoなど）を取り出してみる。
$position = "課長"; echo $position ."・島耕作";
おお、PHPコードの中身であればエラーにならずに埋め込めるようです。いずれにしてもHTMLプレビューじゃないのは残念。
Paiza.io
最後は国産のオンラインIDEです。Paiza.io
※参考：Online PHP/Java/C++... editor and compiler | paiza.IO
おお、これが一番理想に近い！
下半分の実行結果のプルダウン部分にある「HTML」がHTMLプレビューで、ここを「TEXT」にするHTMLコードにもなります！
最後に：その他のオンラインIDE
オンラインIDEはそのほかにもたくさんあるのですが、HTMLプレビューが実現されているものは少なく、だいたいはHTMLコードです。
※参考：オンラインで書いたプログラムをブログに埋め込む - Qiita
※参考：オンラインでプログラミングして実行できるサイト - Qiita
※参考：これはすごい！3秒でプログラミングが始められるサービス17選 - paiza開発日誌
※参考：WEBプログラミングがブラウザ上で学習できるサービスまとめ10選 | 侍エンジニア塾ブログ（Samurai Blog） - プログラミング入門者向けサイト
また、「runnable」など、終了しているサービスも見受けられました。
なお、「PhpFiddle」はHTMLプレビューが実行できたのですが、肝心のブログに埋め込めるシェアの方法がよくわからず。。
※参考：PhpFiddle - PHP/MySQL in-browser IDE and online server
いまのところ「Paiza.io」が欲しい条件を兼ね揃えていると感じました。
- CodePen感覚でプログラミングできる
- サーバサイド言語も対応している
- HTMLプレビューができる
- ブログに埋め込める
これからPHPの自作フォームをやってみたいと思っていたので、Paiza.ioで挑戦してみたいと思います。
