読者です 読者をやめる 読者になる 読者になる

みえのじゆうちょう

ゆるふわエンジニャー

なーにが、ゆるふわフロントエンドガールだ

雑記

ぬっころすぞ。
と1年前の私へ。
xxscaportolonoxx.hatenablog.com

紆余曲折も紆余曲折。
去年の今頃の私はこうなるとは思ってなかったようですね。
日本の文化ではあまりターニングポイントを置かないほうが好いとされる年なのですが、置いてやった。知るか。

Go始めましたの記事でも少し触れましたが4月より異動し、ガチエンジニアの道を這っております。
異動してもう5ヶ月、早い。ここから1年も早い。そしてあっという間に歳を取る。童顔なのがせめてもの救い。血筋よありがとうございます。

という感じ。来年はまた変な転向かましてるかもしれないですね。

f:id:xxscaportolonoxx:20160911002328j:plain

こんにちは世界が表示されるまで

Go

ブラウザで「こんにちは世界」を表示してみよう的な処理を覚えたのでまとめ。
http.Handlehttp.HandleFunchttp.ListenAndServe周りのメモです。

Recipe

  1. パスのパターンと処理の組み合わせを登録
  2. サーバ処理を開始。
    (サーバはリクエストを受け取り、1で登録されたパターが存在すれば実行)

たったそれだけ。これをコードにすると

// 1. パスのパターンと処理の組み合わせを登録
http.HandleFunc("/bar", func(w http.ResponseWriter, r *http.Request) {
    fmt.Fprintf(w, "Hello, %q", html.EscapeString(r.URL.Path))
})
http.Handle("/foo", fooHandler)

// 2. サーバの処理を開始
http.ListenAndServe(":8080", nil)

以上。

ですが、それぞれについてもう少し深く調べたので続けます。

続きを読む

Go言語、はじめました

Go

現在サーバサイド技術を修行中で、Perlをふんわり学習していたのですが、紆余曲折ありまして5月からGo言語を扱うことになりました。

過去にゆるっと経歴を書いたのですが、私のサーバサイドスキルは

  • iisreset なら知ってる
  • ASPは多分わかる
  • SQLは忘れかけてるけど書けると思う

という有様。
言語経験はほぼJavaScriptオンリー。
(VB.NETとか書いてたけど忘れてるので除外)

不安要素は大きいです。不安しかない。
まあ、なんとかなるでしょ。
というアレで、早1ヶ月です。まだまだ発展途上。
果たして、Goを会得してサーバサイドエンジニアになれるのかなれないのか。

とりあえずはじめました。

ここを上からわ~っと見た。 techstars.jp

あとここも開きっぱなしにしてます。 qiita.com

とりあえず何を書いてるのか、位は読めるようにはなりました。
が、
異動したての頃にまずはPerl読んでますって話をしてて。
読んでるだけじゃダメでしょ、書かないと。
って叱咤頂いたのを思い出して、実装してみることに。

とは言え何をどう始めたらいいのかわからないので本を買いました。

Go言語によるWebアプリケーション開発

Go言語によるWebアプリケーション開発

これをちまちまと。書いてあることが飲めるまで次に行かない、という感じなのでだいぶ進捗悪いです。
しかし理解する量が違う。やっぱ手を動かしながらじゃないと、という実感。

そんなこんなで、たくさん躓いているのでそこを記事のネタにできたらなあと思っております。
今回は、最近雑な記事ばっかりだったのでとりあえずちゃんと技術やってるよって言うアピールです。
CSSもしばらく触れてないけど書きたいです。
言うだけタダですので言わせてください。

おそまつさまでございました。

音楽の話

雑記

ヴィジュアル系が好きです。
といえば「あーーー」と納得されバンギャ*1と呼ばれ。
あながち間違いじゃないですけど8割別のジャンルを聞いてるんだよ!!信じて!
という記事です。

…動画を7枚貼りましたので重たいです。

Jazz

Marcus Miller / Run For Cover

Jazzを聞くきっかけとなったアーティストです。他にもジャコパストリアスビル・エヴァンスなどなど。Jazzはジャンルが広いです。ビックバンド系も大好きです。

Electro Swing

Caravan Palace / Rock It For Me

たまたまヴィレヴァンで出会ったジャンルです。カフェっぽい感じ。Listen to Electro Swing Music - Jazzandrain.comここ聞きながらよく仕事をしてます。

Bossa Nova

イパネマの娘

ラテン、ボッサはフルートやっていたので昔良く買い漁りました。癒やしです。仕事がはかどります。

Fusion

Level42 / Mr.Pink

このジャンルが一番選ぶの苦労した。イントロのソロ、たまんないですよね。繰り返し見てください。Weather Report - Birdland - YouTubeこれもすごく好きです。

Func

Graham Central Station / Pow

とても古い曲なのですが思い出しては聴いてます。ベースはスラップの生みの親、ラリー・グラハム氏。

Rock

Les Claypool / Lust Stings

宗教的な感じがすごく好き。hentai。ヴァリトンサックスを入れてくるあたりも好み。

吹奏楽

ジャパニーズ・グラフィティ9 いい日旅立ち

吹奏楽は音楽に触れるきっかけになったものなので外せないし、選びきれない。機会があればまたフルート吹きたいですね。

いかがでしたか。
おわかりいただけましたでしょうか。私がどれだけBassが好きか。
紹介しきれてないベース曲もあり、すごく残念です。

人にオススメ曲詰め合わせCDを作り最後にネタを仕込んで押し付ける、というのが定常業務でした。
そういうのをいただくのもまた好きで、そのおかげだと思います、ここまでジャンルが広いのは。
まだまだ偏ってはおりますが、余裕を見つけてタワレコ行ってジャケ買いするやつしたいですね。

暇つぶしに付き合っていただきありがとうございました。
これいいよ!って言う音楽あればぜひ教えて下さい。

*1:V系が好きなギャル…そんな年じゃないからオバンギャだわ私

あれを買ってなにした話

雑記

ジメジメとした季節がやってきた模様。
湿気でいろいろ鈍るので梅雨は早々に去っていただきたい所存です。

f:id:xxscaportolonoxx:20160605143324j:plain

先月MacBookを購入しました。
それまでアルミの塊*1インターネッツをしておりました。
2年ほど前は持っていたのですよiMac、夜な夜な調べ物&もくもくして睡眠不足で体ぶっ壊れたので泣く泣く撤去したのです。

が、

今年度からサーバサイドもやっていくので流石に勤務時間だけじゃ追いつけないと思い購入。
MacBook、小さい軽いなにこれ。普段使ってるクラッチと変わらないじゃないの。いつかぶん投げてしまいそうだわ。
というわけでしばらくは節約生活です。

マシンを買ったら環境あれこれがたのしいです。
惰性で使い続けてたvimrcを見なおして*2みたり、新たにtmuxなど入れてみたり。
tmux、良さそうです。可愛くなりました。

f:id:xxscaportolonoxx:20160605143332p:plain

まあ、そうなると寝なくなりそうですが、以前よりはマシな感じ。
というのもラップトップなので気が付いたら寝落ちてる。そして眠りも深い。
ここ数ヶ月以上寝付けない&睡眠浅くて悩んでたんですけど改善してるので、あとは運動不足の改善をすれば超健康じゃないですか。やったね。

あとの楽しみは筐体にステッカーを、と思っていたのですがあまり気が進みません。
アルミ彫刻なるものがあるらしいのでどなたか描いてください。最高にダメでシュールな奴。
キーボードにカバーをかけるかも悩みどころ。長く使っていきたいんだがウムー。

と言った具合です。
幸せな悩みですね。

ちなみにvimrcとかtmux.confはgit*3においてたりするので興味があればどうぞ。
GitHub - scaportolono/dotfiles: dotfiles

おそまつさまでございました。

*1:妊娠してデスクトップ化したMBP Late2006。Chrome立ち上がらないしSafariも古いし

*2:結局変わらなかった

*3:dotsfileしかない寂びた感じの

やむを得ずアレを始めた話

雑記

お久しぶりです。
春ですね。

CSSの話もせず雑談です。

紆余曲折ありまして、この春からお昼ごはんを自炊するという事になりました。
料理自体は好きなのですが、お弁当は好きにはなれず。
というのも

お昼ごはんは午後のモチベーションに大きく関わりますので、食べたいものを食べたいわけです。
しかしお弁当というのは基本作りおき&夕飯の残りで構成されるものが大半です。私は夕飯食べない作らない上に、絶望的に飽きっぽいので作り置きメニューは耐えられないしソレならばウィダーでカロリー得ますわって言う選択肢になります。確実に。

という絶望的にわがままな理由から。
ですので基本作りおきはしていません。

が、夜30分+朝30分足らずで準備しております。
(身支度に2時間かけており、ソレを削れよっていうアレもありますが…)

弁当は嫌、毎日食べたいもの食べたいけど時間かけてらんない。
そんな我儘を程よく叶えてくれるのがスープジャーという奴です。

使い方は単純で、中身にもよりますが、

  1. 具材を入れる
  2. 熱湯を入れて具材を温める(2分)
  3. 湯切りする
  4. 調味料、スープの素など突っ込んで湯を入れる
  5. 3〜4時間ほどで食べごろ

だいたいこの手順で好いのです。
具材は一緒でもスープが変わるだけで違う料理になります。
応用としてお米を入れてリゾットやおかゆ、パスタを入れてスープパスタなどなど。
というクレバーな子なのでおすすめしておきますね。

サーモス 真空断熱フードコンテナー 0.38L レタス JBI-380 LET

サーモス 真空断熱フードコンテナー 0.38L レタス JBI-380 LET

私が所持しているのはこれ。

他にはスコーンを焼いてたりするのですが朝夜の30分の準備時間の殆どがソレですので実質10分あれば昼ごはん作れますよっていう話でした。

…昼ごはんには少ないのかもしれない。
ので余裕があればおにぎりを作って冷凍したりするのも好いですね。飽きるけど。

はい。お粗末様でございました。

最後に、近況が変わりましたのでご報告。
にわかフロントエンドエンジニャーとして仕事しておりましたが、この4月よりサーバサイドも覚えていくことにいたしました。
見習いエンジニャーです。
どうぞ今後ともよろしくお願いいたします。

CSSプロパティを深堀する話[z-index篇]

css

いやいやそんな話ググればありふれてるでしょって思いながらも。
仕様書読んだり色々調べて得た物をメモとして残そうって思いまして。

今回は、ウェッブが盛んになってきた頃には既にいた筈なのにCSS3が出て5年経過した今でもあまり理解されない感じがぷんぷんしてる子について今日はまとめてみようかなっていう。
私自身も使う機会が今までほんと少なかったのでゆるふわにしか把握してなかったので。改めて。

z-index

概要

  • Level2から追加された子
  • static以外のpositionプロパティが設定されている要素の重なり順を整数値で指定
  • [z]というのは3次元座標のアレです、xyz
    奥行きを示すz座標です。値が大きくなればなるほど手前にきます。

以上です。
という訳にもいかないので続けます。

スタッキングという概念のお話

要素に奥行きをもたせて重ねて行くことをスタッキングと言います。
スタッキングには決められた順序があるのですが、その前にスタックコンテキストスタックレベルについて

スタックコンテキスト

positionプロパティでstatic以外が指定され、z-indexにauto以外の値が設定された要素のこと。
スタックコンテキスト内のすべての子孫要素にそのスタックコンテキストを基準としてスタッキングの順番が割り当てられます。
子孫要素もまた、スタックコンテキストとなることができます。

スタックレベル

z-indexの値のこと。
z-indexは0を基準として-2147483647〜2147483647の値が設定できます。
z-index:autoのばあい、スタックレベルは0と見なされますが、スタックコンテキストにはなりません。

スタッキングの順番*1

  1. スタックコンテキストが整形する要素の背景とボーダー。
  2. 負のスタックレベルをもつ子スタックコンテキスト(最も小さな値が最初になる)。
  3. フロー内、非インラインレベル、非位置指定*2の子孫。
  4. 非位置指定の浮動体。
  5. インラインテーブルとインラインブロックを含む、フロー内、インラインレベル、非位置指定の子孫。
  6. スタックレベル0をもつ子孫。
  7. 正のスタックレベルをもつ子スタックコンテキスト(最も小さな値が最初になる)。

という基準にならって要素がスタッキングされます。
同じスタックコンテキストに存在し、スタックレベルが同じ要素は、HTMLで後に記述された物が上に配置されます。

まとめると

  • z-indexはpositionでtop/right/left/bottomと同様に重なりを変更できるプロパティ
  • なのでpositionはstatic以外を設定する必要がある
  • z-indexの値は大きければ大きいほど手前に来るよ
  • ただしそれは同スタックコンテキスト内でのルール
  • いくら999999999とか設定しても親スタックコンテキストのレベルが低ければ親兄弟要素のレベルは超えられません

See the Pen z-index sample by scaportolono (@scaportolono) on CodePen.

という感じ。

ですが
ちょっと困った奴らがいる訳です。

イレギュラーなスタックコンテキスト

以下の要素はz-indexをauto以外に指定しなくてもスタックレベル0のスタックコンテキストになります。

  • html要素(ルートスタックコンテキスト)
  • positionプロパティでstatic以外が設定された要素(位置指定要素)
  • opacityプロパティで1未満の値が設定された要素
  • transformプロパティでnone以外の値が設定された要素

イレギュラーとはいえ、上2つは何となく知ってる気がすると思います。
positionプロパティは、static以外を設定しないとz-index使えないということですし、
bodyにz-index設定してないにもかかわらずbody直下のdivがスタッキングできちゃったりするのはルートスタックコンテキストがいるからだったりするのです。

こんなところです。
ちょっとだけ引き出しの中身が増えました。
そこで新たに考えるのはz-indexの設計について。
twitterでもちびちび書いたんですが、画面IDのごとく10100とかって良策なのどうなのっていう。
いや私も他にいい案がひねり出せなくてこの手法で設計してるんですが。。
結局はドキュメントにちゃんと書き残そう;;ってことですよね。
仕様書大事。

気が向いたら別のプロパティも深堀します。
言うほど深くなかったケド。
お粗末様でした。

20160216:指摘いただき、イレギュラーなスタックコンテキスト最後2つ修正しました。

*1:W3C,CSS2:9.9.1より抜粋

*2:非位置指定:positionがstaticまたは設定なしの要素