PHP short_open_tagの設定
以前にも調べた話題ですが
PHP省略タグについて - 新しい日記
これをOn Offさせる方法について。
php.iniをいじってサーバ全体について設定する方法
/etc/の中にphp.iniがあるので、その中をいじる
short_open_tag = Off //省略タグ使用不可
あるいは
short_open_tag = On //省略タグ使用可
サーバ全体を勝手にいじれなさそうなとき、.htaccessを使う方法
php_flag short_open_tag Off //省略タグ使用不可
あるいは
php_flag short_open_tag On //省略タグ使用可
以前調べた内容の通りデメリットもあるし、あとサーバが移転したときにいちいち設定しなおしたりするのだるいし、省略タグ使わないほうがいいですね
技術関係ない話2
関係ないとまでは言わないけどそこまで関係ない話
Slack人気の理由を機能で説明がつかないと思っている人はたぶん多い、私はチャットツールあんまり比較してないのでわからんけど一応業務でSlackは使ってる
私が思うSlackのいいところ
- 絵文字がいっぱいある
- アイコンがかわいい
- 名前がいいやすい
- リンクとかコードとかいいかんじに貼れる
- 既読とかいちいちわかりやすいところに書かないでくれる
- メッセージをあとから編集できる
- チーム内オープンチャンネルとダイレクトメッセージの管理のしやすさ
私が思うSlackのよくないところ
- iOS版で通知が来るのか来ないのかよくわからん(バッジはつくから困りはしないしそもそも設定がミスってるのかな？)
- 英語ばっかりなので英語わからんっていう人に勧めにくい
結論Slack支持層が増えたのって主ターゲット層がSlack使いたい！Slackみんな使おうよ！っていう気持ちになるような優れたUXを提供できたという当たり前なことに落ち着くと思うんですが
UX、軽い口調で言葉に出すとひどい仕打ちにあうからあまりいいたくない言葉ランキング1位だけど、これについては優れたUXを提供できたということがまさにそれだと思います
使っててかゆいところに手が届くのはUX上すごく大事であって、かゆいところが残ったままだとイライラが募っていく、それをかゆいところにすっと手を届かせるナチュラルなアフォーダンス力といいますか、それは支持されるサービスの第一前提なのかなと思います。
それから、これを使っている私！というセルフブランディングに加担できるブランド力みたいなのがあるとより強い。気分産業なんて単語があったかもしれない。今はみんな機能やスペックよりも使ってどんな気持ちになるかを重視しているというやつ。これをやるのがSlackはうまかったんじゃないかな。
その要素として「いいやすい名前」「かわいいアイコン」「ナイスなUIパターン」とかが効いてくるのだろうと私は考えました。
macbook人気と近い、まさにそれ
技術関係ない話
Groovesharkがサービス終了！！jaykogami.com
今の仕事とは全く関係ないけど、修論で音楽サービス関連についてもそこそこ調べていたので
Groovesharkってそもそもなに？
ユーザが音楽を違法アップロードしてそれをシェアしてストリーミング聞くみたいなサービス。
ずっとレーベルから訴えられ続けてたけど、Groovesharkは'ユーザが勝手に各自の持ってる音楽をアップロードしてるだけだよ〜'みたいな主張だった気がする
SpotifyやPandoraなどの収益モデルを確立したサービスがマジョリティ握ってる今となってはこういう違法サービスよりもちゃんとレーベルと契約結んで聞いた分アーティストに還元されるサービス使ったほうがいいよね！やっぱり！
まあ、日本でSpotifyやPandoraが使えるのはまだまだｍだｍだｍだｄまｄまｄまｄまｍだ先になりそうだけどね！
colorboxをスワイプ対応にする
lightbox系プラグインで有名なcolorboxですが、スワイプなどのタッチ操作に対応してない。
colorboxはインライン要素などを表示できたりと機能豊富なのがいいんですが、他によさげなプラグインがなかったので、タッチ操作に対応させる手段として、jQuery.event.swipeを使うことにしました。
colorbox
Colorbox - a jQuery lightbox
jQuery.event.swipe
jQuery.event.swipe
HTML
<a class="thumb" href="#inline-contents"><img src="img/xxx.jpg" alt=""></a><!-- サムネリンク --> <div class="contents" id="inline_contents"> <h1>inline contens</h1> <p><img src="img/index/xxx_large.jpg" alt=""></p> <p>hogehoge</p> </div> </div><!-- モーダルで表示させたいコンテンツ -->
js
$(function() {
$('.thumb').colorbox({
inline:true,
width: '100%'
});
$('.contents')
.on('swipeleft',function(){
$.colorbox.prev();
})
.on('swiperight',function(){
$.colorbox.next();
});
});これだけ！簡単で助かる〜〜〜〜〜〜
画像の高さの取得
はまった
containerの中のimg要素の高さを取得してcontainerに取得した高さを適用させたい
HTML
<div class="container"> <img src="xxx.jpg" alt=""> </div>
以下の様なjQueryを書いたけどうまくいかず、取得されたheightは0となってしまった。
$(function(){
var height = $('.container > img').height();
$('.container').height(height);
});原因：imgの中身の画像本体が読み込まれる前にimg要素自体の高さを取得してしまっている
解決方法
jQuery
$(function(){
$('.container > img').bind('load', function() {
height = $(this).height();
$(this).parent().height(height);
});
});.bindは要素が持っているイベントに対して紐付けられるんだって。
参考URL
bind(type, [data], fn) - jQuery 日本語リファレンス
.bindで画像が読み込まれたときにimg要素の高さを取得し、それをその親要素に適用させる。
ちなみに、4行目を
$('.container').height(height);にしたら.containerのクラス名を持つ全部の要素が同じ高さになっちゃって期待どおりにいかなかったので、thisの親要素に適用というふうにしたよ。
スマホサイトtips
android4.1とかだと下記のようなCSS3のbackground省略記法が使えない
background: url(img/xxx.jpg) 50% 50% / contain no-repeat;
だから、わけてかきましょうね！
background: url(img/xxx.jpg) 50% 50% no-repeat; background-size: contain;
ちなみに、背景を複数指定したいときはこんなふうにすればいい
background: url(img/xxx.jpg) 50% 50% no-repeat, url(img/yyy.jpg) 100% 100% repeat; background-size: cover, 100% 100%;
拡大縮小可能かつ横向きにしても文字サイズが変わらない指定
viewportはこれ
<meta name="viewport" content="width=device-width,initial-scale=1.0">
cssはこれ
body {
-webkit-text-size-adjust: 100%;
}
子要素の高さがわからなくても上下揃えしたいとき
html
<div class="hoge">
<div class="hogehoge">
<img src="img/zzz.jpg">
<p>test</p>
</div>
</div>
.hoge {
position: relative;
width: 100%;
height: 100%;//なんかしら高さがないとだめ
}
.hogehoge {
position: absolute;
top: 0;//上にひっぱる
bottom: 0;//下にひっぱる
margin: auto;//要素が揃う
}
imgタグでbackground-size: cover; を再現したい
html
<div class="container"> <img src="img/aaa.jpg"> </div>
.container {
position: relative;
overflow: hidden;
}
.container > img {
position: absolute;
width: auto;
height: auto;
left: 50%;
top: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
min-width: 100%;
min-height: 100%;
}CSSはクソです
