こちらのホームページブログを更新し続けて結構な日数となりました。
なんと、この記事で当サイトのブログ記事が600本目のようです。
節目だから…というわけでもありませんが、今回は少し上級者向けのお話をさせていただきます。
本職の方でなくても、どうしても上司の方やクライアント様の要望などで、ちょっと変わった用途のCSSやJavascript等をホームページに追加しないといけない、けれど自分にはぶっつけ本番でどうにか出来るような度胸はない…なんて状況になったことはありませんでしょうか。
私はこれまでのコーダー人生の中で何度となくあります。壊したら直すのは自分ですので、余計慎重になります。
そんなときに使える、「Codepen」というサービスについてご紹介いたします。
で、Codepenとは？
簡単に言ってしまうと、「即席で簡易的なテスト環境を作って共有できるサービス」です。
無料版と有料版がありますが、無料版では限定公開が出来ない程度の機能制限で、本職のエンジニアでもない限りは有料版にすることは少ないかもしれません。
有料版では限定公開や複数人編集の他、公開する際の見た目などを変えたり、少し言語対応が拡張されます。
昨今は最初から慎重さが求められる複雑めな仕掛け等のご要望をいただくことが多く、また追加でご要望を頂く場合も複雑な内容が増えてきました。
これ自体はWEB業界の進化によっていろいろな技術が出来上がってきた結果で、昔と比べると大きく表現の幅が広がっています。
スクロールすると順番に記事が表示されたり、写真があちこちから流れてきたり、あるいは背景の動画がページを見ていると次々切り替わったり…といった仕掛けを見たことがある方も多いのではないでしょうか。
いずれも、一昔前では複雑なシステムを組んだり、Flashに頼らなければかなり難易度が高かった技術です。こういった技術も年々敷居が下がってきて、ある程度の理解があればプロのエンジニアでなくとも設置できるようになってきました。
いずれも、一昔前では複雑なシステムを組んだり、Flashに頼らなければかなり難易度が高かった技術です。こういった技術も年々敷居が下がってきて、ある程度の理解があればプロのエンジニアでなくとも設置できるようになってきました。
しかし、簡単かといえばそうではありません。
特に、もともと仕掛けを用意しているページに追加で仕掛けを追加する際は、リスクを伴います。
試しに追加してみたら、元々の仕掛けも、追加した仕掛けも全く動かないなんてことも当たり前のように起きます。そういうときこそ、元データに影響なく純粋にプログラムだけを動作確認できるCodepenの出番です。
とりあえず登録してみましょう
Codepenのサイトはこちらです。
普通に検索で探しても出てきますが、日本のサイトではありません。検索する際は「日本語のページを探す」という状態にしていると出てこないことがあります。
ページに進むとこのような画面が出てきます。
「Sign Up」を選択し、メールアドレスや使用するパスワード等を入れ、登録後にメールアドレスに対して最終確認が届きますので、そちらを承認すれば登録完了です。
海外のサイトのため英語だらけですが、落ち着いて読めば大体のニュアンスがつかめる程度の内容になっていますので、google翻訳などを併用しながら進めれば特に問題はありません。
一通りチュートリアルを流し読みすると、今度はこちらのような画面が表示されます。
こちらが実際にコードを入力する画面になります。
HTMLとCSS、そしてJavascriptが入力可能で、書いた内容はプレビューのエリアに即反映されていきます。
外部のサービスにあるデータを読み込むことも可能なため、例えばWebフォントやGoogleのサーバーにあるjQueryのファイルなども条件さえ整っていれば問題なく使用できます。
実際に使ってみる
実際にコードを入力し、画面上部にあるSaveボタンを押すと、作業内容が保存できます。
保存した内容は、特に指定しない限り誰でも見ることができます。お一人で作業する際の確認用はもちろん、所属するチームや事業部の方に確認してもらう用途にも良いかと思います。
また、このサービス上で動いている以上、別のプログラムが動いている場所にこのプログラムを追加して動かなければ、どこかの変数や計算がかぶっているという証明になります。
共有ができる閉鎖環境での動作確認という意味ではとても優秀ではないでしょうか。
また、この作業内容はシェアボタンからSNSで拡散したり、インラインフレームなどにしてウェブサイト上に貼り付けることも可能です。
ご自身でブログ等を運用している方は、こういった使い方で第三者からの反応をうかがうのも良いかもしれません。
実際に埋め込むとこのような感じになります。
クリックするまで動作を始めないモードなどもあり、検証のしやすさが光ります。
クリックするまで動作を始めないモードなどもあり、検証のしやすさが光ります。
餅は餅屋、WEBはWEB会社という方は
こちらのように優秀なサービスとして紹介をさせていただきましたが、やはりCSSやJavascriptは誰にでも簡単に使えるもの、というにはまだまだ敷居が高い存在です。
自分で作業内容を吟味している時間がもったいないといった状況や、細かなところまで検証ができない環境という方も多くいらっしゃると思います。
あれこれやってみたが、プロに任せたほうがこれは無難だろう…そんな結論になった際はぜひご相談ください。せっかく皆様で考えた改善案などをしまい込むのは非常にもったいないと考えます。
エグゼクティブクリエイションがお話をお聞きし、現実的に可能な作業範囲を固めつつご提案させていただきます。
---------------------------------------------------------------
頼れるweb制作会社を探すなら、
エグゼクティブクリエイションへ
------------------------------------------------
---------------------------------------------------------------
◇サイト運営管理に関する
ご相談はコチラから
TEL: 03-5839-2512
FAX： 03-5839-2513
------------------------------------------------
≫ホームページ制作 東京 エグゼクティブクリエイション
