別ドメインのiframeの親のURLを取得する方法

概要

ことなるドメインのiframeを使用した時に、子供のiframeから親のurlを取得する方法です。

そもそも、こんな事をしないといけない時点で、設計ミスなような気がしますが、

今回のケースでは、

iframeでフォームを用意して、親がそれを読み込んでいます。
親は複数ページで同じiframeのフォームを読み込んでいるので、どのページのフォームかを識別する為に、
親のURLを取得したくなってしまったので、その時のメモになります。

結論

結論からすると

document.referrer

を使用するです。

サンプルコード

参考までに、iframe側のフォームのコードになります。

<form id="xxx-form">
    <input id="page_url" name="page_url" type="hidden" value="">
    <div class="form-group">
      <label class="control-label" for="name">name</label>
      <div class="">
        <input class="form-control" id="name" name="name" type="text" value="">
      </div>
    </div>
    <div class="form-group">
      <div class="">
        <input class="form-control btn btn-default" id="submitBtn" name="commit" type="submit" value="送信">
      </div>
    </div>
  </form>


<script>
 $(document).ready(function(){
        $('input#page_url').val(document.referrer);
    });
</script>

ページ読みこみ時に、page_urlのhiddenフィールドに親のurlを設定しています。

まとめ

そもそも、こんなことをしないですむように設計しましよう。

• Skypeの背景色
  • 調べ方

Skypeの背景色

スカイプのあの水色の背景色のカラーコードを知りたくって調べました。
ちょっと調べたけど、検索では見あたらなかったので、、、

で、答えは。

#00AFF0

です。

調べ方

webのあるサイトで使っている色を調べる時に
chromeのエクステンションでColorZillaというモノを使いました。

クローム Webストア - ColorZilla

使い方は簡単で、起動して、色を調べたい場所にマウスを当てれば、カラーコードが表示されます。

ダミー画像を生成する方法

• Placehold.jpを使ってダミー画像を生成する方法
  • ダミー画像生成サービス
  • 使用方法
    • 基本の書き方と使用例
    • テキストの変更
    • 色の変更
    • 画像種別の変更
  • まとめ

Placehold.jpを使ってダミー画像を生成する方法

htmlでモックページを作成中にとりあえずの画像を入れたい時に、ダミーの画像を作りたい時があると思います。
そんな時の為に、下記に紹介するダミー画像生成のサービスがとても便利です。

ダミー画像生成サービス

ダミー画像生成のサービスの有名どころとして、以下の２つがあります。

• Placehold.jp
• Placehold.it

ほぼほぼ、同じ昨日を提供してくれていて、大きな違いは日本語か英語かの違いぐらいです。
多少なりと使い方に違いはあるものの、日本人なので、Placehold.jpを使っています。
今回の説明も、Placehold.jpを対象としています。

使用方法

サイトにも書いてあるので、簡単な説明にとどめます。

基本の書き方と使用例

書き方

http://placehold.jp/幅x高さ.png

例

http://placehold.jp/400x300.png

とすると。以下のように400x300pxのダミー画像を作ってくれます。

後は、そのまま

imgタグに埋込んでしまっても大丈夫です。

 <img src="http://placehold.jp/400x300.png", alt='dumy'>

テキストの変更

画像に表示される文字を変更したい場合は、
textパラメータを使用します。

書き方

http://placehold.jp/幅x高さ.png?text=テキスト

例

http://placehold.jp/400x300.png?text=dumy+400x300

とすると。以下のようになります。

色の変更

色の変更の変更は、パスを区切る事で変更できます。
パスの指定方法は以下の通りです。

書き方

http://placehold.jp/背景色/文字色/400x300.png
http://placehold.jp/文字色/400x300.png

例

http://placehold.jp/ff00ff/00ff00/400x300.png
http://placehold.jp/ff0000/400x300.png

それぞれ以下のようになります。

画像種別の変更

上記のサンプルでは、すべてpng を指定していますが、
画像種類は、以下の指定が可能です。

• png
• jpg

書き方

http://placehold.jp/400x300.拡張子

例

http://placehold.jp/400x300.png
http://placehold.jp/400x300.jpg

とすると。以下のようになります。
違いは感じずらいと思いますが。

png

jpg

まとめ

あとは、上記の使い方の組み合わせになります。
サイト作成時にバナー画像等がもらえない時などにとりあえず入れておく時に最高に便利です。

li要素内のaタグのクリック範囲を広げる方法

li要素をつかってメニューを作る時に、
li要素内全てはリンク可能なクリック範囲にしたい場合がちょいちょいあります。

そんな時は、下記のように対処します。

htmlコード

<ul>
  <li><a href='#'>aaaa</a>
  <li><a href='#'>bbbb</a>
  <li><a href='#'>cccc</a>
</ul>

cssコード

ul li a {
 display: block;
}
ul li a:hover {
 color: #ffffff;
 background-color: #000000;
}

li要素の「・」を削除する方法

メニューの項目等で li タグを使った時に、何もしないと「・」が表示されます。
その「・」をCSSで削除するするには、以下のように行います。

li {
  list-style-type: none;
}

Railsでファビコンを設定する

よくブラウザのアドレスバーの横やブックマークした時に表示される画像を作って登録しましょうという話です。
主な手順としては、
1. ファビコンの作成
2. ファビコンの登録
です。
それぞれ、下記に説明していきます。

ファビコンの作成

今回ファビコン用の元画像としてこれを使います。

そして、この画像をファビコン用に変換する必要があるので、
下記のサイトでファビコン用の画像に変換してもらいます。
http://favicon.qfor.info/c/
使い方は、画像を選択して、アイコン作成ボタンをクリックすればすぐに作成されます。

正方形ではないので、こんな感じで、ちょん切られて作成されます。

ファビコンの登録

今回は、Railsでの登録なので favicon_link_tagメソッド を使います。
/layouts/application.html.erbに下記を追記します。

<%= favicon_link_tag %>

この設定を行った場合、/favicon.ico を見にいってくれるので。
作成したアイコンのファイル名を favicon.icoにしてpublicフォルダ配下に配置すれば完成です。

RailsでHashからcheckboxを生成する方法

RailsでHashからcheckboxを生成する方法です。
複数チェックボックスに対応することを想定しています。

<%
sex = {
  unisex: 0,
  men: 1,
  women: 2
}
%>
<div class="form-group">
  <%= f.label :sex, '性別' %>
  <% sex.each do |key, value| %>
    <div class="checkbox">
      <%= f.check_box :sex, {checked: false, multiple: true}, value, nil %><%= key %>
    </div>
  <% end %>
</div>

とすると、下記のようなcheckboxが生成されます。

<div class="form-group">
<label for="sex">性別</label>
<div class="checkbox">
  <input name="feature[sex][]" type="checkbox" value="0">unisex
</div>
<div class="checkbox">
  <input name="feature[sex][]" type="checkbox" value="1">men
</div>
<div class="checkbox">
  <input name="feature[sex][]" type="checkbox" value="2">women
</div>
</div>

小さなCSSのインライン化で読み込み時間を短縮する

CSSのインライン化

小さなCSSに限っての話になりますが、外部ファイル化せずに、そのままHTML内に記述した方が、読み込み時間を短縮できます。

変更前

test.html

<html>
  <head>
   <link href="/css/home.css" media="all" rel="stylesheet" type="text/css">
  </head>
  ....

/css/home.css

p {
  font-size: 20px;   
}

変更後

test.html

<html>
  <head>
    <style type="text/css">
        .p {
          font-size: 20px;   
        }  
    </style>
  </head>
  ....

---

CSSのサイズと可読性にも影響してくるので一概にメリットだけとは思いませんが、とことんスピードを追求したい人は是非お試しください。

画像をロスレス圧縮する方法

googleのPageSpeedで分析をかけたら、画像をロスレス圧縮するように言われたので、その対応方法です。

PNG画像

PNGの圧縮はtinypng (https://tinypng.com/)

JPEG画像

jpegの圧縮はmedia4x (http://media4x.com/)
いずれのサイトも、D&Dで画像を圧縮した画像をダウンロードできます。

結果

PNGで試したところ、以下のようにサイズが小さくなりました。

2.7KB => 804B
1.1KB => 159B

コツコツやっていけば、相当量のサイズ削減できるかもしれないです。

Bootstrapのテーマサイト Black Tieがかっこいい

Bootstrapのテーマを探している方は、是非こちらのサイトもご覧ください。

Black Tie というサイトです。
有料・無料のテーマがありますが、
無料のテーマでもシンプルながらかっこいいです。
テーマを使わなくても、デザインの参考にもなると思います。

RailsにWebアイコンフォント Font Awesomeを導入する方法

Webアイコンフォント Font Awesomeの導入方法です。
フォントのアイコンなので、簡単に使えて便利でしかも、かっこ良くなります。
今回は、GitHub - bokmann/font-awesome-railsを使って、導入します。

インストール

gemの追加

Gemfileに下記を追加して、bundle install します。
Gemfile

# font-awesome
# https://github.com/bokmann/font-awesome-rails
gem "font-awesome-rails"

cssの読み込み

application.css

/*
 *= require font-awesome
 */

以上で完了です。簡単です。

使い方

こんな感じです

Link <i class="fa fa-external-link"></i>

あとの使い方は、font-awesomeと変わらないので、公式の使い方 を参照して頂ければと思います。