【Web系必見⚡】オンラインエディタ『Glitch』を体感しよう!



【Web系必見⚡】オンラインエディタ『Glitch』を体感しよう!

Glitch というフリーのオンラインエディタをご存知でしょうか?

コードスニペットで CodePen は見た、体験したことがあるという方も多いと思われます。

Glitchは、 CodePen 以上の体験をあなたに与えてくれるかもしれません。

また Glitch の Webページが超キュート❤️で素敵すぎましたので、ユニークなデザインポイントをいくつかコード付で解説いたします。

Glitch公式ページ: https://glitch.com/

目次
  1. Glitchがおもしろい&GlitchのWebサイトがおもしろい
  2. Glitch とは
  3. GlitchのWebデザイン
  4. GlitchのWebデザインをGlitchでマネしてみよう
  5. まとめ

Glitchがおもしろい&GlitchのWebサイトがおもしろい

Glitch とは

image

Glitch で公開されているポケモン?の Web VR (JavaScript) (リンク

Glitch、日本語に訳すと「欠陥」 という意味ですが、そんな意味はどうでもよく Web 系に関係する人、プログラミングに興味がある人にとっては強力なウェポン武器

自分のパソコンにプログラムを編集する環境がなくても、ブラウザ上でコードを編集でき、保存も公開も可能。 どれだけ Glitch が凄いかは Web ページにアクセスしてみると分かりますが、まずは主だった特徴を紹介。

  • 無料可
  • 無料でもサブドメインで自分の Web ページを公開できる
  • 他人のコードを Remix できる
  • 無知でも React や Vue.js 、 AngularJS を動かせる
  • データベースも利用可能(SQLite)
  • 画像などのファイルもアップロードできる
  • 遅くない
  • 変更内容は LIVE で反映
  • React の凄さを感じます(Glitchは Reactベース)

何よりも嬉しい「無料利用枠」。通常 ”無料” というと制限が厳しいイメージがありますが、 Glitch の場合はそうでもありません。

image

上図は Glitch 無料プランのスペック内容ですが、サンプルプログラムを動かすには十分な性能。同類サービスに CodePen がありますが、 CodePen の場合はブラウザメモリーが関係するため、使用できるコード量やメモリー(Limit 1MB)が限定的。つまり Glitch は無料枠でも十分 Web デザインを楽しめるということ。

そして自分の作った、管理する Webページは”無料”でネット上に公開できます。 〇〇.glitch.me という Glitch のサブドメインが割り当てられて、 SNS で拡散したり、ポートフォリオサイトとしても利用できるでしょう。「ちょっとコードを残しておきたい」「ちょっとサンプルを紹介したい」といった時に非常に便利ですね。

「他人のコードを Remix できる」、こちらは Scratch に似たイメージで、 Glitch で作ったプログラムを公開している人もたくさんいます。その公開しているプログラムを自分のアカウントに引用でき、ベースコードを元に編集可能。

image

https://glitch.com/~important-invincible-skink

例えば上図は Node.js のグラフ・ライブラリー D3.js を使った様子で、私は初めて D3.js をプログラミング編集なしで動かしてしまいました。 通常 D3.js を使おうと思うと、公式ドキュメントを読んだり YouTube をみたり、コードを描いてみたり、と時間と労力が必要です。しかし、 Glitch の世界は別。 「Remix」ボタンと「Preview」ボタンで未体験の JavaScript ライブラリーもノーストレスで動かせてしまいます。つまり”無知”でも本格的な JavaScript の世界を楽しめる、ということ。

この他にも JavaScript ならではのブラウザ VR や React、 Vue.js なども初期学習なしで実行可能。これは Glitch 最高経営責任者のアニルダッシュさんのコメント

「グリッチは皆のためです」
「うまくいくものから始めましょう」
「コーディングは創造的で表現力豊か」

引用: Medium/ Glitch

のまさにそれっ、といった感じ。私自信、 React 興味あるなと思っていた程度ですが、一気に React をもっと使ってみたくなりました。またその延長線上にある React 搭載型の PHPフレームワークの Laravel も。

あとは上記に紹介した特徴以外に、 GitHub と連携できる、有料プランにするとメモリーを 2GB にアップできる、オリジナルドメインも 2回の感謝で OK など本当に Web プログラミングが楽しくなる環境が揃っています、ワクワクしますね。

GlitchのWebデザイン

image

https://glitch.com/pricing

Glitch を利用してみると分かるのですが、Webデザインが無茶苦茶リッチです。静的なマテリアルも素敵ですし、実際にパソコンで Glitch を操作してくと、いろいろなところで「おっ?!」と思うところがあります。

例えば、コードをリミックスして編集しようとした時に出てくるポップアップ。

image

Glitch でプログラムを編集する際に登場してくるポップアップ

これは Glitch コミュニティーも利用できますよ、という案内。そのほかにもボタンをクリックしたらボタンの枠線が増えたり、自動でカラーが変わったり。おこがましくない程度にいい感じにユーザーに刺激を与え、ついつい使いたくなってしまうデザイン、本当にこれは Web に関係する人みんなが勉強になると思いました。

自分のプロジェクトページにアクセスすると表示されるローディングアイコン、お洒落です。読み込み途中にパソコンの通信を切ってみると分かるのですが、このアニメーションは CSSアニメ で制御。ローディングアイコンを使用されている方は、真似したくなりますよね。

GlitchのWebデザインをGlitchでマネしてみよう

斜め右肩上がりの見出しデザイン

image

https://zenith-responsible-sail.glitch.me/two.html

Glitch 公式ページの多くのところで採用されている見出しタグのナナメ・デザイン。”右肩上がり”って、なんとなく「ポジティブ」「前向き」「右肩業績上がり」的なイメージで Good ですよね。

こうしたチョット変わった Web デザインを採用する際、「画像で読み込む」場合と Glitch のように 「CSSで制御」する場合の 2パターン。 画像で読み込んでしまえば簡単そうですが、「全体の見出しタグの角度を少し変えたい」「色を変えたい」といった時にもう一度画像を作り直す必要があります。しかし、 Glitch のように CSS で制御できれば「角度」も「色」も「大きさ」もあとで簡単に変更することができますし、スマホデザインにも柔軟に対応可能。

そして斜め右肩上がりの見出しデザインのコードは以下の通り。

【 HTML 】
<h2>
  <span class="outer">
    <span class="inner">JavaScript インパクト!</span>
  </span>
</h2>


【 CSS 】
.outer {
    display: inline-block;
    transform: rotate(-1deg);
    position: relative;
    left: calc(5px * -1);;
    z-index: 0;
    background-color: pink;
    padding: 5px calc(5px * 2);
    border-radius: 5px;
}

.inner {
    position: relative;
    display: inline-block;
    transform: rotate(1deg);
}

image

この斜め右肩上がりの見出しデザイン、 span タグを 2重に使うことで表現。最初の span で斜め右肩上がりのピンク色背景を用意して、その後に角度を元に戻して文字を表示するように制御。

基本的な CSS スキルに ”角度” を加えるだけで、お洒落に見えますよね。

フレーム付きのグリッドデザイン

image

https://zenith-responsible-sail.glitch.me/one.html

チョット私の顔が気持ち悪いかもしれませんが、 Glitch で使用されている Grid デザインをマネしてみました。通常は区切ったコンテンツの中をどうしようか?と考えるところですが、 Glitch は ”中” も ”外” もお洒落に演出。

一見するとシンプルなデザインで簡単そうにも思えますが、 CSS コードを確認すると以下のようにチョット複雑。

【 CSS の 一部抜粋コード】

.styles__postcards___3GxG5 {
  display: grid;
  grid-gap: 30px;
  grid-template-columns: 1fr 1fr 1fr;
}

.styles__postcard___32wNV {
    position: relative;
    border: 4px solid var(--outer-border-color);
    border-radius: 5px;
    background: var(--inner-border-color);
    padding: 7px;
    overflow: hidden;
}

.styles__waves___oO6bZ {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    background-image: url("https://cdn.glitch.com/179ed565-619c-4f66-b3a3-35011d202379%2Fwave.svg");
    background-position: 0 -1px;
    opacity: .65;
}

.styles__postcardContent___Afk_c {
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    height: 100%;
    background: #fff;
    border-radius: 5px;
    padding: 20px 10px 15px 10px;
}

.styles__stamp___3XrcE {
    position: absolute;
    top: 8px;
    right: 10px;
    height: 35px;
}

CSS 一部表示 終わり

CSS のクラス名を最適化していない点、ご了承ください。

今コードを見る(HTML、102行)

      <!DOCTYPE html>
      <html lang="en">
        <head>
          <meta charset="utf-8">
          <meta http-equiv="X-UA-Compatible" content="IE=edge">
          <meta name="viewport" content="width=device-width, initial-scale=1">
          <title>Hello!</title>
          <link rel="stylesheet" href="/style.css">
          <link rel="stylesheet" href="/one.css">
          <script src="/script.js" defer></script>
        </head>  
        <body>
          <h1>Glitch Web Page のデザイン学習</h1>
          
          <p>元 <a href="https://glitch.com/">https://glitch.com/</a></p>
          <p>対象: PC</p>
          
      <div class="styles__postcards___3GxG5">
        <!-- 左ブロックはじめ -->
        <div class="styles__postcard___32wNV" style="--inner-border-color:#EAE6FF; --outer-border-color:#7460E1;">
          <div class="styles__waves___oO6bZ" aria-hidden="true"></div>
          <div class="styles__postcardContent___Afk_c">
            <div class="styles__stamp___3XrcE">
              <h2 class="heading__heading___3bBL2 heading__h2___7wo6b">
                <!-- <img alt="Update" class="styles__stampLabel___vDert" sizes="" src="https://cdn.glitch.com/179ed565-619c-4f66-b3a3-35011d202379%2Fpostcard-label-update.svg" loading="auto" width="auto" height="100%"> -->
                <!-- <img data-module="Icon" src="https://cdn.glitch.com/e7e23ba6-c0ec-4a5a-8dcf-b6f61984cea8%2Fdog_face.png?v=1568142112319" alt="" class="icon__IconBase-sc-14abeh1-0 cGovEN styles__stampIcon___2aurJ"></h2> -->
            </div>
            <div class="styles__postcardColumns___1_OKh">
              <div class="styles__postcardContentColumn___2Ox5h">
                <h3 class="styles__postcardSubheading___T9R1u heading__heading___3bBL2 heading__h3___3zu_K">Glitchデザインはすごい</h3>
                <p style="--size:15px; --weight:400;" class="text__p___3RiQJ text__defaultMargin___2lvr- styles__postcardText___1OR8X">みんなで Glitch 使ってみよう!</p>
                <span class="styles__postcardCta___2n14_">
                  <button data-module="Button" class="button__BaseButton-sc-10b15g-0 gRwhkR button__StyledButton-sc-10b15g-1 button__Button-sc-10b15g-3 jnvevu" type="button">All Updates <svg viewBox="0 0 64 64" aria-hidden="true" class="icon__SVGBase-sc-14abeh1-1 bOzyky">
                    <polygon points="64,32 48,48 48,36 0,36 0,28 48,28 48,16" transform="translate(32,32) rotate(0) translate(-32,-32)" fill="currentColor"></polygon></svg>
                  </button>
                </span>
              </div>
              <div class="styles__postcardThumbnailColumn___2V9qg">
                <img alt="" sizes="" src="https://pythonchannel.com/static/images/twitter_search_app/17.jpg" loading="auto" width="100%" height="100%">
              </div>
            </div>
          </div>
        </div>
        <!-- 左ブロック終わり -->
        <div class="styles__postcard___32wNV" style="--inner-border-color:#FEED64; --outer-border-color:#E1D262;">
          <div class="styles__waves___oO6bZ" aria-hidden="true"></div>
          <div class="styles__postcardContent___Afk_c">
            <div class="styles__stamp___3XrcE">
              <h2 class="heading__heading___3bBL2 heading__h2___7wo6b">
                <!-- <img alt="Video" class="styles__stampLabel___vDert" sizes="" src="https://cdn.glitch.com/605e2a51-d45f-4d87-a285-9410ad350515%2Fpostcard-podcast.svg" loading="auto" width="auto" height="100%"> -->
                <!-- <img data-module="Icon" src="https://cdn.glitch.com/652d1806-f6c1-4fa5-82e8-d5aa0e605a64%2Ftelevision.png?v=1568928956732" alt="" class="icon__IconBase-sc-14abeh1-0 cGovEN styles__stampIcon___2aurJ"> -->
              </h2>
            </div>
            <div class="styles__postcardColumns___1_OKh">
            <div class="styles__postcardContentColumn___2Ox5h">
              <h3 class="styles__postcardSubheading___T9R1u heading__heading___3bBL2 heading__h3___3zu_K">コードの変更はリアルタイムで更新だ</h3>
              <p style="--size:15px; --weight:400;" class="text__p___3RiQJ text__defaultMargin___2lvr- styles__postcardText___1OR8X">この React の技術ってほんとすごいね</p>
              <span class="styles__postcardCta___2n14_">
                <a href="https://glitch.com/glimmer/episode/ssf-001-game-on" variant="secondary" data-module="Button" class="button__StyledButton-sc-10b15g-1 button__Button-sc-10b15g-3 jnvevu">Watch It 
                  <svg viewBox="0 0 64 64" aria-hidden="true" class="icon__SVGBase-sc-14abeh1-1 bOzyky"><polygon points="64,32 48,48 48,36 0,36 0,28 48,28 48,16" transform="translate(32,32) rotate(0) translate(-32,-32)" fill="currentColor"></polygon></svg>
                </a>
              </span>
            </div>
            <div class="styles__postcardThumbnailColumn___2V9qg">
              <img alt="" sizes="" src="https://pythonchannel.com/static/images/twitter_search_app/17.jpg" loading="auto" width="100%" height="100%">
            </div>
          </div>
        </div>
      </div>
      <div class="styles__postcard___32wNV" style="--inner-border-color:#cdeffc; --outer-border-color:#75d1f8;">
        <div class="styles__waves___oO6bZ" aria-hidden="true"></div>
        <div class="styles__postcardContent___Afk_c">
          <div class="styles__stamp___3XrcE">
            <h2 class="heading__heading___3bBL2 heading__h2___7wo6b">
              <!-- <img alt="Ideas" class="styles__stampLabel___vDert" sizes="" src="https://cdn.glitch.com/0aa2fffe-82eb-4b72-a5e9-444d4b7ce805%2Fideas-label.svg?v=1573670255817" loading="auto" width="auto" height="100%"> -->
              <!-- <img data-module="Icon" src="https://cdn.glitch.com/d7f4f279-e13b-4330-8422-00b2d9211424%2Flightbulb.png?v=1575320161677" alt="" class="icon__IconBase-sc-14abeh1-0 cGovEN styles__stampIcon___2aurJ"> -->
            </h2>
          </div>
          <div class="styles__postcardColumns___1_OKh">
            <div class="styles__postcardContentColumn___2Ox5h">
              <h3 class="styles__postcardSubheading___T9R1u heading__heading___3bBL2 heading__h3___3zu_K">Scratchっぽいところもあるね</h3>
              <p style="--size:15px; --weight:400;" class="text__p___3RiQJ text__defaultMargin___2lvr- styles__postcardText___1OR8X">マップ制御できる Leaflet.js もすごいね</p>
              <span class="styles__postcardCta___2n14_">
                <a variant="secondary" data-module="Button" class="button__StyledButton-sc-10b15g-1 button__Button-sc-10b15g-3 jnvevu" href="/~starter-leaflet">View App 
                  <svg viewBox="0 0 64 64" aria-hidden="true" class="icon__SVGBase-sc-14abeh1-1 bOzyky"><polygon points="64,32 48,48 48,36 0,36 0,28 48,28 48,16" transform="translate(32,32) rotate(0) translate(-32,-32)" fill="currentColor"></polygon></svg>
                </a>
              </span>
            </div>
            <div class="styles__postcardThumbnailColumn___2V9qg">
              <img alt="" sizes="" src="https://pythonchannel.com/static/images/twitter_search_app/17.jpg" loading="auto" width="100%" height="100%">
            </div>
          </div>
        </div>
      </div>
      </div>    
          <!-- include the Glitch button to show what the webpage is about and
                to make it easier for folks to view source and remix -->
          <div class="glitchButton" style="position:fixed;top:20px;right:20px;"></div>
          <script src="https://button.glitch.me/button.js" defer></script>
        </body>
      </html>
    
今コードを見る(CSS、196行)

      * {
          -webkit-box-sizing: border-box;
          box-sizing: border-box;
      }

      .styles__postcards___3GxG5 {
        display: grid;
        grid-gap: 30px;
        grid-template-columns: 1fr 1fr 1fr;
      }

      .styles__postcard___32wNV {
          position: relative;
          border: 4px solid var(--outer-border-color);
          border-radius: 5px;
          background: var(--inner-border-color);
          padding: 7px;
          overflow: hidden;
      }

      .styles__waves___oO6bZ {
          position: absolute;
          width: 100%;
          height: 100%;
          left: 0;
          top: 0;
          background-image: url("https://cdn.glitch.com/179ed565-619c-4f66-b3a3-35011d202379%2Fwave.svg");
          background-position: 0 -1px;
          opacity: .65;
      }

      .styles__postcardContent___Afk_c {
          position: relative;
          display: -webkit-box;
          display: -ms-flexbox;
          display: flex;
          height: 100%;
          background: #fff;
          border-radius: 5px;
          padding: 20px 10px 15px 10px;
      }

      .styles__stamp___3XrcE {
          position: absolute;
          top: 8px;
          right: 10px;
          height: 35px;
      }

      .styles__stamp___3XrcE h2 {
          margin: 0;
      }

      .heading__h2___7wo6b {
          font-size: 18px;
          font-weight: bold;
      }

      .styles__stamp___3XrcE .styles__stampLabel___vDert {
          height: 35px;
      }

      .styles__stampIcon___2aurJ {
          position: absolute;
          top: 9px;
          right: 9px;
          font-size: 20px;
      }

      .cGovEN {
          display: inline-block;
          height: 1em;
          width: auto;
          vertical-align: top;
      }

      .styles__postcardColumns___1_OKh {
          -webkit-box-orient: vertical;
          -webkit-box-direction: normal;
          -ms-flex-direction: column;
          flex-direction: column;
      }

      .styles__postcardColumns___1_OKh {
          display: -webkit-box;
          display: -ms-flexbox;
          display: flex;
          width: 100%;
      }

      .styles__postcardContentColumn___2Ox5h, .styles__postcardThumbnailColumn___2V9qg {
          display: -webkit-inline-box;
          display: -ms-inline-flexbox;
          display: inline-flex;
          -webkit-box-orient: vertical;
          -webkit-box-direction: normal;
          -ms-flex-direction: column;
          flex-direction: column;
          -ms-flex-preferred-size: 50%;
          flex-basis: 50%;
      }

      .styles__postcardSubheading___T9R1u {
          max-width: 110px;
      }

      .heading__h3___3zu_K {
          font-size: 16px;
      }

      .text__p___3RiQJ {
          font-family: "Benton Sans",Helvetica,Sans-serif;
          font-size: var(--size);
          font-weight: var(--weight);
          line-height: 1.35;
          margin: 0;
      }

      .text__defaultMargin___2lvr- {
          margin: 1em 0;
      }

      .styles__postcardText___1OR8X {
          color: #636363;
      }

      .styles__postcardCta___2n14_ {
          margin-top: auto;
      }

      .jnvevu {
          display: inline-block;
          border-radius: var(--rounded);
          font-family: var(--fonts-sans);
          font-weight: 600;
          line-height: 1;
          position: relative;
          white-space: nowrap;
          padding: 0.375em 0.5em 0.1875em;
          text-decoration: none;
          color: var(--colors-secondary);
          background-color: var(--colors-background);
          border: 1px solid var(--colors-secondary);
          font-size: var(--fontSizes-small);
      }

      .gRwhkR {
          -moz-appearance: none;
          color: inherit;
          background-color: transparent;
          border: 0px none;
          border-radius: 0px;
          padding: 0px;
          margin: 0px;
          font-family: inherit;
          font-size: 100%;
          line-height: 1.15;
          text-transform: none;
          text-align: left;
          cursor: pointer;
      }

      .bOzyky {
          display: inline-block;
          height: 1em;
          width: auto;
          color: inherit;
          vertical-align: top;
      }

      .styles__postcardThumbnailColumn___2V9qg {
          -webkit-box-align: start;
          -ms-flex-align: start;
          align-items: flex-start;
          border-left: 0;
          border-top: 1px solid #ddd;
          padding: 0;
          margin: 15px 0 0 0;
      }

      .styles__postcardThumbnailColumn___2V9qg img {
          max-width: 110px;
          max-height: 110px;
          margin-top: 15px;
          margin-left: auto;
          margin-right: auto;
      }


      .styles__postcardThumbnailColumn___2V9qg img {
          width: 90%;
          max-width: 130px;
          height: auto;
          max-height: 70%;
          margin-top: 25px;
          border-radius: 5px;
      }
    

CSS のコンテンツの上にコンテンツを重ねて表現できる "relative" と "absolute" を 2回 使って、こうした ”重なり的” なレイアウトを実現できているわけですが、私自身、一回の "relative" と "absolute" はよく使いますが、 2回の "relative" と "absolute" を使う表現、見たこともありませんでしたし、そういうアイディアも思いつきませんでした。

この他にも自動で色が変わるレイアウトやローディングアイコン、ページ内の section を区切る際の ”斜め表現” など参考にしたいデザインはたくさんありますが、今回はこれぐらいで辞めておきます。

image

section を斜めに区切って表現する方法はいくつかありますが、 Glitch の CSS コードは斬新です。ご興味ある方は、参考にして見て下さい。

【今回作成した Glitch デザインのプロジェクトページ】

https://glitch.com/~zenith-responsible-sail

よければ Remix して CSS、 Glitch お楽しみ下さい。

JavaScript をフル活用している Glitch 、ここまでベタ褒めでしたが、デメリットもあります。
その一つは SEO。
これだけ Web にリッチなデザインを与えると、当然 JavaScript のボリュームも増えます。
適切に制御できればいいかも知れませんんが、 Glitch の場合、 Google Speed Insights は 48点ほど。
原点要因に 「JavaScript の適切な処理が必要」、が挙げられていました。

一流デザイナーのスキルが身に付く

CodeCampの無料体験はこちら

まとめ

Glitch 未体験の方は是非一度、 Webページにアクセスして "デザイン感" をお確かめください。 Webデザインのイメージが変わるかもしれませんが、これも一つの好例でしょう。またこうしたイケてるWebページには必ず JavaScript が登場してきます。先日ご紹介した「iPhone SE 2020 の商品紹介ページが凄すぎ」でも紹介したように CSS と JavaScript のハーモニーによって Webデザイン が仕上がっています。

「Webデザイナーって Photoshop や Illustrator に HTML、 CSS ぐらいでいいんじゃないの?」と思われている方も多いと思いますが、今後Webデザイナーとして幅広い分野で活躍していくには、JavaScriptの習得はマストです。

「そんなにたくさん学習するのは無理そう」「JavaScriptは苦手」という方は独学だからかもしれません。 CodeCampの無料体験で、自分のなかにあるWebデザインの世界を広げてみませんか?

関連記事

オシママサラ
この記事を書いた人
オシママサラ
\ 無料体験開催中!/自分のペースで確実に習得!
オンライン・プログラミングレッスンNo.1のCodeCamp