mbd-cover
Releases

真ん中バースデーWebサイトリニューアルしました!

こんにちは!新人森田です。
街で新入生や新社会人な方々を見かけたり、新年度や新学期が始まったりと、新しいことづくめの季節になりましたね。 この空気だけで結構ワクワクしちゃうから春って好きです。
ではフレッシュな感じに今回もはりきって告知します!

なんと! 真ん中バースデーのWebサイトをリニューアルしましたー!

http://www.mannaka-birthday.com/

どのへんが変わったのかというと、

1、ロゴ周辺をリデザイン

0410-1

以前はロゴの下にキャッチフレーズやデモ画面の紹介等を置いていたんですが、ちょっと散漫な印象が。。
あとは、新機能の実装するためのスペース確保をするために周辺要素をひとまとめにしてみました。

まずロゴとデモ機を合わせました。 App Storeのボタンもこのどこかに配置するとのことだったので、リボンをあしらって目立たせ&まとまり感を演出。左側に空いたスペースには無料ダウンロードのメッセージを入れようと試行錯誤していたら、バッジ形式がよさげでした。フォントに他とは違うやわらかい明朝体を使って、ペタッと貼ったようなちょっと変わった質感を出しました。明朝体は単なる思いつきだったけど気に入ってます。 色はリボンと合わせて全体のトーンを整えつつ、これならキャッチコピーは上かな!という流れで完成!

情報が一カ所にまとまったことで、見てほしいポイントが絞られる効果もあったんじゃないでしょうか。
で、この下に空いたスペースに何を置いたのかというと。

2、おためし計算機能実装

0410-2

はいっ!こちらです!

web上で真ん中バースデーをおためし体験できます

名前は入れなくても調べられるので、是非使ってみて下さいね。
ただし、おためしは1日1回までなんですすいません。
もっと調べてみたい時はApp storeからアプリをダウンロードしていただけると嬉しいです!

真ん中バースデー on the App store

単に説明だけだったWebページでしたが、内容が充実してきました。
前に見ていただいた方もよろしければ是非おためししていってみてください。

http://www.mannaka-birthday.com/

次回アップデート予告!

ただいまハレノヒでは現在進行形で真ん中バースデーアプリのアップデート作業を遂行中です。
プログラムの方は師匠がすでにバッチリ作り上げてくださっております。
私の方の素材準備が間に合うかどうかのギリギリなところですが、間に合わせてみせる…!

iPhoneだけどFacebookアカウント持っていなくて真ん中バースデーを調べられなかったという方!
お待たせしました!

次のアップデートでは、Facebookアカウントなしでもアカウント作成出来るように仕様変更いたします。

今までだいぶユーザーが限られてしまって申し訳なかったのですが、これでもう少し広げられるんじゃないかと思います。
また、Facebookアカウントなしでアカウント作成した場合は友だちが0人の状態からのスタートとなります。 そうなっても寂しくないように、もう1つのアップデートをご用意しておりますのでどうぞお楽しみに!!

今回リニューアルした真ん中バースデーwebサイトでおためししたい方は、
http://www.mannaka-birthday.com/

真ん中バースデーアプリをダウンロードしたい方は、
真ん中バースデー on the App store

どうぞよろしくお願いします!!

標準
ruby-on-rails
Development

[Rails] has_many through な関連をチェックボックスで操作するときに苦労した話

WordPressのカテゴリー選択UIみたいのをつくりたい

Railsで多対多の関係を定義する方法として has_and_belongs_to_many ではなく has_many through を使うようになって久しいですが、accepts_nested_attributes_forfields_forを使って関連データを親モデルのフォームから操作するのは未だに慣れません。

ググって調べたところによると、RailsCastsで紹介されている方法が紹介されている方法が一般的なんですかね。

#196 Nested Model Form (revised)

Github ryanb/nested_form

この方法だとテキストフィールドをつけたり外したりするのが便利なんだけど、既に用意されているリストから選ぶUIの場合、つまりWordPressのカテゴリー選択みたいなのを作るのはキツイのかなと。

スクリーンショット 2014-04-08 9.40.56
↑こんなやつ

[問題]fields_forは関連データを持っていないとブロックを実行しない

そもそも fields_for はオブジェクトが関連データを持っていないとフォームを作成してくれませんよね?

このようなモデルの関係があった場合に

class Article < ActiveRecord::Base
  has_many :categorizations
  has_many :categories, through: :categorizations

  accepts_nested_attributes_for :categorizations, allow_destroy: true
end

class Categorization < ActiveRecord::Base
  belongs_to :article
  belongs_to :category
end

class Category < ActiveRecord::Base
  has_many :categorizations
  has_many :articles, through: :categorizations
end

これだけじゃ fields_for の中は実行されず…

- @article = Article.new

= form_for @article do |f|
  = f.fields_for :categorizations do |cf|
    = cf.collection_select :category_id, Category.all, :id, :name

@article.categorizations.length == 0 だからブロックが実行されないんですよね。
そこで nested_form というgemの出番で、f.link_to_addとかcf.link_to_removeというヘルパーが追加されるので超便利。というのはわかるんだけどこのUIじゃないんですよ作りたいのは。

name属性手書きとか、JavaScriptで対応するの嫌なんです

上記の方法でだめなら fields_for 捨ててinput要素手書きしますか?

- Category.all.each do |cat|
  %label
    %input{ type: 'checkbox', name: 'article[categorizations_attributes][][category_id]', value: cat.id }
    = cat.name

自分で書いててそんなに悪くないかな…とちょっと思ってしまったんですが、やっぱりこんなのダメだと思う。てゆうかこれだと一度つくった関連消せないしね。

となるとチェックボックス外した時にJSで _destroy キーに true をセットする hidden 要素を生成するのか・・・!
いやいやこれも無いでしょ。処理があちこちに散らばるからね。viewをパッと見ただけじゃなんで動いてるのかわからないよ。

そうだ、Helper作ってやろう

となるとどうすりゃいいんだ!あーーー!とか思ってた時にこんな記事を見つけました。

Complex Rails Forms with Nested Attributes

全部読んだわけじゃないんですが、参考にしたのはControllerにもViewにも置きたくない複雑な処理をHelperに書いているところ。なんだ普通のコトじゃないかと思うかもしれませんが、いや僕もこれ書いてて普通だなって思いましたが見つけた時は結構目からウロコだったんですよね。

なので僕のViewコードはこうなりました

= form_for setup_categorizations(@article) do |f|
  %ul
    = f.fields_for :categorizations do |cf|
      %li
        %label
          = cf.hidden_field :id
          = cf.hidden_field :category_id
          = cf.check_box :apply, { checked: cf.object.persisted? }
          = cf.object.category.name

setup_categorizations でArticleモデルを渡して既に関連付けられていないcategoryだけをbuildしてセットしています

module ArticleFormHelper
  def setup_categorizations(article)
    Category.all.each do |cat|
      unless article.categorizations.select{ |c| c.category_id == cat.id }.any?
        article.categorizations.build({ category_id: cat.id })
      end
    end
    article
  end
end

categorizations_attributes として渡すパラメータに apply というキーの真偽値を仕込んであるのでこれを元に以下の処理をController側で行います

  1. applyキーが0でpersistedなデータなら_destroyフラグを立てる
  2. applyキーが1ならcategory_id付きで残しておく

この処理をRails4ならstrong parameter使いつつこんな感じにしておいて

class ArticlesController < ApplicationController
  include ArticleFormHelper

  def create
    @article = Article.new(article_params)
    ....
  end

  private
    def article_params
      _params = params.require(:article).permit(:title, :body, categorizations_attributes: [:id, :category_id, :apply])
      setup_categorizations_attributes(_params)
    end
end

先ほどのArticleFormHelperにsetup_categorizations_attributesメソッドを追加します

module ArticleFormHelper
  ....

  def setup_categorizations_attributes(params)
    # キーが数字の文字列のhashになっていたため配列にする "0" => {id: 1}
    attrs = params[:categorizations_attributes].dup.map{ |k, v| v }
    params[:categorizations_attributes] = attrs.inject([]) { |res, attr|
      if attr[:apply].to_i == 0
        res.push({ id: attr[:id], _destroy: 1 }) if attr[:id].persent?
      else
        res.push({ id: attr[:id], category_id: attr[:category_id] })
      end
      res
    }
    params
  end

自分的にはこれでスッキリしたんですが、もっといい方法あったら是非教えて欲しいです。
あとモデルの命名どうなの?とかもあったらコメントしてもらえると嬉しいです!

標準
title
Design

Javascript修行

こんにちは!新人森田です。
エイプリルフールというイベントもありつつ、今日からいよいよ新年度ですね。
今年度はがっつり活躍するのが私の目標です。
その為にも修行あるのみ!

コーディングの修行をいくつかやったところで、Javascript(以下js)の勉強を再開しました。
というのも、流行っている内に一度はパララックス作ってみたいんです。
いまだに私のjsコードは師匠からのアドバイス9割で出来ているので、少なくとも今の自分のhtmlやcssの知識くらいに、試行錯誤しながら作っていけるレベルにはなりたいところ。

師匠に色々教わった中でも、今回は基礎中の基礎である“jsを書く時の注意点”をまとめてみます。
これを絶対守らなければだめだという訳ではなく、こういったことに気をつけると見やすいコードになるよという目印ですね。
ブログが練習ノートみたいになってますすいません。

Javascriptを書く時の注意点

コーテーション

0401_01

htmlでは<div class=“”>のようにダブルコーテーションを使うのが一般的ですが、たとえばRubyではダブルコーテーションには特別な意味があったりします。様々な言語に共通して使えるという面もあり、特別な理由がない限りはシングルコーテーションを使うと無難そうです。
ただし文字列の中にコーテーションが使われる場合はダブルコーテーションで囲います。例:“I’m …”

オブジェクト

0401_03_03

{}で囲われるオブジェクトは、中身が複雑化しがちなため括弧の内側にスペースをあけて見やすくします。
また、オブジェクト内に複数の要素が入る場合はカンマで区切ったあとにスペースをあけて次を記述します。

配列

0401_05

一方、[]で囲われる配列にはスペースを使わずに記述します。
複数の要素を書く場合はオブジェクトと同じです。

引数

ここではif文の引数という形で見てみます。
関数(function)の時も同じです。

0401_07

ifと()の間にはスペースをあけて、()と{}の間は続けて書くことが多いです。
引数、つまり()内はスペースをあけません

0401_09_09

ifの後にelse ifを書く場合、if(){…}に続いていることを明確にするため}の隣にスペースをあけて書き始めます。

また、条件定義する時に同じ項目を使う場合は左項にまとめたりすると見やすいです。
≦≧はそれぞれ“<=”、“>=”と書きます。

キャメルケースとスネークケース

0401_11

関数定義に使う名前はキャメルケース(上の行)、それ以外の定義ではアンダーバーでつなげるスネークケース(下の行)を使います。

0401_15

また、戻り値が真偽値の時は“is~”という形式でキャメルケースを使って名前を付けます。

計算式

0401_13

計算式を記述する場合は、数字と記号の間にスペースをあけて書きます。
このとき記号は、足す“+”、引く“-”、掛ける“*”、割る“/”を使います。
通常の数式と同じで掛け算割り算が優先して行われるので、足してから掛けたい場合は()でくくります。

まとめ

細かい部分ではありますが、細かい部分が疎かになっているとコードが膨大になった時に散々な目にあうかも知れません。
私が高校大学でやってきた弓道でも、どんなに的に当たっても型が疎かではいけませんでした。
出来る人っていうのはそういう部分からしっかりしてるから結果的に出来てるんじゃないかなと思ったり。

あとjsが思った以上に計算地獄で、もともとない数学の頭をフル稼働してしんどいです。
でも書いたものが稼働してるのを見るとそんなの吹っ飛んじゃうんですけどね!
早くコードがすっと頭に入ってくるようになりたいです。押忍!

標準
title-coding
Design

コーディング修行 クラス名編

こんにちは!新人森田です。
何気にマラソン大会を間近に控えた先週末、はじめて皇居ランしました。
走る前は諦める気満々でしたが、だんだん楽しくなってきて約5km完走できました!
恥ずかしながら人生初の快挙です。

筋肉痛がおさまったらまた走ろうと乗り気でいたら、日曜日に微熱とだるさに襲われるという重傷っぷり。
風邪引いたのかと思いました。
日頃の運動不足がたたりまくっています。。

なんとか良くなった今回は、サイトコピーの番外編な感じでクラス名の扱いについてまとめてみます。

クラス名の扱い

BEMの命名規則

最近取り組んでいるのは、BEMの命名規則を取り入れたやり方です。
師匠はCSSの命名規則をちゃんとやるためにBEMはいい選択だと思うそうです。

BEMとは。
アメリカのある企業でエンジニアと非エンジニア社員がhtml内の要素を正確に把握する為に作られたもので、お互いの意思疎通・情報共有を促進するためにお互いが歩み寄りながら出来たのだとか。
また、後から参入したメンバーにもすぐ理解しやすく、自分で読み返しても分かりやすいという利点もあります。
バリバリのエンジニアさんからすると美しくないようですが、上記のような利点はとても現実的と言えそうです。

BEMという命名規則とSass 3.3の新しい記法
こちらに分かりやすく且つ実践的にまとめてあります。

BEM
こちらが本家。英文ですが概要がつかめると思います。

実践してみる

ルールが分かったところで、前回作ったインデックスページを例にして見てみましょう。
内容を省略して大枠の部分のクラスを取り出すとこんな感じです。

0330-2

hamlという書き方で作ったので<div>などが省略されてます。
インデントで入れ子状態を表していて、閉じタグ不要なのが楽々です。

一番上の.tosakenで囲っているのは、他ページとの名前のバッティングを回避するためです。
以下の部分は実際の表示と照らし合わせて見ると分かりやすいかもしれません。

0330-1b

.sectionで行を分けて、.section__innerで内側の要素を囲っています。
ヘッダー部は.section__inner––header(innerがheaderの状態)と書いて差別化してあります。
コンテンツ部はアイコンを.section__label、内容を.section__contentでまとめて、この枠組みを繰り返しています。

BEMで正確に追おうとすると、例えばロゴは.section__inner––header__logoとなるかと思いますが、大事なのは正確さではなくて分かりやすさです。
ロゴといえばこのページではタイトルロゴしかあり得ないので独立した.logoになっています。
クラス名とスタイルが対応していれば内容はどうであれデザインには反映されるわけで、正確すぎるのも自己満足の極みというか、それを言っちゃうと元も子もないんですが。
要するに誰が見ても分かりやすく書こう!という意識が大事ということです。

悪い例

正解例を挙げたあとで私が最初に書いていたコードを再現してみます。

0330-3

全体の構成的には全く同じで、これにスタイルを当てれば実際の表示も変わりません。
BEMの命名規則にも従った書き方です。

ではなにが良くないのかというと、クラス名が内容に引っ張られすぎている点です。

.header(headerタグでも可)でコンテンツと差別化。
.companyというクラスは、その中身が会社情報であったことから付けました。

それぞれの要素の役割をもっと俯瞰して見てみると、区分けするパーツなのに.companyはちょっとおかしい。
icon、addressといった部分も直接的すぎます。
枠組みはあくまで枠組みとしてクラス名を付けることで、どんなサイトにも適応できるコーディングが出来上がるんですね。

0330-4b

ビフォーアフターはこんな感じです。
スッキリまとまりました!

まとめ

サイトコピーの作業の間に師匠からクラス名のご指摘をがっつり頂いたので、復習の意味も兼ねてまとめてみました。
BEMで追う範囲や汎用的な名付け方を見極めるにはまだ修行が足りないようです。
あと“__”と“––”の使い分けもまだまだ甘かったりします。
この辺はたくさん読んだり書いたり数をこなして慣れていくに限るんじゃないかと思います。
空いた時間でもっとガツガツ書かねばー。

というわけで今回はこの辺で終わります。押忍!

標準
title-coding
Design

サイトコピーしてコーディング修行 その2

こんにちは!新人森田です。
そろそろ桜も咲いてきましたね。お花見したいです。
今年はどのお花見スポットに行こうかなあ。

さて、それでは前回に引き続きサイトコピーしてコーディングの修行をしていきたいと思います。

Tosakenのインデックスページをコピーする

今回もギャラリーサイトから気になるサイトを見つけてきました。
株式会社トサケンのオフィシャルサイトです。
内容はシンプルですが、縦横100%に引かれたこのラインをどうやって表現するかが鍵になりそうです。

0328-1b

構成を考える

はじめ私は縦100%のborderをもった空divをposition: absoluteで置いてから中を作り込んでいこうと考えました。
でもpositionで場所指定すると、何層にも重なった要素のレイヤーの一番上にきてしまいます。
見た目だけ同じになっても、リンクが機能しなかったりとサイトとしては成立しませんでした。

最終的にこんな風に整理してみました。

0328-2b

まずborder-bottomをもった横100%のブロックで要素を横に分割。
その中に横幅が等しいブロックを入れ子にしてborder-left,rightをつけて線がつながっているように見せる。
内容は更にその中に記述していく。
という感じです。

ホバーエフェクトをコピーする

一枚目のスクリーンショットをよく見ると、“NEWS”の上に黒丸が表示されています。
これはホバー時に表示されて、普段は非表示になってます。

森田:
displayで表示切り替えだと要素の高さ分ずれたりするだろうし…
htmlの方に●って書いておいてfont-colorを白→黒にすればいっか!

師匠:
それだと本来必要ないものがhtml上に記述されることになるよね。
こういう時は疑似要素を使うといいよ。

疑似要素とは。
私がよく見るのは“:before”、“:after”あたりです。
float解除とかアイコンフォント用に使っていますが実はよく分からずに使ってました。
contentと併せてコード上に実体はないけど仮の要素を生成する仕組みのようです。
どうやらこれを極めると表現の幅がグッと広がるらしいです。面白そう!

0328-3

その第一歩として:beforeを使って作ってみました。
10pxの円をpositionで位置指定しています。
文字のクリッカブル領域内だと近い気がして、ちょっとはみ出してます。
これが気になる人は文字のpaddingを調整すればボックスに収まると思います。

ちなみに:hoverは疑似クラスといって、要素のスタイル指定を表示するための条件定義のようなもののようです。
これも今まで何気なく使ってきてました。そういうことだったのか。

文字列をタテ幅の中央に揃える

ヨコ幅の中央だったらtext-align: center;もしくはmargin: 0 auto;でそんなに苦労なく揃えられます。
でもそれがタテになるとヨコほど一筋縄じゃなかったりします。
タテの高さを揃える為に使うスタイルはvertical-alignなのですが、これが子要素に効かないからです。

vertical-alignを使って一発で中央揃えしたい場合は“display: table”の出番です。
ブロックをテーブル扱いにすると楽に解決できちゃうんです。

0328-4b

このように親要素をdisplay:table;にして、子要素をdisplay:table-cell;にすれば楽でした。
また、table-cellのブロックを分けることで3行の文字列に対してアイコンが中央に来てくれるという嬉しいおまけ付き。
なるほどこういうやり方もあるんですね。

アイコンはFontawesomeから同じ意味合いのもので代用してあります。

displayスタイルの違い?

これで完成!と思って全体のチェックをしていると、

0328-5b

あれ。borderが1pxずれてる…。

最初はborderの位置を%で指定したからウインドウ幅で誤差が生じているのかと思いました。
(実際ウインドウ幅によって合ったり合わなかったりしてました)
でもどのクラスも同じスタイルを継承してあるので、ずれるはずがありません。

違いがあるとすれば、上のdivはdisplay:block;、下のdivはdisplay:tableだということです。
結果的に全てをdisplay:tableにすることで解決しましたが、
もしかするとそれぞれの座標の出し方がちょっと違うのかもしれません。

ここを直して、フォントの調整もして改めて完成です。

一応レスポンシブになってます。
1230pxくらいのウインドウで比べるとちょっと似てる気がします。

まとめ

というわけで、インデックスページをコピーしてみました。
シンプルなサイトではありましたが、タイトルロゴ・メニュー・コンテンツと役割の異なる要素が盛り込まれていて、前回よりボリュームのある内容になったんじゃないかと思います。

大体ひととおり作れるようになったかなとサクッとやるつもりでいたら、初歩的なことをいくつも気付かされました。
クラス名の付け方も根本的に見直したりして、やっぱりまだ足りないことだらけです。
クラスの扱いに関して気付いたことなどはまた別でまとめたいと思います。

あとは、当たり前といえばそうなんですが、やっぱりやるのとやらないのとでは全然違います。
出来そうなところから少しずつでもコーディングしてくのがホントに大事だなと思いました。
手をうごかしてこー。おす!

標準
title-coding
Design

サイトコピーしてコーディング修行 その1

こんにちは!新人森田です。
入社してからあっという間に3ヶ月が経ちました。
まだまだ知ることが山積みすぎますが、ここからは更に気合い入れていきます!

そして久しぶりのブログ更新ですすみません。
ネタ探しに行き詰まって違うことしてました。
何をしていたかというと、サイトコピー的なことです。
サイト模写はデザインのスクリーンショットを撮ってPhotoshopでトレースし、間の使い方だったり平面的な勉強が出来ます。
サイトコピーはコーディングで同じようなサイトを作るので、模写の効果+コーディングの腕も上がるんじゃないかという目論見です。

仕事で少しずつコードを触るようになりちょっとしたアイコンなどを画像として切り出して処理していたら、師匠から画像を使わないやり方を教わって目からウロコだったり。
ギャラリーサイトでかっこいいなーと思ったサイトをレスポンシブにしたくなったり。
そんな経緯があって始めてみました。
参考元の作り方を批判したいわけじゃなく、どうやったらより良く作れるかの練習です。
作業する上でのルールもなんとなく決めてみました。

サイトコピーのマイルール

(コード読み解くのめんどくさいから)出来るだけ元のコードは見ない
色とかフォント情報などは参考にしますが、自分でやり方を模索するためです。

(Photoshop立ち上げるのめんどくさいから)出来るだけ画像を使わない
画像を使わないほうが軽いし、修正も楽かもしれない。という言い訳です。使うときは使います。

こんな感じで、ここからはどんな感じで進めたのかをご紹介。

制作準備

制作環境を整える

Bootstrapの回と同様、やっぱり最初は制作環境です。
自分でフォルダ作ってローカルで確認しつつっていう感じでも出来ますが、Compassなどの導入・scss使うにはscout起動必須、などなど結構手間だったりします。というか最初はそうやってました。
が、そんなやり方をしなくてもあるんです。便利ツール。

Middleman

どん!師匠に教えていただいたMiddlemanという静的サイトジェネレータです。
これはRubyをベースに作られているため、まずRuby環境を整える必要があります。
やり方はRubyを始めようで詳しく紹介しています。

最初が少しむずかしくても、Middlemanを導入すればちょっとコマンドを書くだけで至れり尽くせりな環境を作ってくれます。

0327-4

サーバーも立ち上がるみたいだし、練習するにはこの上ありません。

コピーしたいサイトを探す

ギャラリーサイトにも色々あるし、それをまとめたものもググればすぐ出てくるんですが。
あえて挙げるとしたら、このへんがいいかもです。

io3000
どこのまとめサイトでもオススメされてる使い勝手の良いサイトです

muuuuu.org
最近はやりの1ページ完結型の縦長サイトがたくさんあります

これらは国産サイトのギャラリーですが、そのうち海外のデザインも参考にする予定。
おそらく1つはコピーしたいものが見つかったと思うので、早速作業にうつりましょう。

私の作ったものを例に挙げながら作業の様子をお伝えしていきます。

Chowder’sのコンテンツをコピーする

まず1つめに選んだのは、Chowder’sというスープ屋さんのサイトの一部です。
メニューラインナップの下に、本日の名言とおすすめメニューの紹介があります。
このデザインがシンプルなのに可愛くて、すごく気に入ってしまいました。

構成を考える

まずどんな構造かを調べてみます。
コンソールで背景画像を消してみると、要素のひとつひとつがよく見えます。

0327-1

見てみると、見出しがそれぞれ画像だったので、cssだけで作ってみようと思います。

0327-2

まずはこんな風にボックス要素の構成を決めます。

コーディングする

画像の代わりにcssのborderを使うことで周囲の線を処理。
ポストイットに見せかけた黄色いボックスも頑張ればいけそうですが、さすがにそこまでやるとコードがごちゃごちゃしそうなので画像を使います。
Google Fontsを使って見出しのフォントを似せれば完成です。

↑スクロール出来ます
日替わりコンテンツのため、引用したスクリーンショットと内容は違ってます。
スープの画像のところは角丸にしたdivにbox-shadowを使ってそれっぽく。
完全再現とまではいきませんがだいぶ近いはず。

まとめ

今回の例はコンテンツの1部なのであまり複雑なことはしていません。
でもcssだけでもフラットなデザインなら画像なしで結構いけちゃうことが分かりました。
英字ならGoogleFontsで表現の幅もぐっ広がりますね。

というわけでウォーミングアップ編は終了です。
ここから徐々にコピーする範囲をサイト全体に広げていきたいと思います。
次回もお楽しみにー!

標準
iphone
Development

[iOS] ホーム画面に追加したWebアプリのリンクをSafariに飛ばさない方法

今回はiOSの話と言ってもネイティブアプリじゃなくWebアプリの方です。

iOSのSafariに「ホーム画面に追加」というオプションありますよね。
フルスクリーンで見せたかったりするときは使うべしなんですが、困ったことにリンクをタップすると通常のSafariに戻されるんですよね…

まぁフルスクリーンなので戻るボタンとか無いからの配慮なんでしょうけど、ユーザーはinterruptされるし、フルスクリーンで統一できなくなっちゃうし正直うざいです。

対策その1:Ajaxで逃げ切る

対処法の1つとしてページの内容をXHRでとってきて書き換えればページ遷移は起こりませんよね。

$(document).on('click', 'a', function(e) {
  var $a = $(e.target);
  if (!$a.attr('href').match(/^#/)) {
    e.preventDefault();
    $.get($a.attr('href'), function(data) {
      var $body = $('body');
      $body.children().remove();
      $body.append($(data));
    })
  }
});

試してないけど多分こんなかんじでしょうか。
でもこれだとサーバーサイドも合わせなくちゃいけなくてめんどくさいなーとか、ページ遷移したと見せかけてwindowのonloadイベントとか発火されないし $(document).ready() みたいのは動かないですよね。

対策その2(おすすめ):一旦preventDefaultしてからのlocationに突っ込む

でたどり着いたのがこれです。
どうやら一旦preventDefaultしてしまったらページ遷移してもSafariに飛ばされないみたいです。

$(document).on('click', 'a', function(e) {
  var $a = $(e.target);
  if (!$a.attr('href').match(/^#/)) {
    e.preventDefault();
    window.location = $a.attr('href');
  }
});

いい感じに動いてます

標準
ruby-on-rails
Development

[Rails] “\xE5” on US-ASCII で .js.coffee.erb での JSON埋め込み時にエラーした時の対処方法

Railsで開発してて、jsにjsonファイルで定義したデータ埋め込みたくて hoge.js.coffee.erb というファイル作って

data = <%= Rails.root.join('app/assets/javascripts/data.json').read %>

とやろうとしたら

"\xE5" on US-ASCII

だからダメだよみたいなエラー起きた。多分json内に日本語がかいてあるのが原因だと思う。
viewファイルに埋め込めば出来るかもしれないけどあんまりしたくないなぁと思ってググっても出てこない……

悩んだ結果これでいけました

data = <%= JSON.load(Rails.root.join('app/assets/javascripts/data.json').read).to_json %>
標準
title-feature
Design

スタイリッシュ!デザインの参考になるNYのホテルのWebサイト特集

こんにちは!新人森田です。
今日こそは暖かいんじゃないかと思って外に出ると期待を裏切られる毎日です。
むしろ雪が降りました。
最近くしゃみがよく出ますがこれはまだ花粉症ではないと信じてます。

今回はいつもと趣向を変えて、デザインの参考になるWebサイトを特集してみます。
暖かくなったら重いコートを脱いで、お出かけもはかどりますね。
お花見やいちご狩りと日本にも素敵スポットは沢山ありますが、せっかくならNY行っちゃう?!

というわけで特集内容はこちら!
(NY旅行にも役立つかもしれない)デザインの参考になるNYのホテルのWebサイト特集

ではいってみましょう。

堂々たる高級感!

ホテルから連想されるワードとして挙げられるもののひとつに「高級感」があります。
歴史ある一流ホテルにはそれにふさわしい雰囲気作りが必要です。

THE HIGHLINE HOTEL

hotel-1

http://www.thehighlinehotel.com/

これぞ正統派といえそうな佇まいです。
余計な装飾などは加えず、ナビゲーションはモノトーン。
丁寧に撮られた写真と、饒舌すぎないコンパクトにまとめられた情報から上質さを感じます。

THE NOMAD HOTEL

hotel-2

http://www.thenomadhotel.com/

こちらはまずページの黒枠に目がいきます。
フィルム写真を見ているかのような感覚がします。
コンテンツそれぞれにフルサイズの画像が使われているので、その世界観に引き込まれてしまいます。
また、米仏伊独日の言語にローカライズされていてるのも嬉しい。

フォント選びが素敵!

「高級感」といえばかっちりとしたセリフフォントを想像しがちですが、それだけではスタイリッシュとはいえません。
上品かつオシャレに演出されたサイトを見たら旅行したい衝動が一層強まります。

WYTHE HOTEL

hotel-3

http://wythehotel.com/

今回紹介した中で唯一きちんとレスポンシブしていたサイトでした。
トップページを見るとカジュアルめな印象を受けますが、本文にはセリフ体が使われていてあくまで見出しの役割のようです。
メリハリがあって好きなテイストです。
提携している(?)レストランのページもオシャレ。

THOMPSON HOTELS

hotel-4

http://www.thompsonhotels.com/

左上に予約ボックスが固定されていながらも、ページ全面を使ったレイアウトにはスタイリッシュとしか言いようがありません。
予約ボックスの横のナビゲーションが実はパンくずみたいな機能も果たしていてシビれました。
各要素のポジションが%で定義されていたので、ある程度の画面サイズの変化には耐えられそうでした。

REFINERY Hotel

hotel-5

http://www.refineryhotelnewyork.com/

今までのサイトとは違って、ギャラリーサイトみたいな、雑誌を読んでいるみたいなレイアウトです。
黒背景に写真の色が際立っています。
全体の雰囲気に合わせた手書き風フォントがかっこよかったり、でもどこか親しみやすい感じがしたり。

リゾート感あふれてる!

異国への旅はまるで非現実の世界に来たかのようです。
あふれるリゾート感もまた、もうここ行くしかないわって思っちゃう理由のひとつです。

THE Jade Hotel

hotel-6

http://www.thejadenyc.com/

indexページと各コンテンツページの見せ方に差があって分かりやすいです。
随所に使われている花モチーフのパターンが全体の雰囲気を引き立たせてくれています。
差し色が赤だったりと色使いが絶妙。

THE JAMES HOTELS

hotel-7

http://www.jameshotels.com/

見るからに開放感あふれちゃってます。
こういう広々のびのびとした空間の使い方は海外ならではな感じ。
NYのホテルっていうテーマなのにマイアミのビーチに目がいきまくってしまいます。
これはあれですね、旅行業界におけるシズルというか。今すぐ旅立ちたい!

まとめ

いかがだったでしょうか。
コンパクトかつ使いやすいナビゲーション・迷わないUI設計・フルスクリーンでスライドする写真などなどスタイリッシュさ満載で、さすがWeb先進国という感じでした。
何よりやっぱり毎回思うけど海外の写真とか英語はずるいです。
でも日本にも日本の良さがあって、日本という文化圏に合わせた、使いやすくスてタイリッシュなWebサイトってきっとあるはず。
今回紹介したようなWebサイトに刺激とエッセンスを貰いつつ、どうやったらそれが実現出来るのかを日々模索します。押忍!

標準
jquery-title2
Design

jQueryを使ってみよう その1(動く目をつくる)

こんにちは!
昨日会社のヒーターでコートの袖を焦がしそうになった新人森田です。
わたあめみたいなにおいがしました。
暖かくなるのはいつなんでしょうか。

jQueryを使ってWebサイト作りたいなあとずっと思っていたんですが、前回Bootstrapでついに使うことが出来ました。
でも便利すぎたおかげで、ちゃんと使えるようになったわけではありません。
これは勉強するしかないなと思い立ちました。
ら、師匠がJavascript基礎講座を開いてくださいました。

教わりながら簡単なJavascriptを作ってみたので、
今回はその作り方を振り返りながら頭の中を整理してみたいと思います。

データのルール

関数と変数

Javascriptにはそれ自体が動作をもっている関数と、動作をもっていない変数があります。
変数はscssでも使ったことがあるし何となく使い方も分かるような気がします。
関数にはさらに“input = 引数(ヒキスウ)”“output = 戻り値、返り値”というのがあって、引数を与えて出てきた戻り値を色々と処理するわけです。

文系に進んで数学から逃げてきたと思いきや、まさかここで関数と出会うことになるとは。。
というか、そもそもプログラミングが数学っぽいものだったりしますね。
Javascriptを多少なりとも理解することで数学を克服したと思うことにします。

データ型

扱うデータの型は5種類です。
それぞれ記述の仕方によって区別されます。

  • 1  :int,integer,number(整数)
  • ‘…’    :string(文字列)
  • […] :データの順番が保持される配列
  • {…}   :データを格納するオブジェクト
  • 真偽値:true,false

これらのデータ型を使い分けていきます。

jQueryを使ってみる

予備知識がすごくアバウトですが、あとは実際に書きながら覚えていきましょう。
今回はjQueryを使って「マウスを追いかけて動く目」をつくってみます。

最初に顔のベース画像を用意します。
ティムバートン作品を意識してみました。

0305-1

 html,cssを書く

Webページ上にデータがないと動かせないので、htmlとcssを使って簡単なページを作ります。
この時のポイントは、目が動く範囲のdivを作っておいて、その中に黒目の部分を入れるということです。

0305-2

こんな感じです。ついでに口も作っておきました。
目や口はpositionで位置を調整してあります。
円形に可動範囲を限定しようとすると難しい処理が必要とのことで、ちょっと目ん玉飛び出しますがご了承ください。

jQueryを前提としているため、htmlファイルには自分で書くjsファイルの他にjQueryのjsファイルにもリンクが必要です。

jsを書く 1

準備が整ったところでjsファイルをいじりましょう。
今までノータッチだった未知の領域に一歩踏み出しちゃいます。
“main.js”と名付けて作業を始めます。

htmlと同じようにざっくりした部分から詳細設定を書き込んでいきます。

まずは実行タイミングを決めます。
青い文字は自分の覚え書き的なものですが結構主張しちゃっててすみません。

0305-3b

“$()”の()内に引数を入力します。
ここでは引数が“function”=無名関数というもので、“function(){}”の()に仮引数、{}には関数の中身を書き込むという形式になっています。
jsさんなかなか複雑です。

上の段落の記述で.readyと同じようにページ読み込みのタイミングでjsが実行されます。
そのオブジェクトの中に、次にどういう動きをするかを設定します。
また、それが正しく動作しているかを“console.log”を使って確認をします。

下の段落は、
「body内でマウスを動かすとtestという文字列が表示される」
という動作を定義してあります。

0305-4

bodyのwidthとheightが100%なので、body=画面となり、画面内でマウスを動かすと動かした分“test”が表示され続けることになります。

というわけで1つめはクリアです。

jsを書く 2

次はマウス(ポインタ)の位置に応じて目を動かしてみます。

目を動かすということは目のcssを変更するということです。
目のcssがどこにあるかをコンピューターに指示するためには、
目に割り当てたclassをセレクタに入れて、あらかじめjQuery化(jQueryが処理しやすい変数に変換)しておくことで動作がスムーズになります。
なのでページ読み込みと同時に“var”を使って変数定義しておきましょう。
これをしなくても動作はしますが、いちいちコンピューターがclassを探すことになって重くなる要因となります。

また、マウスの位置を取るには“mousemove”というイベントを使用します。
“mousemove”のイベントオブジェクトに格納されている“clientX”“clientY”を使うことでマウスの座標を知ることが出来ます。
そしてイベントオブジェクトには変数の名前を付けます。
“e”などに略されることが多く、今回はそれにならってfunctionの引数に“e”を書き込み、“e.clientX”という風に使います。

0305-5b

では“e.clientX”を使って左右の動きを付けてみます。

画面の中央に配置した顔を基準にしてどこが左でどこが右かというと、次のように考えます。
ウインドウ幅の半分の座標を中心として定義して、その増減で左右を認識させます。
後で上下の動きをつける時にも使うので、ウインドウ幅も最初に変数にしておくといいかも知れません。

“center_x”を定義したら、if文を使って「中心より左ならこう」「中心より右ならこう」と動くための条件を分けます。
ここでは(e.clientX >= center_x)という条件を使っています。
分かりやすく書くと「e.clientX ≧ center_x」つまり「中心より右」ということです。
それ以外を“else”として2つに条件分岐しています。

条件が決まったら、どういう動作をするかを書きます。
if文の中はどういう意味かというと、
変数化しておいた“$leftEye”“$rightEye”のcssを
「マウスが中心より右だったら左から70pxの位置に」
「マウスが中心より左だったら左から0pxの位置に」
変更する、という定義です。

なんでcssの値がこうなるかというと、

0305-6b

目のエリアが100×100px、目の大きさが30×30pxということを考慮して計算した結果の値なのです。

これでx座標(左右)の設定が出来ました。
xをyに変換して同様に書けば上下の設定も完了です。

たとえばマウスを画面の左上に動かしてみると、こんな顔になります。

0305-7

目が飛び出てるとギャグっぽくてこれはこれでありかも。

もし思った通りに動作しなかったら、プログラムエラーが出ていないかを確認してみてください。
アラートさんは常に冷静に何が足りないかを教えてくれます。

jsを書く 3

ここまでで、マウスの位置に応じて目が左上、左下、右上、右下に飛び出るというプログラムが書けました。
せっかくだからマウスが顔の範囲に入ってきたら目を真ん中に表示させてみます。

0305-8

if文の中にもう1つ条件分岐を書き込みます。

“else if”を使って、「e.clientX≧center_xより150px少ない値」&「e.clientX≦center_xより150px多い値」の両方の条件を満たした場合の動きをつくります。
±150pxの理由は、顔のwidthが300pxで、中心線から考えると150pxずつ幅があるからです。
この時にcssを左から35pxに変更することで目が中心に来ます。

上下も同様に、顔のheightが400pxということを踏まえてcenter_yから+200px、-200pxで条件と動きを設定します。

0305-9

これで、上図の青い範囲内にマウスが来た時に目がそれぞれの真ん中の位置にくるようになりました。

まとめ

慣れないjs構文を書くと、
文字列にすべきところにコーテーションがなくてエラー
閉じ括弧忘れてエラー
スペルミスしてエラー
と、初歩的なミスばっかりしてたような気がします。

でも実際動いてくれるのを見ると楽しい!
思い通りに使えるようになったらもっと楽しいんだろうなと思います。

今回作ったJavascriptは下記のリンクで実際に動かせますので動作確認したい方はどうぞ!
上図の青い範囲が重なっている部分(顔の範囲内)にマウスが来た時だけする動きがあったりしちゃうかも?

http://nnnzzz000.github.io/move-eye/

これからはjsももっと読んだり書いたりしていこうと思います!押忍!

標準