(”寝る人”さんのブログより、とてもわかりやすい画像を引用させていただきました)

脆弱性

target="_blank"のaタグには脆弱性があります。

遷移先から遷移元のページを不正に操作したり、オブジェクトにアクセスしたりできてしまいます。
これによって、フッシング詐欺攻撃を行う余地を生んでしまいます。

サイトで rel="noopener" を使用して外部アンカーを開く(Google Developers)

監査が重要である理由
target="blank" を使用して任意のページから別のページにリンクしている場合、リンク元のページとリンク先のページは同じプロセスで動作します。 そのため、リンク先のページで負荷の高い JavaScript が実行されていると、リンク元のページのパフォーマンスが低下するおそれがあります。
また、target="blank" にはセキュリティ上の脆弱性もあります。リンク先のページでは window.opener を使用して親ウィンドウのオブジェクトにアクセスしたり、window.opener.location = newURL によって親ページの URL を変更したりできます。

対策

対策としては、target="_blank"を指定しいるaタグのrel属性に"noopener noreferrer"オプションを付与すれば良いです。

まずnoopenerですが、このオプションを指定することで「別タブの遷移先から、window.openerを参照できなくなる（≒不正操作ができなくなる）」という効果があります。
そのため、基本的な対策は noopenerだけで問題ありません。

しかし、Edgeなどの一部のブラウザではnoopener自体がサポートされていないこともあります。
その場合の対策としてnoreffererを指定することで、同じような挙動を実現することが可能です。

noreffererを指定することで、「遷移先のリソースからリファラーを送らないようにブラウザに指示を出す」ことが可能です。
そのため、noopener noreferrerの両方をしていすることが望ましいわけです。

ちなみに、rel属性をはじめ各ブラウザのオプション対応については以下のWebサービスで確認をすることができます。

Can I use... Support tables for HTML5, CSS3, etc

背景

既存のWebページ内で、target="_blank"オプションを指定したaタグが複数存在していました。

Reactであれば、eslintで危険なtarget="_blank"オプションが弾かれたり、wordpressであれば自動で上記のrel属性が付与されるようになっているので、あまり気にすることはありません。

• React：yannickcr/eslint-plugin-react
• Wordpress：wordpress.org日本語　ワードプレス4.8と4.7.5

しかし、生のhtmlで記述されたLPでは上記のようにデフォルトでtarget="_blank"を警戒することはできません。
ひとつひとつのaタグにrel属性を付与したりチームの規約にするのも大変なので、javascriptで自動的に属性を付与してあげるのが一番良さそうです。

スクリプト文

// aタグの中身を分解
var aTags = [].slice.call(document.getElementsByTagName('a'));

// 未対応であるIEを除外するため、ブラウザの種別を洗う
var userAgent = window.navigator.userAgent.toLowerCase();
var isIE = (~userAgent.indexOf('msie') || ~userAgent.indexOf('trident'));

function addRels() {
  if (!isIE) { //IEは弾く
    aTags.forEach(function (el) {
      if (el.target === '_blank') {
        var rels = el.rel.split(' ');
        if (!~rels.indexOf('noopener')) {
          rels.push('noopener');
          el.setAttribute('rel', rels.join(' ').trim());
        }
        if (!~rels.indexOf('noreferrer')) {
          rels.push('noreferrer');
          el.setAttribute('rel', rels.join(' ').trim());
        }
      }
    });
  }
};
// 関数を実行
addRels();

少しだけ解説

!~rels.indexOf(文字列)では、いわゆる「ビット反転演算子」を利用しています。

indexOfは「文字列が見つかれば文字列が見つかった場所(0以上)」を、「文字列が見つからなければ-1」を返します。
この挙動を利用し、「-1をビット反転演算子にかけ、0を返す」→「if文で0が真と判定される」という文字列マッチングの仕組みを実現しています。

内容

CSSの詳細度と、コーディングで注意したい事をまとめてみました。

詳細度（specificity）とは

記述したCSSのプロパティが適用される際の優先度です。
詳細度が高いもののプロパティが適用されます。
詳細度が同じ場合は、後から記述されたものが適用されます。
この詳細度は、CSSのセレクターによって決定されます。

詳細度の計算の仕方

詳細度は、セレクタの内容から算出します。
下記のように値が設定されており、これを並べた値が詳細度になります。

• セレクター内のID属性の数（a）
• セレクター内のCLASS属性/属性セレクタ/疑似クラスの数（b）
• セレクター内のタグ名/擬似要素の数（c）

/* 例 */
*               /* a=0 b=0 c=0 -> specificity =   0 */
LI              /* a=0 b=0 c=1 -> specificity =   1 */
UL LI           /* a=0 b=0 c=2 -> specificity =   2 (要素セレクタが2つ) */
UL OL+LI        /* a=0 b=0 c=3 -> specificity =   3 (要素セレクタが3つ) */
H1 + *[REL=up]  /* a=0 b=1 c=1 -> specificity =  11 */
UL OL LI.red    /* a=0 b=1 c=3 -> specificity =  13  (要素セレクタが3つとclassセレクタ)*/
LI.red.level    /* a=0 b=2 c=1 -> specificity =  21 */
#x34y           /* a=1 b=0 c=0 -> specificity = 100 */
#s12:not(FOO)   /* a=1 b=0 c=1 -> specificity = 101 */

引用元：https://drafts.csswg.org/selectors-3/#specificity

コーディングで注意したい事

複雑なセレクタにしてしまうと、意図しないプロパティが適用されたり、適用されなかったりする事が増えます。
詳細度を計算するにしても、計算が複雑です。
この為、セレクタを考えるときは下記を念頭に置きたいです。

同じ形式のセレクタにする（可能な限り）

これは詳細度の統一が目的です。
詳細度を統一しておくと、詳細度を細かく考えなくて済むので簡単になります。
算出する場合も最小限で済みます。

p{
  color: black;
}
p.red{
  color: red;
}
.info p.text{
  color: blue; 
}
div p span {
  color: green; 
} 

/* こっちのほうが、どのプロパティが適用されるか簡単に予想できる */
.text{
  color: black;
}
.red{
  color: red;
}
.info{
  color: blue; 
}
.green{
  color: green; 
} 

セレクタは単純にする

これも詳細度の統一が目的です。また詳細度の算出を容易にする為の意味もあります。
（また、何の為のstyleであるのか解読に時間がかかります）

/* 元コード */
div p span.note{
  color: red;
}

/* 
ABテストや、何かの理由で上書きしたい時は、同じように書かないと適応されない。
めんどい
 */
div p span.note{
  color: blue;
}

まとめ

• 詳細度によってプロパティの適用が決定される
• 詳細度はセレクタの内容から算出される
• セレクタを単純にすると、詳細度の計算が少なくて済む。

さらに突き詰めると、BEMやsmacss、flocssのような設計手法/思想に行き着きます。
まずは詳細度でプロパティの適用が変わる事、詳細度を統一する事を意識する事で、だいぶCSSのコーディングと運用が楽になると思います。

参考

詳細度
https://developer.mozilla.org/ja/docs/Web/CSS/Specificity

Selectors Level 3
https://drafts.csswg.org/selectors-3/#specificity

・初学者がUdemyで２日間フロントを勉強してみた(前編)

まず自己紹介

• ６ヶ月前にプロゲートをやってみるも２日も続かず挫折
• 某プログラミングスクールに１ヶ月通う事にするも、通学がきつく挫折×２
• 人口知能に興味を持ち、自分も人工知能のWebサービスを作りたい！と奮起してドットインストールのプレミアム会員になるも１週間で挫折、、×３

.しかしまたあることがきっかけでまたプログラミングに挑戦。。。

プログラミングに何度も打ち拉がれた筆者がなぜまたプログラミングに挑戦したか。

1. 気づいたら最新の言語や、テクノロジーについて調べていたから。
2. 正社員になってみたが向いていない為、転職する、or フリーランスとして稼ぐ為。
3. まなブログさんのブログに影響された。
4. やっぱエンジニアかっこいいって思った。

そんな理由で再びチャレンジ！！だが、、、

フリーランスとして稼げるようになるには大体200時間くらい必要らしい、スクールに通うお金もない、、、

Web記事を漁っているとUdemyというサービスがあるということを発見。『んーYouTubeの広告で出てくる、pythonエンジニアが長々と話しているあれか、、』と思ったが、まあとりあえず調べてみるか、とサービスを見てみると、、、　

『なんやこれ、、めっちゃ面白いやん、、某pythonエンジニアのSさんの動画めちゃ面白いやん！』ということで、再びプログラミングに挑戦。

pythonいいけど、やっぱり稼げるようになるにはやっぱフロントからという記事を見つけたのでとりあえずUdemyのフロント（HTML、CSS、Javascript,jQuery,ruby）の動画を購入。

学習内容

・とりあえず２００時間の学習を最短でクリアできるための学習計画

• 毎日通算4.4時間フロントエンドについて学習する
• HTML、CSS、Javascript、jQueryに絞って学習
• 毎日Qitaに記事をあげる

とりあえず土日で学習してみた結果、感想。

・１日目マックで通算６時間13分学習。（HTML基礎）
・２日目ココスの朝食バイキングでバカ食いしながら５時間24分学習。（HTML応用）

あれ？意外と楽しくないか？なんか前より楽しく、学習できている、、果たしてこれが気のせいなのか、、

次回へ続く。

はじめに

画像の重なり方が思い通りにいかず困った時にz-indexを設定すると教わりましたが、
設定するときにまだ戸惑うのでz-indexについてまとめてみました。

z-indexってなんだろう

要素の重なり順を設定できるCSSプロパティ
数値が大きいほうの要素が画面の上に重なって表示されます。

z-index: 数値 ;
上記のように設定します。

z-indexなしの場合、下の画像のように要素が重なります。

例えば、Boxを手前からBox→Box2→Box1と背景の後ろにBox3を配置したいのに
上の画像のように、要素が重なって上手くいかない時にz-indexを設定します。

z-indexの設定ありの場合

.css

.section {
  position: relative;
  background-color: antiquewhite;
  width: 100px;
  height: 120px;
}
.Box {
  z-index: 3;
  position: absolute;
  background-color: darkolivegreen;
  width: 50px;
  margin-left: 10px;
  margin-top: 35px;
}
.Box1 {
  z-index: 1;
　position: absolute;
/* 省略 */
  }
.Box2 {
  z-index: 2;
　position: absolute;
/* 省略 */
  }
.Box3 {
  z-index: -1;
  position: absolute;
/* 省略 */

上のように大きい数値だと手前にマイナスだとposition:relativeの後ろに配置されます。

z-indexを設定したのに反映されない時

z-indexはpositionプロパティとセットで設定することがほとんどのようですが、 設定したい要素にpositionの設定がされていないとz-indexが反映されないので確認してみてください。 原因が分かるまでかなり戸惑いました。

参考

z-indexの使い方：CSSで重なり順を指定する

参考にさせていただきました。

HTMLとCSSで簡単な吹き出しを作成する方法をメモ書き程度に残しておきます。
もともと、Wordpressでやっているブログのちょっとしたデザイン変更で書いたけれど、何となくいらなくなった。
デモは以下のような感じ。

【デモデザイン】 CSSで作る吹き出しデザイン

html

<p>
  <span class="check-point-ballon">
    Point
  </span>
  吹き出しを作成したよ
</p>

css

.check-point-ballon {
  background-color: #415cf5;
  padding: 9px;
  color: white;
  border-radius: 9px;
  text-align: center;
  position: relative;
  margin-right: 10px;
}

.check-point-ballon::before {
    content: '';
    position: absolute;
    right: -22px;
    border-style: solid;
    border-width: 13px;
    border-color: transparent transparent transparent #415cf5;
}

CSS animation day 47 となりました。
本日は、mask プロパティに について、お届けします。

1. 完成版

2. 参考文献

Tech.Dig
Clipping and Masking
WPJ
オークニズム

3. 分解してみる

❶.

まずは、マークアップします。
星空の絵を中央に出しましょう。

index.html

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <link rel="stylesheet" href="css/styles.css" />
  </head>
  <body>
    <div class="container">
      <img src="img/star.png" class="alpha-target" />
    </div>
  </body>
</html>

styles.css

body {
  margin: 0;
  padding: 0;
  background: #fffddd;
}

.container {
  position: relative;
  width: 100%;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

img {
  display: block;
  max-width: 50%;
  height: auto;
  margin: 0 auto;
}

星空が出ました。

❷.
mask プロパティ を使用します。-webkit- をつけないと動きませんので、注意しましょう。

styles.css

.alpha-target {
  -webkit-mask-image: url("../img/cat.png");
  -webkit-mask-mode: alpha;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: 400px; 
  -webkit-mask-position: center center;
}

星空の画像をネコ型にくり抜くことができました。
素敵ですね！

---

mask プロパティについて、解説します。


mask-mode:
mask 画像には、alpha と luminance の2つのタイプがあります。

alpha は、自分の画像が黒いところ (alpha値: 1)と重なった部分を、画像として表示します。

今回の場合、cat.pngが

黒色をしておりました。mask-mode: alpha で、猫の黒い部分(アルファ値1)だけが、切り抜かれたというカラクリです。
面白いプロパティですね！


mask-image:
mask 画像を指定するのですが、background image と同じような使い方をします。
・使用できる画像は、jpg, png, svg があり、グラデーションも設定できます。

styles.css

.alpha-target {
   mask-image: linear-gradient(black 0%, transparent 100%);

mask-size, maske-position:
background-size, background-position と同じような使い方をします。
mask 画像の大きさと、表示位置を指定することができます。


mask-repeat
mask画像を、どのようにリピートさせるかを決めることができます。

-webkit-mask-repeat: round;
ぎっちりつめてリピートします。

-webkit-mask-repeat: space;
領域内に、感覚を空けて配置します。

リピートさせたくないときは、no-repeatをつけましょう。

本日は以上となります。
明日は、このテクニックを使い、アニメーションを設定していきます。
それではまた明日〜

PHPで作成した個人または家族で使える自宅用のWebポータルシステム「MyHome Portal」をオープンソース/フリーソフトとして公開しています。
2008年から2016年にかけて、こつこつとバージョンアップを繰り返して作成したものです。
中級プログラマの作品ですので、ソースコードはあまりきれいとは言えません。バージョンアップを繰り返したことでコードがきたなくなってしまっている部分もあります。モジュールの構造を複雑にしすぎたかもしれません。
2016/08/02以降、バージョンアップしていません。Webサービスを利用している機能など一部は、Webサービスの停止等の理由により動作しなくなっています。

公開ページ

https://ok2nd.github.io/myportal/

ブログ

最近、更新はほとんどありません。
中級プログラマの自宅でPHP ブログ

コンセプト

• 自宅でポータルとして使えるシステム。(家庭内グループウェア)
• データはインターネット上ではなく、ローカルPCまたはローカルサーバに保管。
• 初級、中級プログラマにも理解可能なシステム。
• PHP、SQL、JavaScript、HTML、CSSの知識だけで理解可能なシステム。
• PHPの良さを生かしたHTMLインラインコーディング。(なるべくprint文を使わない。)
• ブラックボックスの少ないシステム。
• オブジェクト指向型プログラミングを使わない。手続き型(関数型)プログラミングを採用。
• MVCを使わない。
• フレームワークに頼らないシステム。
• テキストエディタ以外の開発ツールを必要としない。

対象者

• 自分または家族専用のWebポータルサイトが作りたい。
• Webポータルサイトをインターネット上ではなく、ローカルPCまたは自宅サーバーで立ち上げたい。
• 日常的に良く使う機能が、個々のアプリケーションを起動せずに、ブラウザの中で出来たらうれしい。
• スケジュールその他自分の個人情報をインターネット上に置きたくない。
• パスワードなどのID情報をインターネット上に置きたくない。
• Webプログラム開発初心者。
• プログラミングを仕事でなく、趣味でやりたい。
  • オブジェクト指向が苦手。
  • MVCは面倒。
  • システム全体を把握したい。(ブラックボックスは少ない方が良い。)
  • フレームワークを使いたくない。(PHP、SQL、JavaScriptだけで開発したい。)

機能一覧

• ホームページインデックス(ブックマーク)＆検索
  • ブログパーツ貼り付け
• 付箋
• カレンダー(スケジューラ)
  • 天気出現率表示
• 旅行記
• ToDo
• 掲示板
• RSSリーダー
• メモ
• フォトアルバム
  • スライドショー
  • 動画サムネイル
  • FLV,MP4,WMV,MPG,MOV,M2TS(AVCHD)動画再生
• 学習
• 住所録
  • PDF葉書宛名書き
• メール(一括受信)
• SVGお絵かき
• ペン画
• チャット(Chat)
• ID・パスワード管理
• GPSログ(GPX)ビューワ
• 預貯金管理
• 縦計だけの表計算
• HTML URL抽出&ファイルダウンロード
• テキスト縦書き表示
• Excel to グラフ
• ソースコード表示&編集＋ファイルマネージャー
• MySQL管理ツール
• ファイル暗号化/復号化
• タイマーアラート

特徴・補足

• 自宅で個人や家族で使えるシステムを目指して作りました。家庭内LANでの利用を想定しています。
• 少人数の会社のイントラでの利用も可能かもしれません。 セキュリティは万全ではないので、スケジュール共有など機能を限定して利用願います。
• ユーザー登録など、インターネット上での利用を想定した機能も付けています。ただし、セキュリティ等保障はできませんので、インターネット上での実利用は、自己責任にてお願いいたします。あくまで、LAN内またはPC単体での利用を想定しています。
• 簡単なユーザー管理機能もあります。
• 認証機能もあります。
• ユーザー単位で他のユーザーに対して参照・書込の権限設定ができます。
• レコード単位での非公開の設定もできます。
• ただし、システム管理者はデータベースを直接見ることで全ての情報を参照ができてしまいますので、悪用しないように。
• ID管理では、二重の認証が必要なしくみにしています。
• ID管理では、パスワードを独自の方式で暗号化しています。ID情報は、２つのテーブルに分割して保存します。 暗号化のキーと２つのテーブルを別々にバックアップすれば、ID情報の復元はしづらい(?)と思います。
• 簡単なログ機能も付けています。
• 簡単なシステム管理者機能も付けています。
• コンテンツを追加しやすい構造にしています。
• ページ分割有りの一覧形式のページを簡単に作れる共有ライブラリを用意しています。一覧形式での編集もできます。 /myhome/common_/include-common-mp-list.php 各コンテンツのlist.php、category.phpを参考にしてください。
• 一覧形式の表示部分のみを、独自のphpソースに置き換えられます。($mp_list_arg['template_view'])

開発環境

• （Ver.3.27以降）XAMPP 1.7.1 (Windows)

  • Apache 2.2.11
  • MySQL 5.1.33 (Community Server)
  • PHP 5.2.9 + PEA

• （Ver.3.26以前）XAMPP 1.6.6a (Windows)

  • Apache 2.2.8
  • MySQL 5.0.51a
  • PHP 5.2.5

マテリアルデザイン with Materialize

Webページのデザインをどうするか。

案の1つとして、マテリアルデザインがあります。

マテリアルデザインを簡単に作れるCSS Frameworkは色々ありますが、その中でも有名なMaterializeというものを使ってみます。

MaterializeはCSSとJavaScriptを組み合わせて使いますので、どちらも読み込んでください。

Materialize　←公式サイトはこちらになります。

CDN形式でも使えますし、ダウンロードしても使えます。
ちょっと試しに使ってみるときにCDNって便利ですよね。

この記事ではお試しレベルで使う方法を書いていってみます。

• ナビゲーション
• カラー
• ボタン
• グリッドレイアウト
• カード

ナビゲーション

シンプルナビゲーション

sample.html

  <nav>
    <div class="nav-wrapper">
      <ul>
        <li><a href="#">サンプルナビ</a></li>
        <li><a href="#">左メニュー1</a></li>
        <li><a href="#">左メニュー2</a></li>
        <li><a href="#">左メニュー3</a></li>
      </ul>
        <ul class="right">
          <li><a href="#">HTML5</a></li>
          <li><a href="#">CSS</a></li>
          <li><a href="#">JavaScript</a></li>
      </ul>
    </div>
  </nav>

➡ 解説

ご覧のとおりで、nav-wrapperというクラスで囲ってやると、その部分が横ナビになります。
rightで囲った部分は、右寄せになります。これだけで結構おしゃれなナビっぽくなりますね。

ドロップダウン入りナビゲーション

sample.html

  <nav>
    <div class="nav-wrapper">
      <ul>
        <li><a href="#">サンプル</a></li>
        <li><a href="#" class="dropdown-trigger" data-target="submenu1">ドロップダウン</a></li>
        <li><a href="#">メニュー2</a></li>
        <li><a href="#">メニュー3</a></li>
      </ul>
      <ul class="right">
        <li><a href="#">HTML5</a></li>
        <li><a href="#">CSS</a></li>
        <li><a href="#">JavaScript</a></li>
      </ul>
      <ul id="submenu1" class="dropdown-content">
        <li><a href="#">サブメニュー1</a></li>
        <li><a href="#">サブメニュー2</a></li>
        <li class="divider" tabindex="-1"></li>
        <li><a href="#">サブメニュー3</a></li>
      </ul>
    </div>
  </nav>

sample.js

$(document).ready(function(){
  $('.dropdown-trigger').dropdown({
      coverTrigger:false
    }
  );
})

➡ 解説

ここから少し気を付けるところが出てきます。
JavaScriptを使ってやらないといけなくなるのでご注意を。
Materializeでは、各種アクションを加えたい場所に対して、明示的にJavaScriptで設定してあげる必要があります。
今回の例であれば、まずhtmlファイルの中で、Dropdownアクションを加えたい場所に対して、.dropdown-triggerというCSSクラスを設定しています。
そして、.dropwon-triggerクラスに対して、JavaScriptでドロップダウン効果を持たせる設定をしています。
.dropdown()という関数によって、ドロップダウン効果を持たせられるのですが、このとき様々なオプションが設定できます。
今回はcoverTrigger:falseというオプションを設定しており、これによってトリガーボタンよりも下にドロップダウンメニューが出る、となっております。
coverTrigger:trueにすると、トリガーボタンに覆いかぶさるようにドロップダウンメニューがでます。
この方式はひとつのページ内でオプションが異なるドロップダウンボタンを複数配置したい場合でも、設定がしやすくてよいですね。

ちなみにですが、私はjQuery使ってますけど依存はしていないので、別にjQuery使わなくてもよいです。

追記予定

• グリッド
• フォーム関連
• モーダル