どうも、まさとらん（@0310lan）です！

ブラウザ上で、すぐにWebプログラミングを楽しめる「CodePen」をご存知でしょうか。

サンプルコードの実験をしてみたり、Webサイト・アプリを作って共有したり、自分のブログに貼り付けて紹介したり…などが出来るようになっています。

さらに、「PC・スマホ」のあらゆるブラウザチェックにも無料で対応できるようになったので、概要をピックアップしてご紹介しようと思います！


まずは、コードを書いてみる！
「CodePen」を使って「クロスブラウザチェック」をする前に、簡単な使い方を紹介しておきます。

まず、無料のアカウントを取得してからサイトにアクセスし、「New Pen」ボタンをクリックします。

(登録しなくても利用はできますが、クロスブラウザ機能はアカウントが必要…)


次に表示される「コードエディタ」を使って、自分の好きなようにプログラミングをしていきます。



今回は、簡単なWebサイトを作ってみました…。そして、上部メニューにある「Save」ボタンをクリックします。



すると、メニュー表示が少し変化したのが分かります。

これで、自分のアカウントにコードが登録されて、クロスブラウザチェックを使う準備が整ったことになります。


クロスブラウザチェックを使ってみる！
それでは、先ほど作ったWebサイトで「クロスブラウザチェック機能」を使ってみましょう。

まず、上部メニューに表示されている「Editor」から、「Open on CrossBrowserTesting」を選択します！



すると、専用のテストページへアクセスすることが出来ます。(初回のみ、無料のユーザー登録が必要)

これは、「crossbrowsertesting.com」という別のWebサービスと連携することで実現しています。


実は、「crossbrowsertesting.com」は基本的に有料サービスで、無料プランでも1週間しか利用できない制限が付いています。

ところが、驚くことに「CodePenユーザー」であれば「制限」を解除し、無料で利用出来るようになっているのです！


そのため、PC環境設定も「Mac・Ubuntu・Windows」などのOSや、「Chrome・Firefox・IE・Opera・Safari」といったブラウザもすべて利用できます。



さらに、スマホ環境設定も「Android・iOS・Windows Phone」から選択でき、ブラウザも「Chrome・Mobile Safari・Opera・Dolphin・Sleipnir」など多彩な選択肢が用意されています。



それでは、先ほど作ったWebサイトを最新の「Windows8.1」で、ブラウザを「IE11」を使って表示してみます。



「Run Test」ボタンをクリックすれば、すぐに指定のOS・ブラウザで表示確認を行うことが出来ます。



スマホも同様で、例えば「iPhone 6 plus」で「Mobile Safari」を使うと…、



スマホ専用の表示確認を行えます。

ちなみに、一度設定した内容は保存されるので、次回からは「Run Again」ボタンをクリックすれば、すぐに表示確認ができるようになっています。


面白い機能としては、表示確認中に上部メニューから「スクリーンショットの撮影」や「ビデオ撮影」が出来る点です！

クリック1発で、記録を残せるようになるので、テスト中には最適な機能と言えるでしょう。


記録したデータを確認する場合は、管理画面から「See Results」ボタンをクリックします。



すると、ビデオやスクショなどのデータを、あとからいつでも確認することが出来るようになります。

これで、CodePenの活用範囲が大きく広がったのではないでしょうか。

以前なら、ちょっとしたコードを実験的にコーディングするために使われていた「CodePen」ですが、最終的な表示確認まで可能になり、トータルバランスの優れたWebサービスになった気がしますね。


おまけ
最後に、CodePen以外で「クロスブラウザチェック」が可能なWebサービスを合わせてご紹介しておきます！

【無料で300以上のクロスブラウザチェックを搭載した「Cloud9」エディタの神進化が話題に！】

こちらも、ブラウザ上で利用できるWebエディタなのですが、CodePenよりもできる事が多く、そして非常にパワフルな高機能エディタとなっています。

Rails、Node、Djangoなど、必要となる開発環境を丸ごとWeb上に構築可能で、ターミナル機能も搭載されたオールインワン型のエディタと言えます。

扱いが少し難しいですが、本格的なWebサービスやサイトを制作するのであれば、こちらのエディタの方が便利かもしれません…。


まとめ
「CodePen」は、およそ40万人以上のユーザーが利用しており、毎日世界中からユニークなコードが制作されています。

コードの共有機能に優れており、マークダウン形式の無料ブログをCodePenのサービス内で構築して公開することも可能になっている珍しいサービスでもあります。

実験的な使い方から、簡単なWebアプリやサイトを作って今すぐシェア可能なので、ご興味ある方はぜひ一度トライしてみてください！

＜参考＞
・「CodePen」公式サイト


wirtten by まさとらん