フォークに巻き付いたメジャー

今回作るもの

既存のWebサイトにscriptタグ一行を貼り付けるだけでカレンダーが表示されるウィジェットを作成します。

※動画がありますのでご覧ください。

この記事で学べること

既存のWebサイトにコード(scriptタグ)一行を挿入するだけで、カレンダーウィジェットが実装できるウィジェットアプリの作成方法を学べます。

よく「コード一行で〜」的な謳い文句のサービスなんかであるアレです。

※ドメインやポート番号は各自のサーバー環境によります
<script src="http://localhost:8080/widget.js"></script>

この記事でやることの大まかな流れは以下の通りです。

1.ウィジェットとして使うHTML、CSSの作成
2.iframeを作成するwidget.jsファイルをつくる
3.2で作成したiframeに1のHTMLやCSSを挿入
4.外部ファイルのcalendar.jsを読み込み
5.index.htmlでscriptタグ経由でwidget.jsを読み込み

※Javascriptでカレンダーを作る方法に関してはここでは割愛させていただきます。こちらで用意したソースコードをお使いください。↓

https://gist.github.com/taccaya/9bc99bc0bb291b3b769e20ab7f6f96f3

ウィジェットとは何か

ウィジェット(Widget)とは、デスクトップ上で動く簡易なアプリケーションの総称で、計算機やスケジュール管理アプリなどがウィジェットとして実装されています。

Web上で動くウィジェットとしては、TwitterやInstagramのタイムラインなどに使われているウィジェットが有名です。

こういうやつです。

※ウィジェットがSEOに悪影響があるなどと言われたりしているので、詳しく調べたところ、Goolgeによる公式の回答がありました。

大量のキーワードを含むリンク、隠しリンクといった、低品質だと思われるリンクがウィジェットに埋め込まれたまま、様々なサイトの配布されているケースをGoogleはNGとしているようです。

UIの向上に貢献するようなウィジェットの利用は推奨されているようなので、安心してサービスの開発ができます。

iframeの仕組み

iframeとは、「inline frame」の略語で、HTMLファイルの中にフレーム(新たなHTMLファイル)をつくるためのタグのことです。

<iframe>タグを使うことで、新しいウィンドウやタブを開かずに、独立したフレームを作成できるのです。

これにより、別のソースからのコンテンツをウィジェットとして挿入することができます。

ウィジェット用のHTML、CSSを作成

それでは早速、ウィジェットを作っていきましょう。

まず、外部のサイトにウィジェットとして表示させるHTML、CSSを作成していきます。

widgetディレクトリを作成し、その中にsample.htmlを置いて以下のコードを記述しましょう。

<div id="calendar"></div>

<style>
* {font: 1.4 Helvetica, arial, nimbussansl, liberationsans, freesans, clean, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";}
#calendar { max-width: 300px; width: 100%; height: 100%; }
.calendar-header { margin-left: 8px; margin-top: 8px; }
button.calendar-header__prev { color: white; background-color: blue; border: solid 1px blue; border-radius: 4px; margin: 2px; font-weight: bold; }
button.calendar-header__next { color: white; background-color: blue; border: solid 1px blue; border-radius: 4px; margin: 2px; margin-top: 10px; font-weight: bold; }
.calendar-header__title { font-size: 18px; }
table.calendar-table {font-size: 16px; width: 95%;height: 60%;text-align: center; margin-top: 2em;}
</style>

外部ファイルのJavascriptを使ってカレンダーを表示させるので、非常にシンプルなコードになりました。

これらのコードは、次に作成するwidget.jsで、iframe内に挿入します。

※現在のディレクトリ構造は以下の通りです。

widget/
 └── sample.html
 └── calendar.js

iframe作成用のJSファイルを作成

次に、iframeを生成し、HTML、CSSコードを挿入するJavascriptファイルを作成していきます。

widgetディレクトリ内にwidget.jsファイルを作成してください。

下記の通りにコードを記述していきます。

(function(){

'use strict';

  // HTML bodyタグの要素を取得して代入
  var body = document.body;
  // iframeを生成し、フレームのサイズやスタイルなどを設定
  var iframe = document.createElement('iframe');
  iframe.scrolling = 'no';
  iframe.marginWidth = 0;
  iframe.marginHeight = 0;
  iframe.width = '300px';
  iframe.height = '300px';
  iframe.style = 'border: solid 2px #222; border-radius: 8px; background-color: white; position: fixed; right: 30px; bottom: 30px;';
  iframe.id = 'calendar-widget';

  // bodyの最後の要素にiframeを挿入
  body.appendChild(iframe);

上記のコードで、カレンダーを表示させるウィジェット(iframe)を生成することができました。

次のステップで、このウィジェット(iframe)にHTML、CSSコードを挿入していきます。

iframeにHTML、CSSを挿入

// ‥続き
// 1.で作成したHTMLコードをwidget変数に代入
  var widget = '<div id="calendar"></div>';
// 1.で作成したCSSコードをwidget変数に追加 
  widget += (function() {/*
      <style>* {font: 1.4 Helvetica, arial, nimbussansl, liberationsans, freesans, clean, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";}
      #calendar { max-width: 300px; width: 100%; height: 100%; }
      .calendar-header { margin-left: 8px; margin-top: 8px; }
      button.calendar-header__prev { color: white; background-color: blue; border: solid 1px blue; border-radius: 4px; margin: 2px; font-weight: bold; }
      button.calendar-header__next { color: white; background-color: blue; border: solid 1px blue; border-radius: 4px; margin: 2px; margin-top: 10px; font-weight: bold; }
      .calendar-header__title { font-size: 18px; }
      table.calendar-table {font-size: 16px; width: 95%;height: 60%;text-align: center; margin-top: 2em;}
    */}).toString().replace(/(\n)/g, '').split('/*')[1].split('*/')[0];

  // calendar.jsを読み込むための<script>タグを生成 
  var script = document.createElement('script');
  script.type = 'text/javascript';
  script.src = 'http://localhost:8080/calendar.js';

  // iframeにウィジェットの内容を挿入
  var doc = iframe.contentWindow.document;
  // 生成したscriptタグを挿入する
  doc.body.appendChild(script);
  doc.open();
  doc.write(widget);
  doc.close();
})();

※現在のディレクトリ構造は以下の通りです。

widget/
 ├── sample.html
 ├── calendar.js
 └── widget.js

テスト用にindex.htmlを作成

ウィジェットの実装先としてのindex.htmlを作成します。

<!DOCTYPE html>
<html>
  <head>
    <title>ウィジェットのテスト</title>
  </head>
  <body>
    <div class="main">
      <h1>yuap.jp</h1>
      <hr>
      <h2>PORTFOLIO</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam congue ipsum justo, id tempus ligula.</p>
      <div class="row">
        <div class="column">
          <div class="content">
            <img src="https://images.pexels.com/photos/417173/pexels-photo-417173.jpeg?auto=compress&cs=tinysrgb&h=350m" alt="Mountains" style="width:100%">
          </div>
        </div>
      </div>
    </div>
  </body>
</html>

※現在のディレクトリ構造は以下の通りです。

widget/
 ├── sample.html
 ├── calendar.js
 ├── widget.js
 └── index.html

scriptタグを記述して完了

最後に、index.htmlの</body>タグの手前にscriptタグを記載してサーバー上のwidget.jsファイルにアクセスして完了です。

※ドメインやポート番号は各自のサーバー環境によります
<script src="http://localhost:8080/widget.js"></script>

index.htmlを開いてみましょう。

カレンダーウィジェットが表示されていますね!

試しに、先のscriptタグ一行を外してからindex.htmlにアクセスしてみましょう。

カレンダーが消えました。コード一行でWebサイトに埋め込むウィジェットが完成しました。

まとめ

今回の実装では、外部からJavascriptファイル(calendar.js)を読み込んでいるので、パフォーマンス上あまり良くありません。

実際にサービスとして実行するときは、webpackなどを使いJavascriptを一つのファイルに圧縮したりする必要があります。

加えて、先述したSEOの観点から、大量のリンクを含むウィジェットなどを作るのはあまり良くなさそうです。(ウィジェットに大量のリンクを詰め込むような例はパッと浮かびませんが)

最後までお読みいただきありがとうございました。ツイッターをやっているので、フォローいただければ幸いです。

主に技術関連のことや気になったニュースなどについてつぶやいています。

PROFILE

はじめまして、大阪のWeb制作会社Yuapです。「Yuap(ユアプ)」とは英語で「あなたのプランナー」という、Your Plannerの頭文字をとった社名です。 ホームページ制作|Webシステム開発|Webコンサルティングなどの業務を通じて、みなさまの事業の成長に貢献できるようなプランナーになれるよう、日々チャレンジしております。

※お問い合わせ・お見積りは無料です。 IT|ホームページ|Webシステムのことならなんでもお気軽にご相談ください。お問い合わせはこちらから。