VS Codeで特定の文字列のカラーを設定

とある仕事でEm Editorを使用する機会があって、手順書にユーザー定義の文字列のカラー設定があった。もちろんEm Editorのプロパティ設定で登録できる。

この設定、VS Codeにも同じようにできるかなと思ったけど、これといったものが見つからない、、調べてみると、とても参考になった記事がありました。

VSCodeでさっくり作る快適な執筆環境。オススメ拡張機能3つ。

こちらの3つ目にある「Highlight(ハイライト)」の内容が大変参考になりました。

私はsettings.jsonに下記を追記しました。

"highlight.decorations": {
        "rangeBehavior": 3
    },
    "highlight.regexFlags": "gi",
    "highlight.regexes": {
        "(diff)": [
            {
                "color": "#FFAD90"
            }
        ],
        "(original)": [
            {
                "color": "#A16EFF"
            }
        ],
        "(model)": [
            {
                "color": "#64F9C1"
            }
        ],
        "(toggle)": [
            {
                "color": "#FFD700"
            }
        ],
    },
    "highlight.maxMatches": 250,

『”(xxxx)”』の内容が文字列で、『”color”: “#xxxxxx”』が色の設定です。
私はXML編集の際に要素を色分けしたかったので、これでうまくいけたと。

VS Code標準で簡単な設定方法あるのかなぁ。
ならEm Editor使えばいいじゃんというお話は置いておきます。笑

VS CodeでJava_HOMEの設定(macOS)

最近、エディタをVS Codeに変更し、もろもろ拡張機能を入れていたところ、起動時に「The java.home variable defined in VS Code settings points to a missing folder」とエラーが出るようになりました。

つまりJAVA_HOMEのパスの設定かなということで、該当する機能拡張のJAVA_HOME設定を編集しました。([setting.jsonを編集])

"xml.java.home": "/Library/Java/JavaVirtualMachines/jdk-14.jdk/Contents/Home"

上の”xml.java.home”:以降にパスを追記したところ、VS Code起動時にエラーがでなくなりました。合ってるのかなw
ともあれ一先ず良しとする🤗

Emmet for Coda を購入。

Coda2.5にアップデートしてからしばらくEmmetがオフィシャルには使用できなくなっていました。使用できる様にする方法はありましたが。。

先日、ようやく正式にEmmetが使用できるようになったと情報があったので、早速ダウンロードしました。
すると、、、

なんと有料になっている!日本円で税込836円‼︎
正しく言うと機能制限版は無料。(tabで展開は無料版ではできません。。)全機能を有効にするならば、ライセンスキーが必要になります。

ん〜、他のエディターでは無料なのに??
いろいろ思うことはありますが、正式に対応したプラグインだし、コストかかってるんだし、Coda好きだし。
結局、ライセンスを購入したわけです。今回はその流れを書きたいと思います。

Emmetのサイトから[Purchase License]へ行きます。
Emmet_for_coda
次に購入情報を入力します。
Emmet_for_coda支払い画面
ここで名前を入れる時の注意点として、性と名の間に半角スペースを入れないと[次へ]ボタンを押してもエラーになります。

あとは支払い方法を選んで、受信したメールアドレスにライセンスキーの情報が記載されているので、Codaを起動して[Emmet]メニューからライセンス登録ダアログをだして、ライセンスキーを入れます。
※すみません、Codaでのスクリーンショット撮り忘れました。。てか登録するともうダイアログ出せなかったので。。

以上です。これでフル機能が使用できるようになりました。

ちなみに、Emmetで展開時に「lang」属性を英語から日本語に変更します。

/Users/ユーザー名/Library/Application Support/Coda 2/Plug-ins/EmmetCoda.codaplugin/Contents/Frameworks/Emmet.framework/Versions/A/Resources/snippets.json

上記ファイル(今までとパスが変わったかな?)を開いて、

{
	"variables": {
		"lang": "ja",←ここを変更
		"locale": "ja-JP",←ここを変更
		"charset": "UTF-8",
		"indentation": "\t",
		"newline": "\n"
	},

これでばっちりです。

テーマを更新したらエラーが...

serverのイメージ画像
私のブログはWordPressを使用しております。当初は勉強がてらオリジナルでテーマを作成して運用していましたが、多忙にてなかなかメンテンテナンスできませんでした。
そこで、気に入ったテーマを使用したいと思い、膨大のテーマのなか、creative marketというサイトからAuberge Plusというテーマを使用することにしました。

その後テーマのバージョンアップ版がリリースされたので早速ダウンロードして、サーバーにアップ! ん、、エラーがでたぞ。

Can’t use function return value in write context…

テーマ内のsetup.php 806行目に問題があるみたいだった。む。まぁ焦らず、まずエラー文を検索して、以下のサイトを発見。
「Can’t use function return value in write context」と表示されるとき

empty関数云々に前にサーバーのPHPバージョンが5.5より前だとエラーがでるのか。サーバーの内容を確認すると、、、
なるほど、確かにPHPバージョンが5.4でした。早速5.5に上げたところ、問題無く表示されました。

めでたし、めでたし。

Sketch3をしばらく触ってみて

前記事にSketch3に移行しただけの内容を上げましたが、約2週間経ちました。
平日はなかなか触れないため、週末にちょいちょい触り、カンプを作ってみたりしていました。うん。やはり私には合っているソフトだと実感しました。UIが英語なんて全く気にならない。(ある程度は調べましたよ)直感的に作業が出来ます。

以下のような感じも趣味の私にも1時間半くらいで出来ます。
Sketch3制作画面
早いのか遅いのかは分かりませんが、直感的に作れるよ!というのが伝われば幸いです。
上の制作中画面内に画像やテキストがありますよね。このダミーサンプルをパッと反映する事ができます。デフォルトの機能ではなく、プラグインですがとても便利ですしオススメできます。有名ですし、Sketchユーザーは100%入れているといっても過言でないでしょう。

Content-generator-sketch-plugin

Sketch3はなんかずっと触っていたくなるソフトですね。

Sketch3に移行してみた。

Sketch3のロゴ
流行りに便乗してPhotoshopからSketch3へ変更しました。

まぁ1番の理由は、Adobe Creative Cloudのランニングコストを削減するためでした。毎日ガッツリ使って無いですし、PhotoshopCS6のパッケージ版を持っていたのでCCを使わなくてもいいかなと。FireworksCS6もあるので、開発終了したとはいえ自分の使用用途には問題ないと感じたのですが、いろいろと調べてみるとSketch3が良さげかなと。

実際使用してみると、軽い。楽ちん。もちろん専門でプロフェッショナルな方には不満などいろいろあると思います。(ブログとか読んでみての感想です。)
私のように趣味で、かつ一人で制作している身にはマッチしましたね。

というわけでちょいと制作中!
Sketch3の画面

でもSketch3をセールまで待てず、Adobeのフォトグラフプラン(¥980/月)の約1年分の価格(¥11800)で購入したので、コスト削減優先した割には複雑な気分ですww
ではでは

CSSフレームワークとは、なんじゃいな?

私はWeb制作をほぼ趣味でやっています。たまーにお仕事いただきますが知人とか、その友人とか。
普段は、マニュアル制作の進行管理がメインのサラリーマンなので帰宅してから勉強したり、制作したり。あ、通勤電車で技術系の書籍読んだりとか。HTML、CSS、WordPress、Webデザイン、コーディングなどなど。書籍から学んだり、アフター5にセミナーやWebスクールに通ってみたり。

コツコツやれどもやはり趣味レベル。
覚えてもやはり繰り返し実践してはないので、忘れます。。都度ググる、書籍ひっぱりだす、教わったメモを検索する。HTMLやCSSをコーディングするのは、大好きなんだけど上記の通り、「忘れる」やら「時間ない」やら。

そこで、以前から気になっていたCSSフレームワーク!それってなんじゃいな?と。簡単に言うと既に設計されたCSSを使用し、HTMLのclass属性に予め決まった属性値を入れるだけで、リッチなメニューやボタン、タブにマルチカラムレイアウトが出来ますよと。

Twitter Bootstrapなんてとっても有名だし、以前そのテンプレートから知人の会社サイト作ったこともあるけど、出来た箱にコンテンツ入れて、色変えて、ちょっとだけjQueryの設定した位で、そもそもが理解していない。。これ覚えたら、その先にいろんな事出来そうかなと予感し、初めてみようと。
で、私は数あるなかでも、FoundationというCSSフレームワークを学んでみようと思います。なんでかって、たまたまやろうとしたWordPressの書籍のサンプルがFoundationベースだったから!

Foundationの画像

いいんだよ。そんな動機で。おじさんの趣味なんだし。広く浅くでもいろいろ知識を食べたいのさ!頑張ろう。
ちなみに今回の書籍はこちら!

現場でかならず使われているWordPressデザインのメソッド

<br>をレイアウト目的使用はダメよ

HTMLの<br>タグは改行で使用しますよね。こんな感じで。

<p>
	〒123-4567<br>
	東京都<br>
	渋谷区渋谷<br>
</p>

なんですが、、分かっちゃいるけど余白入れたい時とか段落と段落を分けたいときとか<br>を使いたい衝動にかられます。。「きちんと設計してマークアップすればいいのよ!」というご意見はごもっとも。でも誘惑に負けてしまう時も。。。
例えばタグ毎にデフォルトスタイルをリセットするreset.cssを使用していると<p>タグを使用した時、段落毎の余白も無くなると思います。適用するreset.cssにもよりますが。

通常
<p>Lorem ipsum dolor.</p>
ブラウザで表示時、ここに余白ができます
<p>Consectetur adipisicing elit.</p>

reset
<p>Lorem ipsum dolor.</p>
<p>Consectetur adipisicing elit.</p>

ということで、<br>を入れて余白調整のために使いたくなっちゃうと。こんな時はCSSで調整しています。

p{
	margin-bottom:20px;
}

<br>はあくまで改行させるための役割です。
ついつい使ってしまっている方はCSSで調整するように見直してみてはいかがでしょうか!

ウィジェットをフッターに設置

私はこのブログは勢いと思いつきで作ってしまったので、もっときちんと設計してからやれば良かったと後悔もありますが、とりあえず実践する!の心意気で進めていきたいと思っています。

自分でWordPress化したので愛着と変な責任感もあり、ペースは遅くても更新が続いています。で、更新していくとカテゴリー分けしかしていないとなんか、こう、無理が出てきている気がしてますのです。せめてタグ付けしてキーワードでもまとめるようにしようと。

私はウィジェットをフッターに設置しています。今までは「最新の投稿」、「カテゴリー」、「検索」を設置していましたが、今回は「タグ」も追加しようと思います。

まず、functions.phpにウィジェットを使用できるように記載をば。

register_sidebar(array('name' => 'フッター$'));

‘フッター$’は管理画面の[外観]→[ウィジェット]に表示される項目です。私は$のところに数字をいれて複数設定しています。そこに画面左の[利用できるウィジェット]から[タグクラウド]をドラック&ドロップ!

そして、footer.phpにも設置したい箇所に記載をば。

<footer>
	<aside>
		<ul><?php dynamic_sidebar('フッター$'); ?></ul>
	</aside>
</footer> 

これで[ウィジェット]で設定したタグの項目が表示されました。表示にはCSSも調整しましたが、今回はこれにて。

ブログのメニューにCSS3で動きを!(拡大編)

自身のブログ take4itsのコゴト のトップページはメニューのボタンを大きく構えております。
デザインセンスなんて皆無なので、思いついたままこの形にしました。最初は静的サイトで運用していましたので、メニューはカテゴリ分けにしてブログの記載内容を絞ってしまおうと考えていました。
その後、ネタが続かず後悔するのですが、、、
静的ページでしたので更新もブログ感覚で出来ず、都度HTMLを編集していました。面倒くさいですよね。そこでWordPressに移行した訳です。

ちょっと話がタイトルとそれそうです(笑)ともあれ、トップページのメニュータイトルを今まではhoverすると斜めに傾けるようにしていましたが、飽きてきた&他を試したいということで、この度変更してみました。
ちなみに今までのCSSは以下です。
※斜めにするためのプロパティのみにしております。あしからず。

li {
	-webkit-transition: all 0.5s ease;
	-moz-transition: all 0.5s ease;
	-o-transition: all 0.5s ease;
	-ms-transition: all 0.5s ease;
	transition: all 0.5s ease;
}

li:hover {
	-webkit-transform: rotate(-2deg);
	-moz-transform: rotate(-2deg);
	-o-transform: rotate(-2deg);
	-ms-transform: rotate(-2deg);
	transform: rotate(-2deg);
}

transitionの設定はそのままでhover時のtransformの設定を今回は拡大する内容に変更してみたいと思います。

li {
	-webkit-transition: all 0.5s ease;
	-moz-transition: all 0.5s ease;
	-o-transition: all 0.5s ease;
	-ms-transition: all 0.5s ease;
	transition: all 0.5s ease;
}

li:hover {
	-webkit-transform: scale( 1.05 );
	-moz-transform: scale( 1.05 );
	-o-transform: scale( 1.05 );
	-ms-transform: scale( 1.05 );
	transform: scale( 1.05 );
}

変更点は、transform: rotate(-2deg); → transform: scale( 1.05 );だけです。
無事トップページメニューのhover時の動きが斜め → 拡大に変更されました。
transitionで時間的変化の設定を入れて、transformで、要素にマトリクス変形、移動、縮尺、回転、傾斜などの変形を適用するということですね。
ここでは細かい説明などは書きません。ググってください。(無責任ですかね。。。)

今後こういった内容をネタに書く時はなるべくシンプルに、何をどうしたら、こうなった。
といった感じで書きたいと思っております。