Bootstrapのモーダルダイアログを表示すると、画面の一部が操作不能になる(IE限定)

IE限定で発生する事象ですが、Bootstrapもモーダルダイアログを表示すると、ダイアログを閉じた後に画面の一部が操作出来なくなる現象が発生しました。


現象が発生した環境

縦スクロールが発生するようなページで、下記のようなCSSを定義した状態でモーダルダイアログを表示すると、

  • ダイアログ表示時に、ページの一番上までスクロールする
  • ダイアログを閉じた後に、画面下部のボタン・リンクなどが操作不能となる

といった現象が発生しました。

html {
  height: 100%;
  overflow-y: scroll;
}


上のCSS定義のうち、どちらか一方だけしか定義していない場合は問題なく、両方を定義した場合にのみ発生します。

IE対応として上のようなCSSをコピペすることがあるかと思いますが、注意が必要です。

テンプレートエンジンに Slim を利用した場合の hoge.js.slim の書き方

Ruby on Rails のテンプレートエンジンとして Slim を利用した場合に、hoge.js.slim という Ajaxアクセスに対するレスポンスを描画する方法が分からなかったのでメモ

| $('#hoge').html("#{j(render 'hoge')}");

という書き方で出来た

シネマグラフ

ちょっと前に一部で話題になっていた「シネマグラフ」と呼ばれる
GIFアニメーションを作ってみた。

iPhoneには「Fixel」というシネマグラフを作る便利なアプリがあるようだけど、
Photoshopの使い方を勉強するという意味も含めて、デジカメで撮った動画から
フレームを切り出して作ってみた。

想像以上に面倒だった。。


f:id:shizm:20140210002536g:plain

Railsプロジェクトを作成する時の手順

Railsアプリをゼロから作る時の手順をよく忘れてしまうのでメモ


まず、アプリと同じ名前の空のフォルダを作る

$ mkdir /tmp/app_name


フォルダの中に Gemfile を作成する。

$ cd /tmp/app_name
$ cat << EOF > Gemfile
source "https://rubygems.org"
gem "rails"
EOF
$


railsをインストールする

$ bundle install --path=vendor/bundle


railsプロジェクトを作成する

bundle exec rails new .

実行すると上で作成した Gemfile の上書き確認が表示されるので、ここは上書きする

Instagramで加工した写真を、サイズの大きいまま保存する

iPhoneユーザーには定番の写真編集ソフト「Instagram」ですが、このアプリを使って写真を編集すると、自動的に 640x640 のサイズに縮小されるんですよね。


せっかくiPhoneなら 2448x3264 のサイズで写真が撮れるんだし、せっかくなら大きいサイズの画像も作りたいじゃないですか。
WEBで使うなら 640x640 で十分なんだけどね。。


こんな時にどうするかというと



わざと投稿に失敗させる


これです。


Instagramで写真を加工する際に一時的に「機内モード」などにしておくことでわざと投稿に失敗させます。


こうすると、写真ロールに元のサイズでフィルタだけ適用された画像が保存されます。


初めて機内モードを使った・・・

Railsアプリでログイン画面を分けたい

複数の法人向けのRailsアプリを作ろうと考えた場合、きっと法人情報と社員情報は以下のようなテーブルに保存されるでしょう。

法人マスタ

法人コード 法人名
0001 法人A
0002 法人B


社員マスタ

法人コード 社員コード ログインID 社員名 パスワード
0001 0000001 user1 山田 太郎 xxxxxxxx
0001 0000002 user2 鈴木 一郎 xxxxxxxx
0001 0000003 user3 佐藤 花子 xxxxxxxx
0002 0000001 user1 木下 二郎 xxxxxxxx
0002 0000002 user2 小田 聡子 xxxxxxxx


法人が違えば同じログインIDが使えるのは当然だから

  • 法人コード
  • ログインID

で一意に社員を識別するとしよう。


このアプリに社員としてログイン出来るようにする場合、普通に考えるとログイン処理を行うコントローラ(SessionController)を作成して、ルーティングは

DemoApp::Application.routes.draw do

  root :to => 'session#new'

  controller :session do
    get 'login' => :new
    post 'login' => :create
    delete 'logout' => :destroy
  end
end

とでも定義するでしょう。


こうするとログイン画面(http://localhost:3000/login)で社員は

  • 法人コード(ドロップダウンで選択でもいい)
  • ログインID
  • パスワード

を入力する必要がある


法人コード

法人コード・・・

法人コード!!!


こんなのイヤだ!


どうせなら会社毎に別々のURLにして

 法人A用のログインページ
  http://localhost:3000/company_a/

 法人B用のログインページ
  http://localhost:3000/company_b/

ってしたい


本当なら別々のアプリとして稼働させた方が良いんじゃないの?と思うんだけど、ルーティングを

DemoApp::Application.routes.draw do

  match "/company_a", :controler => :session, :action => :new, :company_code => "0001"
  match "/company_b", :controler => :session, :action => :new, :company_code => "0002"

  controller :session do
    get 'login' => :new
    post 'login' => :create
    delete 'logout' => :destroy
  end
end

とでもしておけばURLは別になるし、法人コードはパラメータで渡ってくるから大丈夫。。


本当にこんな方法でいいのか?

いまいち納得できない

IFTTTを使ってInstagramで撮った写真をFlickrにバックアップする

日々増えていくiPhoneの中の写真たち。こいつらをどうやって管理していくか?というのは自分の中でずっと前から抱えていた問題でした。

母艦Mac? iCoud? Dropbox? Picasa? Flickr?

いずれにしても面倒そう。
そしてどんどん増えていく写真たち・・・


今年こそなんとかしようと、久しぶりにググったところ、「IFTTT」っていうサービスを使えば簡単に出来そうだということが分かりました。

IFTTTって?

IFTTT】というサービスは、何かトリガーとなるイベントが発生した場合に、特定のアクションを自動的に実行させるWEBサービスです。


これを使うと

  • Twitterで特定のハッシュタグを付けたものだけFacebookに投稿する
  • Foursquareでチェックインすると、それをGoogleカレンダーに登録する
  • 今日の降水確率が高い時だけ朝にメールする

みないなことが簡単にできます。

https://ifttt.com/


Instagramに投稿した画像をFlickrに保存してみた

実際にこの処理を行うレシピ(IFTTTでは一覧の操作を行うバッチを「レシピ」と呼んでいる)の作り方はググれば沢山存在するし、ここに実際のレシピも沢山あります。

手順を細かく説明しなくても、こんな方法でバックアップを取ろうと考えているような人であれば自分で調べながら作れるでしょ??ってことで割愛


感想

こんなに簡単に自動保存ができるとは・・・
やっぱり「楽をしたい」っていう気持ちが新しいサービスを作り出すんですね。。


怠慢はプログラマの美徳