【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で全画面プレビューを利用する方法のご紹介でした!

Adobe Creative Cloudのコンプリートプランを特別価格で手に入れよう!

Adobe Creative Cloud(Adobe CC)はAdobe社が提供するクリエイター向けのサービスです。WEB制作の幅を広げる「Photoshop・Illustrator・XD」Youtuberや動画クリエイターの編集作業に欠かせない「Premiere Pro・After Effects」など全20以上のアプリが提供されており、幅広いプランが用意されています。

コンプリートプランはAdobe CCの全20以上のアプリが使用できるプランです。多くのアプリが使用できるため定価で購入すると年間7万円以上するプランですが、デジタルハリウッドのAdobeマスター講座では「基礎動画教材+Adobe CC コンプリートプラン(12ヵ月)」がセットになって39,980円(税込)で利用できます。定価より安価にAdobe Creative Cloudのライセンスを購入でき、以降のライセンス更新も可能。動画教材で基礎スキルを習得できるので、入門する方にも便利な講座です。詳しくは下記のリンクからチェックしてみてくださいね。

Adobeマスター講座はこちら

おすすめの書籍