【JSFiddle】全画面プレビューを利用する方法
※本ページのリンクにはプロモーションが含まれています。
こんにちは、Ryohei（@ityryohei）です！
私はオンラインエディターのサービスで有名な「CodePen」と「JSFiddle」を使用させてもらっています。一時的なコードを残して置いたり、本記事でご紹介しているデモなどで活用しています。
そんな便利なオンラインエディターですが「JSFiddle」には全画面でプレビューするためのリンクが管理画面には用意されていません。昔はあったのか、今もあるけど私が見つけれらていないだけなのか……そこは定かではないのですが、全画面でプレビューする方法を見つけましたので、ご紹介できればと思います。
では、解説していきます。URLの末尾に文字列を付加すると全画面プレビューが利用できる
色々と調べてみた結果、URLの末尾に文字列を付加することで全画面プレビューが利用できます。
現在は下記の2つが有効のようです。
- embedded/result
- show
それぞれ下記のように指定します。
embedded/result
https://jsfiddle.net/itpryohei/yhzq35a9/embedded/result/
show
https://jsfiddle.net/itpryohei/yhzq35a9/show/
デフォルトで上記機能が用意されている方が良いのですが、これくらいであれば覚えることができますし、ますます「JSFiddle」が使いやすくなりますね！現在は「CodePen」の方が人気のようですが、どちらも使いやすいオンラインエディタなので、これからも両方使用していきたいと思います。
最後に
いかがでしたでしょうか。
私は仕事や本サイトの関係でほぼ毎日オンラインエディタを使用しています。仕事の休憩中はもちろん、移動中にスマホからアクセスして思いついたアイデアをメモ代わりに残しています。もしかしたら自分のサイトよりもアクセスしている時間が長いかもしれないくらいです。
オンラインエディタは特別な開発環境を準備する必要がなく、自分のマイページにアクセスして新しいページを作成し、コードを書いてすぐに結果を確認できる、それが素晴らしいです。有料プランもありますが、無料プランでも多くのコードを保存しておくことができ、操作性も良いので、ぜひ使用してみてください。
もちろん、急にサービスが終了する可能性もありますので、必要なデータはバックアップを取っておきましょう。何事もバックアップが大切です！
以上、JSFiddleで全画面プレビューを利用する方法のご紹介でした！
