シェアしたくなる最新のWebサービス・ITニュース情報をチェック!
  • follow us in feedly

アプギガトップ > Webエディタ「CodePen」が、完全無料のクロスブラウザチェックに神対応したので使ってみた!
注目記事ピックアップ
YouTube動画内に、まったく違う動画やWebページを挿入できる「videopath」が衝撃的!
share0
YouTube動画内に、まったく違う動画やWebページを挿入できる「videopath」が衝撃的!
タスク管理の「Trello」にWeb制作機能を搭載できる「CardForm」が斬新過ぎてスゴイ!
share0
タスク管理の「Trello」にWeb制作機能を搭載できる「CardForm」が斬新過ぎてスゴイ!
動画の中身をAI(人工知能)が認識&タグ付けする「Clarifai」が検索エンジンに革命を起こす!
share0
動画の中身をAI(人工知能)が認識&タグ付けする「Clarifai」が検索エンジンに革命を起こす!
URLを指定するだけ!どんなWebデータも一発で可視化できる「Silk」は、そのままWebサイトも制作可能で無料提供中!
share0
URLを指定するだけ!どんなWebデータも一発で可視化できる「Silk」は、そのままWebサイトも制作可能で無料提供中!
ブロックを繋げてWebアプリやゲームを作れる「Weld Action Blocks」が思わず夢中になる面白さ!
share0
ブロックを繋げてWebアプリやゲームを作れる「Weld Action Blocks」が思わず夢中になる面白さ!
ググる前にチェックすべき「Web開発系」サービスをまとめた至高の情報サイト8個+α!
share0
ググる前にチェックすべき「Web開発系」サービスをまとめた至高の情報サイト8個+α!
プログラミングしないと戦えないWebストラテジーゲーム「Empire of Code」が時間泥棒確定!
share0
プログラミングしないと戦えないWebストラテジーゲーム「Empire of Code」が時間泥棒確定!
発射した弾が、相手のスマホ画面に飛んでいく対戦ゲーム「DUAL」が衝撃的な面白さだった!
share0
発射した弾が、相手のスマホ画面に飛んでいく対戦ゲーム「DUAL」が衝撃的な面白さだった!
Chromeの「新規タブ」機能が拡張され過ぎて、もはや別アプリと化している件!
share0
Chromeの「新規タブ」機能が拡張され過ぎて、もはや別アプリと化している件!
好きなYouTube動画の「見て欲しいシーン」だけを抽出して再公開できる「vibby」が便利すぎる件!
share0
好きなYouTube動画の「見て欲しいシーン」だけを抽出して再公開できる「vibby」が便利すぎる件!
ブログ読者に「聞いてみたいこと」を簡単にWebコンテンツ化できる「plyfe」を試してみた!
share0
ブログ読者に「聞いてみたいこと」を簡単にWebコンテンツ化できる「plyfe」を試してみた!
欲しいコンテンツを選ぶだけでWebサイトを作成できる「XPRS」が、無料とは思えないクオリティだった件!
share0
欲しいコンテンツを選ぶだけでWebサイトを作成できる「XPRS」が、無料とは思えないクオリティだった件!
複数人コラボも可能な楽譜作成エディタを搭載した新SNS「Flat.io」が、完全無料で公開中!
share0
複数人コラボも可能な楽譜作成エディタを搭載した新SNS「Flat.io」が、完全無料で公開中!
思わずWebアプリを開発したくなる「JavaScriptライブラリ7選」を一挙公開!
share0
思わずWebアプリを開発したくなる「JavaScriptライブラリ7選」を一挙公開!
完全自動で、自分のプログラミング「作業ログ」を収集して可視化する「WakaTime」が素晴らしい件!
share0
完全自動で、自分のプログラミング「作業ログ」を収集して可視化する「WakaTime」が素晴らしい件!
最近、Slackの「bot」が何でも出来過ぎて「カオス」状態になってる件!
share0
最近、Slackの「bot」が何でも出来過ぎて「カオス」状態になってる件!
Web開発系の情報収集が爆速になる絶対覚えておきたいWebサービス7選+α!
share0
Web開発系の情報収集が爆速になる絶対覚えておきたいWebサービス7選+α!
ソースコードの「バグ」を修正する速さを競うWebゲーム「CodeFights」で遊んでみた!
share0
ソースコードの「バグ」を修正する速さを競うWebゲーム「CodeFights」で遊んでみた!
ブロックを繋げるだけでチャットボットが作成できる「Motion AI」は、WebもSNSも無料で運用可能!
share0
ブロックを繋げるだけでチャットボットが作成できる「Motion AI」は、WebもSNSも無料で運用可能!
GoogleドライブにTrello風タスク管理機能を拡張できる「Kanbanchi」を試してみた!
share0
GoogleドライブにTrello風タスク管理機能を拡張できる「Kanbanchi」を試してみた!
プログラミング
ad 今の年収で満足ですか?
typeで転職した71%が年収アップ!
2015/03/09 20:45

Webエディタ「CodePen」が、完全無料のクロスブラウザチェックに神対応したので使ってみた!

codepen-cross- browser-check_01 どうも、まさとらん(@0310lan)です!

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

サンプルコードの実験をしてみたり、Webサイト・アプリを作って共有したり、自分のブログに貼り付けて紹介したり…などが出来るようになっています。
codepen-cross- browser-check_02 さらに、「PC・スマホ」のあらゆるブラウザチェックにも無料で対応できるようになったので、概要をピックアップしてご紹介しようと思います!


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

まず、無料のアカウントを取得してからサイトにアクセスし、「New Pen」ボタンをクリックします。
codepen-cross- browser-check_03 (登録しなくても利用はできますが、クロスブラウザ機能はアカウントが必要…)


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

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

すると、メニュー表示が少し変化したのが分かります。
codepen-cross- browser-check_06 これで、自分のアカウントにコードが登録されて、クロスブラウザチェックを使う準備が整ったことになります。


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

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

すると、専用のテストページへアクセスすることが出来ます。(初回のみ、無料のユーザー登録が必要)
codepen-cross- browser-check_08 これは、「crossbrowsertesting.com」という別のWebサービスと連携することで実現しています。


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

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


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

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

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

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

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

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


面白い機能としては、表示確認中に上部メニューから「スクリーンショットの撮影」や「ビデオ撮影」が出来る点です!
codepen-cross- browser-check_15 クリック1発で、記録を残せるようになるので、テスト中には最適な機能と言えるでしょう。


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

すると、ビデオやスクショなどのデータを、あとからいつでも確認することが出来るようになります。
codepen-cross- browser-check_17 これで、CodePenの活用範囲が大きく広がったのではないでしょうか。

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


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

【無料で300以上のクロスブラウザチェックを搭載した「Cloud9」エディタの神進化が話題に!】
codepen-cross- browser-check_18 こちらも、ブラウザ上で利用できるWebエディタなのですが、CodePenよりもできる事が多く、そして非常にパワフルな高機能エディタとなっています。

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

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


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

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

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

<参考>
「CodePen」公式サイト


wirtten by まさとらん



まさとらん

国内外問わず「良いモノ」だけひたすら集めて情報共有してます。
厳選ネタはアプギガ内で分かりやすく情報発信中!
その他の旬なネタは、twitterにて発信してますので、お気軽にどうぞ!

twitter:0310lan

この記事を読んでいる人は、他にこんな記事も読んでいます。
Related Posts Plugin for WordPress, Blogger...

ページトップへ戻る