読者です 読者をやめる 読者になる 読者になる

かもメモ

自分の落ちた落とし穴に何度も落ちる人のメモ帳

CSSで文字にボーダー(縁取り)をつけたい。

CSS HTML Design
f:id:kikiki-kiki:20170327123027p:plain

Illustratorの線やPhothopのレイヤースタイルの境界線みたいに文字にボーダー(縁取り)をつける方法のメモ。

1. text-stroke を使う方法

f:id:kikiki-kiki:20170327123709p:plain
text-stroke サポート状況

IE以外はそこそこサポートされてきてるっぽい。
プロパティには-webkit-のブレフィックスが現状では必要。(なぜかFirefoxも。-webkit-text-stroke ってプロパティ名?)

書き方

f:id:kikiki-kiki:20170327130903p:plain

/* width | color */
-webkit-text-stroke: 2px #000;

又は

-webkit-text-stroke-width: 2px;
-webkit-text-stroke-color: #000;

ボーダー(縁取り)は文字の内側に付く

2. text-shadow を使う方法

text-shadowの構文は下記の様な感じです。

/* offset-x | offset-y | blur-radius | color */
text-shadow: 1px 1px 0 #000
/* color | offset-x | offset-y | blur-radius */
text-shadow: #000 1px 1px 0

このoffset-x | offset-y | blur-radius | colorのセットを「,」区切りで複数指定することが出来るので、上下左右にソリッドなtext-shadowを付けることで文字にボーダー(縁取り)を付けることができます。

書き方

f:id:kikiki-kiki:20170327141539p:plain

// 上
text-shadow: 2px 2px 0 #000,
             -2px 2px 0 #000,
             2px -2px 0 #000,
             -2px -2px 0 #000;
// 下
text-shadow: 2px 2px 1px #000,
             -2px 2px 1px #000,
             2px -2px 1px #000,
             -2px -2px 1px #000;

ボーダー(縁取り)は文字の外側に付く
text-shadowはIE10+で効くようなので、こちらを使えばほぼ全てのブラウザで表示ができそうです。text-shadow サポート状況
※ 文字の大きさに対してoffsetの値が大きすぎるとフォントの周りがギザギザになってしまうので注意が必要です。
 

まとめ

  • text-stroke は 内側にラインが入る
  • text-shadow は外側にラインが入る

と覚えておけば良さそうです。
IEも10以上なら表示されるし、Illustratorの線やPhothopのレイヤースタイルの境界線に近いのはtext-shadowの方かなと思いました。
また、IEではtext-strokeが表示されないので少し表示が変わってしまいますが、text-stroketext-shadowと合わせて指定するとこもできます。
f:id:kikiki-kiki:20170327141750p:plain
両方サポートしているブラウザなら細かな表現ができそうです。

サンプル

See the Pen OUTLINE TEXT Test by KIKIKI (@chaika-design) on CodePen.


[参考]

はじめてのCSS設計 フロントエンドエンジニアが教えるメンテナブルなCSS設計手法 (WEB Engineer’s Books)

はじめてのCSS設計 フロントエンドエンジニアが教えるメンテナブルなCSS設計手法 (WEB Engineer’s Books)

CSS 100%幅の子要素にネガティブマージンを使うと右側だけはみ出して横スクロールが表示されてしまう

CSS HTML Responsive

所謂Bootstrapの.row.col-で使われているような親要素が左右のネガティブマージンを持ち子要素がfloatを使ったカラムレイアウトを100%の画面に入れた時に右側だけが100%のブラウザサイズからはみ出して横スクロールが表示される現象に遭遇しました。

横スクロールが発生する例

HTML

<div class="container">
  <div class="row">
    <div class="col col-half">
      <div class="content">content</div>
    </div>
    <div class="col col-half">
      <div class="content">content</div>
    </div>
  </div>
</div>

CSS (stylus表記)

*
  box-sizing: border-box
.container
  width: 100%
.row
  margin-left: -15px
  margin-right: -15px
  .col
    float: left
    padding-left: 15px
    padding-right: 15px
  .col-half
    width: 50%

f:id:kikiki-kiki:20170325212944p:plain
こんな風に横スクロールが発生してしまいます。

解決方法1 ネガディブマージンを持つ要素の親にパディングを持たせる

Bootstrapをよくよく観察していると、ネガティブマージンを持つ.rowの親要素には必ずネガティブマージン分のパディングを持つ要素がある事に気が付きました。親要素にパティングを持たせておくことでウィンドウサイズからはみ出さないようにしているようです。

HTML

<div class="container">
  <div class="wrap">
    <div class="row">
      <div class="col col-half">
        <div class="content">content</div>
      </div>
      <div class="col col-half">
        <div class="content">content</div>
      </div>
    </div>
  </div>
</div>

CSS

.wrap
  padding-left: 15px
  padding-right: 15px

ネガティブマージンを持つ要素を囲み、囲った要素にネガティブマージン分のパディングをもたせればOKです。
f:id:kikiki-kiki:20170325223024p:plain
横スクロールは発生しませんが、.content.colの持つパディング分左右が小さくなります。
border-boxを使っているこの状態なら下記のような.rowに初めからネガティブマージンを持たせないものと同じ結果です。

*
  box-sizing: border-box
.container
  width: 100%
.row
  .col
    float: left
    padding-left: 15px
    padding-right: 15px
  .col-half
    width: 50%

解決方法2 ネガティブマージンを持つ要素の親にoverflow: hiddenを設定する

.colの持つパディング分を画面外に出し、.contentを画面の端一杯にしたいときは、ネガティブマージンをもつ.rowの親に幅指定と共にoverflow: hiddenを設定すればOKです。
HTML

<div class="container">
  <div class="row">
    <div class="col col-half">
      <div class="content">content</div>
    </div>
    <div class="col col-half">
      <div class="content">content</div>
    </div>
  </div>
</div>

CSS

*
  box-sizing: border-box
.container
  width: 100%
    overflow: hidden // <- 追加
.row
  margin-left: -15px
  margin-right: -15px
  .col
    float: left
    padding-left: 15px
    padding-right: 15px
  .col-half
    width: 50%

f:id:kikiki-kiki:20170325223042p:plain
図のように画面端から.contentのエリアになります。
overflow: hiddenを使用するのであまり上のレイヤーの要素にこの設定をしてしまうと他のデザインで苦労する自体が発生しかねないので注意が必要です。
 
しばらくCSSとか書いてなかったので予期しないレベルダウンを感じています…
今までこんな所に躓いたこと無かった気が…

ITがメインではない仕事に就いている(正確には仕事がない)とドンドンレベルダウンしていっているのを身にしみて感じていて、今迄できていたような事がカンタンに出来なくなるってのが凄まじいストレスと自己嫌悪になるので、都会に引越ししてエンジニア的なお仕事に再就職したい今日この頃なのでした…


[参考]

はじめてのCSS設計 フロントエンドエンジニアが教えるメンテナブルなCSS設計手法 (WEB Engineer’s Books)

はじめてのCSS設計 フロントエンドエンジニアが教えるメンテナブルなCSS設計手法 (WEB Engineer’s Books)

Google スプレッドシート nヵ月前の日付をチェックしたい

Google Drive Spreadsheet

例えば、下記のような期限日が入力されているシートで期限まで3ヵ月切っているセルをハイライトしたいような時のメモ。

A B
1 案内日 期限(6ヵ月後月末)
2 2016/07/07 2017/01/31
3 2016/08/07 2017/02/28
4 2016/09/10 2017/03/31
5 2016/10/06 2017/04/30
6 2016/11/04 2017/05/31
7 2016/12/05 2017/06/30
8 2017/01/05 2017/07/31
9 2017/02/03 2017/08/31
10 2017/03/07 2017/09/30

判定条件

条件としては「3ヶ月前の月末 < 本日」で判定すれば良さそうです。
3ヶ月前の月末はEOMONTHを使うと取得することができます。

EOMONTH(開始日, 月数)
起算日から指定した月数だけ前または後ろの月の最終日の日付を返します。
EOMONTH - Docs editors Help

EX

B5セルの「2017/04/30」の3ヵ月前の月末(2017/01/31)は次の式で求めることができます。

=EOMONTH(B5, -3)

この式を利用した条件式付き書式をせっていすれば良さそうです。

シートに条件式付き書式を設定する

  1. B部分をクリックしてB列全体を選択
  2. メニューの「表示形式」から「条件付き書式…」を選択。
  3. 条件式付き書式設定ルール のメニューが表示されるので
    セルの書式設定の条件を「カスタム数式」を選択。
  4. 値または数式入力欄に下記の数式を入力
    =EOMONTH($B:$B,-3)<TODAY()
  5. いい感じに書式設定のスタイルを指定して、完了ボタンをクリック

期限日が3ヶ月切っているセルが設定した書式の通りに表示されていればOKです。
f:id:kikiki-kiki:20170324165053p:plain

月数を変えたいときはEOMONTHの第二引数の値を変えればOK。
他にもEDATE関数などを使用すれば条件の日付を自由に計算することができます。
公式のドキュメントにいろんな関数が載っているので興味があればそちらを参照ください。


[参考]

ポケット百科 Googleサービス 知りたいことがズバッとわかる本

ポケット百科 Googleサービス 知りたいことがズバッとわかる本

CSS3 マークアップ別Flexboxで要素を左端・センター・右端揃えのレイアウトを作る

CSS HTML Design Responsive

IE8以下のサポートも終わり自動アップデートになってきていますし、CSS3のFlexboxもそろそろ実制作で活用できる用になってきていると思っています。
f:id:kikiki-kiki:20170323200844p:plain
flex サポート状況

なので、下記画像のようなWEBサイトのグローバルナビゲーションとかでよくある例えばロゴ・ナビゲーション+ボタンの様な構成で、ロゴを左端、ナビゲーションをセンターにしてボタンを右端に置くデザインをFlexboxで作ってみようと思います。
f:id:kikiki-kiki:20170323201153p:plain ※いつもの事ながらIEではチェックしていません。

並べたい各要素が同じ階層のマークアップの場合

HTML

<header class="header">
  <div class="nav-wrapper">
    <p class="logo">LOGO</p>
    <nav class="navigation">
      <ul class="nav-list">
        <li class="nav-link"><a href="">LINK</a></li>
        ...
      </ul>
    </nav>
    <div class="nav-btn">
      <a class="btn">BUTTON</a>
    </div>
  </div>
</header>

Flexboxの揃え方 justify-content: space-between を使う方法

CSS

/* ▼ 共通部分 ▼ */
.header,
.logo,
.navigation
.nav-list,
.nav-btn
  box-sizing: border-box
.header
  width: 100%
.nav-list
  padding: 0 1em // 最小の左右のマージンを持たせておく
/* ▲ 共通部分 ▲ */
// Flex
.nav-wrapper
  display: flex
  flex-flow: row nowrap
  justify-content: space-between
  align-items: baseline

flexboxにjustify-content: space-between と指定すれば、ロゴ・ナビゲーション・ボタンの間隔が均等になるのでデザインが実現できます。

margin auto を利用する方法

CSS

/* 共通部分省略 */
// Flex
.nav-wrapper
  display: flex
  flex-flow: row nowrap
  // justify-content: space-start <- default値
  align-items: baseline
.navigation
  margin: 0 auto

親要素がflexの子要素でmargin autoを使用すると親要素の幅内でいい感じに配置してくれる様です。
ですので、センター揃えにしたいナビゲーションにmargin: 0 autoを与えると右マージンに押されてボタンが右端に配置されデザインを実現することができます。
このautoで付けたマージンもjustify-content: space-betweenの間隔と同じように可変なのでレスポンシブやリキッドレイアウトにも対応可能かと思います。

おまけ margin autoを利用するとロゴだけ左揃えにもできる

ナビゲーションとボタンがflexを親に持つ同じ子要素なので、ロゴを左揃え・ナビゲーション・ボタンを右揃えにしたい時にはjustify-content: space-betweenは使えませんので、margin: autoがいい感じに幅を取ってくれることを利用すると実現が可能となります。

/* 共通部分省略 */
// Flex
.nav-wrapper
  display: flex
  flex-flow: row nowrap
  justify-content: space-end // 右を基点にする (全体右寄せ)
  align-items: baseline
.logo
  margin-right: auto

ロゴにmargin-right: autoを与えるとロゴの右側に取れるだけのマージンが付くので、ロゴのみ左揃えになります。
f:id:kikiki-kiki:20170323203950p:plain
 

ナビゲーションと内にボタンがあるマークアップの場合

レスポンシブデザインでナビゲーションとボタンを同時に変化させたい時とかこの様なマークアップもありそうです。
HTML

<header class="header">
  <div class="nav-wrapper">
    <p class="logo">LOGO</p>
    <nav class="navigation">
      <ul class="nav-list">
        <li class="nav-link"><a href="">LINK</a></li>
        ...
      </ul>
      <div class="nav-btn">
        <a class="btn">BUTTON</a>
      </div>
    </nav>
  </div>
</header>

2段重ねのFlexboxで実現する

‘.navigation'内の子要素も横並びにするので、ここもdisplay: flexにし、センター揃えにしたいナビゲーション(.nav-list)で調整する事で、キレイに左端揃え・センター揃え・右端揃えのレイアウトを実現することができます。

/* 共通部分省略 */
// Flex1 .logo と .navigation の並び
.nav-wrapper
  display: flex
  flex-flow: row nowrap
  // justify-content: space-start <- default値
  align-items: baseline
// Flex2 .nav-list と .nav-btn の並び
.navigation
  display: flex
  flex-flow: row nowrap
  justify-content: center // 全体中揃え
  width: 100% // 残りの幅全体にする
  box-sizing: border-box // 必須
.nav4 .nav-list
  margin: 0 auto
  1. .logo.navigationflexにする
    f:id:kikiki-kiki:20170323210413p:plain
  2. widtth: 100%.navigationを残りの部分一杯の領域にする
    f:id:kikiki-kiki:20170323210420p:plain
  3. ナビゲーション(.nav-list)の左右のマージンをautoにして全体のセンターにする
    f:id:kikiki-kiki:20170323210430p:plain

 

ボタンがナビゲーションのリスト内にある場合

<header class="header">
  <div class="nav-wrapper">
    <p class="logo">LOGO</p>
    <nav class="navigation">
      <ul class="nav-list">
        <li class="nav-link"><a href="">LINK</a></li>
        ...
        <li class="nav-btn">
          <a class="btn">BUTTON</a>
        </li>
      </ul>
    </nav>
  </div>
</header>

このマークアップだと完璧にナビゲーションのリンク部分だけをheaderのセンターに揃える方法を見つけることができませんでした。

ボタンにマージンを%で設定して調整するパターン

/* 共通部分省略 */
.nav-wrapper
  display: flex
  flex-flow: row nowrap
  justify-content: space-betwee
  align-items: baseline
.navigation
  width: 100%
  box-sizing: border-box // 必須
.nav-list
  display: flex
  flex-flow: row wrap
  justify-content: flex-end // 右端を基点にする
  padding-right: 0
.nav-btn
  margin-left: 25% // 適当な値に設定

.logo.navigationjustify-content: space-between で等間隔にし、.nav-listflexにして子要素を並べ、リストの最後になるボタン(.nav-btn)の左マージンを適当な%で指定してそれっぽくすることができました。ボタンのマージンは親要素のn%なので、ブラウザの幅が狭いとロゴとの間隔が狭くなり、逆にブラウザの幅が広いとボタンとの間隔に対してロゴとの間隔が広くなります。
f:id:kikiki-kiki:20170323215701p:plain

ボタンをposition: absoluteで右端に固定するパターン

/* 共通部分省略 */
.nav-wrapper
  display: flex
  flex-flow: row nowrap
  justify-content: space-betwee
  align-items: baseline
  position: relative
.navigation
  display: flex
  flex-flow: row nowrap
  justify-content: space-around  // .logoとの間隔を作る
  width: 100%
  box-sizing: border-box // 必須
.nav-list
  display: flex
  flex-flow: row wrap
  // justify-content: space-start <- default値
  padding-right: 0
.nav-btn
  position: absolute
  right: 0

ナビゲーション内のリスト左揃えで始めボタンだけposition: absoluteで右端に固定しflex配置から外します。そして.navigationをFlexboxにしてjustify-content: space-aroundを指定するとロゴとの間隔もいい感じになります。しかし、absolute配置しているボタンの幅は無いものして計算されるのでブラウザの幅が狭くなるとナビゲーションのリストとボタンが重なってしまいますので、メディアクエリなどで小さくなった時のCSSを別途作成する必要がありそうです。
f:id:kikiki-kiki:20170323221203p:plain
 

サンプル

See the Pen Flex nav sample by KIKIKI (@chaika-design) on CodePen.

 

今までどうしてもIE対応があったりで、Bootstrapで流行ったfloatdisplay: tableを使ったCSSを書くことが多くFlexboxをちゃんと使いこなせていなかったので今回この記事をかいて少しFlexboxにも慣れてきた感じがしてきました。
コーディングしない期間が続くと書き方を忘れていたり、新しいやり方のキャッチアップが疎かになってしまうので気をつけなきゃな―っとしみじみ感じています。


[参考]

Adobe illustrator パターンをオブジェクトにしたい

Adobe illustrator Design

パターンで付けた柄をオブジェクト化(アウトライン化?)する方法。
オブジェクトを選択して、メニュバーからオブジェクト > 分割・拡張...を選択すればOK
f:id:kikiki-kiki:20170311224902p:plain
ダイアログが出るのでそのままOKを押せばパターンがオブジェクトに変換されます👇
f:id:kikiki-kiki:20170311224935p:plain

イラレで印刷に出すのバージョンとかの問題でパターンとかブレンドとかそのまま出すの不安なので、全部オブジェクトに変換しているのだけれど正しいのかな?(イラレ嫌いでPhotoshopで印刷データ作るタイプ)


神速Illustrator [グラフィックデザイン編] CC対応

神速Illustrator [グラフィックデザイン編] CC対応

WordPress 4.7, 4.7.1 はAPIに致命的なバグがあって認証無しで誰でも記事を改ざんできちゃうっぽい!

WordPress security

WordPress 4.7, 4.7.1 のサイトは直ぐに4.7.2にアップデートするのです!

Twitterで大学や国会議員や公的機関のサイトが大量に改ざんされてるという情報を朝から目にした日でした。

どうやら改ざんされていたのはWordPressのサイトの様で、事の顛末は、
WordPressはアップデートの際には何を修正したかを公開していたのですが、今回はWordPress 4.7.2で修正をしたバグが致命的なものだったために直ぐにセキュリティに関わるアップデートの内容を公開せずに1週間後に情報を公開したようです。( WordPress 4.7.2のリリースが1月26日、バグの情報が公開されたのが2月1日 )
そして、それ以降もWordPressをアップデートせずに、4.7、4.7.1のバージョンのままだったサイトが軒並みこのバグを利用されて記事を改ざんされていったと言うのが今回の件のようです。

今回の話題になってるバグとは?

特定のAPIのURLにPOSTでデータを送るだけで、WordPressのログインも認証もなしに投稿内容を更新することができてしまうというバグ…そしてバグの内容が公開されていて、少しググれば簡単に攻撃スクリプトが解ってしまうというくらい簡単なもの。
これはWordPress 4.7 で導入された投稿の取得や新規追加、更新を行うことができるREST APIに含まれていたバグ。なので、4.7より古いバージョンのサイトはこの攻撃で改ざんされないっぽい。古いのはあまり良くないけど、結果的に今回は良かったみたいな…

ローカル環境で試してみました。

WordPressのバージョンは管理画面 >ダッシュボードで確認ができます。 f:id:kikiki-kiki:20170206143252p:plain
※ ここが、4.74.7.1 の人はすぐにアップデートしましょう!

バグの具体的な内容はWordPress公式のリリースノートの記事や、そこにある報告者のリンク先の記事内に書かれています。
攻撃したいWordPressのサイトのAPIのURLに、改ざんしたい記事の投稿IDを紐付けて、データにタイトルと本文を持たせてPOSTするだけ。

なので、こんなサイトに…
f:id:kikiki-kiki:20170206150323p:plain
次のような公式の記事とかを参考に作った攻撃コード ( 調べればすぐ解りますがキーとか隠しておきます )
f:id:kikiki-kiki:20170206150202p:plain
これをリクエストすると…

f:id:kikiki-kiki:20170206150331p:plain
はい。認証も何もなしに記事を書き換えることができました。
このAPIを利用して記事を改ざんするとWordPress管理画面から見れる投稿のリビジョンでは、ユーザー名が表示されないようです。
f:id:kikiki-kiki:20170206151734p:plain

ね?簡単でしょ!?

_人人人人人人人人人人人人人人人_  
> 簡単でしょ!?じゃねーよ!!!! <  
 ̄Y^Y^Y^Y^Y^Y^Y^Y^Y^Y^Y^Y^Y^Y ̄  

試してみた所、HTMLタグも入れ放題なんですよ。
そして、攻撃に必要になる「WordPressの投稿ID」なのですが、デフォルトとか多くのテーマだとHTMLタグにid名やclass名で投稿IDが出力されています。
HTMLに出力されていなくてもRSSを利用している場合RSSに出力されているURLはパーマネントリンク設定で変更されたURLではなく?p=1の形式になっており投稿IDが丸わかりなのです…

このバグ
f:id:kikiki-kiki:20170206142825p:plain

はてなブックマーク - WordPress 4.7.1 の権限昇格脆弱性について検証した | 徳丸浩の日記
👆 コトの重大性に溢れたコメントが並んでいます。マジやばくね?

解決方法

こちらの記事にあるように、下記の方法を取ればこの致命的なバグには対応することができそうです。

  1. WordPressを最新の4.7.2にアップデートする
  2. ただちに最新版へアップデートすることが困難な場合、REST APIを無効化するプラグインを使用する

そして、可能な限りWordPressの自動更新をONにしておくのが良いのではないかと思いました。
しかし私の持っていたサイトの中には更新の通知が来ても実際には更新されなかったサイトもあったので自動更新機能を過信しすぎてもダメかもしれません。

改ざんされたサイトの対応

改ざんされた記事そのものはリビジョンから直ぐにもとに戻すことが可能です。
今回のAPIを利用した攻撃の場合、できても記事のタイトルと本文の更新のようなので記事内にスクリプトやiframe埋め込むことはできると思うのですが、サイトのテーマ自体にコードを追加したり、DBからデータを抜き取ったり、ログイン情報を取得したりとかは難しいのかな〜?と思っているのですが、これは私もハッキリとした事が言えないので、むしろ教えてほしい部分です!!

WordPressのような既に多くの人がコミットしているプロジェクトでもこんな重大な脆弱性が発生したりするんだなぁ〜って驚きました。
それより、WrodPressのサイトを持っている方は直ぐにチェックしてみることをオススメします。  
 
追記
REST APIのバグを利用しての改竄は観測している中ではISISを中傷する改竄が多かったのですが、中には「私はホワイトハッカーだ。君のサイトのWordPressアップデートした方が良いぞ。」と注意喚起のような記事を改ざんするハッカーも観られるようになってきました。
f:id:kikiki-kiki:20170206200127p:plain
まぁ いずれにせよ、改ざんされちゃってるわけですけどね。。。


[参考]

👇 徳丸 先生のありがた〜い本 👇

確定申告!

Book Blog

確定申告の季節です。
毎年、ナゼ毎月領収書を整理しておかなかったのだ!! と成長のない自分を責める季節でもあります。

私はフリーランスを初めてナンダカンダで10年くらいになっていました。
WEB・グラフィック制作やイベントの進行管理といった仕事の他に同人活動もしているの事もあり、業務内容が雑多で多岐にわたるので経費も雑多なものになるのですが、昔読んだ「フリーランスを代表して 申告と節税について教わってきました。」という本に書かれていた内容が青色申告になった今も役に立っています👇

2010年に読んで書いたレビューを貼っておきます。

会話形式の文章とイラストでとても読みやすく理解しやすかった。
腹黒本音モードのときは顔に影が入ったりするのが面白い。各章も短く簡潔で、最後にまとめの4コマ漫画が入るので読み疲れることなく最後まで読めた。
税が身近に感じられた一冊。
フリーランスを代表して 申告と節税について教わってきました。 感想 きたみ りゅうじ - 読書メーター

この本の著者はイラストレーターなので同人をしていて確定申告が必要な方はもちろん参考になる部分が多いと思います。その様な職種の方だけでなく、フリーのデザイナーやエンジニアも読んでおいて損は無いのではないかと思います。
どちらも資料がいっぱい必要なお仕事ですからね!! と、本をオススメするだけの記事でした。

Ruby Slim タグなどを含んだ変数をエスケープせずに出力したい。

Ruby Slim

Slim テンプレートでの変数の出力の方法は、こんな感じに=で出力することができます。

div
  p= @value

文章中や、属性中に変数展開させる場合は#{変数名}で出力します。

p
  a.btn src="edit/#{@id}" 編集

しかし、上記の方法ではHTMLタグや"などを含んだ文字列を出力しようとするとエスケープされたものが出力されてしまいます。自動的にエスケープしてくれるので便利なのですが、改行がある文章をそのまま出力したいなどといった場合には不都合があります。

EX:

@value = '<b>"タグ"を含んだテキスト。</b>'
p= @value
p 文章中に変数展開「#{@value}

↓ 出力されるHTML

<p>&lt;b&gt;&quot;タグ&quot;を含んだテキスト。&lt;/b&gt;</p>
<p>文章中に変数展開「&lt;b&gt;&quot;タグ&quot;を含んだテキスト。&lt;/b&gt;</p>

エスケープせずに出力する方法

エスケープせずに変数を出力する場合は == で、
エスケープせずに文章中に変数展開をする場合は #{{変数名}} と二重にすれば記述すればOK。

EX:

@value = '<b>"タグ"を含んだテキスト。</b>'
p== @value
p 文章中に変数展開「#{{@value}}

↓ 出力されるHTML

<p><b>"タグ"を含んだテキスト。</b></p>
<p>文章中に変数展開「<b>"タグ"を含んだテキスト。</b></p>

まとめ

エスケープあり エスケープなし
変数出力 = ==
変数展開 #{変数名} #{{変数名}}

 
好んで使ってたSlimと記述方法が似てるpug (旧jade)ではエスケープしない場合は!=!{変数名}だったので、同じだろうと思ってハマってしまいました。
Rubyの学習が全然進んでないので、もくもく会とかに参加しよう…

後、記事と全然関係ないのだけどSublimeTextでRuby書いてると、シンタックスハイライトの処理なのかめちゃくちゃ入力と表示にラグ発生するのだけれど解決方法とかあるのだろうか…?


プログラミング言語 Ruby

プログラミング言語 Ruby

俺のAdobe Creative Cloudがある日突然、体験版になってた件。

Adobe Creative Cloud Tips

朝起きて、仕事をしようとPhotoshopを起動しようとしたら...
Photoshopの体験版を使用しますか? というアラートが表示されました。

Creative Cloudは契約済みで支払いも行っており、自分のアカウントでログインもされている状態でした。
f:id:kikiki-kiki:20170115115856p:plain
軒並み体験版になってる...

一度ログアウトして、再度ログインすれば解決

この状態で何度 アプリを再起動しようとしても、未契約状態扱いになり、体験版で使用するか聞かれるアラートが表示されてしまいます。
恐らく、1度目の失敗した状態がキャッシングされてしまっているのが原因ではないかと思います。
f:id:kikiki-kiki:20170115120147p:plain
一度、Creative Cloudのデスクトップアプリの設定アイコンををクリックし、「環境設定...」を選択し、ログアウト ボタンを押してログアウトします。
その後、再度Creative Cloudのデスクトップアプリをクリックしてログインしなおせば契約がされている状態に戻りました。

ネットワークが切れたとかの問題なのか、ちょっと原因が不明ですが契約しているのに未契約状態になっていたら、再ログインを試してみれば良さそうです。仕事始める前に疲れてしまったよ...

↓ これ欲しい。

神速Photoshop [Webデザイン編]

神速Photoshop [Webデザイン編]

神速Photoshop[グラフィックデザイン編] CS6/CC/CC 2015対応

神速Photoshop[グラフィックデザイン編] CS6/CC/CC 2015対応

神速Illustrator [グラフィックデザイン編] CC対応

神速Illustrator [グラフィックデザイン編] CC対応

WordPress 管理画面のベーシック認証が効かなくなった時のメモ

WordPress

WordPressを設置する時に少しでもセキュリティを高めるために管理画面やログイン画面にベーシック認証をかけています。
ファイル構成

/
|- .htaccess
|- /wp
|   |- .htaccess
|   |- .htpasswd
|   |- /wp-admin
|- index.php

WordPresswpディレクトリ内に置き、wpディレクトリ内の.htaccessでログイン画面(wp-login.php)にベーシック認証をかけていました。 今回なぜか/wp/wp-admin/でログイン画面にアクセスしようとするとexample.com/wp/wp-login.php?redirect_to=http%3A%2F%2Fexample.com%2Fwp%2Fwp-admin%2F&reauth=1にリダイレクトされエラーページ(404テンプレート)が表示されてしまう現象に遭遇しました。

ログイン画面のベーシック認証

/wp/.htaccess は次のような感じです。
簡易にwp-login.phpにベーシック認証をかけ、パーミッションを400にしてあるwp-config.phpも念のため直接アクセスを禁止する感じにしていました。

# wp-login.php にベーシック認証をかける
<files wp-login.php>
 AuthUserFile /webroot/wp/.htpasswd
 AuthGroupFile /dev/nul
 AuthName "Username and Password"
 AuthType Basic
 require valid-user
</files>

# wp-config.php への直接アクセスを禁止
<files wp-config.php>
 Order deny,allow
 deny from all
</files>

エラーページの指定 (ErrorDocument) が原因だった!

ベーシック認証が表示されず、ログイン画面に遷移しないでエラーページ(404テンプレート)が表示されていた問題は、/.htaccessに書いていたエラーページの指定 ErrorDocument が原因でした。
エラーコードが401の時の設定を ErrorDocument 401 404.html のように指定していしている。かつ ログイン画面にベーシック認証をかけていると、今回のようなリダイレクトパラメータが付いた画面になりログイン画面が表示されないという現象になってしまうようです。ログイン画面にベーシック認証を書けていない場合はErrorDocument 401 が指定されていても問題なく動作しました。
ErrorDocument 401 の指定を消すか、次のように書き換えればば問題は解決されました。

ErrorDocument 401 default

wp-login.phpだけでなく/wp-adminディレクトリ下にベーシック認証を書けている場合もErrorDocument 401default以外だと、同様にログイン画面が表示されなくなってしまいます。

 
まさか、ErrorDocument の指定に問題があるとは思いもしなかったので、問題の解決に結構時間がかかってしまいました。日本語で検索しても全然ヒットしなかったのでw
やはりWEB関連のトラブルの際は全て英語のキーワードで検索してみるのが近道ダナ(・x・) と実感したのでした。


[参考]

一歩先にいくWordPressのカスタマイズがわかる本

一歩先にいくWordPressのカスタマイズがわかる本