Requestオブジェクトに触れる機会は多く、様々な情報を取得することができる。 ここではリクエストパラメータに関する扱いをまとめる。 （導入）Requestオブジェクトを扱う Symfonyのコントローラではアクションの引数とすることで、簡単に Request オブジェ…

2018/5/30追記 2018/5/30現在、すでに第4弾が出ていて、こちらはHDR対応・新たに55V型と60V型が追加されていてかなり良さそう。 絶対買いだろコレ。。くそー、もう少し待っておけば良かった！！笑 ドン・キホーテの50V型4K液晶テレビ。 本体価格54,800円で、…

::befor や ::after といった疑似要素の content に \a を入れることで改行できる。 コード例 .foo::after { content: '\a'; white-space: pre; } サンプル codepen.io 解説 content: '\a' について \a というのは改行を表している。 改行（厳密に言うとLF）…

addEventListener を使うことで動的にバリデーションを追加することができる。 createFormBuilder や createForm にエンティティを渡していない、もしくはエンティティにないプロパティに対してバリデーションをかけたい場合や、特定の条件を満たす場合にの…

前回からの続き。 www.tomcky.net Herokuで動かすにあたって、 index.js のポート指定箇所を修正する。 const express = require('express') const basicAuth = require('basic-auth-connect'); const app = express() app.use(basicAuth('username', 'passw…

前回作ったやつにBasic認証をかける。 tomcky.hatenadiary.jp basic-auth-connect をインストールする。 $ npm install basic-auth-connect --save index.js を以下のように修正する。 const express = require('express') const basicAuth = require('basic…

プロジェクト用のディレクトリ作成。 $ mkdir my-app $ cd my-app npm init で package.json を生成。 $ npm init expressのインストール。 $ npm install express --save index.js の作成。 const express = require('express') const app = express() app.…

Gethをインストールする · Ethereum入門 Ethereumはブロックチェーンをベースに、特別な管理者のいないP2Pシステム上で、様々な分散アプリケーション（Dapp : Decentralized Application）を開発するための基盤を提供するプラットフォーム。 そのEthereum上…

ref を使って子コンポーネントに対して参照IDを割り当てる。 jp.vuejs.org <template> <div id="app"> <FooComponent ref="foo"/> </div> </template> <script> // ... methods: { // 子コンポーネントであるFooComponentのメソッドfugaを叩く this.$refs.foo.fuga(); } </script>

HTML <div id="main" class="foo"> <a href="#piyo" class="piyo">PIYO</a> <input type="text" name="name" size="40" class="hoge"> </div> JavaScript // 指定要素について特定の名前の属性値を取得 document.querySelector('#main').getAttribute('class'); // foo document.querySelector('.piyo').getAttribute('href'); // #piyo // 属性追加…

例えば、 <div id="main" class="foo bar"> </div> こんな感じのHTMLに対して処理を書くとき。 // クラスを追加 document.getElementById('main').classList.add('piyo'); // document.querySelector('.foo').classList.add('piyo'); でも同じ処理になる // 以下同様 // クラスを削除 document.get…

// 指定した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から少しずつ速度…