著者:杉浦
HTMLとCSSの重ね合わせコンテキスト
重ね合わせコンテキストはstacking contextの訳でHTMLの描画のZ軸（奥行）に関する概念です。positionやz-indexによってスタッキングコンテキストが定義され、これに沿ってHTML要素の重なり方が決定されます。
重ね合わせコンテキスト – CSS: カスケーディングスタイルシート | MDN
スタッキングコンテキストは木の様な階層構造になっており、親のノードの要素の上に子のノードの要素が描画されます。スタッキングコンテキストは次のルールに従います。
- 重ね合わせコンテキストは他の重ね合わせコンテキストに含めることができ、その結果重ね合わせコンテキストの階層構造ができます。
- 重ね合わせコンテキストはすべて、その兄弟要素と完全に独立しています。重ね合わせ処理では、子孫要素だけが考慮されます。
- 重ね合わせコンテキストははめ込み式です。要素の中身が重ねられた後、その要素がまるごと、今度は親の重ね合わせコンテキストの重ね合わせ順の中にあるとみなされます。
この親の上に子を描画するルールはけっこう強力で、直感的でないz-indexの動作を引き起こします。
z-index:4の要素の上にz-index:3やz-index:1の要素が描画され、z-index:5の要素がz-index:6を差し置いて最前面に描画されています。これが親の上に子のルールによるものです。z-indexもまた階層構造になっており、描画順はz-index-levelの記述の様に親子を考慮した辞書順で考えるのがわかりやすいです。地図をwebページ上で描画するLeafletなどはこれを特に利用しています。下図の様にとんでもない勢いで位置の上下に合わせてz-indexを変更していますが、地図ノードコンテキストの上でのみのz-index操作なのでバグの原因になることは滅多にないです。
重ね合わせコンテキストを生の開発者ツールで読み取るのは正直しんどいです。（見方を知らないだけかもしれないけど）Chromeの拡張にはこれを開発者ツールに追記するものがあります。
z-context – Chrome ウェブストア
z-contextは下図の様に開発者ツールに、この要素はどのコンテキストに属しているか、コンテキストを作るか、親コンテキストは何か、z-index何番であるかを示します。
著者:asaba
【css】モバイル端末でみた時の文字サイズが違う
今回は、端末に対応していないサイトをスマホなどのモバイル端末で見るときの挙動とその解決法について書いていきます。
通常のwebサイト制作においては、text-sizeでinputなどの文字の大きさを決めていると思われます。
ですが、通常の状態のtext-sizeだと、下記で紹介する-webkit-text-size-adjustの効果によって縦にした時と横にした時とで文字サイズが異な
る時があり、このズレを放置することでページ全体のレイアウトが崩壊してユーザーを混乱させてしまう恐れがあります。
-webkit-text-size-adjustとは、ページに合わせたテキストの大きさを制御しているプロパティです。
通常、モバイル端末に対応していないwebサイトをスマホなどの端末で見ると、ブラウザはレイアウトを大きめの画面に合わせた状態
で表示させます。-webkit-text-size-adjustは、デフォルトの状態でauto（動いている）状態になっており、このままでは一部分の画面しか
表示してくれなかったりとユーザーにとってもものすごく見づらい画面になってしまいます。
ですが、この-webkit-text-size-adjustの値を100%にすることで使うことで上記の効果を無効化し、元の文字の大きさで表示させることが
できます。
めちゃくちゃシンプルですがこんな感じです。
</pre>
<style>
body{
-webkit-text-size-adjust
}
</style>
<pre>
端末で見られることを想定しているサイトの場合、主にbodyの中に入れてビューの変形を免れることができます。
noneでも設定できるかと思っていましたが、chromeやsafariで見ると文字の配置は変わっているのに
文字サイズだけが変わらず小さいままというとにかく扱いにくい状態になってしまうのでこれは非推奨でした。
著者:村上
【Cordova】外部サイトをアプリ内ブラウザで表示できるプラグイン「cordova-plugin-inappbrowser」
昨年末にも似たような記事を投稿しましたが、今回はプラグインを使って外部サイトアプリ内ブラウザで表示する方法について。
まだ iOS でしか動作検証できていませんが、結構良い感じに動作したので、Android でも確認して、採用するか決めたいと思います。
使用したプラグインは、「cordova-plugin-inappbrowser」です。
GitHubはこちらから。
GitHub – apache/cordova-plugin-inappbrowser: Apache Cordova Plugin inappbrowser
https://github.com/apache/cordova-plugin-inappbrowser
ただ、今回は下記のサイトの方が参考になりました。
InAppBrowser プラグイン｜Monaca Docs
https://docs.monaca.io/ja/reference/cordova_6.2/inappbrowser/
モナカのドキュメントのページですが、プラグインなどは同じものを使えるので問題なし。
実装方法ですが、まずは下記のコマンドでプラグインをインストールします。
cordova plugin add cordova-plugin-inappbrowser
インストールが完了したら、あとは下記の関数を呼び出して、サイトを開くだけ。
const url = '[開きたいページのURL]'; cordova.InAppBrowser.open(url, '_blank', 'location=no');
実際の画面はこんな感じ。
私のコードでは、一連の処理を抜粋して書くとこうなります。
ちなみに、React を使用しておりますので、悪しからず。
openSite(url) {
cordova.InAppBrowser.open(url, '_blank', 'location=no');
}
render() {
const url = '[開きたいページのURL]';
return (
<main>
<a onClick={() => this.openLink(url)}>ページを開く</a>
</main>
);
}
なお、cordova.InAppBrowser.open() には引数がいくつかあります。
個人的に指定しておいたほうがいいと思うのは、第3引数の、location=no ですね。
こちらはロケーションバーの表示/非表示の設定を行えます。
で、デフォルト値が Yes なのですが…正直、格好悪い…！
そのため、申し訳ないのですが、速攻非表示にさせてもらいました…。
他にも、下の「完了」の文言を変えたり、新規のウィンドウを開く際に、キャッシュやCookie を削除することもできるらしいです。
その辺りは、状況に応じて設定してください。
なお、複数設定する場合、プロパティをスペースなしのカンマ区切りで指定してください。
以上、Cordova アプリで外部サイトをアプリ内ブラウザで表示する方法でした。
最後に、以前投稿した記事についてもご紹介しておきます。
【Cordova】外部サイトをアプリ内ブラウザで表示する方法
https://cpoint-lab.co.jp/article/201811/【cordova】外部サイトをアプリ内ブラウザで表示する/
こちらは Whitelist を利用してアプリ内ブラウザを開く方法です。
同じように外部サイトを開くことはできるのですが、前のページに戻れなかったので、この方法は却下しました。
著者:村上
【CSS】z-indexプロパティが効かない時の対処法【未解決】
タイトルにも明記しましたが、こちらは未解決です。
有効な対処法を発見したら、改めてまとめます…。
今回は、要素の重なり順を指定するための z-index プロパティについてです。
Webページのある要素を、最前面に配置しようとしたところ…何故か z-index が有効にならず、他の要素のしたに潜り込んでしまいます。
で、その対処法について検索したところ、一番上に表示されたのがこちらのページです。
z-indexの使い方：CSSで重なり順を指定する
https://saruwakakun.com/html-css/basic/z-index
こちらによると、z-index は position プロパティに static 以外が定義されている必要があるとのこと。
position プロパティのデフォルト値は static なので、relative や absolute など、なにかしらの値を定義する必要があります。
現在の要素の位置を変更したくない場合は、relative を指定しましょう。
が、z-index を指定した要素には、もともと position: absolute; が定義されており…こちらは関係なかったようです。
他の要素の CSS が関係しているようなので、もう少し調べてみたいと思います。
以上、CSS の z-index が効かなかった時の対処法でした。
私の環境では解決しませんでしたが…とりあえず、position プロパティを指定しているかを確認しましょう。
著者:asaba
【javaScript】今更WebAudioAPIを試す
去年の話ですが、お遊びで動物の鳴き声を使った目覚ましアプリを作ろうとしたときにWeb Audio APIというプラグインを知りました。
javascriptにおける音声を再生または取り込むための機能は、フラッシュやhtml5対応の</audio>タグがその役割を担っています。
両方とも音声の再生をする分には困ることはないのですがこれらのオブジェクトはいかんせん制約が多く、現在の速さが求められる
アプリ開発とは相性が悪いです。なのでこれからはWeb Audio APIを使ってねという記事を目にしました。
Web Audio APIとは、webアプリケーション向けに開発された、音声ファイルの管理に特化したjavaScriptAPIです。
コード量も少ないので、複雑な処理でなければ初心者のかたでも扱うことができます。
ざっくりとですが、コンテキストで音声の再生を管理するコードがこちらです。
var context; window.addEventListener('load',init,false); function init(){ window.AudioContext = window.AudioContext || window.webkitAudioContext; context = new AudioContext(); } catch(e){ alert('web Audio API is not supported in this browser'); } } [/javascipt]
initで初期化させてスタンバイさせておけば、後はcontextで読み込んでくれるのでここだけ抑えておけば基本は大丈夫だと
思います。iphoneでは未検証なので断言はできないですが、他の従来のプラグインも素直に動いてくれているのでAPIサポート外
でもない限りこっちでも問題ないのではないでしょうか。
後はこれをreactとかのライブラリに入れるとちゃんと動くのかなとか考えることもありますが、現状javaScriptで音声を
扱いたいなと思ったらこのwebAudioAPIで間違いないと思うので、もしよろしければ参考に・・・
著者:杉浦
コーディング原則の一つSLAP
Single Level of Abstraction (SLA) [Principles Wiki]
SLAPとはSingle Level of Abstraction Principleの略で直訳して単一レベルの抽象化原則です。上記リンクはSLAですが、SLAPの方が検索結果が多いです。この原則をもっとかみ砕いていうと、プログラムの構造化の段階を揃えましょう、となります。これが為されていると読みやすくまとまったコードが出来ます。例えば次のようなコードです。
function 高水準(){// レベル1の目次 中水準1(); 中水準2(); } function 中水準1(){// レベル2の目次-1 低水準1(); 低水準2(); } function 低水準1(){// 本文内容 // 処理 } function 低水準2(){// 本文内容 // 処理 } function 中水準2(){// レベル2の目次-2 低水準3(); } function 低水準3(){// 本文内容 // 処理 }上田勲. プリンシプル オブ プログラミング 3年目までに身につけたい 一生役立つ101の原理原則 (Kindle の位置No.946-956). 株式会社秀和システム. Kindle 版.
例は書籍の内容に沿って処理を行うコードになっています。書籍で言う目次、章、節がそれぞれ高水準、中水準、低水準に従う形です。こうなっていると、どこで何のために何をしているか分かりやすくなります。
高水準─┬─中水準1─┬─低水準1
│ └─低水準2
└─中水準2───低水準3
少々極端ですが、もし共通する部分をまとめて扱うことを優先し次の様になっていた場合、どこからどこまでが何のための処理なのかわかりにくくなります。
// 低水準1,2,3で使う変数の宣言 // 低水準1と3の共通前処理 // 低水準1の処理 // 低水準2の処理 // 低水準2と3の共通処理 // 低水準3の処理 // 低水準1と3の共通後処理
最初の例では本の内容をコードに落とし込むため幾分か楽に構造化レベルを整えられましたが、実際は処理の長さの差がまちまちでなかなかまとめるのが難しくSLAPを完全に守ることができないこともあります。そういった時、SLAPの上で最低限守るべきなのは呼び出し時のレベルの統一です。次の様にすると何もしない時よりか幾分楽に読めるようになります。
function 高水準(){// 目次
中水準1();
中水準2();
中水準3();
}
function 中水準1(){// 章-1
低水準1();
低水準2();
}
function 低水準1(){// 節-1
極低水準1();
極低水準2();
極低水準3();
}
function 極低水準1(){// 本文内容
// 処理
}
function 極低水準2(){// 本文内容
// 処理
}
function 極低水準3(){// 本文内容
// 処理
}
function 中水準2(){// 章-2 本文内容
// 処理
}
function 中水準3(){// 章-3
低水準3();
}
function 低水準3(){// 節-2 本文内容
// 処理
}
上記例が読み難い原因はいずれも同レベルfunctionで宣言されているためです。例えばJavaScriptの関数内関数でレベル分けをするならば次の様になります。
function 高水準(){// 目次
中水準1();
中水準2();
中水準3();
}
function 中水準1(){// 章-1
低水準1();
低水準2();
function 低水準1(){// 節-1
極低水準1();
極低水準2();
極低水準3();
function 極低水準1(){// 本文内容
// 処理
}
function 極低水準2(){// 本文内容
// 処理
}
function 極低水準3(){// 本文内容
// 処理
}
}
function 低水準2(){// 節-2 本文内容
// 処理
}
}
function 中水準2(){// 章-2 本文内容
// 処理
}
function 中水準3(){// 章-3
低水準3();
function 低水準3(){// 節-3 本文内容
// 処理
}
}
読みやすくなりました。この書き方そのままではネストが深くなってしまいますが実際にはフォルダ、ファイル、クラス、プロパティ、アクセス修飾子などによる分類も用いて構造化を行うことで、深いネストの回避とレベルの統一された階層化を実現します。
高水準─┬─中水準1─┬─低水準1─┬─極低水準1
│ │ ├─極低水準2
│ │ └─極低水準3
│ └─低水準2
├─中水準2
└─中水準3───低水準3
著者:asaba
【html-css】ヘッダーを固定する方法とオブジェクトの優先順位
今回は、ヘッダーの固定方法とz-indexの親子関係について説明していきたいと思います。
webプログラマーとしてコンテンツが長いページを作ることは当たり前のようにありますが、長いページを最後まで見終わった後にあれ？
戻るボタンどこだっけ？一番上か！！(涙)みたいな思いをユーザーの方々にさせたくないと思い載せてみました。
まず、ヘッダーの固定する方法からみていきましょう。とりあえず何の変哲もないサンプルから載せていきます。
</pre>
header {
width: 100%;
height: 60px;
text-align: center;
}
<pre>
これは、見た目は何もいじっていないプレーンの状態のヘッダーです。このままだと当然下にスクロールするとヘッダーも
一緒に下がってしまい、後で戻るボタンを探す羽目になりかなり煩わしい思いをします。
そこで、ヘッダーを固定するために次の属性を指定します。↓
</pre> position: fixed; z-index: 9999; <pre>
このように、上のposition: fixedを指定するだけでヘッダーを固定することができます。特殊なギミックを与えない場合は
これだけでも問題ないと思います。しかし、長いページの場合はスクロールすると、このままでは子のオブジェクトが親である
ヘッダーを覆ってしまい見た目もかなり悪目立ちしてしまいますね。
そこで下のz-indexの出番になります。このz-indexですが、今は9999と設定されてありますが、実はこの数値が大きければ大きいほど
親の優先順位が上がります。つまり、9999と設定しておくことによりこれから作る子オブジェクトよりは絶対に優先順位が
下がることはありません。
初学者のうちはデフォルトで9999でいいやみたいな感じで覚えていても問題ないですが、手の込んだサイトを作りたい時は
色々試してみて使い方をマスターしておく必要があるかもしれないですね。
ですが、見栄えのいいページを作る時はヘッダーのカスタマイズが必須になるのでざっと覚えるだけでもプラスになると思います。
著者:杉浦
LeafletのアイコンオプションiconAnchorの意味
Leafletは地図をJavaScriptで描画、操作するためのライブラリです。地図上に何かを置きたい時、それはアイコンオブジェクトを用いて実現することが多いです。アイコンを定義する際にはicon関数を用いて次の様に定義します。次のコードはMarkers With Custom Icons – Leaflet – a JavaScript library for interactive mapsからの引用です。
var greenIcon = L.icon({
iconUrl: 'leaf-green.png',
shadowUrl: 'leaf-shadow.png',
iconSize: [38, 95], // size of the icon
shadowSize: [50, 64], // size of the shadow
iconAnchor: [22, 94], // point of the icon which will correspond to marker's location
shadowAnchor: [4, 62], // the same for the shadow
popupAnchor: [-3, -76] // point from which the popup should open relative to the iconAnchor
});
このオプションの中にiconAnchorというものがあります。直訳してマーカーの位置に対応するアイコンの点です。Leafletはこの緯度経度に、このアイコンを用いてマーカ―を、この地図上に置く、という様にマーカーを地図上に置きます。
L.marker([51.5, -0.09], {icon: greenIcon}).addTo(map);
マーカーという以上、地図を見るものにその印を示すために絵を用います。iconAnchorはこの絵のどの部分に指定した緯度経度がくるかを指定するオプションです。もしiconAnchorを間違えた場合、矢印の根元のような直感的でない部分が位置を指すことになってしまいます。
Explanation of Leaflet Custom Icon LatLng vs XY Coordinates – Stack Overflow
このStack Overflowの図説が完結にまとまっていました。
左上を(0,0)とし、用いるimgに合わせてpx単位で合わせることが基本になります。割合を用いないのはアンチパターンに見えますが、アイコンを定義する際の単位はいずれもピクセル単位となっているためこのやり方が推奨のやり方となっています。
著者:杉浦
HSL表記によって色を自然に変化させる
色の表記の定義である色空間には様々なものがありますよく聞くものに赤青緑の三原色を用いたRGB、それに加えて透明度を足したRGBAがあります。他にも印刷で使われるCMYK（Cyan, Magenta, Yellow, Key plate）やLab色空間、XYZ表色系など目的に合わせて多くのものが作られています。HSLはその中の一つでHLSとも呼ばれ色相（Hue）、輝度（Lightness）、彩度（Saturation）の3値から定義される色空間です。HLSの値の大雑把な意味は次です。
- 色相：色味を0～360度の範囲の角度で表す。0度は赤で、その反対側に位置する180度は赤の反対色にあたる青緑。すなわち、反対色を見つけるのも容易。色相についてはHSVと同じ。
- 彩度：HSVとは違い、純色から彩度が落ちるということは、すなわち灰色になっていくという考え方に基づいている。
- 輝度：明度100%を純色とし、そこからどれだけ明るさが失われるかを示すHSVとは違い、輝度0%を黒、100%を白とし、その中間（50%）を純色とする。50%以下はHSVの明度を示し、50%以上はHSVの彩度を示すと考えると分かりやすいだろう。
紹介するHSLの主な利点は二つです。まず第一にCSSのオプションとして直接指定できます。次の様にhsl(hue, ssaturation, lightness)を指定するのみで大変楽です。
style="background-color: hsl(90deg, 100%, 50%);
CSS を使った HTML の要素への色の適用 – HTML: HyperText Markup Language | MDN #HSL_functional_notation
わざわざ変換式を実装してRGBに変える必要も、RGB上でややこしい計算をする必要もありません。
第二は自然で多彩な色の変化を簡単に表せることです。次のJSFiddleはHSL方式とRGB方式それぞれで箱の中の色を変えるコードの実装です。
色相の下に彩度、輝度が引っ付いているイメージで簡単に色を決定することができると思います。RGBでは赤緑青から離れる程どうやって思いついた色を作るのかてこずるでしょう。
HSLがRGBに比べて特に便利なのがある色からある色への変化です。同時刻にある色になる様に三値をそれぞれ一次関数的に変化させるのみできれいな色の変化を実現できます。
著者:asaba
【html-css】複数のセレクトボックスを並列で表示させる
今回は、セレクトボックスを複数並べたいかつ横に揃えたい時にしたことを書いていきます。
セレクトボックス、決められた項目をプルダウンで表示させるアレのことです。よくアンケートフォームやアプリの会員登録画面で
見受けられますが、案件によってはこのオブジェクトを複数決められた位置に並べたいという時もあるのではないでしょうか。
現に今どきのフォームだと○○県○○市といった県と市を分けて表示するデザインが増えており、今はもうそんな感じのデザインが
主流なのかなと勝手に考えております。
自分も、今回の開発でセレクトボックスを複数出したかったので汚いながらも気合でやってみたのでもしこんなのでよければ参考に
してください。
まずは、htmlからです。reactで書いた誕生日のサンプルですね。
</pre>
<span className="birthday">
<p>生年月日</p>
<select value={this.state.member.year || ''} onChange={(e) => this.handleYearChange(e)} >
{ this.yearData.map( d => <option key={d.value} value={d.value}>{d.label}</option>)}
</select>
<label htmlFor="select-01">年</label>
<select value={this.state.member.month || ''} onChange={(e) => this.handleMonthChange(e)} >
{ this.monthData.map( d => <option key={d.value} value={d.value}>{d.label}</option>)}
</select>
<label htmlFor="select-01">月</label>
<select value={this.state.member.day || ''} onChange={(e) => this.handleDayChange(e)} >
{ this.dayData.map( d => <option key={d.value} value={d.value}>{d.label}</option>)}
</select>
<label htmlFor="select-01">日</label>
<span className="error">{this.state.error ? this.state.error.birthday : ''}</span>
</span>
<pre>
なんでdivじゃないのとツッコミを受けそうですが、divを使うと改行してしまい一行ずつセレクトボックスが表示されてしまうという
事態が起きるので、代用して改行をしないspanを使い並列に並べるという意図でございます。
続いてcssです。
</pre>
span.birthday {
width: 90px;
padding:0;
font-size:0px;
}
span.birthday select {
width:110px;
height: 50px;
margin:10px;
border:1px solid black;
display: inline-block;
text-align: center;
font-size:16px;
background-color:#fff;
}
<pre>
あまり深いことは書いていないのですが、span.birthdayでセレクトボックスを三つ並べられるようエリアを拡大していますね。
下のspan.birthday.selectでセレクトボックスそのものの大きさとセレクトボックスの外線、位置を決めています。
以上でセレクトボックスを横向きに表示するコーディングはおしまいです。実はこれもネットにも中々乗っておらず、一つ一つ
パーツを繋ぎ合わせてせこせこ書いていました。いびつですが、正しく動きますので、reactで同じようなコンポーネントを
作りたい、でもどこにも思ったことが書いていない！というかたはもしよろしければ参考にしてみてください。