mania-ku

何か作りたいプログラマ未満。

昨日CSS Nite LP54に行ってきた

CSS Nite LP54「Coder's High 2017」

 

仕事で行ったのですが、予想外の方向の収穫が多かったです。

「多様なユーザーニーズに応えるフロントエンドデザインパターン:ベーシック編」と「ここまでのJavaScriptスタンダードと、これからのJavaScript ES6について」が予想外の方向の収穫でした。

あとベルサール半蔵門というか半蔵門にたぶん初めて行きました。トランプさんが来るということで、駅のコインロッカーやゴミ箱が使用禁止だし、女子トイレは汚物入れが封されてるしで遠くから来ている登壇者・参加者の方々、一部の女性の方は大変だったのではと思います。お疲れ様でした。

コーダーの前仕事、後仕事

一発目の話が、対象ブラウザ確認は重要。でも正直ブラウザのサポート期間的にIE11だよね〜みたいな話から始まって、そのとおりだなぁと。でもIE8とかもまだ稀に対応している、というのを聞いて悲しかったです。やっぱりそういう対応はすんごく高価な有料対応にするのがいいのかなぁと。

あと黒い画面の話はこの方だったと思うのですが、gulpとかをバッチファイルにする発想はなかったです。

多様なユーザーニーズに応えるフロントエンドデザインパターン:ベーシック編

今会社でアクセシビリティがほんのりアツいのですが、このセッションでは「多様なユーザーニーズに応える≒インクルーシブ≒アクセシビリティ」ということで、興味深く見てました。タイトルからはわからなかったのでびっくりでした。あと<button>警察のTシャツちょっと欲しかったです。

本が出てるので購入したいですね。あとハンバーガーメニューに似てる記号があるのは知らなかった。

テンプレートエンジンPugを使った、みんなでやるウェブ制作

pugの最大のメリットである「タグの記述が簡単になって、ミスしにくくなる」というのが正直わからなかったです。普段仕事中の記述はもっぱらEmmetでばばーっと書いちゃうし、gulpでHTMLのバリデートをしている上に、ほとんどテンプレートエンジンを使っているので・・・。

pugを覚えるよりもそういった環境を整えるほうが、新しい作業者が入った時にもメリットがありそうな気がしました。ただcssを書くのとsass書くの違いと同じ「素で書くの辛すぎるわーーありえないわー」みたいな感覚なのはわかりました。sassでいうところのscss記法みたいな(cssも書ける、つまりpugだとHTMLも書ける)書き方があればいいのかもしれないです。

CSSをちゃんと書くためには?

継承と前景などがわかれば、無駄なCSS書かずに済むよ!みたいな話でした。
sassの設計の話もあって、勉強になりました。今から勉強する人には↓おすすめです。

z−indexを使いたい要素を配列にして、indexでz-indexの値を決めるのは目からウロコでした。z−indexってわからなくなっちゃうので、まとめて書くのよさそうです。でもsassは連想配列にも対応しているので、そちらで書いてもいいかもしれないですね。

Grid Layoutがやってきた! Flexboxやfloatとの適切な使い分け方法

Gridは大枠に使った方がいいよ〜とのことだったんですが、一度クライアントワークで使った時は大枠じゃなかったので、例に出てきたのと全然使い方が違いました。そういう使い方もあるんだなぁと。

使い分けは大変勉強になりました。

ここまでのJavaScriptスタンダードと、これからのJavaScript ES6について

今まで何度か勉強しては挫折したオブジェクト指向のことが初めてわかった気がします。
セミナーをやっているそうなので、そのうち参加してみたいです。

Gitの入門とGitを利用した共同制作方法

WordCampTokyoでスタッフやった時の委員長のメガネさんが登壇者でした。
普段Git使ってるけどgit flowとgithub flowのこと知らなかった・・・というかこういうパターンがあるとは知ってたんですが、名前ついてるのを知らなかったです。覚えてなかっただけかもですがw
懇親会に出なかったのもあって、メガネさんに挨拶できなかったのは残念でした。

CSS設計方法論とその先

知らない単語ばかり出てきて、外国語の授業かと思いましたw
いろいろメモってきたので、時間がある時にじっくり調べたいです。コーダーというよりはデザイナーやディレクター、PMなど上のレイヤーの人が聞くべきセッションだった気がします。


 

今回のセミナーの共通点(?)は「慣れるって」だったのですが、まぁ慣れますよね。
私も前の職場ではsassもgulpもgitでさえも使ってなかったですが、2年弱経った今では完璧ではないもののなんとか使えてます。ぜひとも「なれるって」ということで、試してみたいし、試してほしいです。まぁ職場に浸透させるのが無理だったら転職が必要かもですが・・・

それにしても6時間のセミナーは辛いですね。PCやスマホの電池がガンガン減ってくるし・・・女子トイレは超混みこみだし、500mlでは水分も足らないし・・・次行く時は充電器など用意して万全の体制で行きたいです。

PS:実行委員会の方、女子トイレは混むため15分休憩でもきついので、次は休憩前の連絡も5分くらいとった上でタイムスケジュール組んでいただけると助かります・・・

ニートの間に暇つぶしに読んだWeb漫画

最近転職しました。
忙しくて就業中に転職できず、しばらくニートでした。
その間に暇つぶしに読んだWeb漫画からオススメのものをピックアップします!

ぎじん課っ!ω!

ギャグ。主人公がぎじん課でイケメン?とぐだぐだ日常を送っている漫画。主人公が太ってるとか言われてますが、一体何キロなのか・・・そして同僚のぎじんの面々の体どうなっているのか・・・

きみのこえ。

ドームの外と中で生活する二人が惹かれあっていく話。ワルツという人語を操る毛玉みたいな猫みたいな何かがカワイイ

それゆけ女子高専生

高専生の日常漫画。高専って寮必須だと思っていたけど、そうでもないらしい。

でしにっき

主に江戸端唄の漫画。伝統芸能や着物、関西の話なんかもあります。
この漫画に出てくる師匠の笹木 美きえ先生をちょっと調べてみたら、かなりの美人でした。漫画そっくり〜

英国紳士と国際結婚@ロンドン

英国紳士と国際結婚した人のロンドンぐらしの話。元Web屋さんだとかでブログタイトルがSEO対策っぽくなったらしいw

猫はまたたび – GANMA!(ガンマ)

ねこが可愛すぎてやばい

まめきちまめこの日常

ニートのまめこの漫画。絵がゆるいし、話もゆるい。
たまにニートじゃなくてアルバイターになったりする

ゲルマン日和

とりあえずビール(すげえ名前だ)さんのイギリス人夫との日常漫画。
最近第二子が生まれたとのことでおめでとうございます!

Web漫画以外でオススメ


よしなが先生のご飯の絵はおいしそうすぎる

やっと3巻でた!!

この作者筆が早すぎやしませんかね・・・気づいたらもう20巻です

ブッタとイエスが仲が良い漫画が描けるとこが日本のいいところな気がします。

お嫁さんが宇宙人の日常漫画。
作者がなくなってしまって続きは出ないと思いますが、娘の成長がみたかったなぁ・・・

【jQueryプラグイン】高さを揃え&レスポンシブ対応のjquery-match-heightがすごい便利

高さをそろえる系プラグインは色々試してきましたが、最近見つけたliabru/jquery-match-height · GitHubが大変便利です。
幅が変わって横に並ぶ数が変わっても、高さを合わせてくれるのです!レスポンシブサイトを作るときは大変便利です:)

メリット

  • ・レスポンシブで列の数が変わっても、その列で自動に高さを揃えてくれる
  • ・padding,margin,border,box-sizingに対応
  • ・非表示の要素は無視してくれる
  • ・IE8+に対応
  • ・削除できる
  • ・正しいスクロール位置を維持する
  • ・必要なときに高さを更新することもできる

デメリット

デモ:jquery-match-heightデモ – js do it

【jQuery】「Uncaught Error: Syntax error, unrecognized expression: [name=]」というエラーが出たら

$('input[name='text']');

のような内側外側の引用符が同じことが原因です。
jQueryの仕様が変わって、エラーが出るようになったみたいです。

修正の方法は【jQuery】引用符とエスケープを覚える | mania-kuをどうぞ。

【Chrome】オートコンプリートのとき、背景を黄色にしないようにする方法3つ

Chromeでオートコンプリートのときに、標準では背景が黄色になります。
これをしない方法3つです。

CSSでの解決策

input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0px 1000px [背景にしたい色] inset;
}

HTMLでの解決策

<form autocomplete="off">
</form>
<input autocomplete="off">

jQueryでの解決策

if (navigator.userAgent.toLowerCase().indexOf("chrome") >= 0) {
    $('input').attr('autocomplete', 'off');
}

【Custom Scrollbar plugin】カスタムスクロールバー中のareaがスムーズスクロールしちゃう

Custom Scrollbar pluginのバージョン2.8.3を使ったカスタムスクロールバー中にareaがあると、クリックしたときにページ最下部へのスムーズスクロールになってしまいます。

bugfix

jquery.mCustomScrollbar.js内のareaの記述を削除します。
でもtextareaのほうは消さないように気をつけてください。そうすると直ります。

【HTML5】Videoが動かないときに確認すること

<source src="video/***.webm" type="video/webm">
<source src="video/***.mp4" type="video/mp4">

このようなコードでIEやChromeでVideoが動かない場合、mp4がH.264タイプではなく、MPEG4タイプかもしれません。

Macでの確認方法

QuickTIme Player>Cmd+Iのインスペクタで、フォーマットがH.264(H.264タイプ)かMPEG-4(MPEG4タイプ)か確認できます。

Windowsでの確認方法

<video>タグでmp4の動画が再生されない(解決法)(たまちゃんHTMLのおうち~作成に役立つテクニック)の方法で確認できます。

【IE】隣接したarea移動時にマウスオーバーが途切れないようにする

以下のようなHTMLとjQueryのとき、mapにareaが複数あると隣接していてもIEでは移動時にmouseoutとmouseoverが起きてしまいます。

<!--html-->
<img src="http://jsrun.it/assets/o/l/f/d/olfdl.gif" alt="" usemap="#link"><!--画像-->
<map name="link">
    <area shape="rect" coords="0,0,137,100" href="http://google.co.jp" alt="Google"><!--area1-->
    <area shape="rect" coords="138,0,275,100" href="http://yahoo.co.jp" alt="Yahoo"><!--area2-->
</map>
//js
$('map').hover(function(){
    $('img[usemap="#' + $(this).attr('name') + '"]').fadeTo(100,0.3);
},function(){
    $('img[usemap="#' + $(this).attr('name') + '"]').fadeTo(100,1);
});

解決策

jQueryの動作の前に.stop()を追加します。

$('map').hover(function(){
    $('img[usemap="#' + $(this).attr('name') + '"]').stop().fadeTo(100,0.3);
},function(){
    $('img[usemap="#' + $(this).attr('name') + '"]').stop().fadeTo(100,1);
});

【jQuery】引用符とエスケープを覚える

jQueryで引用符(シングルクオート(’)とダブルクオート(”))を使う時にエスケープが必要になるときがあります。

内側と外側同じ引用符を使って、内側をエスケープ(\)する

$('a[href=\'http://mania-ku.info\']') //シングルクオート(')とエスケープ(\)
$("a[href=\"http://mania-ku.info\"]") //ダブルクオート(")とエスケープ(\)

エスケープがめんどくさい!なら内側と外側で別の引用符を使う

こちらの方が簡単だと思うのですが、どうなんでしょうね?

$('a[href="http://mania-ku.info"]') //外側はシングルクオート(')で内側はダブルクオート(")
$("a[href='http://mania-ku.info']") //外側はダブルクオート(")で内側はシングルクオート(')

【jQuery】クリックイベントで一部だけ別の動作をさせる

下記のようなHTMLがあるときに、spanだけ別の動作をさせたいときに使うjQueryの覚え書きです。
qiitaでいろいろ教えてもらいました。

<p><span class="icon">ここは別の動作をさせる</span>ここは普通の動作をさせる</p>

クラス名で指定:$(e.target).hasClass(クラス名)を使う

$("p").click(function(e){
    if($(e.target).hasClass("icon")) {
        //.iconだけ別の動作
    } else {
        //普通の動作
    }
});

属性で指定:$(e.target).attr(属性)を使う

複数クラスを指定する場合は、.hasClass(クラス名)を使う

$("p").click(function(e){
    if($(e.target).attr("class") == "icon") {
        //.iconだけ別の動作
    } else {
        //普通の動作
    }
});

要素名で指定:$(e.target).get(0).tagName==要素名を使う

$("p").click(function(e){
    if($(e.target).get(0).tagName == "span") {
        //spanだけ別の動作
    } else {
        //普通の動作
    }
});

いちいち覚えるのが大変なときは、$(e.target).is(要素)を使う

$("p").click(function(e){
    if($(e.target).is(要素)) {
        //クラスでも、
        //属性でも、
        //要素名でも使えるので便利!
    } else {
        //普通の動作
    }
});