今日のメモ2017/12/18

pixi.js触ってみたい。 webGLにおける2D表現に強いらしい。 webGLが使えない場合はcanvasにfallbackさせられるらしい。 画像の切り替わりに関して、雲が出てきて晴れたら画像が変わっている〜みたいな表現もできそう

ics.media

前回の未解決に関して divの位置が逆転 ->現象が再現できないので一旦捨てる

画面中央に出したかったimgが50%だとずれるが100%にするといい位置にくる ->画像のサイズは関係なく、paddingが親要素にかかっていただけだった。 たまたま100%にするとpadding分ずれていただけ。 translate(50%)してpadding分ずらすことで解決。 left: 50% - 25px; ではエラーになるので left: calc(50% - 25px)で対応、

inline-blockにしてwidh:50%を二つ並べても横に並ばない

50%ずつのはずなのに横に並ばない。

htmlにおける改行が問題なので、

とすることで回避することができる。

が、改行してマークダウンしたいところなので、

としてwrapperクラスにfont-size:0をかけることで改行の分を吸収することができる。 もちろん、中の要素で文字を書く際はfont-sizeを指定しないとfont-size:0のままなので注意

basic認証 https://qiita.com/yuwaita/items/e406c645ae8d0cc3c3fa 簡単にbasic認証はかけることができた。 一度ログインすると再入場しても再び認証を問われないのはセッションに情報が保持されているから chromeにおいては履歴削除でセッションを切ることができた

ページのローディング画面を作成 今回作っているページは画像が多いので、ロードが完了するまで別の表示をしておきたい ->とりあえず$(window).on('load',function(){ });でロードを検知する。 これをはじめ、$(window).load(function(){});でやろうとしていたためエラーがでてしまっていた。

stackoverflow.com

jqueryをCDNで使おうとしたところ、タグの中にintegrityという属性があって気になった。 Subresource Integrity XSS(クロスサイトスクリプティング) を防ぐための文字列を格納しているらしい。

atomのremote-ftpにおいて、 ローカルの /MAMP/htdocs/site/以下のファイルを リモートの /works/に配置したいのに/works/site/が作られ、それ以下に配置されてしまう。 ->atomのprojectディレクトリとして、/MAMP/htdocs/を指定していたのが問題だった。 addProject で /MAMP/htdocs/site/ をprojectディレクトリにすることで/works/に直接配置できるようになった。

imgはデフォルトでdisplay:inline-block要素

インハウス <-> アウトソーシング

社内のデザイナーと連携して進める仕事を振ってもらった。 ・デザイナーの感覚値を数字にしてうまく表現するには？ ->イメージをちゃんと共有し合う ->話し合うだけでなく、photoshopで手動で動かしてもらうことも可能 ->イメージの近いサイトやページを共有し合う

自分の場合はまだ手が遅いため難しいが、簡単に実装して確認してもらうのもいいかも

1日実際に進めてみてわかったのが、 デザイナーが「こんなことはwebで表現できないかも」と思い、 アイデアを意識的・無意識的に変更してしまっている場合があるということ

僕はできることなら、デザイナーが思いついた表現は100%実装できたら良いなと思っている。 とりあえずアイデアを全部ぶつけてきてほしいと思っている。 遠慮されずにあれこれ言いたくなるエンジニアになりたい。 その上で、エンジニア目線で面白いアイデアを出せたらいいなーとも思う。 ->この辺りについては後日ちゃんとした文章で書きたい。 デザイナー向けのプログラミング入門勉強会とかしてみたい。

文字の色をグラデーションで変えたい 普通の文字なら、 color:rgba(0,0,0,0); background-image:url(); background-clip: text; で対応出来そう。 ->今回はデザインを施した文字を使うので、抜きたい部分が透明のpngを用意してもらった。 その後ろにbackground-color:lenear-gradient(); で指定。これで抜いた部分にグラデーションがかかる。 background-size:100% 200% にして、background-positionを順次変えていくことで、 抜いた部分のグラデーションがどんどん変化していくようになる。

書いた部分を抜くのを、クリッピングマスクというらしい。

transitionってどっちに書く？ -> .class{ width:100px; transition:width 1s ease; } .class:hover{ width: 200px; transition: none; }

とすることで、 通常100px -> hover -> すぐに200pxに -> leave -> 1sかけて100pxに

変更後にかかっているtransitionのルール(hoverした時なら:hover内のnone)に応じたアニメーションが施される。 よって、mouseleaveすると:hoverがなくなるので、width 1s easeのルールでアニメーションする。

今日のメモ2017/12/15

今日はcssと格闘しつつ、 画像切り替えのおしゃれかっこいい表現を探した日になった。

中身が全てdisplay:noneになっていたため高さがなく、divの位置が逆転？？　 min-height:1pxを挿入で対応 ->再現できなくなっているので後日再確認 -> komepiyo.hatenablog.com

隣接セレクタ p + ul{ color:red; } なら、

    のようなpの直後にあるulのみ、color:redが適応される

    画面中央に出したかったimgがずれる position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); でやったがずれる。 -100%にすると思った位置に表示された。 32pxの画像をとしているのが問題？ ->後日再確認 komepiyo.hatenablog.com

    ビデオ会議zoom www.nelco.com slack連携させてで社でも使えるようにする？ という話があがった。

    cssが散らかってきたのでどうにかしたい。 新機能を追加する際に特定の要素をhtml上から消すことがあるが、 その要素にかかっているcssがcommon.css上にある場合は消しておきたい。 しかし、他のページでも同じセレクタでルールが適応される要素があったらスタイルが崩れてしまう。 怖いので残しておく、が続くとどんどん無意味なcssが量産されてしまう 何かしらのツールを使って整理するべきな気がする。

    imgをdivで囲んで枠を作る divのwidthを決めて、height:autoにしてimgのwidth100%とか

    foreachについて javascriptはarr.foreach( function(idx,val,arr){} ); jqueryは$obj.each( function(idx){} );

    jqueryのクラス指定でドットつけわすれがち

    vhについて勉強する https://dev.classmethod.jp/ria/html5/css-length-viewport/

    hoverは $obj.mouseenter(func).mouseleave(func);

    http://mypro.co.jp/ ソースにコメントも豊富なので参考にしたい

    javascriptのdefferedとかpromiseとか勉強したい

    Pjaxについて勉強したい

    いい感じのサイト

    2017wrapped.com のカーソルが可愛い

    taotajima.jp とにかくいかつい 全てが良い

    www.mdcenter.co.jp 文字の変わり方が面白いのはもちろん、戻り方も好き T<->Iボタンがいい スクロールが思ったより激しい

    vimeo.com ノイズ感かっこいい

    codepen.io anime.jsアツい、遊びでも使いたい

    www.kungyokudo.co.jp のスライドでスライドするまでの時間がわかるのは新鮮

    https://www.clicktorelease.com/code/css3dclouds/www.clicktorelease.com 雲がでてきて画像切り替わるのいいかも

    tympanus.net これもいい

    今日のメモ2017/12/14

    出社直後、

    「清水幹太さん知ってる？」と声をかけられた。

    www.cbc-net.com

    ブログも面白いから是非読んでおけ、とのこと。

    東京とNYに社を構える株式会社PARTYのクリエイティブディレクター

    prty.jp

    で、30代手前から本格的にプログラミングを始めたというのも驚き。

    dotFesというイケイケなイベントで代表は一度清水さんと出会ったらしい。

    www.dotfes.jp

    CDC-net 清水さんもブログを書いている、クリエイティブ系の情報発信メディア

    www.cbc-net.com

    ナウい話などはこういうとこをこまめにチェックするところから始めたい。

    業務面では、今日はhtml/cssにおけるマージンに苦しめられた１日だった。

    親子関係にある要素がそれぞれマージンを持っていて、他の親子と隣り合う時 ->親要素同士は設定したマージンを取る ->親の中に子要素{ margin-bottom:20px; }をたくさんおくと、始点以外親要素を無視して拡張していく ->違う親を持つ子要素同士は干渉し合わない

    ==>同じ親を持つ要素同士でマージンが効く

    sassで、親セレクタを選択する方法 .child{ .parent &{ margin:10px; } }

    ==>

    .parent .child{ margin:10px; }

    となる。

    ついに名著と名高いリーダブルコードを買ってもらったので読み始める

    元文系がフロントエンドに転身して0ヶ月経った話

    つい最近転職して、web系のデザイン会社でフロントエンドエンジニアになりました。

    僕は高校・大学と文系まっしぐらでした。 そして大学三年生、就活が始まって割と早い段階で

    「このまま何社も落ちて、やっと受かった数社の中から一社選んで、身を粉にして働いて...」

    と自分の未来が垣間見えた瞬間になんだか嫌になって

    「一人でメシを食っていくんだ」

    とひねくれただけではなく、アプリ開発が流行っていたことから

    「そうだアプリで一発当てよう」

    と安易な発想をしてしまいます。

    そしてよくわからないまま買った書籍を参考に、 親に頼んで買ってもらったmacbook airでアプリ開発を始めました。

    学校の図書館の学習スペースが作業場でした。

    そして3本のゲームアプリを開発しました。 ・ターバンのカレー屋 ・All Zero ・make 10 というタイトルです。 iOS版はもう配信されていませんが、Android版はGooglePlayでダウンロード可能です。

    しかし目論見は外れ、全然稼げませんでした。

    そのとき季節は春、同期はみなピカピカの新入社員になっていました。

    一方の僕は、茹でたパスタに醤油をかけて食べていました。 洗顔フォームを手でもこもこに泡立てる練習をしていました。

    「次こそしっかりしたアプリをつくるんだ」

    と、いくつかアイデアはあったもののどう実装していいのか分からず、台所と風呂場に逃げ込む日々でした。

    そんな頃、貯金がなくなります。

    働かねば！！！ 最近よくあるカッケーサイトとか作れるようになりたいな！！ そんなのできたらアプリとかも余裕なのでは？？ お金ももらえてプログラミングも勉強できたら最高では？？

    と思い、検索して最初に出てきたweb作成会社に電話をかけます。

    「業務未経験か〜レスポンシブとかいける？」

    レスポンシブ...？当時本当になんのことかも分からなかったので、なんですかそれと聞き返すと笑いながら電話を切られました。

    やばいぞ、パスタさえ食べられなくなるぞと泣きそうになっているところで、 「実務未経験ok!自社サービスの開発・保守」とうたっている会社を見つけます。

    面接に行き「オブジェクト指向プログラミングってどんな感じか説明できますか？」と聞かれ、 なんですかそれと言って笑いながら追い出されても困るので、 いつかどこかのサイトでみた車の設計図が〜〜みたいな話をうろ覚えで話した記憶があります。

    完全独学のド素人だったことはバレていましたが、なんとか採用してもらえます。

    ちなみに自社サービスは、 お金のある(?)男性がネットを通じて女性とやりとりする際に、少しばかり手数料をいただくサイトです。

    業務ではフロント部分も全く触らないことはありませんでしたが、 ほとんどがサーバーサイドで、DB設計なども行っていました。 しかも独自のフレームワークを使用しておりググっても分からないことだらけでした。

    しかしながらエンジニアの先輩がとても良くしてくれたおかげで、 楽しく働けた上に美味しいご飯も食べられるようになりました。

    そして2年が経ちます。 職場に不満があったわけではありませんが、2年間を目処に転職しようとどこかで考えていました。 なので、辞めました。

    転職先は決まっていませんでしたが 「とりあえず貯金を使ってのんびりしよう、お金がなくなったら火がつくだろう」 と楽天的な考えでした。

    そして約半年後。海外旅行に行ったり悠々自適な暮らしをしていたせいか、お金がなくなります。

    たまたま近くで開催されたデザイン会社の合同説明会イベントに参加し、 そこで出会った会社にフロントエンジニアとしてめでたく迎え入れ(?)ようとしているところで、現在に追いつきます。

    今までは自社伝統の(古い)独自フレームワークを使ったサーバーサイドの業務ばかりだった僕が、 今度はwebデザイン会社です。

    知識と実力を兼ね揃えたデザイナー陣に囲まれ、 ナウくてカッケー動きを追求したフロントエンドプログラミングを行っていく必要があります。 さながら浦島太郎状態です。 飛び交う単語も分からなければ、この会社が業界でどんな立ち位置かもあまりわかりません。

    勤め始めて数日が経ちますが、分からないことだらけです。 しかし曲がりなりにもプログラミングをかじってきた訳ですから、全く太刀打ちできないという訳ではなさそうです。

    そして今日、代表とお昼ご飯を食べていた際に「アウトプットアウトプットアウトプット」と言われたので、 なんだか使命感にかられ筆をとった次第です。

    このブログでは元文系で別分野からやってきた僕なりの視点で、 フロントエンドにおける知識をはじめ、デザイン業界の仕組みなども含めて その日に覚えたことや気付いたことを記事にしていけたらいいなあと思っています。