co のすべての投稿

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など個別にコマンドを実行する際にターミナルからも動かせるようにしておきます。
参考サイト

poster2

【レビュー】新しき世界

ネタバレ注意!

この映画評は私自身の鑑賞メモという扱いで、基本的に本編の内容に触れる事が多いものです。
作品をご覧になっていない方は鑑賞後に読んで頂く事をオススメ致します。
最新情報はTwitter/Facebookにも更新していますので、良ければフォローしてみてください。

評判どおりの快作でした。
韓国の映画はこういったノワール(犯罪/暴力)系映画をよく観ますが、これまた名作が生まれたなという感じです。

ヤクザ映画でよくある展開として、
ちょっとしたイザコザからある時死人が出る→そこから復讐、復讐の振り子がだんだん大きくなる→最後はみんな殺し合って死んでしまう。
結局ヤクザという生き方の愚かさ、虚しさばかりが残ってしまう事が多いと思います。
北野武監督の「アウトレイジ」もそのような映画で、その直接的な暴力シーンを含めた争い自体をエンターテイメントにしているような作品でした。

対してこの「新しき世界」はヤクザの闘争+潜入捜査という要素が入って一つ厚みのある話になっています。
直接的な暴力シーンはそこまで多くはなく、どちらかと言うとセリフや間、そして”顔”によるせめぎ合いによって闘争を繰り返します。
潜入捜査におけるサスペンスさというのは自分が警官である事がバレて身の危険が迫ること、そして潜入している犯罪組織に情が生まれてしまい自らの正義感が揺らいでしまう事であり、
宣伝文句でもありますが、「父への忠誠か、兄との絆か。」
その主人公の”葛藤”がメインとなる話になっています。

潜入捜査官の主人公イ・ジャソンを演じるイ・ジョンジェ、
ジャソンが兄と慕う組織の幹部チョン・チョンを演じるファン・ジョンミン、
ジャソンを裏で操るカン課長を演じるチェ・ミンシク、
他役者陣の脂の乗った演技や顔の強さも見物ですし、刀を振り回しながらの乱戦や緊迫感のあるシーンの飛ばし方など撮影/編集もすごくうまいです。

ラストの1シーンは蛇足だとおっしゃる方もいるみたいですが、
主人公の最後の決断を裏付ける大事なエピソードであり、作中の主人公が終始「我慢」「苦しみ」「迷い」の表情しか見せていなかった中で最後にあの笑顔を見せるという構成はとても見事であったと思います。

poster2

【レビュー】エンダーのゲーム

ネタバレ注意!

この映画評は私自身の鑑賞メモという扱いで、基本的に本編の内容に触れる事が多いものです。
作品をご覧になっていない方は鑑賞後に読んで頂く事をオススメ致します。
最新情報はTwitter/Facebookにも更新していますので、良ければフォローしてみてください。

「壮大なる依怙贔屓(えこひいき)」
一言で言うとそんな印象です。

“選ばれし者”という形で世界を救う主人公のエンダーという少年が、最初から最後までひいきされているだけで話が進んで行きます。
冒頭から「お前は特別だ」「賢いのはエンダーだけだ」と言われ、何もしていないのに自動的にステージが上がって行って、知らない間に世界を救った、みたいな

平和的な解決を目指すとかそういう方向が中盤から現れてきますが、
とにかくエンダー自身が最初から出来る子過ぎて、何か葛藤や苦難を乗り越えるとかそういった描写が無いまま話がどんどん進むし、実際に地球にどれだけの危機が迫っているのかとか、この宇宙人と戦おうとしている組織がどんだけスゴいのかとかがイマイチ見えてこないせいで、全体的にリアリティが全く感じられません。

そんな疑惑が積み重なった状態で迎えたラストも、結局これが実際の戦いだったと明かされても「ああ、そうですか」と完全に他人事のようにしか思えないのです。

小説が原作という事で、そちらは未読なのですがおそらく長編の内容を頑張って2時間に詰め込んだ結果、ただただ説明的な話になってしまったのかなという印象です。
VFXは素晴らしかったし、無重力になる戦闘シミュレーションのシーンなんかはゼロ・グラビティを観た後でも楽しく見られるシーンでしたが、全体を通した話し運びが淡々としていてイマイチ盛り上がれませんでした。

poster2

【レビュー】ウルフ・オブ・ウォールストリート

ネタバレ注意!

この映画評は私自身の鑑賞メモという扱いで、基本的に本編の内容に触れる事が多いものです。
作品をご覧になっていない方は鑑賞後に読んで頂く事をオススメ致します。
最新情報はTwitter/Facebookにも更新していますので、良ければフォローしてみてください。

179分(約3時間)という上映時間。
鑑賞前は絶対長いだろうと思っていましたが、観終わるとあっという間に感じました。
それぐらい話のテンポが良く飽きさせない構成です。
金、酒、ドラッグ、セックスととにかく人間の欲情を惜しげも無くハイテンションで描いています。

実在の人物がモデルという事で、十分シリアスに描く事もできたはずなのに完全に下劣にコメディックに描く作風にしたのは大正解だったと思います。観た人は完全にフィクションだと思うぐらいでしょう。
特に笑ったのが、「レモン」と呼ばれる年代物のドラッグをキメるシーン。
口からヨダレ、呂律が回らずちゃんと喋れない、手足が動かず歩けない、階段から転げ落ちる、それでも車を運転する。
そこからジョナヒルとの電話の奪い合いと、喉を詰まらせたジョナを救うために再度ドラッグで復活!ポパイのカットバック!あそこは本当に可笑しかった。
他にも会社内でのホステスの絡みやラスベガス行きの飛行機での乱交シーンとかも最低(最高)でした。

レオナルド・ディカプリオも過去最高の演技で、元々の顔つきもあってか老若の演じ分けも見事でした。
客を引きつける(釣り上げる)巧みな話術と人の心を振るわせるスピーチは「ホントに仕事できそう・リーダーにしたい・ついていきたい」と思わせ、汚い金の稼ぎ方や使い方を見せていても、バカで真っすぐで愛されるっていう役を演じきっていて、ホントに彼にしかできないジョーダンだったと思います。
他にもジョナ・ヒルが演じる相棒ドニーやマシュー・マコノヒーの胡散臭い上司も負けずの存在感で素晴らしかったです。

R18+指定とはいえ、全編に渡るドラッグとセックスの過激な描写やFワードの連発など明らかに教育に悪い今作がアカデミー賞にノミネートされているのを不思議に思いつつも、観ている側に爽快感を感じさせるほどパワフルでユーモラス。
観る人を選ぶ事は間違いないとは思いますが、自分は大好きな映画です。

poster

【レビュー】恋の渦

ネタバレ注意!

この映画評は私自身の鑑賞メモという扱いで、基本的に本編の内容に触れる事が多いものです。
作品をご覧になっていない方は鑑賞後に読んで頂く事をオススメ致します。
最新情報はTwitter/Facebookにも更新していますので、良ければフォローしてみてください。

「ゲスでエロくてDQN(ドキュン!)」

========================
DQN
ヤンキー(不良)など、”粗暴そうな風貌をしている者”や実際に”粗暴な者”、また”非常識で知識や知能が乏しい者”を指すときに用いられる[1]。
Wikipediaより
========================

そんなDQNたちの青春?恋愛劇。

実際こんな付き合い方してる人たちがいるのでしょうけど、まあ普通に自分の恋愛観的に共感できる所は少ないので動物園を見るような傍観する感じで見られました。

セリフの一つ一つが本当にくだらなくてバカだけどなんとなくリアル。自分だったらこんな事言わないよ、と思う反面、恋愛すると誰でもこれぐらいかっこ悪くなるよな、と思う所もあったり。

挙げ始めたらきりがないほど強力なパンチラインもいっぱい繰り出されていました。
「恋の渦名言集」を誰かまとめてもらいたいです。

舞台は四つの部屋だけで、4日間で撮ったらしいですが制作は極めてコンパクト。

この映画の面白いポイントはテーマとか展開とか、構造的な部分では一切なく、ただただ役者たちの会話、掛け合いの「場面」のみに集約されていると言えます。

登場人物は皆どうしようもなくバカですが、どこか憎めない。
毒にも薬にもならない映画ですが、この愛すべきバカたちをずっと観ていたい気持ちになります。

一人で観るより大勢でワイワイ観る方が楽しいと思いますし、別にカップルで観ても全然楽しいと思います。
ぐちゃぐちゃな恋愛話ですけど、完全に他人事で観られますから。

poster2

【レビュー】ミスティック・アイズ

ネタバレ注意!

この映画評は私自身の鑑賞メモという扱いで、基本的に本編の内容に触れる事が多いものです。
作品をご覧になっていない方は鑑賞後に読んで頂く事をオススメ致します。
最新情報はTwitter/Facebookにも更新していますので、良ければフォローしてみてください。

「ミスティック・アイズ」という放題にセンスの無さを感じつつ、原題の意味もわからなかったので調べてみました。

==============================
wrecker【名】
1.〔故意に物を〕壊す人
2.〔事故車両などの〕解体業者[作業員]
3.〈米〉レッカー車◆【同】tow car
4.海難救助船
5.〈話〉〔夫婦・組織などの絆・結束などを〕破壊する人
==============================

これで言うと5.で、「家庭を壊す人々」のお話。

デイヴィッドとドーンという幸せな夫婦が暮らす家にある日戦地から帰還した弟が転がり込む。
この弟が夫婦や近所の関係を掻き回し平和な風景を乱して行きます。
平凡に見える夫婦関係や近所付き合いの中にも秘密が隠れていて、ふとしたきっかけでそれが明るみになり崩壊する、という内容。

話が進むと徐々にデイヴィッドやその家族の過去が明らかになっていきますが、実際の描写はほとんどされず、人物たちのふとした会話の中に混ざる程度でしか出されません。
最終的に幸せそうな雰囲気で終わりますが、もちろんそれは表面的な部分だけです。
後味はとっても苦々しく、見終わってしばらく暗い気持ちになります。

ドーンが抱える子供を抱っこした”お隣さん”の旦那の「自慢の息子だな」のセリフとか特に苦かった。
「ほとりの朔子」を観た時も感じましたが、こういう身近な人たちが実は関係を持っているっていう状況って、人口の多い都会よりも人同士の繋がりが深い田舎暮らしの方が多いんじゃないかなと東京に住みながら感じた所です。

ベネディクト・カンバーバッチは相変わらず存在感が強く、どこか闇を抱えている雰囲気も良かったですが、
他の役者たちが特に光っているようにも見えずちょっと物足りなさを感じました。

poster2

【レビュー】アメリカン・ハッスル

ネタバレ注意!

この映画評は私自身の鑑賞メモという扱いで、基本的に本編の内容に触れる事が多いものです。
作品をご覧になっていない方は鑑賞後に読んで頂く事をオススメ致します。
最新情報はTwitter/Facebookにも更新していますので、良ければフォローしてみてください。

もっと軽い気持ちで観られる作品かと思いきや、字幕を追うのが結構大変だったり話が思ったより複雑だった印象です。
また、オチの一捻りは確かに面白い展開でしたが、これだけ長い上映時間で引っ張ったのなら最後はもっと派手に終わって欲しかった気持ちもあります。
アメリカ人独特の言い回しや訛りをポイントにしてる所もあって、若干ノりにくい所もありました。

役者の話から。

-クリスチャン・ベール
彼の役作りはハンパじゃない。「マシニスト」では55kg、翌年の「バットマンビギンズ」では半年で+30kgとあの筋肉、そして「ザ・ファイター」ではまた20kg以上減量して歯や頭髪まで抜いてしまうほど。
そんな彼の今回の役は中年のメタボな詐欺師役。このでっぷりとしたお腹は全て本物です。
「役に合う体型のキャスティングをすればいい」と言われればごもっともですが、これで彼の新たな一面が見られたのは大変貴重でした。

-ブラッドリー・クーパー
すごくいい男なのにちょっと頭悪そう、という今回の役柄。
FBI捜査官に見えるかどうかは別にして最後の展開含めてバッチリなキャスティングでした。

-アイミー・アダムス
最近では『マン・オブ・スティール』に出てましたね。今回は女の嫌な部分をこれ以上無く出し切って、39歳という脂の乗った色気もたっぷり出していて最高でした。

-ジェニファー・ローレンス
もう言うことない。ホントに。
これだけの大物俳優たちに囲まれてのあの存在感とセクシーさ、演技の爆発力。23歳とは思えない。

-ジェレミー・レナー
今までアクション系が多かったため、ポスターだけを見た感じだと無理があるように見えましたが、
意外とこういう人間臭い役もハマっていて、年齢もやや上に設定しても行ける顔なんだと新しい発見をした気分です。

時代が70年代という事でか、着ている服や髪だけでなく喋り方や立ち振る舞いまで全てが派手です。
そんな自分を誇張して偽るというモチーフにまみれた人物たちの騙し合い。

作中の詐欺師たちの言葉
「人は信じたいものを信じる」
「人はNOを言われると引き下がり、言い続けるだけ気持ちを引き寄せられる」
説得力があるのか謎ですが、この映画では何度もこのフレーズが使われます。

===========================
ハッスル=強引に押し進める
【名】
押し合い、突き合い
やる気、精力
〈話〉詐欺、ペテン

【自動】
ハッスルする、張り切る、頑張る
乱暴に押す、押し進む
急ぐ、てきぱきとやる
〈俗〉〔ポーカーなどの〕ばくちでかせぐ[生計を立てる]
〈米俗〉売春する
===========================

「アメリカン・ハッスル」

FBI、ギャングといったいかにもアメリカ的なキャラクターを使っているという意味で、
タイトルにアメリカンを入れるというのは、なるほどシンプルでわかりやすいなと思いました。