【Linuxコマンド】grepとsed
久しぶりの更新となりますー。
社会人２年目となり、「フロントエンジニア」から「バックエンドエンジニア」にジョブチェンジしました！！
と、いうことでこちらのメモ書きにもバックエンドよりのことやコマンドラインべ―スの記事が増えて行くと思います。
出来ればフロントエンドの技術も活かして、総合的な開発をやっていきたいとは思います。
一応の今後の触れたい技術の展望としては、
1.Jenkins ←（強く志望）
2.AWS（ec2）
3.GHE
4.シェル
5.サーバー構築
とかをやっていこうかなーと思います。
AWSは自前のサーバーがそろそろ換え時かと思いまして、思い切ってCloudに飛び込んでみようかと。
ゆくゆくはWeb系のサービスと連動して、とかやろうかな…
前置きが長くなったので、本編はささっとやりたいと思います。
最近使ったコマンドをちょちょっと。
1.ファイルからエラーや文字を「行」単位で検索する
cat ファイル名 | grep '検索文字'
2.ファイルの中身を検索して置き換える
この2つは柔軟性があるので、今現在重宝しています。
2番の方だけ、catするファイル名と書き出すファイル名が同じだとエラーが起きたので注意。
今日は簡単にこの辺で。
【css】どこまでselectをデフォルトの状態で装飾出来るか
納期に追われて時間が無かった為、久しぶりの投稿となります。
今回は、簡単なことでしたが、随分とハマってしまったselectの装飾をメモしたいと思います。
目的
「デフォルト状態」のデザインを弄らずに装飾を行いたい
先に結論から言うと、この「デフォルト状態」ってのミスリードを誘った原因です。こいつが厄介だったわけですね。
何を勘違いしてハマったかは今回のテーマにも関係していくので、順々に分かり易く伝えられたらと思います。
通常selectをレイアウトするには？
まず先に述べておきますが、通常デザインされていないselect（プルダウン）を用いることはあまりないと考えていいでしょう。
なのに何故デフォルトを装飾する必要があるのか？
それはデザイン資料が足りず、最低限のトンマナを揃えて表示しておく時など、特定の要望があった場合に限られると思います。
なので今回は特殊なケースとなりますが、覚えておいて損はないと思います。
話を戻して、まずは通常selectを装飾する簡単な例をメモ。
HTML
<span>
<select>
<option>テストボックス</option>
</select>
</span>
span {
position: relative;
display: inline-block;
width: 200px;
border: solid 1px#bfbfbf;
}
span:after {
content: "\25BC";
position: absolute;
top: 50%;
right: 0px;
margin-right: 5px;
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
z-index: -1;
}
select, option {
width: 100%;
height: 30px;
line-height: 30px;
padding: 0px;
margin: 0;
text-indent: 1em;
background-color: transparent;
border: none;
-webkit-appearance: none;
-moz-appearance: none;
-ms-appearance: none;
appearance: none;
}
さて、ここは 本題とはあまり関係ないので説明はサックリと。
selectにデザインを装飾する場合はappearanceを用いてデフォルトレイアウトをリセットします。
で、selectに色々付いている背景色やborderやらのデザインもリセットして、
appearance:noneで消えてしまった矢印アイコンをspanのafter要素として作成します。
(※selectやinputにはbeforeやafterは設定出来ません。)
もちろん、文字化け防止の為のencodeやらクロスブラウザ対応の為の-webkitなどの表示は行うことは前提で行きましょう。
ここを細かくさらうと一つの記事が書けてしまうので、そこはまた今度。
ちなみに上記の設定をするとこんな感じに表示されます。
そもそもデフォルト状態とは？
デフォルトの見た目はブラウザ毎に異なりますが、大体はこんな見た目ではないでしょうか？
ですが、このデフォルトデザイン、appearanceを用いなくても他のbackgroundやborderを変えるだけで簡単に変わってしまいます。
こんな感じで。
これってデフォルトだけどデフォルトじゃないような…。
線引が微妙な気がしますけど、もし「デフォルトで」と言われた場合はここはよく確認しましょう！！（←私はここが原因で何日もかかってしまいましたので 笑）
でも二つ目のselectは以下の通り位置がズレてしまうので、調整を忘れないようにしましょう。
今回は二つ目は置いていて、一つ目で出来るレイアウト変更をメモします。
デフォルトで出来る装飾
よく注意して頂きたいのが、適用範囲はブラウザに依存するということです。
デフォルトのものを用いますので、当然と言えば当然ですね。
なので、効き方はそれぞれ違うことに注意して下さい。
では、いよいよ以下にデフォルトを崩さず効いたcssを記載します。
○font-size
-webkit系(chrome,safari) → 範囲限定で適用。
その他 → 適用可。
○font-family
-webkit系(chrome,safari) → user agent styleが適用される。
その他 → 適用可。
ただし、firefoxは文字が枠を超えてしまうことあり。
他にもあるかもしれませんが、私が試したものだとデザイン変わらないで弄れるたものはfont系だけでした。
間違っていたらご指摘頂ければ嬉しいです。
今日は予想以上に長くなったのでこの辺で。
【Jquery】ブックマークレットの操作①
今回は少し急ぎ足でまとめます。
幾つか載せたい内容があるので、また今度時間がある時にでもまとめて投稿する予定です。
やりたいこと
ブックマークレットを押した時の挙動を操作したい。
ちなみに、ブックマークレットとは以下のようなところのこと。
実現方法
今回はChromeでの作成を基準として説明します。
ブックマーク
の作り方は各ブラウザで違いますので、それぞれのブラウザにあった作り方をしてください。
①ブックマークを作る
右上の☆マークをクリックしてブックマークを作る。
②バーに表示されているブックマークを編集する
URLに記述されているものを全て削除したら以下のコードを記述する。
javascript:alert();
これでブックマークレットをClickするとアラートが表示されるようになります。
補足ですが、javascriptを使いたい場合は
javascript:処理;
と記述すると処理を行う事ができます。
今日は時間がないのでこのへんで。
次回はもっとしっかり書けるといいな。
【jQuery】selectボックスのレイアウト変更
さて、今回はselectをデフォルトの設定ではなく、こちらで自由にデザインを変更する際の方法をメモしてこう。
とはいえ、今回は簡単。
appearance : none;
を記述するだけ。
まぁ、ブラウザ間で互換性のあるものにするためには
-webkit-appearance:none;
-moz-appearance:none;
-ms-appearance:none;
appearance:none;
このように書いておけば安全でしょう。
【番外編】高さを揃えるためには
selectボックスを横の要素と高さを揃える為の方法をメモ。
まず、普通にheightだけを設定してみる。
遠目で見ると、一見問題なさそうだが、よく見るとズレている。
じゃあline-heightにしてみる。
今度は揃った。
でも…、IEだとこうなる。
全部のブラウザの高さを揃えるためには、どちらも設定しなくてはいけない。
height:40px;
line-height:40px;
こんな感じ。
まぁ、デザインによってborder-radiusやらを弄って頂ければと。
selectは結構ややこいから載せることが多そうだ。
今日はこんなところで。
【jQuery】offset().topを用いたプルダウンメニューの動的配置
今回は初歩的なミスで引っかかってしまったので、忘れないようにメモ。
目的
ある要素の上をhoverするとプルダウンが表示されるようにしたい。
プルダウンの位置は動的に配置したい。
例としては以下の通り。
<p><input type="text" name="" value="" placeholder="TEST"></p>
<aside class="dialog">
<h3>TEST</h3>
<p class="box"><input type="text" name="" value="" placeholder="searcn"></p>
<p><a href="#" title="">test1</a></p>・
・
・
</aside>
ここでいうと、asideを直前のpの上に配置するのが目的。
しかし、jQueryoffset().topの値が取れない…。
検証
１．offset()が動作する条件を再確認
jQuery日本語リファレンスによると
戻り値のオブジェクトはtopとleftの2つの数値を持ちます。この関数は、可視状態にある要素に対してのみ有効です。
とのこと。
初めは非表示だからってasideをcssでdisplay:noneにしてた。
ここを修正すれば直るはず、、、
直らない
まぁ、そうだとは思ったけどさ。
それにしても位置が滅茶苦茶ズレている。
２．そもそもoffset().topの値が予想どおり取れてるか検証
取れているっちゃとれていたけど、親要素にposition設定するの忘れていたから表示位置がずれていた。
ここを直してみる。
今の結果はこんな感じ。
３．とりあえずmarginで調整してみる
まぁ、ダメでしたよねｗ
これに頼らなくてもいい筈だし。
よくみると、offset().topで出た値が妙に大きい…
とすると、この要素の前に問題があるみたい。
４．前の要素を確認してみる
結論からいうと、原因はここにありました。
実は、前の要素にfloatで横並びにさせた要素があったんですね。
で、そこの計算を行う前に、offset().topで位置を取得して設定していたから計算が合わなかった訳です。
納得。
そして確認してみると、、、
まだ余白が余る！！
まだ何か余計なことしているのか。
よーく見てみると気がついた！
親要素にpadding-topを設定していた(笑)
残りの余白はこれが原因だったみたい。
結果
動的に設定する時は特に記述する順番と効かせているものを把握してから設定しましょう。
今日はこんなところで。
phpの変数をjQueryに渡す
達成目標
別ページからPOSTされたデータをPHPで受け取り、その後jQueryに渡す。
テストケース
①scriptにdataとして設定し、jQueryで読み取る
<script type="text/javascript"
data-src="<?php echo $src?>"
data-alt="<?php echo $src?>"
></script>
②metaにdataとして設定し、jQueryで読み取る
<meta name="src" content="src" data-src="<?php echo $_POST['src'];?>">
<meta name="alt" contennt="alt" data-alt="<?php echo $_POST['alt'];?>">
これ、そもそもルールとして間違ってる気が…。
③metaにcontentとして設定し、jQueryで読み取る
<meta name="data-src" content="<?php echo $_POST['src'];?>">
<meta name="data-alt" content="<?php echo $_POST['alt'];?>">
コードが綺麗になるけど、これもルールとしてどうなんだろうか…。
HTMLクリックリファレンスさんによると、
<META>タグはその文書に関する情報（メタ情報）を指定して、 ブラウザや検索ロボットに知らせるためのタグ
となっている。
この書き方、かなり怪しい。
結果
①scriptにdataとして設定し、jQueryで読み取る
→失敗。
そもそもヘッダー情報を共通化している状態では向いていないことが判明。
重ね書きを回避して一応試してみるが、dataを上手く読み込んでくれない。
原因はなんだろう…。
調査を色々してみるが実りがなく、断念。
②metaにdataとして設定し、jQueryで読み取る
→失敗。
こちらも上手く読み込んでくれない。
まぁ、ルール的にどうかと思うところもあったので当然と言えば当然か。
③metaにcontentとして設定し、jQueryで読み取る
→成功。
正常に読み込んでくれました。
成功はしたものの、ルールとして怪しい気がする…。
他にスマートなやりかたはないものだろうか。
おまけ「split()が上手く働いてくれないタイミング」
ちょっとハマったのでメモ。
HTMLから読み取った情報(CSV形式)を文字列に変換する時にハマった書き方。
失敗例
var src= $('meta[name = data-src]').attr('content').split(',');
成功例
var src= $('meta[name = data-src]').attr('content');
src.split(',');
どうやらまとめて行うと正常に機能してくれないらしい。
失敗例の方だと読み取った値がそのまま表示される。
これは値を読み取るタイミングの問題なのか、それとも値の型の問題なのか、もしくは別の問題なのか。
原因がハッキリとしなかったので、モヤモヤする。
