web制作の備忘録(仮)

web制作の備忘録。たくさん勉強したいです。

MIT Licenseについて

MIT Licenseという表記、プラグインやライブラリを探していると、よく見かけますし、使っても大丈夫だということはわかっているけどちゃんと理解できているかふと不安になったので備忘録します。 ミットライセンスと読んじゃうのですが、あっているんでしょうか…

MIT Licenseとは

MIT License(エム・アイ・ティー ライセンス)は、マサチューセッツ工科大学を起源とする代表的なソフトウェアライセンスである。X11 LicenseまたはX Licenseと表記されることもある。MIT LicenseはGPLなどとは異なり、コピーレフトではなく、オープンソースであるかないかにかかわらず再利用を認めている。BSDライセンスをベースに作成されたBSDスタイルのライセンスの一つである。MIT Licenseは、数あるライセンスの中で非常に制限の緩いライセンスと言える。


「MIT License」『フリー百科事典 ウィキペディア日本語版』(http://ja.wikipedia.org/)。2018年5月13日23時(日本時間)現在での最新版を取得。

すみません続きは明日

Google Maps Embed API

Google Mapの埋め込み表示を少しカスタマイズしたいけどJavaScriptに自信がない人に優しい「Google Maps Embed API

アクセスページに必ずと言っていい程埋め込んできたGoogle Mapですが、最近になって初めて「Google Maps Embed API」を知りました。

developers.google.com

Google Maps JavaScript API」よりハードルが低くてありがたい

今までマップを埋め込む際は

  1. 単純にピンが一つ落ちたマップを表示させたいときは、マップ画面の共有ボタン→出て来た埋め込みコードをコピペ

  2. 上記の方法では事足りない場合(例えば、複数のピンを落としたい、吹き出しをつけたい、ピンの画像を差し替えたい、ルートを表示したい等のカスタマイズをしたい時)は「Google Maps JavaScript API」を利用して作成したファイルをiframで埋め込み

のどちらかでしか対応してきませんでした。

が!「Google Maps Embed API」は上記の1のような手軽さでほどほどに2のようなカスタマイズができるようで、見つけたときはとても感動しました!JavaScriptを使わず、iframのsrc属性をいじるだけなのがすごく優しいです。易しい

結構前からあるようですね、、、

使い方はこちら

要素の高さを揃えてくれるjquery.tile.js

jquery.tile.jsとは

jquery.tile.js(公式サイト:http://urin.github.io/jquery.tile.js/ )とは要素の高さを揃えてくれるjqueryプラグインです。 シンプルに要素の高さを揃えるだけのプラグインのため、使い方もシンプルでわかりやすく軽量です。いつもお世話になっています。 とてもシンプルなので使い方も公式サイトを見た方が早いと思いますが、メモします。

使い方

使い方1 要素の高さを全て揃える

jquery上記サイトより落としたjquery.tile.jsを読み込み、高さを揃えたい要素に共通のクラス(例.sample)をふり、下記の記述をするだけです。例では、.sampleというクラスをふられた要素は、その中で一番高さのある要素と同じ高さに全て揃います。

 $('.sample').tile();

使い方2 要素を指定した数ごとに並べたいとき

使い方1の.tile();の()にその数を入れるだけで、その数ごとに高さが揃います。

 $('.sample').tile(3);

並べた要素が複数行にわたる場合、全て同じ高さになってしまうより、1行ごとに揃っていた方が見た目が綺麗ですよね。そういうときに上記のように1行の要素数を指定して使います。表に見たてると列の数を入れる感じです。

ありがたいポイント

要素を並べるレイアウトってよく利用しますが、中身がテキストだったり、CMSでコンテンツ量が想定できない場合、高さを固定したくないですよね。なので、なるがままにしていたことが多いのですが、こちらのtile.jsを見つけてからはコンテンツ量に合わせた高さで揃ってくれるため、情報量を損なわずに綺麗な見た目を保ってくれてすごく重宝しています。ありがたい。

fullPage.js使い方まとめ

fullPage.jsとは

fullPage.js(公式サイト:https://alvarotrigo.com/fullPage/)とは、全画面のコンテンツから全画面のコンテンツへスクロールする紙芝居のようなサイトを簡単に実現してくれるjQueryプラグインです。

情報量が多く縦に長くなってしまいがちなサイトを、だれずに見てもらうのに良いのではと試しています。*1

制作中に気がついた点、躓いた点など出て来ると思うのでここに備忘録としてまとめていきたいと思います。

いずれまとめたい事項

  • 実装の仕方
  • スマホ対応がきつい時
  • メリット・デメリット

*1:レスポンシブのそこそこ情報量のあるサイトを作っています