zsh: no matches found: 解消

$ composer create-project laravel/laravel hoge 5.4.* --prefer-dist

とコマンドを打った時に、zsh: no matches found: 5.4.* などと返ってきた。

zsh使っている場合~/.zshrcへ

setopt nonomatch

を書いて読み直すと、大丈夫になった。

参考URL

zsh: no matches found について - えいちゃダイアリー

Laravel入門ノート その1

PHP 初めてのフレームワーク Laravel5.3 〜ステップ１ を読んでいます。 その時のノートです。 ほぼ箇条書き。

PHP 初めてのフレームワーク

そもそもフレームワークとは。 みたいなところから入っていく。

そもそもフレームワークって

• プログラマーは基本的に0の状態からプログラムを作っていく。人によっていろんな作り方ができるのがPHPの良さ。
• しかし、複数人で開発する時、その自由さが規則性の無いコードを生産していってしまう。
• そこでフレームワークの出番！

フレームワーク

• 最初から便利な枠組み、関数、クラスなど必要な処理が用意されている。
• フレームワークは用意されているものを使うだけで実装できる。
• 使い方だけ覚えておけば誰でも作れる。
• ただし、フレームワークの規則に従わないと動作しない。
• 実装の負荷軽減、保守性、セキュリティ、規則性、可読性が確保できる特徴がある。

Laravelの特徴

• 学習コストが低い
• コードが読みやすい。記述量少ない。
• 強力で簡単に記述できる入力チェック
• ログイン認証
• ページネーション
• デプロイ作業の簡単さ

Laravelヘルパー関数

Laravelが用意している関数がある

MVCパターンとは

Model・View・Cotrollerの３つの主要パーツで構成されています。

MVC

Controller

• モデルとビューの制御
• リクエストされたURLやフォームの入力値に従い処理を実行

Model

• データ連携処理
• データを扱う本体
• DB操作するのが主な処理内容

View

• C・Mの実行結果をViewで受け取る。
• 受け取ったデータをもとにHTMLを生成

ルート定義はURLとMVCの紐付けする役割

WordPressのAdvanced Custom Fieldsから標準のエディタを使用する "ACF { WordPress WYSIWYG Field"

Advanced Custom Fields (ACF)で、Wysiwygを選択すると通常は、ACF特有のWysiwygが投稿画面に表示されます。
AddQuicktagなどの標準Wysiwygから使えるプラグインは、通常使用できません。
なので、ACFからでも標準Wysiwygを使えるようにするプラグイン ACF { WordPress WYSIWYG Fieldを使用します。

github.com

導入方法

大体の流れは以下の通りです。

1. githubからソースをダウンロード
2. ダウンロードしたらフォルダの名前を acf-wp-wysiwyg へ変更
3. /wp-content/plugins/ 内に acf-wp-wysiwyg をアップロード
4. 管理画面のプラグイン設定画面から有効にする。

すると、ACFのフィールド編集画面のフィールドタイプ内に Wysiwyg エディタ と Wysiwyg Editor (WordPress) が表示されます。 これを選択するとACFから標準のエディタが使用できます。

PHP Warning: in_array() expects parameter 2 to be array の対処法

配列じゃない変数を配列として処理しているから、Warningが出る。 変数の頭に (array)をつけてキャストすると大丈夫。

in_array('2', $abc)

↓

in_array('2', (array)$abc)

参考

hacknote.jp

もういちどSassの@extendについて復習する

@mxinや@extendはSassの便利な機能はありますが、使い方によってはメンテナンス性を下げたり、意図していないことが起きてしまいます。
今回は@extendの復習をします。

Googleが提供するWebフォント、Google Fonts + 日本語を試してみる

概要

日本語フォントは文字数が多く、どうしてもフォント自体のサイズが大きくなりがちです。
フロントエンドで使う場合、転送量や表示速度などを考慮すると踏みとどまることが多いように感じます。
Googleが提供することで、これらの課題がいい方向に解決していくと良いですよね。
今回は試験的に提供している、Google Fonts + Google Fonts + 日本語早期アクセスを試してみました。

現在使えるフォントは以下の９種類です。

フォント名	使える文字	font-weight
M+1p	ひらがな, カタカナ, 漢字	7種類
Rounded M+ 1c	ひらがな, カタカナ, 漢字	7種類
はんなり明朝	ひらがな, カタカナ
こころ明朝	ひらがな, カタカナ
さわらび明朝	ひらがな, カタカナ, 漢字(2,250文字)
さわらびゴシック	ひらがな, カタカナ, 漢字(4,469文字)
ニコモジ	ひらがな, カタカナ
ニクキュウ	カタカナ
Noto Sans Japanese	ひらがな, カタカナ, 漢字	7種類

ためしてみた

基本的には、Google Fonts + Google Fonts + 日本語早期アクセスの該当フォントにある、HTMLとCSSを貼り付けて文章を入力するこで表示することができます。

ローディングアニメーションをCSSで表現する「text-spinners」

見本

See the Pen text-spinners by Yuta Kiyama (@yutakiyama) on CodePen.

text-spinnersに色々サンプルがあります。

実装方法

HTML内に以下のソースを入力。 ソースを確認は、GitHubのspinners.cssで確認できます。

<link rel="stylesheet" href="http://tawian.io/text-spinners/spinners.css">

<button>Loading <span class="loading"></span></button>

どうやって動いているのか

text-spinnersはキーフレームアニメーションを使って、要素をステップごとに1line-heightずつシフトさせて、擬似的にアニメーションを表示させているみたいです。

見本の１個目に表示した、. → .. → ... の動きを見てみると、

.loading::after {
  display: inline-table;
  white-space: pre;　/* 文中の改行をそのまま表示 */
  text-align: left;
}

.loading::after {
  content: "\A.\A..\A...";
  animation: spin4 2s steps(4) infinite;
}

@keyframes spin4  { to { transform: translateY( -6.0em); } }

で構成されています。 content内の\Aは改行を表していて、実際には、

[スペース]
↓
.
↓
..
↓
...

のように1フレームずつシフトしているように見えます。 ちゃんと説明できていませんが、text-spinnersのページ下部のHow it worksのアニメーションを見るとわかると思います。 JavaScriptで実装する方法もあると思いますが、CSSで実装してみるのもいいかもしれませんね！