vue uiではじめる単一ファイルコンポーネントのVue.js

Facebook にシェア
Pocket

今年からVue.jsを使ったプロジェクトに関わるようになりました。前から気にはなっていたのですが、趣味で使う気にもなれず、ようやく触ることができました(自分が興味があった技術に触れることができる仕事というのもなかなかうれしいもんですね)。

Vue.js自体は、去年の11月にヘルプとしていった出向先で少し触れています。その時は、「何だこれ? 拡張子がvueで、同じファイルにHTMLとJavaScriptとたまにCSSが書いてあるぞ。Vue.jsってjQueryみたいなJavaScriptのライブラリじゃないのか?」なんて思ったのですが、今回のプロジェクトに配属になってそれが単一コンポーネントというものだと知りました(参考:単一ファイルコンポーネント — Vue.js)。

というわけで今回はその、Vue.jsの単一ファイルコンポーネントのプロジェクトを作成する方法を紹介。大概、コマンドラインで作成する方法が紹介されることが多いですが、今回はWebブラウザを使った作成方法について紹介します。

まずは、npmでVue CLI3というVue.jsの開発支援ツールをnpmでインストール(npmが無い人はNode.jsでインストールしてください)。

つづいて「vue ui」とコマンドをうちます。

そうすると、自動的にWebブラウザがたちあがって、下記のような画面が表示されます。日本語で書かれているので特に迷うことはないと思います(Vue.jsは本当、サポートページも日本語ページが存在して本当に便利です。ただ、Vue CLI 3のサイトは日本語ページが存在しないんですよね……)。

ここで「作成」ボタンを押し、プロジェクトを作成する新しいフォルダを作ります(この処理はいらないのですが、一応ここでフォルダも作れるという説明のために)。


フォルダができたら、「+ここに新しいプロジェクトを作成する」というボタンをクリックします。

下にある「次へ」ボタンをクリックします。スクリーンショットをとっていませんが、プロジェクトフォルダは「vue-test」としました。

プリセットを選択します。ここでは、あえて「デフォルトプリセット」を選びます(あえてと言ったのは、デフォルトだとVue RouterやVuexがインストールされないからです。後でこの二つについてもインストールします)。

そうすると、プロジェクトの作成が始まります。

「プロジェクトダッシュボード」という画面になると、プロジェクトが作成できています。

フォルダを見てみると、確かにファイルができていました(と、ここで気づいたのですが、vue-testフォルダの下にvue-testフォルダができてしまっているという。そりゃあ、設定のプロジェクトフォルダなんて名前につけたからそりゃそうなりますよね……)。

つづいて、左側のメニューの一番下にある「タスク」をクリックし、つづいてでてきたメニューの「serve」をクリックします。

「タスクの実行」というボタンがでてくるので、このボタンをクリックします。

そうすると、作成されたプロジェクトの開発用サーバ上で起動します。トップページは下記のようになっているはずです。

ところで今回、プロジェクトをデフォルトで作成してしまったので、Vue RouterやVuexが入っていませんので、vue uiを用いてインストールします。左のメニューから「プラグイン」を選択すると、上に「Vue Routerを追加」や「Vuexを追加」ボタンが表示されています。予想できると思いますが、このボタンをクリックすることで簡単にインストールできます。

インストールすると先ほどのトップページが下記のようになります。

URLに「/#/」とついて、さらに「Home|About」というリンクが表示されてますね。これが、Vue Routerの機能です。「About」のリンクをクリックすると、下記のようになりました。

Visual Studio Codeでプロジェクト内のsrcフォルダにあるmain.jsを見てみると、下記のようになっていました。このうち「router」がVue Routerの機能のことで、「store」がVuexの機能です。ちゃんとどちらも追加できたようです(ちなみに、Visual Studio Codeには、「Vetur」というvueファイル作成支援用の拡張機能を追加しています)。

ちなみに、vue uiの画面ですが、左下にある家のアイコンボタンを押すことでホーム画面に戻れます。

また、今回は新しくプロジェクトを作成しましたが、既存のプロジェクト(コマンドラインで作成したプロジェクト)を追加したい場合はインポート機能を使ってvue ui上で扱うこともできます。

というわけで、今年はVue.jsについていろいろ勉強していきたいと思います。

CSSによる色のアニメーションはrgbとhslの指定で違いがあるか調べてみた

Facebook にシェア
Pocket

最近、ウェブサイトをいろいろ見ていて、このアニメーションの動きってどうしてるんだろうと思って調べてみると、CSSのtransisionの機能を使って実現しているというサイトが増えてきました(ちょっと前までアニメーションはjQueryで作っているところが多かった印象)。

自分も最近になってようやくその処理方法が分かってきたので、いつか実践で使ってみたいです。

ところで、このアニメーションですが、jQueryでは確か色の変更はアニメーションで実現できなかったと思うのですが、CSSのアニメーション機能はなんと色の変更まで実現できます。

そこで思ったのが、もしかしたら色をRGBで指定するのと、HSLで指定するのではアニメーションの変化が異なるのではないかと疑問。

例えば、RGBでの青の指定は『rgb(0,0,255)』、RGBでの黄色の指定は『rgb(255,255,0)』となりますが、HSLでの青の指定は『hsl(240, 100%, 50%)』、HSLでの黄色の指定は『hsl(60, 100%, 50%)』となるため。パット見、HSL指定だとHの色相部分だけの値を変えればいいだけなので、青から黄色に変化する場合は途中に緑色、つまり『hsl(150,100%,50%)』という値がでてくるのではないかと思いました。対してRGB指定だとrとgの値が増え、bの値が減るようになりそうなので途中に緑色『rgb(0,255,0)』はでてきそうにありません。

というわけで調べてみた。

HTML

CSS

JavaScript

青というラジオボタンをクリックしたら背景が青、黄色というラジオボタンをクリックしたら背景が黄色に5秒かけて変化するという処理をしています。アニメーションによる変化対象は背景色のみとしています(現在の処理だと、文字色はクリックと同時に変化しますが、CSSの『transition: background-color 5s;』を『transition: all 5s;』とすれば文字色もアニメーションで変化します)。色については左側の要素をRGB指定、右側の要素をHSL指定としています。

サンプル:CSS Color Animation

結果、全く同じように変化しました。RGB指定からHSL指定に変化することもできるわけだからそりゃそうか。

右矢印キーを押すと左にカーソルがうつる不可思議なテキストボックスについて

Facebook にシェア
Pocket

前の会社での話。

実は、前の会社を辞めてからも9月は特別に週一回行っていまして、自分がある程度関わったプログラムのバグ修正なんかをしていました(ほとんど、自分が関わったところではないところに時間を使いましたが)。

そんな中、昨年退職した上司が作成したあるウェブページのテキストボックスが変な挙動をしていました。

そのテキストボックスには、数値が入っていて、右寄せになっていました。その時は特別深く考えたわけではないのですが、CSSのtext-alignでrightを指定しているんだろうなとは思いました。

それはいいのですが、どうも入力するとおかしなことになります。

IEだと右矢印キーを押すと左にカーソルが移動し、左矢印キーを押すと右にカーソルが移動します。よくわからないけど、IEのバグかなと思って試しにChromeで見てみると、なんとChromeでは一番右にカーソルをうつして入力すると左側に文字が追加され、逆に一番左にカーソルをうつして入力すると右側に文字が追加されます。

初めての減少に思わずポカンとしてしまったのですが、多分、keydownでイベントを発生させていて何かやらかしているのだろうと思い調べてみました。すると、予想通り、数値のみしか入力させない記述がしてありました(参考:HTMLのテキストボックスを、できるかぎり半角数値のキー入力のみにする | while(isプログラマ))。

というわけでいろいろ変更してみたのですが、全く変化がありません。そして、試しにkeydownのイベントを無くしてみましたが、全く変化がありませんでした。正直、わけが分かりませんでした。

とりあえず、一から考え直そうと思って開発者ツールで対象のテキストボックスを選択し、右側のサイドバーを見たところ、あると思ったものが無いことに気づきました。そう、『text-align:right』の記述がありませんでした。スクロールバーを上から下まで移動させて見てみたのですが、その記述がみあたりません。「右寄せになってるのになぜ?」もはやパニックに近い状態の自分でしたが、ふと見られない記述がありました。

『direction:rtl』

なんじゃこりゃ? と思って調べてみると、文章の記述方向の設定をしている記述ということが分かりました(参考:direction – CSS | MDN)。rtl は右から左……。まさか……。

この記述を無くしたら、カーソルが想定通りに動きました(もちろん、これだと左寄せになってしまうので、『text-align:right』を追加しておきました)。

とりあえず、同じようなテキストボックスを下記においておきます。valueの値は12345としています。こうすれば、『54321』と表示されるような気がしなくもないんですが、『12345』と表示されています。

というわけで、もし、矢印キーを押したら逆方向にカーソルが移動する場合は、この記述がないか疑ってください。そんなこと、滅多にないと思いますが……。

なお、「テキストボックスに『direction:rtl』の指定があればカーソルの動きがおかしくなる。ということを言いたいだけだろうに、前置きが長すぎ! そんなんだからブログ続かないんだろ!」なんてツッコミは受け付けておりません。むしろ、こう書いたことがセルフツッコミです。

独自PHPにWordPressの管理バーを表示する方法

Facebook にシェア
Pocket

気づいたら6月は更新しないまま時間がすぎていきました。何か書きたいことがあったような気もするし、そんなに忙しかったわけでもなかった気がするんだけどなぁ……。他にやりたいことがありまして……。

今回は久しぶりにWordPressの話。WordPress以外で作ったページに、WordPressの管理バーを表示する方法について。そんな状況がはたしてどれだけあるんだとは言われそうですが、そういう業務があったので自分用にメモ。

まず調べたのが、WordPressで作ったページ以外にWordPressの機能を使う方法。これはすぐに分かりました。requireでWordPressのwp-blog-header.phpを読みこめばいいとのこと。例えば、WordPressのトップディレクトリにtestディレクトリを作成して、その中に独自のPHPを入れる場合は下記のようになる。

参考:WordPressを導入したがWPではないページ(.php)にWPタグや新着一覧を表示 | Ken’s WEB

次に管理バーを表示する方法を調べました。これも調べたら情報はあちこちにありました。どうやら、headタグ内に『<?php wp_head(); ?>』、bodyの閉じタグ直前に『<?php wp_footer(); ?>』を記述すればいいようです。
参考:WordPressの管理バーを表示させるためのおまじない二つ★ | oki2a24

これで表示できる! と思ったら表示されません。HTMLのコードを確認しても管理バーの記述がないので、CSSで非表示になっているわけでもないようです。ただし、body_class()で記述された中には、”admin-bar”とあります。is_admin_bar_showingという関数があるので試してみたところ、表示されてないのにtrueが返ってきました(参考:関数リファレンス/is admin bar showing – WordPress Codex 日本語版)。

ここからは根気です。管理バーを表示するコードを探して、どこから呼び出しているのかを探していきます。そうすると、『do_action( ‘admin_init’ );』を呼ぶ必要があるようだ、ということが分かりました。なぜ独自PHPではその箇所を通ってないのかまでは分からなかったのですが、コードに『do_action( ‘admin_init’ );』を追加してなんとか管理バーを表示することができました。。(2015/07/08修正)『do_action( ‘admin_init’ );』だと、余計な関数まで動いてしまうことが分かりました。実際に管理バーを表示するだけなら、『_wp_admin_bar_init();』を呼ぶだけでよさそうです。

以下、最低限のサンプルコード

ここで、『status_header( 200 );』を呼んでいる理由ですが、これがなかったらなぜかHTTPステータスが404となりました(一見、ちゃんと表示しているように見えるのですが、HTTPステータスを確認すると404でした)。どこが原因で404となっているのかは分からなかったのですが、とりあえずstatus_header関数を呼ぶことでHTTPステータスを200にすることができました。ただし、bodyタグにerror404というクラスが残ったままなので、根本的な解決にはなっていないかもしれません。

画像の比率を保ったまま枠内に収めて縦横中央表示するCSS(IE8対応)

Facebook にシェア
Pocket

divタグなどの枠内に画像を入れる時、縦横中央表示にして、かつ、枠のサイズより大きければ枠に収まるように画像の比率は変えずに小さくしたいということがあると思います。というより、先日自分はそういう事態に遭遇しました。

まず、サイズの比率を保ったまま、枠内に収める方法ですが、いろいろ試行錯誤した結果、下記のようにするとうまくいくことが分かりました。

widthとheightは普通、デフォルトがautoなので指定しなくていい場合が多いのですが、autoじゃないと動かないため指定しています。

上記の記述だと、枠(この場合、imgタグの親要素)のサイズより大きければ、max-widthとmax-heightの指定により、それ以上のサイズを超えないようになるので、枠に収まってくれます。最初はてっきり、どちらも100%のサイズになってしまうのではないかと思ったのですが、どうやら大きい方にあわせて縮小されるようです。

次に、縦横中央表示の方法ですが、横は簡単です。親要素に『text-align:center』を指定してやればいいだけです。問題は、縦の中央表示。いろいろ調べてみると、:before擬似要素を使って下記のように書くと、縦横中央表示する方法があることが分かりました。

before擬似要素をinline-blockとし、縦方向の揃えをmiddleとしています。同じく画像のほうもmiddleとすることにより、どちらも縦中央表示になります。ただ、inline-blockにすると余計なスペースができてしまうので、そのスペースを無くすために、枠の要素にfont-size:0の指定をしました(参考:display: inline-block の隙間を詰める方法 | Soraxism)。

ちなみに、IE8には対応していませんが、画像をCSSのbackground-imageで指定し、background-sizeをcontainとすると、枠に収まるようになりますが、この場合、枠のサイズより小さければ画像が拡大して枠のサイズに合わせて表示するようになります(もちろん、そのほうがいいということもあると思います)。

なお、IE8対応しなくていいのであれば、フレックスボックスやtransformを使って縦中央表示できます。

フレックスボックス利用

transform利用

下記にサンプルリンクを載せておきます。background-size:containを使った結果、フレックスボックスを使った結果、transformを使った結果も載せています
フレームサイズ:100×150、画像サイズ:175×200
フレームサイズ:100×150、画像サイズ:200×175
フレームサイズ:175×200、画像サイズ:100×150
フレームサイズ:175×200、画像サイズ:150×100
サイズランダム