WP Social Bookmarking LightのSNSアイコンが表示されなくて1時間くらいハマってた

個別にSNSのシェアボタンを表示させるのが面倒だったので、Wordpressのプラグイン WP Social Bookmarking Lightを使っていたのですが、ある日突然アイコンが非表示に、、

インスペクタを確認すると、普通に出てる。pluginのバグ、他のjsの干渉あたりを疑うことかれこれ1時間近く。全く進展がない。使う予定のなかった”LINEで送る”を表示するよう設定すると、そのボタンだけ普通に表示されるではありませんか!

ありがとうLINEさん

原因はスタイルシートに有りました。

動画かマップか何かは覚えていませんが、iframeを以前記事に設置した際に、トップの余白を確保するために書いたものでしたが、SNSボタンに影響を与えてしまっていました。SNSシェアボタンが特定のメディアにかぎらず、全て表示されない場合、iframeのスタイルを疑ってみて下さい。


続きを読む

30分でできる、テンプレートエンジンSlimの導入とSlimの実践的な使い方

以前の記事で、なぜデザイナーこそSlimを導入するべきなのかということについて書きました。今回はSlimをインストールしてからHTMLに自動でコンパイルする環境を構築する方法を説明します。”プログラミングっぽいこととかホントムリ、Terminalとか論外”みたいなデザイナーさんにもわかりやすく書いたつもりですので、ぜひ。

Slimをインストールする

Rubyの確認

SlimはRubyのgemと呼ばれるパッケージ(便利機能の塊のようなもの)の一つです。そのためRubyさえあれば動きます。terminalを開いて以下のコードを入力してみて下さい

ruby 2.x.x~ のような表記が確認できたらRubyがインストールされています。

slimをインストールする

Rubyが入っていることを確認したら、Slimをインストールします。先程のターミナルに以下のコードを入力。

インストールが完了したら以下のコードを入力してみてください。

Slim 3.x.x~みたいなものが表示されたら問題なくSlimをインストールできています。

実際にコンパイルしてみる

Slimの詳しい文法等を勉強する前に、実際にどのようにコンパイルされるのか見てみましょう。テキストエディタでtest.slimというファイルを作成し、以下のコードを貼り付けて下さい

test.slim

コードを貼り付けたら⌘Sで保存します。次はTerminalを開いて下さい。まずTerminalに”cd”と入力します。入力した後Enterは押さないで下さい

次にTerminalの画面に先程作成したtest.slimが 入っているフォルダ をドラッグ・アンド・ドロップして下さい。”test”というフォルダの中に”test.slim”を保存している場合、Terminalの画面が以下のようになっていると思います。”~~”は保存した場所によって違います。Desktopに保存した場合は”Desktop”になっているはずです。

Enterを押します。testフォルダに移動できました。terminalでcdコマンドを使うと、指定したディレクトリに移動することができます。今回はこの辺は気にせずに、”これからtestフォルダの中のものに対してTerminalから何かする準備を行った”と考えてもらうといいと思います。

それでは以下のコードをTerminalに入力しましょう。

testフォルダの中にtest.hemlというファイルが出現したと思います。コンパイルの完了です。実際に書き出したコードを見比べてみましょう。きちんとしたHTMLが書き出されていると思います。

test.slim

test.html

面倒なコンパイルを自動化する – 前半

とはいえ毎回terminalから先程のコードを入力してコンパイルするのは大変です。gulpと呼ばれるJavascriptで書かれた自動化ツールを使います。しかしgulpを使うにはいくつかプログラムをインストールする必要があります。最初だけですので頑張りましょう。やるべきことは以下の3つです。

  • 1. node.jsとnpmをアンインストール(すでにnode.jsをインストール済みの場合)
  • 2. nodebrewをインストール
  • 3. node.jsをインストール

1. node.jsをアンインストール

node.jsをすでに過去にインストールしたことがある場合は一度アンインストールする必要があります。Terminalに以下のコードを入力しましょう。

not foundと表示された方は、node.jsはインストールされていませんので、2. nodebrewをインストールに進んで下さい。バージョンが表示された場合、node.jsがすでにインストール済みですので以下のコードをターミナルに入力してアンインストールを完了させましょう。

再度 node-vを入力してみて下さい。アンインストールに成功しているはずです。

2. nodebrewをインストール

以下のコードをTerminalに入力するだけでOK。

エラーが出てしまう場合は、homebrewがインストールされていないので、調べてインストールしておきましょう。

3. node.jsをインストール

以下のコードを入力して、node.jsの最新バージョンをインストールします。

インストールが完了したら以下のコードを入力します。

以下のように表示されたと思います。

以下のコードを入力しましょう。v.6.6.0の部分には、nodebrew listで表示されたバージョンを入力しましょう

もう一度以下を入力して、”current: バージョン番号”になっていれば完了です。

面倒なコンパイルを自動化する – 後半

こちらに僕が使っているプロジェクトのパッケージが入っているので、ダウンロードして下さい。

https://github.com/tiekey/quck-start

zipでダウンロードしてきた場合、解凍しましょう。

Terminalでcdコマンドを使って、解凍したフォルダ内に移動します。”cd”と入力した後に、フォルダをドラッグ・アンド・ドロップでしたね。

続けて以下のコードを入力します。

以上です。これでslim-starter > viewsの中にあるSlimファイルを保存するだけで、自動でHTMLファイルが生成、更新されます。新しいSlimファイルをviewsの中に追加していっても大丈夫です。

また、フォルダに移動して”gulp”を入力するという流れは、Terminalを終了したら毎回行う必要がありますのでご注意下さい。試しにslim-starter > views > index.slimをテキストエディタで開いて、一度保存してみましょう。slim-starter内にindex.htmlが生成されました。

Slimの記法 基本編

id, class

slim

html

テキスト

slim

html

src, href

slim

html

css, js

slim

html

IE対応

slim

html

コメント

slim

html

css(sass)

slim

html

Slimの記法 応用編

include

_header.slim

index.slim

index.html

変数

slim

html

配列

slim

html

if

slim

html

loop その1 数字を指定してループ

slim

html

loop その2 数字を指定してループの応用

slim

html

loop その3 配列とループ

slim

html

loop その4 ifとループ

slim

html

続きを読む

デザイナーこそテンプレートエンジンを使おう – Slim編

Slimとは

Slimは最近世間を騒がせているテンプレートエンジンと呼ばれるもののひとつです。デザイナーがテンプレートエンジンを使うことによって静的なコードを簡単に、より早いスピードで書くことが出来ます。また、HTMLを直に書いたときと比べて圧倒的にコードの量が少ないため、不具合を減らすことも出来、楽に運用することができるようになります。(以下抜粋)

Slim is a template language whose goal is to reduce the view syntax to the essential parts without becoming cryptic. It started as an exercise to see how much could be removed from a standard html template (<, >, closing tags, etc…). As more people took an interest in Slim, the functionality grew and so did the flexibility of the syntax.
Slim はview の構文の無駄を出来る限りなくすことを目指したテンプレートエンジンです。元々は標準的な HTMLからどれだけ無駄を削ぎ落とすことができるか確かめるところからSlimは生まれました(<, >, 閉じタグなど)。 その後、多くの人が Slim に興味を持ったことでSlimの機能と柔軟な構文は進化を続けてきました
引用元: github

SlimのファイルにSlim特有の文法でコードを書いていき、最終的にはそれらをHTMLにコンパイル(変換)します。Slimで書いたコードをエンジニアのメンバーにそのままRailsやPHPなどのプロジェクトに組み込んでもらえれば最高なのですが、そうでない場合(.htmlでの納品をお願いされた場合)でも、Slimでコードを書くことによって様々なメリットを享受することができます。

導入コスト

導入コストは大したことありません。以下の3つくらい。

  • 1. テキストエディタをSlimに対応させる
  • 2. Slimのインストール
  • 3. Slimの文法を覚える
  • 4. .Slimから.htmlに変換できるようにする

1.テキストエディタをSlimに対応させる

普通のテキストエディタだと、最初からSlimに対応していないため、以下のように黒一色で表示されてしまうため非常に見にくいし効率的に作業することが出来ません。使っているテキストエディタを外部のプラグインなどを使ってSlimのシンタックスハイライトに対応させましょう。

Atomの場合

Atomの場合はこちらのパッケージを入れることでSlimのシンタックスハイライトが可能です。

Atom Slim Syntax Highlighting
Codaの場合

プラグインをインストールしましょう

https://panic.com/coda/plugins.php?id=82

Slimのインストール

Macの場合、アプリケーション>ユーティリティ>ターミナルを起動して、以下のコードを入力すればOKです

3.Slimの文法を覚える

これがすっごく大変なんじゃないかといつも聞かれますが、そんなことはありません。Slimで便利にできることはありますが、下のコードを見比べて”もう<>とを書かなくていいのか!!”と思ってくれればそれでいいです。追々Slimに慣れてきてから本格的に色々なことを学んでいけばいいと思います。

Slim
HTML

4.SlimからHTMLに変換できるようにする

様々な方法があるのですが、ターミナルとかに馴染みがないという方はPrepropsというツールがおすすめです。プロジェクトを登録してしまえば、Slimを作成、編集すると自動的にHTMLを生成、更新してくれるツールです。

使うといいこと

他にも数多くのメリットがあるかもしれませんが、デザイナーとして働いてきた僕がSlimを導入して感じたメリットは以下の3つです。

  • 1. コードがきれいになる
  • 2. プログラムっぽいことができる
  • 3. 共通パーツを切り離すことができる

1.コードがきれいになる

1-1. 無駄な要素を書かなくていい

先程紹介したように、Slimでは<>とを書く必要がなくなるため、非常にすっきりした印象のコードを書くことが出来ます。また、idやclassなどもcssのように#や.で書くこともできます。

Slim
HTML
1-2. 強制的にインデントに気をつかうようになる

Slimではインデントという行頭の空白が重要になってくるため、どんなにがさつな人でもこのようなコードを書くことがなくなります。

Slim
すっきり
HTML
こんなコードは二度と書けなくなります

2. プログラムっぽいことができる

いわずもがな、ハッシュやループなどを使って、コード量を劇的に減らしたり、変数、配列を使ってメンテナンスしやすいコードを書くことも出来ます。今回は省略。

3. 共通パーツを切り離すことができる

”共通パーツを切り離す”という言い方が適切かどうかは微妙なところですが、、、。例えば、上の画像のように4ページのウェブサイトがあったとしましょう。これら全てのページにHEADERというパーツは存在します。普通にHEADER内のテキストを変更しようとすると、4つのそれぞれのhtmlファイルを開いて合計で4回も同じテキストを書き直さなければなりません。数十ページにわたるサイトだったら…なんて考えたくもありません。

Slimを使うことで、上図のようにHEADERというパーツを切り離して1つのファイルとして持っておくことで、このような問題を抱えなくて済むようになります。

最後に

今回はテンプレートエンジンのざっくりとした概要と、導入することによるメリットをデザイナー目線で書きました。デザイナーの方に”意外と簡単そう”、”やってみようかな”と少しでも思ってもらえれば幸いです。

質問などありましたらTwitterでDMくだされば極力返します。

続きを読む