img_markup_150107_04

「Print1」というツールを作りました

先日、会社のWeb制作ブログにてこんな記事をアップしました。ご存知の方いるかな?

▶︎縦に長い画像を1枚で印刷する際に自動分割してレイアウトするツール「Print1」

「日頃ちょっとだけ困っている事を仕組みを作って改善する」という取り組みから生まれたツールと記事でした。
仕組みのシンプルさやWeb以外の用途に発展した事などが評価され話題となりました。

自分は普段は受託でWebを作っていて、直接ユーザーと関わる事も少ないため、今回のようにSNSでのビビットな反応もすごく新鮮でした。
スマートフォンアプリを始め、サービスを作っている会社はこのようなドキドキを毎日のように感じているのかと思うと羨ましくもあり、苦労の一端も感じられたという意味ですごく良い経験でした。

thum

2014年映画振り返り

2014年に劇場で鑑賞した新作映画はなんとか80本。
目標の100本には惜しくも届きませんでした。
以下ベスト10が絞りきれず12本です。

  • ほとりの朔子
  • ウルフオブウォールストリート
  • 新しき世界
  • LIFE!
  • LEGO(R)ムービー
  • アクトオブキリング
  • キャプテンアメリカウィンターソルジャー
  • her 世界でひとつの彼女
  • ガーディアンズオブギャラクシー
  • インターステラー
  • 6才のボクが大人になるまで
  • ゴーンガール

まとめると結構普通ですね。
どれも素晴らしくて甲乙つけるのは難しかったのでランキングにはしていませんが、唯一ベスト1として挙げたいのが「ガーディアンズオブギャラクシー」です。
音楽の使い方やキャラの立て方、話のテンポの良さ、画作りの新鮮さ、どれも自分のツボにハマっていて、この1年というよりはここ数年超えられないぐらいの傑作だったと思うぐらいでした。まあ、これもいろんな人がベストに挙げてるので普通っちゃあ普通ですね。

今年はアベンジャーズ、007、ミッションインポッシブル、スターウォーズ、ターミネーターと注目の続編も目白押しで楽しみ!
なのですが、、
さすがに80本以上を今年観るのはキツいのでほどほどにしようかと思います。
あとはサボっていたレビューもぼちぼち書いていけるペースにします。

【随時更新】Bootstrapに役立つ便利なリソースまとめ

bxSlider実装まとめ

jQueryスライドショーライブラリ「bxSlider」の実装方法や細かな注意点、カスタマイズの方法などをまとめます。

bxSliderのウリ

  • 軽量、シンプルで使いやすい
  • 画像だけで無く、HTML要素もまとめてスライド可能
  • タッチデバイスのスワイプによる切り替えに対応
  • レスポンシブ(幅100%に拡縮)対応
  • IE8より動作
  • 各種オプションが充実、カスタマイズしやすい

ダウンロード、設置

本家サイトにアクセスし”Download”ボタンからデータをダウンロード。
jQueryも必要になるので、HTMLには下記のように読み込みを記述。

必要なファイル(ディレクトリ js/bxslider は任意):

HTMLの指定

関数の呼び出し

この場合’slider’のクラスを付けた要素の子要素がスライドするアイテムとなります。
※bxSlider-setting.js等と別ファイルにまとめておくと良いです。

オプションについて

バグ等の対処

前後ボタンやページングをクリック後、自動切替が効かなくなる場合の対処

呼び出した関数をオブジェクトに格納し、startAutoコマンドを時間差で実行させる、という仕組みです。

1ページ内に複数設置する場合

縦スライド版(vertical)設定時にうまく動かない時の対処

jquery.bxslider.js内の下記の箇所をfalseにします。

IE9以降で動かない時の確認事項

jQueryのバージョンは1.8.2以上になっているかを確認します。 http://wind-mill.co.jp/iwashiblog/2014/05/bxslider-ie-notwork/

Sublime Textで一つのキーバインドに複数のコマンドを登録する方法

Sublime Textはデフォルトで一つのキーバインドに一つしかコマンドを登録できません。
複数登録できるようにするには別途プラグインを追加する必要がありますので、その方法と、キーバインドの設定をまとめます。

プラグインの設定

  • [Tools]>[New Plugin…]と選択
  • untitledのファイルが開かれるので、下記のコードをコピペ。
  • ファイルを未保存の状態で開いておく
  1. パッケージのフォルダをfinderで開く([Sublime Text]>[Preferences]>[Browse Packages…])
  2. 1.の 〜〜/Packages/直下に”Run Multiple Commands”という名前でフォルダを作る
  3. untitledのファイルを名前を付けて保存。↑の/Run Multiple Commands/内に”run_multiple_commands.py”という名前で保存する(run_multiple_commands.pycも同時に作られる)
  4. ↑のrun_multiple_commands.pyをSublime Textで開いた状態で、Package Controlを開く[cmd+shift+P]
  5. “Create Package File”を入力して選択
  6. “Run Multiple Commands”と入力して”Default”を選択してEnter
  7. デスクトップに”Run Multiple Commands.sublime-package”というファイルができるのでユーザーのパッケージフォルダ(/Users/【ユーザー名】/Library/Application Support/Sublime Text 3/Packages/User)に移動

最終的に

  • /Users/【ユーザー名】/Library/Application Support/Sublime Text 3/Packages/Run Multiple Commands/ にrun_multiple_commands.pyとrun_multiple_commands.pyc がある
  • /Users/【ユーザー名】/Library/Application Support/Sublime Text 3/Packages/User/ にRun Multiple Commands.sublime-package がある

状態になればOK。これでプラグインの設定が完了

キーバインドの設定

ここで複数キーバインドを設定するサンプルとして、複数のファイルを編集中にしている状態で「ファイルを全て保存」した後、「ファイルを全て閉じる」という二つのコマンドを実行する設定を作ってみます。

  1. [Sublime Text]>[Preferences]>[Key Bindings – User]を開く
  2. 下記サンプルのように記述する
  1. [alt] + [cmd]+ [shift] + [s] を押すと、
  2. “save_all”(ファイルを全て保存)した後、”close_all”(ファイルを全て閉じる)を実行する。
  3. commandを続けて書けば、同様にコマンドを実行できる。

参考

A Sublime Text 2 plugin to enable running multiple commands in any given context from a single key binding.

Sassのインポートをディレクトリ単位で指定する sass-globbing

Sassでimportを行う際は1ファイル毎に指定する必要があります。

例:

これだとモジュールが追加になった時等に都度importの記述を追加する必要があり手間になってしまいます。
以下のように指定できると便利ですよね。

こちらを実現するために「sass-globbing」というツールを使用します。

インストール方法

ターミナルを起動して、以下のコマンドを使ってインストール。

Compassを使う場合はconfig.rbに以下を追記

以上でOK

参考:
Automatic Sass Imports with Sass Globbing | Fuse Interactive | Drupal Web Design and Development in Vancouver
sass-globbingでSassファイルをお手軽管理 – Qiita

フロントエンド開発に必要な準備(アプリケーション編)

普段私がコーディング業務で使っているアプリケーションをご紹介します。

Sublime Text

まずはこれですね。DWやCoda、Brackets、Atomなんかも最近出てきましたが、

  • 強力なコード編集機能
  • 豊富なプラグイン
  • 軽量さ

この利点でまだまだSublime Textは使っていけそうです。

MAMP

SassやGitなどの普及によりローカル環境での作業の割合がより大きくなりました。
無料で十分使えますし必要な機能は揃っています。(他のアプリは試していませんが)

iTerm2

Macでターミナル作業を行う際にちょっと見やすくするアプリ。
背景が黒くなってコードがシンタックスハイライトしてわかりやすくなります。あとタブで実行環境をスッキリ管理できます。

また、Sublime Textの”Terminal”のパッケージでデフォルトで起動するアプリをiTermに設定する方法ですが、
[Package Setting] > [Terminal] > [Setting – User] を選択して以下を追記すればOKです。

Transmit

高性能なFTPクライアント。

  • Dropboxに設定を同期
  • Macのfinderのような見た目。クイックルックも使えます。

Source Tree

GUIでGitを使うならコレ。最近インプレスジャパンさんから刊行された「Web制作者のためのGitHubの教科書」でも標準で使うアプリとして取り上げられました。

CopyPath

これはコーディングの作業というよりはチームで作業する際にファイルやフォルダのパスをやりとりする時に使っています。
以前は無料でしたが、今はappstoreで有料(100円)になっていましたね。

Sublime Textの初期設定

Sublime Textをインストールしたらまずやる事のまとめ。
パッケージのインストールや覚えておきたい操作など。

インストール・初期設定

概要など

まずはインストール

本家サイト
有償ですが、試用版でも機能制限なし。
Sublime Text2もありますが、最新バージョンの3を使います。

オレオレユーザー設定

[Preference] > [Setting – User] に以下を記載

オレオレスニペット

https://github.com/WebNAUT-BW/snippets-st-frontend

インストール方法

/Users/【ユーザー名】/Library/Application Support/Sublime Text/Packages/User/snippet/
に***.sublime-snippetファイルを格納。このディレクトリ以下であれば自由にフォルダに分けてOK。

呼び出し方

[cmd] + [shift] + [p] → 各スニペットファイルのtabTriggerで設定した名前を入力(予測変換するので途中までの入力でOK)

押さえておきたい基本機能

操作・表示系

名前 詳細
Multiple Selections [cmd](windowsなら[ctrl])を押しながら、複数ヶ所を同時に選択して編集することが出来る
SoftUndo [cmd] + [u] 「選択」「カーソルの位置」なども戻すことができる、便利な「戻る」機能
フォルダによるファイル管理 基本的な作業はフォルダをアプリにドラッグしてサイドバーに設定から行う
Minimap コードの全体像が把握可能

ショートカット

Sublime Textのキーボードショートカット一覧 (Mac OS X)

よく使うショートカット:

名前 詳細
[cmd] + [d] 一回で単語を選択、二回目から選択中の文字列を検索して順次選択
[cmd] + [alt]+ (数字キー) ウィンドウを横n等分
[cmd]+ [/] コメントアウト(コメント解除)
[ctrl]+ [t] 選択された二箇所の文字を交換する
[cmd] + [shift]+ [a] 親のタグまで選択
[cmd] + [shift]+ [d] カーソル位置の行を下に複製
[cmd] + [alt]+ [f] 置換パネルを開く
検索パネルで[enter] 次を検索
検索パネルで[shift]+ enter 前を検索
[tab]/[shift] + [tab] インデント/アンインデント

パッケージ

Package Control

パッケージを管理しやすくするパッケージ。まずはこれを入れないと始まらない。

機能概要:

設定方法:

  • 公式サイトにアクセス(必ず最新の情報でインストールすること)
  • Sublime Text3のタブが選択されているのを確認して、Installationの項目の「import urllib〜」で始まるコードをコピー。
  • [View] > [Show Console] をクリック
  • コピーしたインストール用のコマンドを貼り付けて[enter]
  • インストールが走っている間しばし待つ
  • 「Package Control: No updated packages」と表示されて処理が止まった所で完了

Package Controlを使ったパッケージのインストール方法:

  • [command] + [shift] + [p] > 「Install Package」 と入力(変換候補が出るので”install”まででOK)
  • [enter] を押してしばらく待つ(ステータスバーがLoading中の動きになります。)
  • インストールしたいパッケージの名前を入力して [enter]

Emmet

Zen-codingの現行版

使い方:

1.ショートコードでタグを展開([ctl] + [e])
例:

↓[ctl] + [e]で展開

2.wrap with abbreviation(後からタグで括る)

  • 括りたい範囲を選択して、[ctl] + [alt] + [enter]
  • ウィンドウの下に「Enter abbreviation」が出るので、指定したいタグを入力して[enter]
  • 複数行をliなどで括る場合はul>li#と入れると行単位でliを指定可能
  • クラスやIDも1.のショートコード同様指定可能

Emmet Cheat Sheet

http://docs.emmet.io/cheat-sheet/

Bracket Highlighter

htmlのタグ、jsの括弧のペアをハイライトしてくれる

SideBarEnhancements

サイドバーの強化、右クリックで操作できる事が増える

AutoFileName

imgタグやcssなどで、パスを入力する時に、ファイル名を補完してくれる素晴らしいパッケージ

※ユーザ設定に下記を追加するとimgタグのwidthとheightの順番がwidthが先になります。
[Preference] > [Setting – User]

Abacus

イコールとかコロンとかを綺麗に揃える

▼例:使い方

↓整えたい行を選択して、[cmd] + [alt] + [ctrl] + ]

ConvertToUTF8

Sublime TextはデフォルトでShift-JISやEUCに対応しておらず、そのまま開くと文字化けしてしまいます。
それらのファイルを開いた時に文字エンコードをUTF8に変換し、保存時にまたエンコードを戻してくれるというパッケージです。

各種シンタックス

  • SCSS(SASSを入れてしまうと.scssでemmetを使った時にセミコロンが自動で付かない)
  • Compass
  • LESS

各種スニペット

  • HTML Snippets
  • CSS Snippets
  • jQuery Snippets pack
  • JavaScript Snippets

JSHint

JavaScriptのリアルタイム構文チェックを行うパッケージです。
なお、これを使うためには別途Node.js経由でJSHintをインストールする必要があります。

紹介記事

追加するパッケージ

  • SublimeLinter
  • SublimeLinter-jshint

TrailingSpaces

全角スペースをハイライト表示するパッケージ
インストールしただけではうまく動かず、

[PackageSetting] > [TrailingSpaces] > [Setting – User] に

を記載します。これでOK

参考サイト

上記設定を追記する先が
[PackageSetting] > [Package Control] > [Setting – User] と書かれていますが、正しくは
[PackageSetting] > [TrailingSpaces] > [Setting – User] ですのでご注意。

カラーテーマ設定

おすすめ

[Monokai Dark]、[Flatland]
参考サイト

オリジナルなテーマ設定を行う方法

紹介記事:Sublime Textのテーマをカスタマイズできる「Color Scheme Editor for Sublime」 – へっぽこプログラマーの日記

まずはこちらにアクセス

  • 左上の[Gallery]で既存のテーマを選択
  • 細かい色の調整(必要に応じて)
  • [download]して**.tmThemeファイルをダウンロード
  • [Preferences] > [Brouwse Packages] でFinderにPackage内容を表示
     /Users/【ユーザー名】/Library/Application Support/Sublime Text/Packages/User/**.tmTheme ここにファイルを格納
  • すると [Preferences] > [Color Scheme] > [User] にテーマ**が選択できるようになる

フロントエンド開発に必要な準備(ターミナル関連)

Sublime Textでサイドバーからターミナルを起動できるようにするパッケージ

参考サイト

iTermをデフォルトで設定する方法:

[Package Setting]>[Terminal]>[Setting – User]を選択してパッケージ設定ファイルに以下を追記

Sass/Compassのインストール

参考サイト

1.ターミナルを開いて以下を入力

2.以下で確認

3.Compassも同様に

Node.js

Grunt/Gulpを実行するために必要なサーバーサイドJavaScriptです。
「NPM」というNode.jsのパッケージマネージャにGrunt/Gulpが登録されているため、ターミナルでインストールを行い使えるようにします。

インストール手順:

  • 本家サイトにアクセス
  • Installボタンを押してpkgファイルをダウンロード、実行

Node.jsの動作確認

  • ターミナルを起動(iTerm)
  • nodeのバージョンを確認するコマンドを打つ

“v0.10.26″等のバージョンが返ってきたらOK

Grunt

ターミナルを開いて以下のコマンドを入力

Gruntの動作確認

ターミナルを開いて以下のコマンドを入力

以下のようなテキストが出てくればOK

参考サイト:

Gulp

Gruntと同様に以下のコマンドでインストール

Git

基本的にSource TreeのUIだけでGitを扱えますが、Git mvなど個別にコマンドを実行する際にターミナルからも動かせるようにしておきます。
参考サイト