.log

ドットログ。思いついた、調べたメモ。主にフロントエンド、たまに写真とか料理とか。

El CapitanにMySQLをHomebrewで入れたよ

MySQL

なんか、普通に入れりゃいいじゃんって感じなんだけどちょこちょこ止まったのでメモ。
$ brew install mysqlで入れてMySQLコマンド使うとcommand not foundとか言ってくる、なんでじゃ。

どうやらインストール前に$ brew updateしないといけない模様。。。
でもそもそもそのコマンドが通らない、死
El Capitanのセキュリティ強化でどうのこうの問題のせいらしい、またお前か。

一旦MySQLをアンインストールしてから以下の手順でもごもご 。

1. なんだかの実行権限変更する

$ sudo chown -R $(whoami):admin /usr/local
$ cd $(brew --prefix) && git fetch origin && git reset --hard origin/master

このまま実行でよい。
https://github.com/Homebrew/legacy-homebrew/issues/49879

2.Homebrewをもごもごする

アプデができるようになる、はず。

$ brew update

その後続けてこれも。

$ brew upgrade

更新があるパッケージのリビルドをしてくれます。

3.MySQLをインストール

これでやっとインストール。

$ brew install mysql
[省略]
$ brew info mysql

infoコマンドで一応確認。

こんな感じで。

UXデザイン勉強会 小習編に参加してきました

勉強会

これです　第1回フロントエンドかけこみ寺 UXデザイン勉強会 小習編
今回はスタッフとしてではなく生徒として参加してきました( ˘ω˘)
（下書きを保存してから半月以上経ってしまった……）

当日の詳しい様子はこちらのtogetterで　第1回フロントエンドかけこみ寺 UXデザイン勉強会 小習編
今回はハッシュタグツイートマンが三人居たのでまとめてみました。

会場の様子

私の髪の毛がやはりとても目立っています。

もろもろ感想

個人的には、前職で自社サービスを作っていたこともあり比較的馴染みのある内容をワークショップで改めて学ぶ、って感じでした。
実際にサービスのUXについて考えることはあっても、「そもそもUXとは」みたいなことを深く考える機会が少なかったように思います。
ワークショップ形式だったのも、人が思ってることが聞けて個人的には好きです。（話してくれる人がいれば…黙っちゃう人とか、居るよね……）

内容に関してもうちょっとちゃんと記録をとっていてもよかったかなぁ、と思いました。

前回のReact勉強会とは違ってハッシュタグツイートマンが私含めて3人ほど居たので、タイムラインが楽しかったです。
UXについて考える行為の重要度がここ数年上がっている感じがあるので、とてもよいことだなぁと思っています、まる。

Reactハンズオンのお手伝いをしてきました

勉強会

これです。
f:id:atsuco02:20160808210612p:plainReactハンズオン初等部編
アイキャッチを作ったり開催のお手伝いをしたりしました( ˘ω˘)
開催の経緯などは主催者のむろさんの記事で。

当日は、スタッフ兼チューター（仮）として働いてきました。
受付をしたり、懇親会の手配をしたり、Twitterのハッシュタグで（自主的に）つぶやいたり。

個人的には、勉強会のハッシュタグツイートは結構好きなので、どんどんやっていったらいいと思います、楽しい。
チューターと言っても、スタッフ業務がある＋私自身がチュートリアル止まりだったので大したことは出来ず。
一緒にスタッフをやってくれたるみさんに、nodeのインストールからコードのコピペを指南するマンツーマンをしていました。

るみさん「ここはどうすれば！？」
わたし「とりあえずコピペしときましょう！！」

果たしてチューターとしてこれでよかったのか( ˘ω˘)

次回の初等部編は9/17とかにあるそうです。
きっとReactがなんとなくわかるようになるので、みなさん是非。

ちなみに当日夜私は終電を逃し、疲れてるであろうメンターのお二人を強制的にオールさせたのでした( ˘ω˘)
大変申し訳ありませんでした。

会社を退職しました、という話

雑記

6月末最終出社、7/21付で退職しました、所謂退職エントリです。
特に書く気もなかったのですが、先輩が書け書け煩いのでメモ程度に。

なにをしていたのか

3年ほど、恵比寿にある某SNSマーケティングの会社に勤めていました。
主に、社がメインで開発・提供しているサービスのフロントエンドエンジニアをしていました。
といっても、長く続いているサービスかつ分業がはっきりしていたので、
やっていることはマークアップエンジニアとフロントエンドエンジニアの中間のような感じでしたが。

しばらくしてフロントエンドを担当する人が増えたので、
有志（？）のチームを立ち上げて技術共有のMTGをしたりツールの導入をしたりもしていました。
その時の話はこちらでぼんやりまとめています→フロントエンドチームを立ち上げて2年くらい経ちました

なんで辞めるのか

特に大きくこれといった理由もないのですが、
個人的に「私が会社に提供できるものはリソースしかないし、会社が私に提供できるものは社会的信用と賃金だけである」と思ったからです。
不満があるわけでもないですが、技術者として楽しいかと考えたら特に楽しくないな、と。

余談ですが、会社の一部では「通勤が辛いから辞める」と言ったことになっているようです。
あながち間違ってはないですが、それが全てでもないよ……

これからどうするのか

最終出社日からこっち1ヶ月ほど、有給消化の名の下に自堕落な生活を続けています。
幸いちょっとした仕事を頂いたりして、睡眠とコーディングが7：3くらいの生活です。
どこかに就職することも考えて幾つかお話を伺ったりもしたのですが、
特にどこかに決まることもなかったのでこのままフリーランスという形をとることにしました、お仕事ください。
Webデザイナーとかフロントエンドエンジニア、とか名乗っていこうかな、と思っています。

2年位はぼんやりフリーランスとして過ごしたいなと思いつつ、気分が変わればまたどこかに所属するかもしれないし、
性に合っていれば1人でそのまま法人化するなりしてやっていくだろうな、といった感じです。

contenteditableを使う

HTML CSS

input/textarea以外の要素も編集可能にするcontenteditable属性なるものを知った。

ここは編集可能

 <div contenteditable="true"">ここは編集可能</div>

こんな感じ。改行すると要素の大きさに合わせてエリア自体も大きくなる。
「入力に合わせてテキストエリアの高さをもごもごする」記事では、テキストエリア要素を自動でリサイズしたけど、こっちのほうが使い勝手がよさそう。
（※ contenteditableで大きさが変わるときは、transitionでアニメーション出来ない）

contenteditableが持つ値

contenteditableはtrue/false/inherit/空文字の値がとれる。

true・空文字 false inherit
編集可能 編集不可 親要素の値を継承する

ここは編集できない編集可能テキスト編集可能テキスト

<div contenteditable="true""><span contenteditable="false">ここは編集できない</span>編集可能テキスト編集可能テキスト</div>

基本的には親要素の設定を引き継ぐけど、contenteditable="true"の要素の中に contenteditable="false"の要素を入れることもできる。
その時はfalseにした要素の中身は編集できないけど、falseにした要素の存在自体は編集できるので
BackSpaceでテキストを消していくと、falseにした要素はぱっと消える。


使いドコロとしては、SNSとかで使うメンションとかがいいんじゃないかと。

atsuco.a別はボーのかっこう頭めへ硝子をもっ曲だた。いやしばらくいいかげんたないというセロたた。気の毒ないましんたはましそこでゴーシュのだめ屋のうちがはやっとばかましたて、それなんか狸をなおしがっんました。
メンションの予測変換とかを上手く付けられればよさげ。

placeholderを付けたい

textarea的に使うならplaceholderを付けたい。
が、placeholderは一部のinputとtextareaにのみ有効なので、データ属性でどうにかする。 

<div contenteditable="true" class="editablePlaceholder" data-placeholder="placeholderテキストが入る"></div>

.editablePlaceholder[contenteditable=true]:empty:before {
	position: absolute;
	top: 2px;
	left: 5px;
	color: #aaa;
	content: attr(data-placeholder);
}

contentプロパティの値には要素の属性値を取ることもできるので、data-placeholderという属性を持たせて擬似要素に突っ込む。
擬似クラスの:emptyを併用して、要素の中身空の場合のみ表示させる。

入力値の改行

contenteditable="true"の要素内で改行をすると、改行された文字ごとにdivもしくはpで囲まれる。
Chrome / Firefox / Safariではdiv、IEではpになるよう……謎。
入力されたコメントを保存する時にbrに置換するなりしないと、ユーザーのブラウザによってデータに差異が出ちゃいそう。。。

更に、最初の改行までの文字はdivもしくはpで囲まれずにただの文字列として打ち込まれるので、
複数行入力するとこんなことになる。

<div contenteditable="true">
一行目のテキストほげほげ
<div>二行目のテキストほげほげ</div>
<div>三行目のテキストほげほげ</div>
<div>四行目のテキストほげほげ</div>
</div>

これを回避するには最初から空のdivを入れておくと良さそう。


<div contenteditable="true">
<div></div>
</div>

見た目は特に変化がないけどこうしておくと、一行目のテキストは用意されたdivに入り、二行目以降が新しく生成されたdivに入るようになる。

でもこれを使うと、要素の中身空の場合のみ表示させる:emptyが使えなくなるのでplaceholderの表示方法をJSとかで調整する必要がある。
classで擬似要素の有無を制御しつつ、要素に対してキー入力があった場合に中のテキストを取得→空ならclassを付けてplaceholderを表示する、とかね。

IE謎の空白文字問題

一度入力した文字を全て消した後に、入力エリアに半角スペースが幾つか出現する自体が発生。
どうやらインデントに使用していた半角スペースが出てくるらしく、contenteditable="true"に子要素をもたせる場合はインデントを付けないようにしないとおかしなことになる。

<div contenteditable="true"><div></div></div>

入力に合わせてテキストエリアの高さをもごもごする

Java Script

改行文字が入力されたら、とかはあったんだけど、単純に文字の折り返しでも高さを調節して欲しい。
ので、書いた。

function textareaResize(event) {
    var target = event.target;
    var targetPadding = 0;
    targetPadding += parseInt(document.defaultView.getComputedStyle(target, null).paddingTop, 10);
    targetPadding += parseInt(document.defaultView.getComputedStyle(target, null).paddingBottom, 10);
    if( target.scrollHeight > target.offsetHeight ){
        target.style.height = (target.scrollHeight + targetPadding) +'px';
    }
}

これを外部ファイルにするなり、何処かに記述するなりして、

<textarea cols="30" rows="3" placeholder="なにかかく" onkeyup="textareaResize(event)"></textarea>

もごもごしたいテキストエリアをこう。

textareaにbox-sizing: border-box;を使っている前提なので、上下のpaddingを取得してくっつけてあげないと妙なスクロールが出たりする。
CSSでtransition を付けてあげると、ぬるっと大きさが変わってちょっと気持ちいい。

単純に、テキストエリアの表示の高さと中身の高さを比べて、中身のが大きければ表示の高さを中身に合わせるだけ。
paddingの取得部分、element.styleはインラインのスタイルしか取れないので、読み取り専用のgetComputedStyleを使う。
（古いIEだと対応してないみたい）
getComputedStyleについて詳しくはこちら

d.hatena.ne.jp

動作サンプル

WPのfeedが上手く取れなかった件

あるカテゴリのfeedだけ、本文の途中で真っ白になる事案が。
炙りだしなの…？
feedの内容を見ると、記事自体は取れている模様。
XMLのパースでコケてるのかと思ってエディタにコピペしたら

f:id:atsuco02:20160328154615p:plain

[BS]って、お前誰だ。
消したらfeedは正常に取れました。