イイダリョウのブログ。PHPフロントエンド言語(HTML、CSS、JS)の記事を書くときにいつもCodePenを埋め込んでいますが、サーバサイド言語はローカルで書いてスクリーンショットを撮っています。あー、サーバサイド言語もCodePenみたいにブラウザで実行できてブログにも埋め込めるオンラインIDE(オンラインエディタ、プログラミング実行環境)を使いたいよー。【目次】フロントエンド言語御用達のCodePenサンプルコード(PHP)ideonerepl.itPaiza.io最後に:その他のオンラインIDEフロントエンド言語御用達のCodePenCodePenはこのブログでいつも使っているオンラインIDEです。※参考:https://codepen.io/ブログに埋め込めます。CodePen.上のタブのところで言語(HTML、CSS、JS)と実行結果を切り替えることができます。サーバサイド言語は対応していないんですよねーサンプルコード(PHP)検証用に簡単なPHPのコードを使います。無事に実行されたらpタグの中は「課長・島耕作」になるはずそれではいってみましょう。ideoneてっきりイデオンと読むのかと思ったらアイディーワンらしい。interpretersうーむ、埋め込んでみたものの、コードしか表示されないなー。別タブでページを開くと実行できるのだが。(ちなみに実行結果はHTMLページのプレビュー表示ではなく、HTMLのコード自体でした)repl.it次はrepl.it。platformREPLとは黒い画面(コマンドライン)でプログラミングを実行する機能でしたね。クモのようにコツコツと埋め込んでみたところ、下半分が黒い画面になっている。再生ボタンを押すと処理が実行されます。実行すると、むむ?赤文字でエラーになってしまいました。fileどうやらPHPの開始タグ<?php、終了タグ?>はコードに含めてはいけないようです。PHPコードの中身(echoなど)を取り出してみる。."・島耕作";おお、PHPコードの中身であればエラーにならずに埋め込めるようです。いずれにしてもHTMLプレビューじゃないのは残念。Paiza.io最後は国産のオンラインIDEです。paiza.IOおお、これが一番理想に近い!下半分の実行結果のプルダウン部分にある「HTML」がHTMLプレビューで、ここを「TEXT」にするHTMLコードにもなります!最後に:その他のオンラインIDEオンラインIDEはそのほかにもたくさんあるのですが、HTMLプレビューが実現されているものは少なく、だいたいはHTMLコードです。プログラミング入門者向けサイトまた、「runnable」など、終了しているサービスも見受けられました。「PhpFiddle」はHTMLプレビューが実行できたのですが、肝心のブログに埋め込めるシェアの方法がよくわからず。serverいまのところ「Paiza.io」が欲しい条件を兼ね揃えていると感じました。CodePen感覚でプログラミングできるサーバサイド言語も対応しているHTMLプレビューができるブログに埋め込めるこれからPHPの自作フォームをやってみたいと思っていたので、Paiza.ioで挑戦してみたいと思います。varとletとconst(再代入、再宣言の挙動の違い)ES2015から新しく加わった変数letとconst。なんとなく新しいか...2019-01-20ローカル→Sourcetree→GitHub→Herokuに同期する方法(黒い画面不要!)全国一千万人(?)の黒い画面に不慣れの皆さん、こんばんは。はてなブログProフロントエンドエンジニア。神奈川に住まう四十路のオジキ。DTP→Webデザイナーから転向し今に至る。引き続きコツコツの日々。(24)リンクTwitterInstagramYoutubeCodePenGitHubPinterestQuolaFacebooknoteQiitaはてなブログをはじめよう!idr_zzさんは、はてなブログを使っています。ブログを報告するスターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。