// 指定したIDに合致する要素を取得 // $('#id')[0]; と同値 document.getElementById('id'); // 指定したセレクタに合致する要素を取得 // $('.class')[0]; と同値 document.querySelector('.class'); // html要素を取得 document.documentElement; // body…
BEMやらSMACSSやら、CSS設計のアイディアは色々あるのだけど、どうにも複雑で。。 そんなときにrscss（Reasonable System for CSS）を見つけたんだけど、これがちょうどいい感じで、縛りもきつくなくて導入しやすかった。 ので、改めてドキュメントを訳しつ…
Vimでファイルエクスプローラーを実現しようと思ったときにNERDTreeなどのプラグインを導入したりするが、Vimには標準でnetrwというプラグインが付属している。 プロジェクトルートに移動して vim . とするとカレントディレクトリが開かれファイルの一覧を確…
MacならHomebrewでインストールできる。 $ brew install ctags プロジェクトルートに cd して以下のコマンドを実行。 $ ctags -R しばらく待てば tags ファイルが作成されて準備完了。 クラスや関数を呼び出している箇所で Ctrl + ] とすると、定義元にジャ…
パッと思い浮かぶのはFlexboxを使う方法なのだが、これがFlexboxだと、CSSだけでの実現はなかなか難しそう。 もし、これをCSSのみで実現しようと思うとGrid Layoutを使うのが一番簡単な気がしている。 developer.mozilla.org サンプルは以下（CodePenのサイ…
先日、以下の記事でa要素の中にdiv要素を使った例を載せた。 tomcky.hatenadiary.jp 実際、これは構造として正しいのだろうか。 結論から言えば、HTML5であれば問題ない。 W3Cのa要素についての説明（英語）。 4.6 Text-level semantics — HTML5 こっちはMDN…
github.com dein.vimを使っているなら以下を追記してインストール。 call dein#add('vim-syntastic/syntastic') 多分 scrooloose/syntastic でも可、なんだけどリポジトリ名が変わっている？のでそれに合わせる。 .vimrc に設定を記述して有効化。 set statu…
codepen.io Flexboxを使って実現している。 justify-content: center; で水平方向の中央寄せ、 align-items: center; で垂直方向の中央寄せをすることで、テキストをボタンの真ん中に持ってくる。 角丸は border-radius で調整。 幅や高さ、色などは好みで。…
wp-admin/options.php でアクセスできる「すべての設定画面」からメディアのURLを変更することができる。 オプション設定リファレンス - WordPress Codex 日本語版 この中に upload_url_path というのがあるので、そこにURLを入れると、そのパスでメディアへ…
functions.php に記述することを想定。
codepen.io 最初は width: 0 にしておいて最後はすべてのテキストがぴったり表示されるくらいの幅（ここでは width:250px）まで広げる感じ。 ポイントは steps を使うことで、連続ではなく1フレームごとにパッと切り替えるようにする。 steps(n) の n の値と…
symfony.com ルーティングで指定したワイルドカードがエンティティのプロパティと一致したときに、自動的にエンティティのインスタンスを取得できる。
Vueを使いつつマテリアルデザインを実現したいとき、Materialize使うのはjQueryで共存できるとはいってもVue使いつつjQuery使うっていうのは極力避けたくて、色々探してたらVuetifyってのがあった。 vuetifyjs.com 一通りのことはできそうだし、ドキュメント…
よく <br /> や <br> 、 <img src="" /> や <img srx=""> など、空要素の閉じ方として /> と > が混在していたりするが、これは一体どっちが正しいのか。 結論として、HTML5的には > が正しい。が、 /> でも問題はない。 /> という閉じ方はXHTMLでは必須で > という書き方をしてはいけなかった。 …
前回の記事で使った例をベースに、子コンポーネント Favorites.vue を追加して、親コンポーネントからデータを渡してみる。 tomcky.hatenadiary.jp 親コンポーネント App.vue はこんな感じにする。 <template> <div id="app"> <Posts @fav="addToFavorite"/> <Favorites :favorites="favorites"/> </div> </template> <script> import Favori…
vm.$emit は引数で指定したイベントを発火させる。 これを使って、親コンポーネント内で v-on ディレクティブを使って登録したカスタムイベントを発火させることで、子から親へのデータ渡しが実現できる。 例えば、親コンポーネントである App.vue を以下の…
Vue.jsを使ったプロジェクトはある程度大きくなってくるとコンポーネント単位でファイルを分けたくなってくる。 その場合、単一ファイルコンポーネントとして .vue というファイルをコンポーネント単位で作っていくことになる。 今回は vue-cli を使って単一…
mackerel.io ヘルプに書いてあるとおりにやればできる。 # yum install mackerel-check-plugins /etc/mackerel-agent/mackerel-agent.conf に以下を追記。 # check-procs # check mysql process [plugin.checks.check-mysqld] command = "check-procs --patt…
MacのQuickTime Playerで、動画の再生スピードを調整したいときがあるのだけど、早送りボタンを押すと最低でもx2からしかない。 これx1.5とかできないのかな、、、といろいろ調べてみたら、option キー押しながら早送りボタンを押せば、x1.1から少しずつ速度…
.vimrc に以下の一行追加する。 autocmd BufNewFile,BufRead *.{html,htm,vue*} set filetype=html vue ファイルをHTMLとして認識させてるだけ。
github.com axiosをCDNで読み込んでおく。 v-on ディレクティブを使ってクリックイベントをハンドリングする。 省略記法を使っているので @click となっている。 また v-for ディレクティブを使って取得したデータを描画できるようにしておく。 <html lang="ja"> <head> <meta charset="UTF-8"> <title>タイトル</title> </head></html>…
v-for を使ってたら何やらエラーが出た。 error: Custom elements in iteration require 'v-bind:key' directives ... ... component lists rendered with v-for should have explicit keys. See https://vuejs.org/guide/list.html#key for more info. エラ…
position: fixed; と bottom: 0; を使えばOK。 #footer { position: fixed; bottom: 0; width: 100%; } codepen.io
Vue.jsでの最も基本的なデータバインディングの形は二重中括弧 {{}} を利用したテキスト展開である。 これはマスタッシュ（Mustache）構文と呼ばれる。 <p>{{ msg }}</p> だがこれは、HTML属性内部で使用することができない。 <img src="{{ src }}"> <a href="{{ url }}"></a> なので、この場合は v-bind ディレ…
<html lang="ja"> <head> <meta charset="UTF-8"> <title>タイトル</title> <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> </head> <body> <div id="app"> <button v-on:click="toggleMood"> <i class="material-icons" style="font-size: 48px;">{{ icon }}</i> <…</button></div></body></html>
革命のファンファーレ 現代のお金と広告 (幻冬舎単行本)作者: 西野亮廣出版社/メーカー: 幻冬舎発売日: 2017/10/04メディア: Kindle版この商品を含むブログを見る 今更ながらに読んだ。 えらい評価が高いなーとか、実際に周りの読んでる人は良い本だっていう…
行ってきた。 fukuokaphp.connpass.com 勉強会参加したの、かなり久しぶりだと思う。 PHPだけじゃなくて、サーバーレスな話やGolangな話もあってためになったし楽しかった。 でもやっぱり勉強会は発表する側にまわらないとなーと思う。 福岡でもコミュニティ…
書くまでもないくらい、ドキュメントどおりにやればめちゃ簡単にできる。 symfony.com まずはインストール。 $ composer require mailer .env の設定を以下のように変更。 MAILER_URL=smtp://smtp.sendgrid.net:587?encryption=tls&username=&password= SMTP…
Alpine LinuxベースでDockerイメージを作るとき、 apk add でパッケージインストールする前に apk update しないといけない。 # apk update # apk add vim が、これは次のように一行で書ける。 # apk --update add vim ただ、これは /var/cache/apk/ にキャ…
Alpine Linux。 あるぱいんりなっくす。 軽量なのでDockerに最適！って言われているアレ。 Alpineのシェルはash。 bashじゃないので注意。 コンテナ起動後にコンテナ内で色々やりたいときは以下のようにする。 $ docker run -it --rm alpine ash Alpineのパ…
