これをみるとinputやfalseはLF -> CRLFの自動変換を行わないので、これらを選んでしまいそうですが、 大規模開発で多数の開発者がtrueでインストールしてしまった場合、わざわざ変更をしてもらうまでの悪影響があるのか？がわからなかったので、それについて調べた結果を記載しようかと思います。また、これを書くきっかけとなった私のチームではまった落とし穴について書こうと思います。 core.autocrlfをtrueに設定をした場合 core.autocrlfをtrueに設定をした場合について整理します。 チェックアウトやコミットした場合の動きや、開発者がCRLFでファイルを作成した場合の動きは以下のようになります。 上記の図から確かにwroking directory上ではCRLFとLFが混在してしまう可能性がありますが、 repository上のファイルがLFである以上、core.

12/3（土）にCSS を破綻させないという内容をbuilderscon tokyo 2016で話しました。 そこで使った発表資料の内容を編集した上で、CSS Advent Calendar 2016 14 日目の記事として公開します。 CSS は破綻しやすい OOCSS の提唱者 Nicole Sulliban 氏も"CSS is too fragile"と 2008 年のイベントで言いました。 なぜ破綻しやすいのか。それは CSS の特性が絡んでいます。 CSS の特性 CSS の特性としておもに 3 つあります。 はじめに、記述を間違えてもエラーにならないことです。ブラウザで表示確認をおこなって初めて見た目がおかしいことに気づきます。 次に、スタイルが適用される条件としてルールセットを書く順序は関係ありますが、常に関係があるわけではない点です。 ちなみにルールセットは CSS のセレ

前回までの記事で簡単なレイアウトを作成して、xhtmlとHTML5でマークアップしたものからHTML5の新要素の説明を行い、アウトラインを確認してみました。最終回となる今回はxhtmlとHTML5のCSSをほとんど変えずに同じレイアウトになるように作成してみたいと思います。 HTML5でCSSを設定する場合は新要素に対応していないブラウザに対してどうするのか。まだ確定していないHTML5の要素が変更になった場合を考慮して、スタイルの設定を考えた方が後々の大きな修正を回避できるのでベターです。ただ今回のレイアウトはほとんど同じCSSを使うということで作成するので、多少気になる部分もあるかと思いますが、ひとつの例として見ていただければと思います。 解説：（有）ムーニーワークス　林 豊／田崎一成 前回まででアウトラインを確認したそれぞれのマークアップしたページのサンプルこちらにあります。 ●HT

スマホからウェブにアクセスするユーザが増え、ウェブサイトの表示速度の高速化がより重要な制作の課題になっています。1ページもののサイトなら、フロントエンド・エンジニアが一人で実装できるかもしれませんが、ある程度の規模のウェブサイトではワークフローやサイト全体の設計にも関わってきます。また、表示速度の高速化の方法を知らなければ、最適化しやすい、より高度なデザインは実現できないでしょう。エンジニアだけでなく、デザイナーやディレクターがこういった情報を知っていれば、よりスムーズに結果を出せるウェブサイト制作ができるはずです。 ページ表示速度の改善にはいろいろな方法がありますが、この記事では一番効果がありそうなところから攻めていきたいと思います。自分もまだまだ勉強中なので、まずはfilament groupのScottさんの記事 やClearleftのJeremyさんの記事 を参考に、フロントエンド

Sublime Text 2にインストールしたプラグイン、しばらく使ってみるとアンインストールしたほうが効率がいいってときありますよね。 そんな場合はもちろんアンインストールすることになるんですが、インストール方法の記事はいっぱいあってもアンインストール方法をまとめた記事が無かったので書いてみました。 （そんなの調べなくてもわかるでしょって雰囲気は気にしないでいきますよ！） パッケージコントロールを導入している場合 Sublime Text 2のプラグインを管理するのにとっても便利なPackage Controlですが、こいつを入れている場合は、Package Controlを使ったプラグインのインストールと同様な感じでアンインストールしてあげればOKです。 Ctrl+Shift+P ↓ 「Package Control: Remove Package」と入力して… ↓ 任意のプラグインを

こんにちは～　仕事が恋人のデザイナー、王です φ(≖ω≖｡)♪。 最近海外でもてはやされまくりのテキストエディタ「Sublime Text」と恋に落ちたことをこの場で告白したい！ やっと出会えたぞ！僕が探し求めていた幻のエディタに！！ 昨今話題沸騰中の「Sublime Text」エディタについて、ご紹介しましょう！本記事を読んで、ぜひとも他のエディタからSublime Textに乗り換えていただきたいです！ 見た目的には、このように、優雅（Sublime）そのもの！ Mac、Windows、Linux　三大プラットフォームで動くのも嬉しいですな！ 公式サイトは下記リンクです。 https://www.sublimetext.com/ それでは、動画やキャプチャーを使ってSublime Textの素晴らしい魅力を伝えていきたいと思います。 Sublime Textのチャームポイント 特色機能

Sublime Text 2 での作業楽しいですね。 そんな作業をもっともっと楽しくするプラグインの紹介。 今回は、本当に便利なプラグイン「Goto-CSS-Declaration」です。 htmlを編集中に、ショートカットキー一発でcssの該当idやclass、要素にジャンプできるという、ほんとに便利なプラグインです。 例えば、htmlのid="head"のところにカーソルを合わせ、ショートカット一発で、cssの#headに飛んでいくことができます。 条件は、該当するcssファイルを開いておくことです。 classや要素の場合はcss中に何度も記述されますがそれでも大丈夫！ショートカットを押すだけで、次々とジャンプしてくれます。（行きすぎたら戻るショートカットもあります） そして、なんと、scssにも対応です。Sass使ってる人にもとっても便利です。 では、インストールから始めましょう。

これがMacBook電源アダプタケーブルの正しい巻き方です。合ってました？ ただぐるぐる巻けばいいってもんでもなくて、ダマにすると、玉の重みで断線してしまいます。しかしこの写真ように本体に縦横に巻けば負荷が分散されてずっと長持ち♪ 縦横にきっちり収めるコツは、羽。MagSafeの付け羽をビョコンと引っ張り出したら、あとはギズ特製GIFアニメの手順に従うだけです。 もうご存知の方も多いと思います。私も知ってました…といっても最初から知ってたわけじゃありません。1個ならず2個までも断線でダメにして、それでやっと学んだんです。この巻き方さえ覚えておけば、たかだかラップトップ電源繋ぐのに70ドル（日本は8400円）も無駄にしなくて済みますよ。 ［h/t @jc via @Shealan］ LESLIE HORN（原文／satomi）

CSSのプロパティで「display」ってありますけど、 displayプロパティってどのくらい利用していますか？ あまり多様するようなプロパティではないのですが、 それでもdisplayプロパティを使う時って出てくると思います。 このdisplayプロパティは色々な値を持っているのですが、 どんな値がどんなことになるのかって実は僕もあまり知らなかったりします。 そんなときに、 「Understanding CSS Positioning part 1 | KilianValkhof.com」 というエントリーを読んだので、いっそ勉強してみようと思い、 displayプロパティについて書いてみる事にしました。 ボックスとインライン そもそもボックスとインラインって何？ という人が多いと思います。 「ボックスについて - CSSリファレンス」というところに、 わかりやすい説明が書いてあったの

CSSセレクタって意外と分かっていなかったりするので勉強ついでにまとめてみました。比較的実用的かなと思うものを20個紹介していきます。いい復習になればと思います。 CSSセレクタはスタイルを適用する対象を指定するものです。普段何気なく使っているclassやidなどもセレクタの１つです。 属性や要素といった堅苦しい用語が出てきますので図で簡単に説明します。 私のように基礎から勉強していないと、要素や属性と聞いてもピンときませんが、知ってみるとなんてことはないですね。 また、IEが対応しきれていないCSS3のセレクタもありますが、IE6～8でもCSS3セレクタが利用できるツールの決定版「Selectivizr」 で紹介したようにCSS3セレクタはie対策も容易なのでぜひお試しください。 SelectivizrはCSSを外部ファイルで指定した方がいいのですが、今回のサンプルはCSSを外部ファイル

HTMLコーディングの初級というと、どの程度のスキルを差すのでしょうか。弊社では、以下のようなことがひとまずできていると、だいたい初級レベルを越え始めた段階かな、という気がしています。 ターゲットブラウザで大きな崩れがない。 リンク漏れや原稿違いなどのヒューマンエラーの頻度が極めて低い。 バリデーター・チェックでエラーが出ない。 逆に、これだけのことができて、なぜまだ初級レベルなのでしょうか。それは、現場では、これだけでは不十分だからです。ブラウザでひとまず正常に表示されるだけでなく、改修に素早く対応できる柔軟性、協業や運用後の更新を楽にするルールの一貫性や簡潔さ、HTMLの概念をきちんと踏まえた正しい構造設計なども、求められてくるからです。 そこでここでは、脱・初級者を目指す方のために、弊社内で行っているHTMLコーディングの、いわゆるエラーということ以外のチェックポイントを、まとめてみ

ピクセル密度とピクセル比の関係 ピクセル密度は、数が多ければ多いほどスクリーン上で鮮明な描画ができるわけですが、上述したピクセル比とは直接関連しないものです（と考えています）。たとえば、Galaxy S IVのようにピクセル密度は441ppi、ピクセル比は2という端末もあれば、HTC Oneのように、ピクセル密度は468ppiだが、ピクセル比は3という端末もあります。 ※両方とも実機で検証したわけではないので、Wikipediaの情報が正しければの話ですが。 ※ピクセル比とは違うものですが、それと似た単位であるdppx (dots per pixel unit)では、CSSで定義された1インチが96pxになるため、1dppx = 96dpiになります。 ピクセル比に似た値「dp」とwindow.devicePixelRatio Androidの密度非依存ピクセル「dp」 Density-i

最近はMacBook Airだけでなく、MacBook Pro Retinaモデルでも標準搭載となっているSSD。ハードディスクに比べると圧倒的なアクセススピードを誇るので通常のファイルコピーはもちろん、アプリの起動なども高速化します。そして、アプリ同士もサクサク切り替えられるので、レインボーカーソルにお目にかかることが減ること間違いなしです。数世代前のマシンでも、メモリーの増設とSSDへの換装により、かなりの高速化が見込めます。 しかし、SSDの欠点は容量の少なさ。256GBや512GBのSSDを搭載すればある程度解消されるものの、11インチのMacBook Airの場合は256GBでプラス1万7600円、512GBでプラス4万4000円もかかります。256GBならまだ手が届きそうな雰囲気ですが、512GBをチョイスするには相当の勇気が必要です。実際のところも私も勇気が出せずに11インチ

どの機能へのアクセスかに合わせて、以下のKey名を 〜-Info.plist に追加。 (2016/10/01 追加) 現在の Xcode でプロジェクトを新規作成した場合には Info.plist というファイル名で作成されます。 (追加ここまで) 値に指定した文字列が確認のアラートの文章に差し込まれる。 機能 Key名 対応OSバージョン Bluetooth NSBluetoothPeripheralUsageDescription iOS 6.0〜 カレンダー NSCalendarsUsageDescription iOS 6.0〜 カメラ NSCameraUsageDescription iOS 7.0〜 アドレス帳 NSContactsUsageDescription iOS 6.0〜 位置情報 NSLocationUsageDescription iOS 6.0〜 マイク NS

2013年11月18日 追記 この記事を書いた後、何人かのかたから「うちでは同じApple IDで両方とも使えているよ」というご指摘をいただき、 Member Centerのほうにアカウント追加 -> iTunes Connectに同じアカウント追加という順番だと「警告は出るもののかまわずContinueすれば」同じApple IDでアカウント作成可能 iTunes Connectにアカウント追加 -> Member Centerに同じ追加という順番だと「複雑な手順にはなるものの適切な手順を通せば」同じApple IDでアカウント作成可能 失礼しました。 追加情報などあれば是非おねがいします！ 概要 私はiOSアプリの開発を3年以上やっていますが、恥ずかしながら会社でこのためのアカウントを管理/運用する方法をきちんと把握できていませんでした。 というのも個人で開発するぶんにはそんな管理は必

こんにちは。 会社からMacBookPro Retinaディスプレイモデルを支給されました浅海です。 Retinaディスプレイ、非常に快適なのですが、Retinaディスプレイに最適化されていないWebページやアプリケーションでは、ビクセルベースで作られている部分がすこしぼけたように見えてしまいます。 特に文字を画像にしている場合なんかは、かなり気になります。 Retinaディスプレイは既にiPhoneで使われているほか、一部のAndroidもRetina相当の解像度を持っているモデルが登場しており、モバイルWebサイトやWebアプリがRetinaディスプレイを意識した作りになっていることはよく見られるようになりました。 これからもPCなど、Retinaディスプレイ対応のニーズは増えるだろうと思い、対応方法をまとめました。 目次 imgタグ CSS JavaScript Google Map