クモのようにコツコツと

フロントエンドエンジニア イイダリョウのブログ。略称「クモコツ」

ブログに埋め込めるオンラインIDE比較(サーバサイド版のCodePenを探して)

フロントエンド言語(HTML、CSS、JS)の記事を書くときにいつもCodePenを埋め込んでいますが、サーバサイド言語はローカルで書いてスクリーンショットを撮っています。あー、サーバサイド言語もCodePenみたいにブラウザで実行できてブログにも埋め込めるオンラインIDE(オンラインエディタ、プログラミング実行環境)を使いたいよー。いくつか試してみた。

【目次】

フロントエンド言語御用達のCodePen

CodePenはこのブログでいつも使っているオンラインIDEです。

※参考:https://codepen.io/

ブログに埋め込めます。

上のタブのところで言語(HTML、CSS、JS)と実行結果を切り替えることができます。でも、サーバサイド言語は対応していないんですよねー

サンプルコード(PHP)

検証用に簡単なPHPのコードを使います。

※参考:PHPの基本を理解するためにJSと比較する - クモのようにコツコツと

<?php 
//役職
$position = "課長";
?>
<h1>推薦漫画</h1>
<p><?php echo $position ?>・島耕作</p>
  • 変数$positionに文字列「課長」を代入
  • p要素の中でechoで変数$positionを出力
  • 無事に実行されたらpタグの中は「課長・島耕作」になるはず

それではいってみましょう。

ideone

てっきりイデオンと読むのかと思ったらアイディーワンらしい。

※参考:Ideone.com - Online Compiler and IDE >> C/C++, Java, PHP, Python, Perl and 40+ other compilers and interpreters

うーむ、埋め込んでみたものの、コードしか表示されないなー。別タブでページを開くと実行できるのだが。
(ちなみに実行結果はHTMLページのプレビュー表示ではなく、HTMLのコード自体でした)

repl.it

次はrepl.it。

※参考:Repl.it - The world's leading online coding platform

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で挑戦してみたいと思います。