# 月の高いところ
概要: 「月の高いところ」は、自称イラストレーターみやびプリンの、イラストを中心とし、音楽、映像など、総合的にデザイン作品を掲載しているポートフォリオサイトです。また、ITエンジニアの役に立つプログラミング技術情報も発信しています。
## 今日のプリン言：エンジニア技術ブログ
概要: 謎のプリン語る。プログラミングの役立つ、エンジニア技術情報とか、どうでもいい雑談とか書いてます。一人書く人増えました。
---
### 【CSS】InstagramのロゴのSVG化から学べること
URL: https://highmoon-miyabi.net/blog/2026/09/09_000607.html
公開日時: 2026-09-09T03:04:50+09:00
更新日時: 2026-09-09T04:35:09+09:00
カテゴリ: CSS,HTML5
概要: InstagramのロゴをSVG化する時、大抵はグラデーションを使用するが、それでは表現しきれない。内部CSSを使うことが最善手となることを提示するエントリー。
本文: ※本記事はMeta社の商標のガイドラインならびにコミュニティ規定違反を推奨する、誘発するものではありません
※本記事で紹介するSVGコードは、Instagramのロゴとは別物になるよう、色コードを変えるなどの措置を行なっています
※完成した再現ロゴSVGは、私の利益のための使用、並びに、外部に公開するような使用は一切行っておりません
※当サイトならびに、著者は、本記事で紹介するSVGコードを使用した際のトラブル等の、責任は一切負いません。コードの使用は自己責任でお願いします。
※InstagramのロゴならびにMeta社の商標を使用する場合は、公式ガイドラインを遵守し、公式ロゴパックの使用をしてください
と、自分の身を守るのはここまでにしておこう。
Meta社の商標は、非常に厳密にガイドラインが敷かれている上で、けっこう訴えられている事例が多いらしいので、一応の予防線を貼らせてもらった。
（の割には、SVG化したそっくりロゴ素材、海外サイトで特にいっぱいあるけどね）
さて、Instagramのロゴは美しい。
つい、SVG化してサイズによる劣化なしで使用したくなるものだ。
だが、公式のロゴパックの中に入っている、SVGは、SVGとは名ばかりの、10MBにも及ぶ巨大ビットマップ要素（image要素ね）が入っている、実質ただの巨大PNGだ。
ゆえに、エンジニアとしてはついSVG化に挑戦したくなるものだ。
そして、
だいたいサイト等で公開されているSVGは、SVGにおけるグラデーションを使ったものが大半だ。
私も、以前こっそりSVG化をした時はグラデーション技法で表現していた。
だが、下記理由で、グラデーションではあの美しい模様は表現しきれないのだ。
そもそも本物はグラデーションを使っていない（と思われる）
パス形状が複雑なため、単純にグラデーションでは、歪になる。（パスエッジで下手に途切れる、色が正確にならない、など）
じゃ、どうすんの？ってそりゃ、
SVGの内部CSSがあるじゃぁないか。
下記のように、SVGを定義する。
```html
<svg xmlns="http://www.w3.org/2000/svg" width="900" height="900" viewBox="0 0 900 900">
<defs>
<style>
.cls-1, .rdC {
fill: #00ff99;
mix-blend-mode: screen;
}
.cls-1 {
filter: blur(70px);
}
.cls-2, .cls-3, .cls-4, .cls-5, .cls-6, .cls-7 {
mix-blend-mode: hard-light;
}
.cls-1, .cls-2, .cls-3, .cls-4, .cls-5, .cls-6, .cls-7, .rdC {
fill-rule: evenodd;
}
.cls-2 {
fill: #23ff35;
filter: blur(61px);
}
.cls-3 {
fill: #ffff00;
opacity: 0.54;
filter: blur(50px);
}
.cls-4 {
fill: #0063ff;
filter: blur(53px);
}
.cls-4, .cls-5 {
opacity: 0.9;
}
.cls-5 {
fill: #0015ff;
filter: blur(58px);
}
.cls-6 {
fill: #50ff5e;
filter: blur(43px);
}
.cls-7 {
fill: #fff;
}
</style>
</defs>
<rect id="bg" x="-50" y="-50" width="1000" height="1000"/>
<rect id="bgR" class="rdC" x="-50" y="-50" width="1000" height="1000"/>
<path id="p" class="cls-2" d="M772,27c126.509,26.465,208.642,146.532,56,178S603.06,410.643,539,451,387.622,311.685,315,320C200.2,333.144,133.259,477.118,43,475-66.423,472.432-79.523,276.639-56,133-42.252,49.051-18.629,11.8,113,9S602.147-8.533,772,27Z"/>
<path id="b" class="cls-3" d="M566-66c72.477,4.768,152.255,88.393,50,158-59.616,40.582-63.341,28.7-139,52-56.972,17.546-129.091-4.46-153,50S200.994,364.321,133,304C56.254,235.915-7.235,228.553-43,289c-30.961,52.328-63.762,90-62-1s2.763-325.676,39-353S452.057-73.5,566-66Z"/>
<path id="o" class="cls-4" d="M234,489c121.12-15.4,345.127,32.213,440,179,99.357,153.724,76.04,142.286-78,142S335.358,862.889,230,933-39.178,936.672-28,776C-17.149,620.033-25.37,521.984,234,489Z"/>
<path id="y" class="cls-5" d="M396,598c174.277,51.213,196.839,227.2,187,272-15.606,71.062-161.472,94.231-240,87-84.9-7.817-219.994-99.294-240.7-184.462C72.959,651.838,267.654,560.284,396,598Z"/>
<path id="pi" class="cls-6" d="M875,502c-95.921,15.443-155.909,92.346-146,232,3.29,46.372,77.784,204.372,180,182,35.381-7.744,93.28-129.415,96-203C1007.36,649.113,934.226,492.465,875,502Z"/>
<path id="l" class="cls-7" d="ロゴのパスデータ"/>
</svg>
```
ポイントは、内部CSSにて、mix-blend-mode、filter: blur(npx)を使用していることだ。
そして、SVGグラデーションは一切使っていない。
そもそもあの美しいグラデーションは、どう足掻いても、レイヤーモード合成を行っている。
Photoshop等で、Instagramのロゴと色等を比較しながら、数値等を調整した結果の結論だ。
グラデーションは一切使わず、レイヤーモードと、エッジブラーを使うことで、かなり再現度が高いSVGができてしまったのだ。
（上記SVGコードは色等を変えているので、上記をSVGとして保存しても、Instagramロゴのようにはならない）
つまり、何が言いたいかと言うと、
SVGも、CSSでかなり多くを表現可能ということだ。
そのことを大きく学べたことを言いたかったのだ。
（ただし、一部ブラウザではまともな表示ができないことは弱点）
最後に一言、絶対悪用すんなよ
#### 著者
著者名: みやびプリン
職業: フロントエンドエンジニア
プロフィール: 基本はイラストレイター（自称）だが、
本職は札幌市のフロントエンドエンジニア。
フロントエンドだけではなく、各種プログラミング言語に精通していると自負している。
HTML、CSSはもちろんのこと、JavaScript、TypeScript、PHP、Perl、Python、C#、Kotlin、Swift、Objective-Cなど多くの多くの言語に精通している他、
Movable Type、WordPressなど各種CMS、React.js、Angularなどフロントエンドフレームワークも扱える。
最近はUnityによる3Dコンテンツにも手を出している。
---
### 【SEO】h1〜h6の正しい使い方
URL: https://highmoon-miyabi.net/blog/2026/08/24_000606.html
公開日時: 2026-08-24T11:19:32+09:00
更新日時: 2026-08-24T23:51:12+09:00
カテゴリ: HTML5,SEO
概要: h1〜h6の設置の仕方のベストプラクティスを突き詰めていく記事。見出し要素は、ひたすら、ページの内容に集中すべきことを実証を交えて解説している。
本文: また空いてしまった。
暑さに死にそうではありましたが、生きてました。
さて、表記の件。
正しい使い方と大上段に構えといて、まだ正直検証中の考え方・手法だ。
待って、ブラウザバックしないでもう少し読んでおくれまし。
さて、冗談はさておき、本題さっさといこう。
前提として、h1〜h6とはなんぞやとか基本的なことに関しては全割愛するので悪しからず。
少し、SEOや、HTMLの書き方を齧ったり勉強したりしてる人は、下記のような構造にしがちではないだろうか。
```html
<html>
<head>
<title>ページタイトル</title>
</head>
<body>
<header>
<h1>ページタイトル</h1>
</header>
<nav>
<h2>グローバルナビ</h2>
<ul>
<li><a href="/about/">このサイトについて</a></li>
<li><a href="/art/">作品集</a></li>
</ul>
</nav>
<main>
<h2>中見出し</h2>
<p>コンテンツ</p>
<section>
<h3>小見出し</h3>
</section>
</main>
<aside>
<h2>その他のコンテンツ</h2>
<p>補足情報など</p>
</aside>
<footer>
<nav>
<h2>フッターのサイトナビ</h2>
<ul>
<li><a href="/about/">このサイトについて</a></li>
<li><a href="/art/">作品集</a></li>
</ul>
</nav>
</footer>
</body>
</html>
```
ようは、aside要素や、nav要素など、section以外のセクショニング要素にも律儀にヘディング要素（h1〜h6のこと）を入れる、というような構造だ。
SEO的に見出し扱いできそうなものをしっかりヘディング要素でマークアップさせるということだ。
かくいう私もずっと上記のようなマークアップをしていた。
一見、しっかりやってるから、ええ構造やん、と思われがちだが、いくつかの理由から、
SEO的にはベストと言えない可能性があるのだ。
ページのユニークコンテンツが伝わりにくくなる
一発目ではあるが、これがほぼ核心となる。
見出しは、あくまで、そのWebページのユニークコンテンツの構造等を示すものであるため、
補助要素や、Webサイト内の共通要素に対して見出し要素を入れるべきでない可能性がある。
なぜなら、その共通要素にまで使ってしまうと、
その見出しも含めて、ページのユニークコンテンツとして認識されてしまう可能性があるからだ。
現代の検索エンジンはそこまでバカではないのだが、ユニークコンテンツの内容が薄まって伝わってしまう可能性は十分あると思われるので、補助要素・共通要素には、見出し要素を入れない方がよい可能性が高い。
section要素以外のセクショ二ング要素には見出しは必要ない
SEOやHTMLの勉強を少しでもした方はご存知だと思うが、基本、section要素には、見出し要素は必須だ。
だが、他のアウトラインを作る、または意味をもつセクショニング要素には、見出し要素は必須ではない。
article、aside、nav、headerなどだ。
つまり、あくまでページの内容・コンテンツを、sectionないし、articleなどに配置した上で、見出し要素を設置する、他の、asideなどの補助要素、ページのユニークコンテンツには直接関係ない要素には見出し要素を使用しないことで、より、ページのユニークさを強調することができると思われる。
だが、navなどは特に、ページ内に複数存在する場合、スクリーンリーダーに対応することを考えた時、
なにに関しての要素なのかを示す時、ヘディング要素を使わなければ、難しい。
そんな時に、便利なのが、ARIAの指定だ。
前述したHTMLを下記のようにする。
```html
<html>
<head>
<title>ページタイトル</title>
</head>
<body>
<header>
<h1>ページタイトル</h1>
</header>
<nav aria-label="グローバル">
<ul>
<li><a href="/about/">このサイトについて</a></li>
<li><a href="/art/">作品集</a></li>
</ul>
</nav>
<main>
<h2>中見出し</h2>
<p>コンテンツ</p>
<section>
<h3>小見出し</h3>
</section>
</main>
<aside aria-labelledby="asideTtl">
<p id="asideTtl">その他のコンテンツ</p>
<p>補足情報など</p>
</aside>
<footer>
<nav aria-labelledby="footerNavTtl">
<p id="footerNavTtl">フッターのサイト</p>
<!-- ariaでは、nav要素のものは、スクリーンリーダーに自動的にナビゲーションと読み上げがされてしまうため、意味をもつ名称のみ記述する -->
<ul>
<li><a href="/about/">このサイトについて</a></li>
<li><a href="/art/">作品集</a></li>
</ul>
</nav>
</footer>
</body>
</html>
```
と、このように、
asideや、navには、aria-label、aria-labelledby属性を使用し、タイトルを指定することで、
要素の意味合いを指示することができる。
こうすることで、ページの内容には、見出し要素を使い、
asideや、navの意味合いは、aria-*を使い指定し、ページのユニークさを薄めることなく、
アクセシビリティを担保した構造とすることができるのだ。
私も、このサイトにて、実験してみており、まだ検証段階ではあるが、
徐々にアクセスが伸びている、狙ったワードでクリックされる数が増えてきている。
SEOは、極めたと思っても、次々新しい要素など出てくるし、
興味がつきないね。
さて、次もまたSEO関連にはなりそうだな。
そして、日本中とんでもなく暑い日が続いているので、
みなさんも本当に熱中症などに気をつけて。
ではまた。
#### 著者
著者名: みやびプリン
職業: フロントエンドエンジニア
プロフィール: 基本はイラストレイター（自称）だが、
本職は札幌市のフロントエンドエンジニア。
フロントエンドだけではなく、各種プログラミング言語に精通していると自負している。
HTML、CSSはもちろんのこと、JavaScript、TypeScript、PHP、Perl、Python、C#、Kotlin、Swift、Objective-Cなど多くの多くの言語に精通している他、
Movable Type、WordPressなど各種CMS、React.js、Angularなどフロントエンドフレームワークも扱える。
最近はUnityによる3Dコンテンツにも手を出している。
---
### 【CSS】backdrop-filterが効かない時の落とし穴
URL: https://highmoon-miyabi.net/blog/2026/05/02_000605.html
公開日時: 2026-05-02T21:04:55+09:00
更新日時: 2026-05-02T23:58:17+09:00
カテゴリ: CSS
概要: CSSの便利プロパティのbackdrop-filter。便利だが効かないって時の原因の一つを紹介する。
本文: また随分空いてしまった。
だが、忙しかったが、決して忙しさが原因ではないのだ。（？）
さて、さっそく本題。
backdrop-filterは非常に有用なプロパティで、iOSのUIのようなガラス表現を、
CSSだけで実現できたり、ダイアログ系のUIの、視認性や可読性を高めることもしやすい。
だが、新しいプロパティ故、仕様が掴みづらかったり、
効かない時にその原因が分かりずらかったりする。
代表的な効かない原因として下記がある。
その要素が position: static で、背景がほとんどない（透明）ため、結果が視覚的に分かりにくい
ぼかしたい要素群が z-index 的に前面にいる（=そのフィルタを持つ要素より上に重なっている）
ぼかしたい領域の一部だけ、その要素の矩形（width / height）の外に出ている
ブラウザが backdrop-filter をサポートしておらず（または -webkit-backdrop-filter 必須な環境で）うまく適用されていない
まぁ、AIが上げてくれた原因なんだけどね。
そんな中私が直面した原因は上記のいずれも該当しなかった。
それ故、非常に特定と解決に時間がかかったのだ。
結論、
ぼかしを落としたい要素に背景がなく、透明だったから
であった。
まぁ、一つ目の原因が近かったのだが、
それにもまして、一部とは言わず大部分だったので、該当するとは言えなかったのだ。
例えば下記のような状況。（HTML内にスタイルを入れる）
```html
<html>
<head>
<style>
.wrap { position: relative;}
.under {
text-align: center;
padding: 3em 0;
}
.upper {
background-color: rgba(255,255,255,0.4);
backdrop-filter: blur(5px) saturate(180%);
left: 0;
padding: 3em 0;
position: absolute;
text-align: center;
top: 0;
width: 100%;
}
</style>
</head>
<body>
<div class="wrap">
<p class="under">hogehoge<br>mogemoge</p>
<p class="upper">mogumoguokayu</p>
</div>
</body>
</html>
```
としていた場合。
p.upperを上に重ね、その下のレイヤーにガラス効果を適用したいとするってわけだ。
実は上記、backdrop-filterが効かないのだ。
なぜなら、下の要素からhtml、body要素まで全て背景が透明（設定されていない）だからなのだ。
当然各要素は、ユーザーエージェントで指定していない限りは、スタイルを当てなければ背景は透明だ。
その上で、どうやらbackdrop-filterは、下の要素の透明度が結果に影響を及ぼすようで、どこかで透過していない要素が重なっていないと、効かないようなのだ。
よって、上記も、
```css
body { background-color: #FFF; }
```
をつけたりすると、急に効き出す。
なので、あらゆることをしても、backdrop-filterが効かない！となった時は、本記事のことを確認してみて欲しい。
ちなみに、なぜ本記事の話題があまり見つからないのかというと
bodyに背景色を設定していないことがそもそも滅多にないからだ。
私は、白だったら、別に設定しなくてもいいべ、的にやってなかった。
そのおかげでまさかあんなに時間を食う羽目になるとは思いもよらなかったわ。
というわけで、苦い経験を成仏させたい記事でした。
ではまた。
#### 著者
著者名: みやびプリン
職業: フロントエンドエンジニア
プロフィール: 基本はイラストレイター（自称）だが、
本職は札幌市のフロントエンドエンジニア。
フロントエンドだけではなく、各種プログラミング言語に精通していると自負している。
HTML、CSSはもちろんのこと、JavaScript、TypeScript、PHP、Perl、Python、C#、Kotlin、Swift、Objective-Cなど多くの多くの言語に精通している他、
Movable Type、WordPressなど各種CMS、React.js、Angularなどフロントエンドフレームワークも扱える。
最近はUnityによる3Dコンテンツにも手を出している。
---
### 【SEO】記事タイトルにサイト名を入れるのは古い？title要素のベストプラクティス
URL: https://highmoon-miyabi.net/blog/2025/10/17_000603.html
公開日時: 2025-10-17T11:02:22+09:00
更新日時: 2026-08-22T03:04:24+09:00
カテゴリ: HTML5,SEO
概要: 誰しもが迷う、Webページのタイトル。以前と現代でのベストプラクティスの変化についての記事。
本文: やぁ、書きたいことが増えてるので、調子乗ってるプリンです。
さて、さっそくやっていこう。
ズバリ、title要素のベストプラクティスについて。
従来は、title要素は、末尾にサイト名、手前にページ群名、その手前にカテゴリ名、最手前に記事名とするのが良いとされていた。
```html
<title>記事タイトル - カテゴリ名 - ブログ名 | サイト名</title>
```
といった具合だ。
そうすることで、ブランド化がされやすいと同時に、そのWebページが言いたいこと、そのカテゴリを、端的に示すことができるからだ。
しかし、昨今では下記の理由で、その手法があまり良くないとなるようになっている。
タイトルが長過ぎになりやすい
ドメイン単位でWebサイトとして全体が認識されやすくなった
title要素にキーワードを埋め込みすぎ、ないしキーワードの重複が発生しやすい
Web全体ないし、サイト内で、一意のタイトルであれば良い
構造化などで、そのWebページのカテゴリや階層などを示すことができる
とまぁ、こんな感じだ。
一個一個やっていこう。
あ、ちなみに、構造化とか、そもそもtitle要素ってなんぞや？って人はご自分でお調べください。
初歩的、基本的な部分をダラダラ書くつもりは一切ない。
タイトルが長過ぎになりやすい
ここが実は最重要。
一般的ないし、Google公式としては、30文字以内が適切とされている。
なぜかというと、SEOにおける最重要項目として、クリック数を得られやすいからだ。
ご存知の通り、検索結果画面においての表示文字数は限界値があり、だいたい、25〜30文字が表示され、それ以降の文字は...で省略される。
なので、文字数は30文字以内が望ましいのだ。（スマホでもだいたい同じくらい）
よって、カテゴリ名や、ページ群総称、サイト名を入れていると、余裕でオーバーしてしまうことがほとんどなので、記事名だけが理想というわけだ。
ドメイン単位でWebサイトとして全体が認識されやすくなった
これはまんま。
過去の、検索エンジンロボットがまだ未成熟だった時代は、サイトタイトルが入っていないと、
そのWebページが、どのサイトに所属しているかが認識されずらかった。
現代は、ドメイン、また、ディレクトリ構造（階層）からも、そのWebページがどのような立ち位置か、ある程度認識してくれるようになっている。
そのため、わざわざtitle要素で示す必要は薄くなっている。
title要素にキーワードを埋め込みすぎ、ないしキーワードの重複が発生しやすい
これは単純に、記事のタイトルにそもそも重要なキーワードはいれるのがベストプラクティスなのは、従来通りなので、その上、カテゴリ名を入れては、同じキーワードが重複してしまう、埋め込み過ぎになるからだ。
```html
<title>【カテゴリ名】記事タイトル - カテゴリ名</title>
```
としたりすると、単純に重複しちゃうよね、って話だ。
Web全体ないし、サイト内で、一意のタイトルであれば良い
数多のWebページの中で、一意のタイトルであれば、特にサイト名等を入れる必要はない。
なぜなら、一意だから、サイト名が入ってなくとも、特定のページとなりえるからだ。
これは、あくまで、その記事なりWebページが、サイトに所属するページとしっかり認識されている上での話だ。
よって、上記項目が担保されているならば、Web全体、もしくは、サイト内で、ユニークであれば、特にサイトタイトル等を入れずに、Webページ名のみで良いのだ。
ただし、例外がある。
ページ名が、汎用的ないし、ブランド名（サイトタイトル）を明示しておきたい場合だ。
例えば、会社概要などだ。
これは、ブランド名、サイトタイトル（会社名）が入ってないと、何のブランド（会社）なの？
となってしまう。
SEO上、ロボット的には認識できても、あまりにも汎用的すぎるため、Web全体で一意とは絶対ならない。
このような場合は入れた方が良いだろう。
構造化などで、そのWebページのカテゴリや階層などを示すことができる
これに関しては、細かく説明するとかなり長くなるため割愛するが（別記事で記載予定）、
代表的なのは、パンくずリストだろう。
```html
<!-- Microdataで示しているが、本当は、JSON-LDの方がやりやすいし、推奨されている -->
<ol itemprop="breadcrumb" itemtype="https://schema.org/BreadcrumbList" itemscope>
<li itemprop="itemListElement" itemtype="https://schema.org/ListItem" itemscope>
<a href="/" itemprop="item" rel="first">
<span itemprop="name">TOP</span>
</a>>
<meta itemprop="position" content="1">
</li>
<li itemprop="itemListElement" itemtype="https://schema.org/ListItem" itemscope>
<a href="/blog/" itemprop="item" rel="archives">
<span itemprop="name">ブログ名</span>
</a>>
<meta itemprop="position" content="2">
</li>
<li itemprop="itemListElement" itemtype="https://schema.org/ListItem" itemscope>
<a href="/blog/category01/" itemprop="item" rel="archives">
<span itemprop="name">カテゴリ名</span>
</a>>
<meta itemprop="position" content="3">
</li>
<li itemprop="itemListElement" itemtype="https://schema.org/ListItem" itemscope>
<span itemprop="name">記事タイトル</span>
<meta itemprop="item" content="https://サイトドメイン/blog/category01/記事パス">
<meta itemprop="position" content="4">
</li>
</ol>
```
のように示せば、サイトに所属していること、カテゴリに属していることも同時に示せるため、わざわざtitle要素に記載する必要はないのだ。
さて、以上が詳細説明となる。
ただし、これらのタイトルの最適化における施策は、Webサイト全体が構造化など、妥当な施策がされていることが前提となるため、闇雲に本記事の施策を実行し検索順位が上がったりするかとなると、必ずしもそうではないことをご了承いただきたい。
あくまで、現代においてのベストプラクティスとなる。
さて、お次は、構造化に関してか、Unityの記事にしようか。
ではまた。
#### 著者
著者名: みやびプリン
職業: フロントエンドエンジニア
プロフィール: 基本はイラストレイター（自称）だが、
本職は札幌市のフロントエンドエンジニア。
フロントエンドだけではなく、各種プログラミング言語に精通していると自負している。
HTML、CSSはもちろんのこと、JavaScript、TypeScript、PHP、Perl、Python、C#、Kotlin、Swift、Objective-Cなど多くの多くの言語に精通している他、
Movable Type、WordPressなど各種CMS、React.js、Angularなどフロントエンドフレームワークも扱える。
最近はUnityによる3Dコンテンツにも手を出している。
---
### 【SEO】h1などに画像文字はalt属性だけでは不十分
URL: https://highmoon-miyabi.net/blog/2025/10/15_000602.html
公開日時: 2025-10-15T02:38:59+09:00
更新日時: 2025-11-17T15:23:01+09:00
カテゴリ: CSS,HTML5,SEO
概要: 従来では、h1などに画像文字を入れる際、同内容の文字列をalt属性に入れていれば、SEOは十分されていた。しかし、ここ近年ではテキストと比較して、SEOへの貢献はされなくなってしまっている。その対応方法と効果に関してまとめた記事
本文: やぁ、今アクセス数が伸びているため、なんとか記事投稿頻度を上げたいみやびプリンです。
そんなことより本題な。
とは言っても、表記の通り。
従来では、画像のalt属性はテキストとして認識されていたが、
ここ近年ではそうはいかなくなった。
例えば下記。
```html
<h1><img src="images/ttl.svg" alt="記事のタイトル"></h1>
```
なんてパターン。
以前では、十分、画像文字のalt属性に指定された文字列が、h1要素のテキストとして認識されていた。
よって、Webサイトの表現とテキストによるSEOが両立することが十分可能であった。
しかし、ここ近年では、画像のalt属性は、テキストと比較して格段にページの内容とはされなくなった。
その証拠と言ってはなんだが、
当初、我がサイトは、サイトリンクが表示されるなどSEO力に自慢があったサイトだったのだが、
ある時から、どんなに各所に修正を施しても、サイトリンクが表示されない事態が何年も続いた。
そんな中、職場の後輩より、自社で運営しているサイトのSEO改善案として、
画像文字の近行に、同内容のテキストを記述するというものが挙がった。
ようは、下記のようにする。
```html
<h1 class="scr__wrap">
<span class="scr">記事のタイトル</span>
<img src="images/ttl.svg" alt="記事のタイトル" aria-hidden="true">
</h1>
```
```css
.scr__wrap { position: relative; }
.scr {
border-width: 0;
display: block;
clip: rect(0, 0, 0, 0);
height: 1px;
overflow: hidden;
position: absolute;
white-space: nowrap;
width: 1px;
}
```
ようは、画像文字のすぐそばで、テキストとして記述し、CSSでほとんど見えないようにする、ということをしているわけだ。
imgに、aria-hidden="true"を付与しているのは、入れないと、同じ内容のものが重複してスクリーンリーダーに読み上げられてしまうのを防ぐためだ。
職場で運用しているサイトが、SEO力が高まったのはもとより、
我がサイトでも実施したところ、サイトリンクが表示されるようになったり、今までのSEO施策が、よりロボットに理解されやすいものとなっていると実感している。
そう、実はこの手法、それこそ数年前の、Appleの公式サイトが実施していたのだ。
（現在は、全てWebフォントにて実装しており、上記のような手法は使われていない）
当初は、画像文字であってもalt属性で十分だしそこまでやる必要あるか？と思っていたのだが、
Appleはこのことを予見していたのか・・・、はたまたGoogleのドキュメントを研鑽し抜いていたのか・・・。
ちなみに、画像のものと同じ内容である限り、テキストをCSSで隠すことはスパムにはならない。
何年か前、Google公式より、それやっちゃうと技術の否定になるから、過度に差異がある場合を除き、ペナルティを課さないと明言がされている。
ソースはわかりませんすみません。うろ覚え。
とかく、この施策は超重要と言える。
とくに、デザイン的なものを売りにしているようなWebサイトは、とかく画像文字を使わざるをえない場合が多い。
そういった時に、ページの内容や、ヘディング要素、h1〜h6にテキストが存在しない的な認識をされないよう、
本記事の施策を施すといい。
さて、次もSEO記事でこうかな。
#### 著者
著者名: みやびプリン
職業: フロントエンドエンジニア
プロフィール: 基本はイラストレイター（自称）だが、
本職は札幌市のフロントエンドエンジニア。
フロントエンドだけではなく、各種プログラミング言語に精通していると自負している。
HTML、CSSはもちろんのこと、JavaScript、TypeScript、PHP、Perl、Python、C#、Kotlin、Swift、Objective-Cなど多くの多くの言語に精通している他、
Movable Type、WordPressなど各種CMS、React.js、Angularなどフロントエンドフレームワークも扱える。
最近はUnityによる3Dコンテンツにも手を出している。
---
### 【Kotlin】WebViewのキャッシュに対応する
URL: https://highmoon-miyabi.net/blog/2025/08/01_000601.html
公開日時: 2025-08-01T11:03:44+09:00
更新日時: 2025-11-17T15:25:44+09:00
カテゴリ: Kotlin
概要: KotlinのWebViewのキャッシュの扱いにて（キャッシュクリア等）、一定の効果を得られた手法に関しての記事
本文: またまた一年以上空いてしまった。
生きてました。
最近は、KotlinでのAndroidアプリもやってたりします。
Unityも手出し始めてて、もう何屋さんかわからなくなってる。
Unityの記事もそのうち書きたい。
さて、さっそく表記の話。
どういうことかというと、Kotlin（というかAndroid）のWebViewはキャッシュ関連のコントロールが少しめんどいので、その対応についてである。
早い話が、キャッシュがクリアできない問題だ。
KotlinのWebViewのキャッシュは基本強い。
デフォルトの設定では、キャッシュが存在する場合は間違いなくキャッシュを使用する。
サーバー側から新しい状態をレスポンスしてもお構い無しだ。
ただし、通常は、キャッシュを使わない設定をすれば解決する。
```kotlin
import android.webkit.WebSettings
// 中略
webView.settings.cacheMode = WebSettings.LOAD_NO_CHACHE
// webViewには、WebViewクラスのインスタンス等が格納されているとする
```
見た感じから分かる通り、キャッシュ使いません！設定をするのだが、
厄介なことに、AOSやデバイスによって、この設定が効かないパターンが存在する。
私自身、この、効かないパターンにより、デバイス別で現象が変わるという厄介な状況に追い込まれ、調査等を行っていった。
そして、ある一定の効果がある方法を編み出した。
まず一つは、事前にhttpリクエストでキャッシュを介さないアクセスをし、ファイル更新日で比較する手法だ。
下記のようになる。
（以下ソースコードは、WebViewを拡張したクラスでのソースコードとなる）
```kotlin
package プロジェクトパッケージ
import android.content.Context
import android.content.SharedPreferences
import android.util.AttributeSet
import android.util.Log
import android.webkit.WebView
import kotlinx.coroutines.CoroutineScope
import kotlinx.coroutines.Dispatchers
import kotlinx.coroutines.launch
import java.net.HttpURLConnection
import java.net.URL
import java.util.Calendar
import java.util.Locale
class WebViewExtends : WebView {
private var _cacheKey: String? = null
// 通常のWebViewと同じコンストラクタ群
constructor(context: Context) : super(context)
constructor(context: Context, attrs: AttributeSet?) : super(context, attrs)
constructor(context: Context, attrs: AttributeSet?, defStyleAttr: Int) : super(context, attrs, defStyleAttr)
constructor(context: Context, attrs: AttributeSet?, defStyleAttr: Int, defStyleRes: Int)
: super(context, attrs, defStyleAttr, defStyleRes)
constructor(context: Context, cacheKey: String) : super(context) {
this._cacheKey = cacheKey
}
fun setCacheKey(key: String = ""){
this._cacheKey = key
}
private fun fetchLastModified(urlString: String, onResult: (String?) -> Unit) {
CoroutineScope(Dispatchers.IO).launch {
var connection: HttpURLConnection? = null
try {
val url = URL(urlString)
connection = url.openConnection() as HttpURLConnection
connection.requestMethod = "HEAD"
val lastModified = connection.getHeaderField("Last-Modified")
// 結果をメインスレッドに返す場合
kotlinx.coroutines.withContext(Dispatchers.Main) {
onResult(lastModified)
}
} catch (e: Exception) {
e.printStackTrace()
kotlinx.coroutines.withContext(Dispatchers.Main) {
onResult(null)
}
} finally {
connection?.disconnect()
}
}
}
override fun loadUrl(url: String) {
fetchLastModified(url) { lastModified ->
// アプリ保持更新日と比較し、新しければアプリ内キャッシュクリア
if (lastModified != null) {
// 値を利用
val sharedPref: SharedPreferences = context.getSharedPreferences(
"cache_pref", // ファイル名（任意の文字列でOK）
Context.MODE_PRIVATE
)
val stringValue = sharedPref.getString(this._cacheKey, "default modi")
if (stringValue != lastModified) {
this.clearCache(true)
sharedPref.edit().putString(this._cacheKey, lastModified)
}
}
// 必ず親クラスのloadUrlを呼び出す
super.loadUrl(url)
}
}
}
```
キャッシュを介さないアクセスを事前にし、ファイル更新日によって、キャッシュをクリアするか、しないかをコントロールする手法だ。
比較的スマートにできていると思う。
ただし、弱点としては、アクセスが重複している点だ。
よって、下記の方法が望ましいように思う。
```kotlin
// 基本のインポート文定義は省略
class WebViewExtends : WebView {
private var _cacheKey: String? = null
// コンストラクターも省略
fun setCacheKey(key: String = ""){
this._cacheKey = key
}
// 10分区切りで丸めた日付文字列を付与
private fun appendTimestamp(url: String): String {
val ts = getRoundedTimestamp()
val separator = if (url.contains("?")) "&" else "?"
return "$url${separator}ts=$ts"
}
// 10分単位で丸めた日付文字列（例: 202507141750）を生成
private fun getRoundedTimestamp(): String {
val cal = Calendar.getInstance()
val year = cal.get(Calendar.YEAR)
val month = cal.get(Calendar.MONTH) + 1 // Calendar.MONTHは0始まり
val day = cal.get(Calendar.DAY_OF_MONTH)
val hour = cal.get(Calendar.HOUR_OF_DAY)
val minute = (cal.get(Calendar.MINUTE) / 10) * 10
// ゼロ埋めしてフォーマット
return String.format(Locale.US, "%04d%02d%02d%02d%02d", year, month, day, hour, minute)
}
override fun loadUrl(url: String) {
val setUrl = appendTimestamp(url)
super.loadUrl(setUrl)
}
}
```
要は、アクセスURLに対して、タイムスタンプパラメータを付与するというものだ。
（本記事では、10分おきのタイムスタンプとしている）
さしものKotlinのWebViewといえど、さすがにURLパラメータが違えば、新規アクセスとなる。
ただし、こちらの手法も弱点があり、キャッシュが使用される時間が決まった時間内のみとなる点だ。
だが、以上の手法であれば、キャッシュを使わない設定が効かないパターンでも有効だ。
KotlinというかAndroidは面白いね。
アプリ作る際も、Swift（Xcode）での開発よりはるかに自由度が高く作れるから、いろいろできそう。
ただ、その分、全部自分で作らなきゃいけない感があって、ハードルが高い印象はある・・・。
また、いろいろ記事書いていこうと思うよ。
Unityのノウハウ記事も書きたい。
ではまた。
#### 著者
著者名: みやびプリン
職業: フロントエンドエンジニア
プロフィール: 基本はイラストレイター（自称）だが、
本職は札幌市のフロントエンドエンジニア。
フロントエンドだけではなく、各種プログラミング言語に精通していると自負している。
HTML、CSSはもちろんのこと、JavaScript、TypeScript、PHP、Perl、Python、C#、Kotlin、Swift、Objective-Cなど多くの多くの言語に精通している他、
Movable Type、WordPressなど各種CMS、React.js、Angularなどフロントエンドフレームワークも扱える。
最近はUnityによる3Dコンテンツにも手を出している。
---
### 【Swift】WKWebView内でのfetchなどのリクエストヘッダーのプロパティ名について
URL: https://highmoon-miyabi.net/blog/2024/11/15_000600.html
公開日時: 2024-11-15T17:43:34+09:00
更新日時: 2025-11-19T14:28:35+09:00
カテゴリ: JavaScript,Swift・Objective-C
概要: SwiftのWKWebView内のJSにて、fetchなどのリクエストをする際のカスタムヘッダーに関して、とんでも事実を記事にした
本文: やぁ、ひさしぶり。
二年間沈黙してましたが、生きてました。
鬼忙しかった。ネタがなかったわけではない。
さて、表記の件さっそくいこうか。
昨今、アプリの実装と言っても、Webビューで実装する部分も多いかと思う。
その中で、React.jsや、Vueなどの、フロントエンドフレームワークないし、ライブラリを使っている人も多いと思うが、その時に、ひとつサーバーとの通信をするにしても、APIの実行の際に、
フロント側でリクエストを作らにゃならん場面も増えていると思う。
わしも同じ局面で、JSの有能なAPIである、fetch君をめちゃくちゃ乱用するわけだが、
その際に困ったことがおきた。
ローカル開発環境や、テスト環境でも直のhttpリクエスト（Postmanというアプリケーションを使用）では成功するのに、なぜかアプリのWebビュー上（SwiftのWKWebViewクラスで生成したインスタンス）からのリクエストだけが上手くいかないのだ。
もしやと思い、 なまら調べた挙句、バックエンドの人に、こちらからのリクエストのヘッダーオブジェクトを、レスポンスに含めてもらいようやっと判明した。
なんと、WKWebView上のリクエストヘッダーのうち、カスタムヘッダー（こちらでユニークで指定したプロパティ）のプロパティ名が全て小文字となっていたのだ。
これは大問題ではないか。
バックエンドではだいたい、ケース（大文字・小文字）も含めて検知処理を行うのが普通なので、これでコケるのはなかなかエグい。
どういうことかというと、下記の構文でリクエストしたとする。
```javascript
const contents = JSON.stringify({ content: 'mog' });
const header = {
'Content-Type': 'application/json',
'Auth-Token': 'Hoge_Token'
};
// ここで、キャメルケースでヘッダーを指定するのが普通
const reqBody = {
method: 'POST',
body: contents,
headers: header
}
fetch('hoge/api/hogehoge', reqBody).then(data => data.json());
```
上記だとなんと、リクエストヘッダーは下記となる。
```text
{
"content-type": "application/json",
"auth-token": "Hoge_Token"
}
// カスタム以外の他のプロパティ名は小文字変換されていない
```
これを見つけるのに時間がかかり、実装に大きく遅れが生じてしまった。
ってか普通こんなん知らんがな、だろww
限定的だしw
結果、バックエンドで、ケース判別をゆるくしてもらい、無事実装完了。
現象がピンポイントなのに、けっこう昨今の実装で十分ひっかかるところだから、今回のはエグかった。
ちなみに、いくら調べても、AIに聞いても、情報は見つからない。
ただし、AIに解決報告したので、もしかしたら、今後は出てくるかもしれない。
ってわけで、久々に、まともなネタができたので、記事に書いてみました。
ではまた。
#### 著者
著者名: みやびプリン
職業: フロントエンドエンジニア
プロフィール: 基本はイラストレイター（自称）だが、
本職は札幌市のフロントエンドエンジニア。
フロントエンドだけではなく、各種プログラミング言語に精通していると自負している。
HTML、CSSはもちろんのこと、JavaScript、TypeScript、PHP、Perl、Python、C#、Kotlin、Swift、Objective-Cなど多くの多くの言語に精通している他、
Movable Type、WordPressなど各種CMS、React.js、Angularなどフロントエンドフレームワークも扱える。
最近はUnityによる3Dコンテンツにも手を出している。
---
### 【JavaScript】【お詫び】location.reload(true)に関して
URL: https://highmoon-miyabi.net/blog/2022/11/25_000597.html
公開日時: 2022-11-25T10:41:37+09:00
更新日時: 2024-11-07T20:08:53+09:00
カテゴリ: JavaScript
概要: 巷で有名なJavaScriptでのスーパーリロード。前回の記事は、誤情報だったのをお詫びするエントリーです。
本文: ひさびさです。
まずはお詫びです。
（サムネ誤る気あんのか問題）
下記記事に関して。
【JavaScript】location.reload(true)でスーパーリロードはデマ - JavaScript - 今日のプリン言 | 月の高いところ
デマは言い過ぎでした。
お詫び申し上げます。
本当にすみませんでした。
正しくは、記事の最後尾にも軽く記載してますが、
有効な環境も存在するです。
JavaScriptは多数のブラウザにより独自開発がされていた歴史がありますので、
それによって、一部の環境では有効、というのが正しい挙動のようです。
上記記事に関して、多数（といっても二件）のご指摘コメントいただきまして、
修正しようと思いつつも二年経ってしまった・・・。
実は、つい先日、MDNの、location.reload()メソッドに関してのエントリーが更新されてたっていうね。
Location.reload() - Web API | MDN
上記記事以上のことはないので、
もうわしに言えることはないでござる。
（↑口調の渋滞さすな）
しかし、最新の情報を常に発信し続けるMDNさすがだ・・・・・・。
でも、こう、コメントもらえるのはありがたいです。
ただし、おしむらくは、MTのコメント機能復活はよ・・・・・。
#### 著者
著者名: みやびプリン
職業: フロントエンドエンジニア
プロフィール: 基本はイラストレイター（自称）だが、
本職は札幌市のフロントエンドエンジニア。
フロントエンドだけではなく、各種プログラミング言語に精通していると自負している。
HTML、CSSはもちろんのこと、JavaScript、TypeScript、PHP、Perl、Python、C#、Kotlin、Swift、Objective-Cなど多くの多くの言語に精通している他、
Movable Type、WordPressなど各種CMS、React.js、Angularなどフロントエンドフレームワークも扱える。
最近はUnityによる3Dコンテンツにも手を出している。
---
### 【Visual Studio Code】括弧（(){}[]）の色が強制的に変わってしまうことの対応
URL: https://highmoon-miyabi.net/blog/2022/05/12_000595.html
公開日時: 2022-05-12T11:01:35+09:00
更新日時: 2022-09-27T01:09:52+09:00
カテゴリ: プログラム全般
概要: Visual Studio Codeの最近のアップデートにて、(){}[]の色が、テーマで対応されなくなってしまった。その対応を記事にまとめてみた。
本文: どうも。
MTの更新で、コメント機能が死んでて（管理画面の方）げんなりしてるプリンです。
シックスアパードさん気付いて・・・。
（無料版なので、問い合わせるに問い合わせれないw）
さてさて、表記の件。
みんな大好き、VSCode。
僕も、コーディングはそいつ一択なわけですが、
最近のアップデートで、気持ち悪いことになった。
ブロック階層別の各括弧（(){}[]）のカラーリングが強制となってしまったのだ。
テーマが、derk系だった場合、
#FFD700
#DA70D6
#179FFF
#00000000（黒の透明度0）
#00000000
#00000000
の六つだ。
いや、強制と言っては語弊があるんだけど、
おそらく、その部分のカラー識別名が変わったので、
各テーマが対応してないだけだとは思うんだけどね。
結論から言うと、VSCodeは、テーマを使った上で、
自分好みの色を上書き（ツール上ね）することができるので、
その機能を使う。
カラー名は下記となる。
```text
"workbench.colorCustomizations": {
"[適用したいテーマ名]": {
"editorBracketHighlight.foreground1": "#FFD700",
"editorBracketHighlight.foreground2": "#DA70D6",
"editorBracketHighlight.foreground3": "#93A1A1",
"editorBracketHighlight.foreground4": "#00000000",
"editorBracketHighlight.foreground5": "#00000000",
"editorBracketHighlight.foreground6": "#00000000"
}
},
```
って感じ。
Cmd or Ctrl + ,で設定タブを開き、
タブ名の右上のファイルっぽいアイコンをクリックし、setting.jsonを直接開き、
上記を追記すれば設定できる。
VSCodeでは、六階層まで括弧のカラーリングを行える、となったみたいね。
この、カラーリング識別子を見つけるのがもう手間取ったわけよ。
調べても出てこんし。
テキストのキャプチャ撮って、色確認して、
既存のテーマファイルの中でそのカラーコードで検索しても見つからんし。
最終的には、アプリケーションのディレクトリの中で、テキスト検索して、ようやっと見つけたわけだ。
Windowsの場合、下記のファイルにその記載があった。
C:\Users\ユーザー名\AppData\Local\Programs\Microsoft VS Code\resources\app\out\vs\workbench\workbench.desktop.main.js
けっこう根っこのファイルに記載だったわけよ。
つまりは、既存のデフォルトテーマにもその識別子のカラーリング設定がされてないってわけだ。
いや、設定しとけよ、Microsoftさんよ・・・。
ってわけで、わりと新しい情報でした。
#### 著者
著者名: みやびプリン
職業: フロントエンドエンジニア
プロフィール: 基本はイラストレイター（自称）だが、
本職は札幌市のフロントエンドエンジニア。
フロントエンドだけではなく、各種プログラミング言語に精通していると自負している。
HTML、CSSはもちろんのこと、JavaScript、TypeScript、PHP、Perl、Python、C#、Kotlin、Swift、Objective-Cなど多くの多くの言語に精通している他、
Movable Type、WordPressなど各種CMS、React.js、Angularなどフロントエンドフレームワークも扱える。
最近はUnityによる3Dコンテンツにも手を出している。
---
### 【JavaScript】ほぼ完璧（だと思う）絵文字の除去（正規表現）
URL: https://highmoon-miyabi.net/blog/2022/02/21_000588.html
公開日時: 2022-02-21T18:30:53+09:00
更新日時: 2025-11-17T15:28:40+09:00
カテゴリ: HTML5,JavaScript
概要: エンジニアにとっては、常に殺意の対象である絵文字。その完璧な除去を正規表現などを用い、追い求めたっていう記事。
本文: どうも。
気づけば、一年以上記事書いてなかった。
普通に死ぬほど忙しかった。
さて、表記の件だ。
面白いよね、絵文字って。
エンジニアにとっては、56したい存在だけどね。
DBに保存する情報や、印刷に回すデザイン情報などは特に、絵文字が入っていると、まず間違いなくバグるので、
非常に厄介な存在だ。
そして、その性質が故に、除去がとんでもなく難しいのでことさら56したくなる。
こればっかりはやってみた人間にしかわからない。
ってわけで、御託ここまで。
絵文字の完璧な除去になったのでは？
ってコードができたので、公開しようかと。
```javascript
const ranges = [
'[\ud800-\ud8ff][\ud000-\udfff]', // 基本的な絵文字除去
'[\ud000-\udfff]{2,}', // サロゲートペアの二回以上の繰り返しがあった場合
'\ud7c9[\udc00-\udfff]', // 特定のシリーズ除去
'[0-9|*|#][\uFE0E-\uFE0F]\u20E3', // 数字系絵文字
'[0-9|*|#]\u20E3', // 数字系絵文字
'[©|®|\u2010-\u3fff][\uFE0E-\uFE0F]', // 環境依存文字や日本語との組み合わせによる絵文字
'[\u2010-\u2FFF]', // 指や手、物など、単体で絵文字となるもの
'\uA4B3', // 数学記号の環境依存文字の除去
];
const surrogatePairCode = [
65038,
65039,
8205,
11093,
11035
];
const removeEmoji = in_value => {
const reg = new RegExp(ranges.join('|'), 'g');
let retValue = in_value.replace(reg, '');
// パターンにマッチする限り、除去を繰り返す（一回の正規表現除去では除去しきないパターンがあるため）
while (retValue.match(reg)) {
retValue = retValue.replace(reg, '');
}
// 二重で絵文字チェック（4バイト、サロゲートペアの残りカス除外）
return retValue.split('').reduce((p, c) => {
const code = c.charCodeAt(0);
if (
encodeURIComponent(c).replace(/%../g, 'x').length < 4 &&
!surrogatePairCode.some(codeNum => code == codeNum)
) {
return p += c;
} else {
return p;
}
}, '');
}
const target = document.getElementsByClassName('removeEmoji');
const bindFunc = function(){
this.value = removeEmoji(this.value);
};
Array.prototype.forEach.call(target, el => {
el.addEventListener('change', bindFunc);
el.addEventListener('blur', bindFunc);
});
```
ポイントは、
正規表現の部分と、サロゲートペアの残りカスの除去だ。
多くの絵文字除去の方法記事で採用されている、正規表現を簡潔にし、アップデートしている。
これにより、9割がたの除去がされる。
また、マッチする限り、繰り返し除去を行うことによって、さらに除去を進める。
そして、次に大事なのは、
サロゲートペアの残りカスの除去だ。
上記正規表現による除去では、除去しきれないのが、絵文字の厄介なところ。
4バイト以上の文字や、サロゲートペアの片割れが残る可能性がある。
（サロゲートペアとは、絵文字は二つ以上の文字コードを、一つの文字とすることによって表現されているものが大半。
そのペアのことを指す）
なので、4バイト以上の文字と、その片割れを含めない文字列を返すようにしている。
以上だ。
今回は、ブラウザ動作のJavaScriptでの実行だが、
他の言語・環境においても、応用が効くだろう。
さて、仕事戻ろうか・・・。
#### 著者
著者名: みやびプリン
職業: フロントエンドエンジニア
プロフィール: 基本はイラストレイター（自称）だが、
本職は札幌市のフロントエンドエンジニア。
フロントエンドだけではなく、各種プログラミング言語に精通していると自負している。
HTML、CSSはもちろんのこと、JavaScript、TypeScript、PHP、Perl、Python、C#、Kotlin、Swift、Objective-Cなど多くの多くの言語に精通している他、
Movable Type、WordPressなど各種CMS、React.js、Angularなどフロントエンドフレームワークも扱える。
最近はUnityによる3Dコンテンツにも手を出している。
---
### 【JavaScript】location.reload(true)でスーパーリロードはデマ
URL: https://highmoon-miyabi.net/blog/2020/10/29_000581.html
公開日時: 2020-10-29T16:06:21+09:00
更新日時: 2022-11-25T11:22:34+09:00
カテゴリ: JavaScript
概要: 巷で有名なJavaScriptでのスーパーリロード。それが嘘っぱちだということを、怒りを込めて訴えるエントリーです。
本文: どうも、繁忙期抜けてもまだ忙しいみやびです。
（だったら記事書くなよ）
さて、表記の件。
JavaScript スーパーリロードなんて検索したら、だいたいは下記が出てくると思う。
```javascript
location.reload(true);
```
第一引数に論理値を入れ、真であればスーパーリロードがかかる、というものだ。
（そもそもリロードとスーパーリロードの違いは？って人はググってね）
いかにもJSっぽさがあり、できそうな雰囲気がある。
海外を始め、某プログラミングサイト、Samurai Blog（隠す気なし）など、
数多くの記事で、この方法が紹介されている。
しかし、
まったくもってデマである。
多数のブラウザで実験をしてみたが、
スーパーリロードのスの字もなく、ただ、キャッシュを使ったリロードしか起きなかった。
（Ctrl + F5や、Cmd + Shift + Rでは問題なくスーパーリロードがされた）
そもそも、
公式の記載でも、一切引数に関しての仕様の言及が無いのが、何よりの証拠だ。
Location.reload() - Web API | MDN
HTML Standard
みなさんも、どうか惑わされないように。
可能な限り、技術や仕様の調査は、まず公式を確認するようにしよう。
というわけで、嘘っぱち情報が出ているのが気に食わなかったので、
エントリーにしてみました。
ただ、JavaScriptは、各ブラウザが独自拡張をしていた歴史があるため、
今回の方法でスーパーリロードができていた時代もあるかもしれません。
ではまた。
#### 著者
著者名: みやびプリン
職業: フロントエンドエンジニア
プロフィール: 基本はイラストレイター（自称）だが、
本職は札幌市のフロントエンドエンジニア。
フロントエンドだけではなく、各種プログラミング言語に精通していると自負している。
HTML、CSSはもちろんのこと、JavaScript、TypeScript、PHP、Perl、Python、C#、Kotlin、Swift、Objective-Cなど多くの多くの言語に精通している他、
Movable Type、WordPressなど各種CMS、React.js、Angularなどフロントエンドフレームワークも扱える。
最近はUnityによる3Dコンテンツにも手を出している。
---
### 【SEO】title要素SEOを極める
URL: https://highmoon-miyabi.net/blog/2020/10/06_000580.html
公開日時: 2020-10-06T10:17:46+09:00
更新日時: 2025-10-17T14:19:19+09:00
カテゴリ: SEO
概要: 星の数ある、title要素のSEOに関しての記事がある中、今更、突っ込んだ記事を描いてみました。あまり（というかほとんど）知られていない隠し効果に関しても、記載してます。
本文: どうも。
死ぬほど忙しかったので、だいぶ空いた。
さて、表記の件、さっそくやっていこう。
と言っても、今までさんざ他の記事でも、取り上げられているネタのため、
他の記事でやってない部分や、日本人はあまり発見していない事実について取り上げようと思う。
なので、基本的な部分や、慣習的に使われている記号文字などに関しては、ガッツリ割愛するので、
そこら辺の基本的な事を知りたいって人は、どうぞ離脱してください。
（そういう基本的な部分は見飽きてうんざりしてる人向けのエントリーということ）
titleの複数階層の表現
例えば、Webサイトがあって、その記事群があり、カテゴリがあり、その記事があり、という、高階層をtitleで表現する時に有効な記載法について。
って言って、単純に記号文字で区切るだけだけどね。
```html
<title>記事タイトル | カテゴリ | ブログ | サイトタイトル</title>
```
ただし、下記のパターンもある。
```html
<title>記事タイトル - カテゴリ - ブログ | サイトタイトル</title>
```
要は、第二階層とサイトタイトルを区切る文字と、
それ以降の階層のタイトルの区切り文字を変えるというもの。
実はpixivはけっこうSEOしっかりしていて、
第二階層と、それ以降で区切り文字が分かれているのだ。
ただ、公式での見解などにもよると、
区切り文字はなんでもいいという記述も散見されるため、
実際はどちらでもいいのかもしれない。
（ここに関しては研究中）
して、この複数階層でのtitleの記述について、意外にも多くのSEO記事で、ほとんど取り上げられていない。
SEO技術の多くを知られたくない + Webサイトの階層は基本的に浅い方がいい、というのが理由であろうと思われる。
":" は特別な意味がある
さて、実はこの項が本題。
title要素のSEOをする際、扱いに困るのが、トップページの記述だ。
だが、ある程度慣習化されている面があり、だいたい下記のような形で落ち着いていると思う。
```html
<title>サイトバリュー | サイトタイトル</title>
```
サイトバリューとは、そのサイトがなんのサイトかを端的に示すモノだ。
要はSEO的にキーワードを打ち込む部分ってこと。
慣習的に取り入れられてきたこの記法だが、
実は微妙に間違っている。
なぜかというと、これは当サイトにおいての研究結果なのだが、
この形式では、同じサイトとしてのくくりと認識してくれない可能性が高いのだ。
その証拠に、当サイトでは、上記の形式にしている限り、サイトリンクが表示されなかったのだ。
ではどうするか。
:を使うのだ。
前項では、記号自体はどれを使っても効果は同じ、と記載したが、
実は、:だけは特別な効果を持つ。
:は、プログラミングにおいては、おおよそ、
プロパティ名 : 値という使われかたをする。
そう、このtitleSEOにおいても、
同じ効果を持つのだ。
つまり、下記のような形式が望ましい。
```html
<title>サイトタイトル : サイトバリュー</title>
```
となるわけだ。
プロパティ名 = サイトタイトル
値 = サイトバリュー
ってわけ。
この形式にした途端、それまで表示されていなかった、
サイトリンクが、常時表示されるようになったのだ。
このことはもちろん、Google公式は言及していないし、この形式にしているサイトは、
海外も含め、ほとんどない。
だが、上記の実験結果からも、この特別効果がある事は、紛れもない事実と言えよう。
title要素は、サイトの表示には現れない、地味な役割ではあるが、ことSEOにおいては、
最重要な効果を持つ要素だ。
それ故に、Webサイト構築においては、SEOを意識するのであれば、
一番大事にしなくてはならない。
絵画とかも、実は、絵本体と同じくらい重要だったりするので、
タイトルって大事なんよね。
SEO大好き人間なので、またこんな記事書いていきたい。
んだば。
#### 著者
著者名: みやびプリン
職業: フロントエンドエンジニア
プロフィール: 基本はイラストレイター（自称）だが、
本職は札幌市のフロントエンドエンジニア。
フロントエンドだけではなく、各種プログラミング言語に精通していると自負している。
HTML、CSSはもちろんのこと、JavaScript、TypeScript、PHP、Perl、Python、C#、Kotlin、Swift、Objective-Cなど多くの多くの言語に精通している他、
Movable Type、WordPressなど各種CMS、React.js、Angularなどフロントエンドフレームワークも扱える。
最近はUnityによる3Dコンテンツにも手を出している。
---
### 理科準備室の隠れんぼ - 七不思議
URL: https://highmoon-miyabi.net/blog/2020/08/17_000579.html
公開日時: 2020-08-17T12:53:05+09:00
更新日時: 2020-11-12T17:40:08+09:00
カテゴリ: 雑記
概要: 七不思議の舞台となった理科準備室。そこで起きた奇妙な出来事。果たして、何故そのようなことが起きたのか…。
本文: どうも。
とにかく暑い。
というわけで、寒くなるかはわからんが、怪談でもしようかと。
先日記事に書いた通り、俺の母校の小学校は、かなり古く、歴史があり、
故に様々な怪談や曰く付きの話がけっこうあった。
当然七不思議ってやつも。
その中の一つに、理科準備室の隠れんぼ、というものがある。
内容はこうだ。
ある生徒たちが、一学期の終業式の日、式後に、隠れんぼをしていた。
ある男子生徒が、理科準備室に隠れた。
しかし、他の生徒は、見廻りの先生の注意を受け、その男子生徒を置いて先に帰ってしまった。
そして、先生は、男子生徒に気づかず、理科準備室の鍵をかけてしまった。
理科準備室は、外側からでしか鍵の開閉ができず、
その男子生徒は閉じ込められてしまったのだ。
そして、そのまま夏休みが始まってしまい、
始業式の日に、理科準備室で、干からびた男子生徒の遺体が発見される事件となった。
それ以来、理科室側から、準備室のドアに向けて、
「もういいかい？」
と尋ねると、
「まーだだよ」
と返答が返ってくるようになった。
という話だ。
ある在籍が古い先生が、俺のクラスの授業の終わりに、七不思議を語ってくれた中の一つだ。
二年か、三年生の時である。
さて、その後何週間か経ったか、七不思議の事など半分忘れていたころ、
理科の先生に頼まれ、俺と男子一人（以下A）、女子二人（以下B美、C子）の計四人で、理科準備室から授業で使う道具を持ってきて欲しいと頼まれ、向かった。
俺とAは、各々の分の道具を抱え、先に準備室を廊下側から後にした。
しかし、女子二人が何やらドアをガチャガチャ言わせている。
最初は、ふざけてんのか？と思ったが、
どうにも様子がおかしい。
俺が異変に気づき、
「あれ、ドア開かないんじゃない...？」
と言い、俺とAはドアに駆け寄った。
そして、向こうが手を止めたタイミングで、こちら側からドアノブを回した。
ガチャ
ドアはすんなり開いた。
B美、C子は、息を荒げ、準備室から飛び出てきた。
俺が「どうしたの？開かなかったの？」と聞くと、
B美、C子は涙目で声を揃えて、「マジで開かなかった」と言った。
どうしてそんなことが起きたのか。
当然、俺とAが外側から鍵をかけたなんて事は絶対にない。
俺とAは首を傾げたが、
ふと、先日聞いた七不思議の事を思い出し、背筋が凍った。
その後は特に何事もなかったのだが、
いったいこの出来事はなんだったのだろうか。
ただ単に女子二人の時だけ、たまたまドアの建て付けが悪かっただけなのか。
それとも、理科準備室の彼が、二人を閉じ込め、向こうに連れて行こうとでもしたのだろうか...。
いかがだったでしょうか？
例の如く脚色は全くしていません。
大人になった今でも、この出来事は不可解です。
霊感ゼロな僕は、こういう恐怖体験はさほど多くはありませんが、とりわけ、去年語った出来事も併せ、
なかなかリアルに怖い体験です。
まぁ、自身の恐怖体験はもう無いけど、
また今度、ガクブルの母校の七不思議でも語ろうかなと思う。
ではでは。
#### 著者
著者名: みやびプリン
職業: フロントエンドエンジニア
プロフィール: 基本はイラストレイター（自称）だが、
本職は札幌市のフロントエンドエンジニア。
フロントエンドだけではなく、各種プログラミング言語に精通していると自負している。
HTML、CSSはもちろんのこと、JavaScript、TypeScript、PHP、Perl、Python、C#、Kotlin、Swift、Objective-Cなど多くの多くの言語に精通している他、
Movable Type、WordPressなど各種CMS、React.js、Angularなどフロントエンドフレームワークも扱える。
最近はUnityによる3Dコンテンツにも手を出している。
---
### お盆だからか
URL: https://highmoon-miyabi.net/blog/2020/08/16_000578.html
公開日時: 2020-08-16T18:58:35+09:00
更新日時: 2020-09-03T03:59:54+09:00
カテゴリ: 雑記
概要: あまりにも暇だったもので、廃校になった母校に行ってみたって話。
本文: いやはや、暑いですね。
北海道も死ぬほど暑いです。
さて、今回は30過ぎのいい兄ちゃんが、ちょっと遊び心で大学生ノリで心霊スポット的な場所に一人で行ったって話。
今夏、帰省していたのだが、あまりにも暇だったもので、
なんかないかなーと思っていたところ、ひょんなことから、親から、俺の母校の小学校が、
数年前に隣町の小学校と合併し、廃校となったが、校舎自体は残っているとの情報を聞いた。
俺は、怖い物見たさで、行ってみることにした。
俺の地元の小学校は、俺が在籍中の時点で、創立120年の老舗の学校だった。
（つまり、廃校時点では、140周年を越えていた）
明治からやっていて、一度校舎は改築されているが、その改築自体もかなり昔で、古い建物だった。
それ故か、七不思議を含め、かなり曰く付きの話が多かった。
車で5分ほどで到着すると、案の定、入り口という入り口には、立ち入り禁止の鎖がかかっている。
「やーっぱ入れないよなー」と思い、学校の周りを一周していると、
敷地内に、真新しい黒の軽ミニバンが停まっているのが目に入った。
嫌な感じが一瞬したが、どう見ても普通の車だったため、
廃校してから数年経って今更感があるが、撤去作業をしているのか？
と、自分を納得させた。
しかし、どこから入ったんだ？と、疑問を持ちながら、正面校門まで行くと、
なんと、そこだけは、立ち入り禁止の鎖が解かれていたのだ。
少し迷ったが、意を決して中に入った。
校舎東側の校庭は、三分の一ほどが、砂利が敷かれており、明らかに駐車スペースのようになっていた。
廃校後、何かに使おうとしているのかが見て取れた。
その駐車スペースに車を停め、校舎へと歩を進めた。
ミニバンが停めてある側の入り口、
低学年生用の玄関が開いていたので、そこから中に入ろうと、廊下を覗いてみた。
明らかに何か音がする・・・。
玄関から廊下を少し覗くと、少し先に、人影が・・・。
「出たか？」と一瞬思ったが、
何の気もない、普通の人、60代前後のおじさん二人だった。
何か作業をしていた。
ふーっと一息つき、
校舎内へと入って行った。
校舎は、使われなくなって何年か経っているからか、
荒れ果てていた。
当時の面影はもちろん残りつつも、床のタイルも痛んでいた。
その中で、玄関のところでは、「地域復興隊備品」と書かれた張り紙がついた机？が置いてあったため、
おそらく、おじさん達は、地域復興隊の人だろう。
さて、おじさん達に見つからない様に探索を続けるには、二つのルートがある。
一階の体育館を通って、中の方に入るルート、
二階に上がって、中央階段を使って、行き来するルートだ。
中の方の、七不思議の舞台や曰く付きの教室などに行くには、どちらかを通るしかない。
俺は、体育館を抜けて中の方に行くことにした。
渡り廊下を、音を立てない様に歩く。
廊下途中には、出ると噂されたトイレ、壁には、最後まで在校していた、低学年生徒の物だろう、自身の夢みたいなものが書かれた課題用紙がびっしりと貼り出されていた。
体育館に到着する。
そこには、異様な空気が漂っていた。
否、溜まっていた。
空気が重い。異常なまでに。
入って真っ先に目に入ったのは、体育館中にびっしりと置かれた、レンタル自転車だ。
地域復興隊の備品の一つであろう。
その真新しい物のおかげか、幾分か雰囲気は和らいでいたものの、
それにもまして、異様な雰囲気であった。
その異様さに、動けずにしばらくいると、
「パキっ・・・」
と天井の方で音が鳴った。
確かに、その日は真夏日であり、湿度の変化はでやすくなるだろう。
だが、わざわざ俺がいる時に鳴るだろうか？
七不思議の一つに体育館が舞台のものがあったのもあり、
体育館を横切って中に入る気にはなれず、俺は引き返した。
二階へ行って中央階段を使って、おじさん達を回避しようとした。
戻る途中、階段を昇ろうとした時、廊下に姿を晒す必要があり、
（階段昇り口には荷物が散乱していたため）
おじさん達に見られたような気がしたが、
構わず二階へと向かった。
二階へ昇ると、そこも明らかに空気が違った。
体育館より更に空気が重い。
暑いとかそういうのではない。
空気の圧が明らかに違うのだ。
その場にいるだけで、体を圧迫される。
そんな体験は人生においては初めてて、
尻込みしてしまった。
後に、母から聞くと、締め切っている建物では、空気の流れが無くなってしまうため、
そういった感覚を受けるとのことだった。
だが、今思い返すと、それにもまして空気が重かった様に思う。
そんなこともあり、一瞬ためらったが、ここまで来たのに引き返すのもあれだと思い、
意を決して歩を進めた。
廊下の上着かけには、当時在校中だった生徒の忘れ物の上着やらジャージやらがそのまま放置されており、妙に生々しかった。
教室では、ゴミ箱が無造作に転がっているのが見えた。
一階では、地域復興隊の作業の残りがあったからか、なんとなく人気の様なものが感じられたが、
二階には、そういった様子がまるでない。
それにもまして、その空気の重さからか、一階よりも更に恐怖感があった。
更に探索しようと、廊下を歩こうとすると、階下から話し声が聞こえた。
「やーっぱ、人いるわ！」
作業員のおじさんだ。
バレた。
「ここ立ち入り禁止ですよー！」と強い語調で呼びかけられた。
俺は観念して、「今出ますー！」と返答し、
二階を後にし、校舎から去った。
一階へ降りる途中、おじさん方が、
「お盆だからかと思ったわ」と話していたのが聞こえた。
つまり、俺の方を逆に、化けて出た何かと思ってしまった様だった。
地域復興隊のおじさん達、すみません、犯人は僕です。
ってわけで、俺が逆に驚かせてしまった、という話でした。
しかし、体育館でのラップ音はなんだったのだろうか。
そして、おじさん達に引き止められずに、探索を続けていたら、
俺はどうなっていたのだろうか。
なにせ、俺が在校当時からの心霊スポットは、その先にあったのだから・・・。
俺が在校当時、七不思議の舞台で遭遇した、
ちょい怖体験があるのだが、それは後日語るとしよう。
#### 著者
著者名: みやびプリン
職業: フロントエンドエンジニア
プロフィール: 基本はイラストレイター（自称）だが、
本職は札幌市のフロントエンドエンジニア。
フロントエンドだけではなく、各種プログラミング言語に精通していると自負している。
HTML、CSSはもちろんのこと、JavaScript、TypeScript、PHP、Perl、Python、C#、Kotlin、Swift、Objective-Cなど多くの多くの言語に精通している他、
Movable Type、WordPressなど各種CMS、React.js、Angularなどフロントエンドフレームワークも扱える。
最近はUnityによる3Dコンテンツにも手を出している。
---
### macにXAMPPはマジで絶対やめろ【ローカルサーバー】
URL: https://highmoon-miyabi.net/blog/2020/04/17_000574.html
公開日時: 2020-04-17T22:35:01+09:00
更新日時: 2020-11-13T11:56:48+09:00
カテゴリ: サーバー
概要: macOSにXAMPPは相性最悪なので、絶対やめた方がいいことを切々と訴える記事です。ほんとマジで布教してるやつぶっ56したくなる。良い子は絶対やっちゃダメ！！！！
本文: ほんとね、おかしいくらいこのパターン多くてイラッときたから記事書くことにした。
まず、本記事は、導入の仕方などを記載しているものではないことをご了承いただきたい。
タイトルの通りだ。
macにXAMPPを入れるのはやめとけ。
俺は、某QAサイトで回答とかしてたりするんだが、
そこでもあまりにも多い、なぜか知らんが、とにかく多い。
そして、うまくいってる人を見たことがない。
9割以上はなにかしろのエラーが起きてうまくいってない。
絶対布教してるやつがいる。
じゃなきゃ、こんなにも頻繁に出るわけがない。
だが、絶対やめとけマジで。
元々、ローカルサーバーを扱うアプリケーションは、
macOS用には、MAMP、Windows用にはXAMPPがあった。
そして、どこかのタイミングで、両者がお互いのOSに対応した。
だが、正直、macとWindowsでは、フォルダの仕組みも違うは、権限の違いはあるわで、
正直その細かい根っこの部分を解消など難しいわけだ。
ようは、OSに合った方を使わないと、いまだにエラーが絶えないのだ。
なぜかは知らない。だが、とにかく、macOSなのにXAMPPを入れる人が後を絶たない。
（逆のパターン、MAMP in Windowsもある。そちらもまずもって、うまく動作できない）
だが、Qii○ta（伏字失敗）とかなんだとかで、macOSにXAMPPを導入した、なんて記事が大量にあるではないか。
マジでやめろ
56したくなるから
下記に、なぜ、macOSにXAMPPがダメか、列挙しよう。
エラーが絶えない
両者に大した機能差がない。（だったらOSに合った方入れろって話）
アプリケーション側が、OSのコマンドの権限やその認証方式の違いの解消をしきってない（つまりエラーが出る）
上記に付随して無駄な設定をしなくてはならない
MAMPはPHPのバージョンを指定できるが、XAMPPは指定できないし、やるにもいろいろとめんどう
（だからって、WindowsにMAMP入れちゃイカン）
とにかく、macにXAMPPを入れるメリットが何もない。デメリットでしかない
とにかく、相性が悪い。
とにかく入れるな、macにXAMPPは。
似てるのは名前だけだからマジで。
とにかく、これからローカルで開発しようって初学者の方達は、OSに合った方を選んでいただきたい。
そして、macにXAMPPを入れるとかそういうの書いてる記事は、
即刻記事を取り下げていただきたい
初学者達を惑わすんじゃないよ、マジで。
アプリケーション側もどうかエラーが少なくなるよう、改善するか、
そもそも別OS側の開発はしないで、マジで・・・。
というわけで、もうとにかく激おこぷんぷん丸でした。
#### 著者
著者名: みやびプリン
職業: フロントエンドエンジニア
プロフィール: 基本はイラストレイター（自称）だが、
本職は札幌市のフロントエンドエンジニア。
フロントエンドだけではなく、各種プログラミング言語に精通していると自負している。
HTML、CSSはもちろんのこと、JavaScript、TypeScript、PHP、Perl、Python、C#、Kotlin、Swift、Objective-Cなど多くの多くの言語に精通している他、
Movable Type、WordPressなど各種CMS、React.js、Angularなどフロントエンドフレームワークも扱える。
最近はUnityによる3Dコンテンツにも手を出している。
---
### 【JavaScript・HTML】URLから画像の大きさを取得するには
URL: https://highmoon-miyabi.net/blog/2020/04/14_000573.html
公開日時: 2020-04-14T14:25:27+09:00
更新日時: 2020-08-07T00:40:41+09:00
カテゴリ: HTML5,JavaScript
概要: どうも、コロナがやばいですね。 北海道は...
本文: どうも、コロナがやばいですね。
北海道は二度目の緊急事態宣言だされてしもた・・・。
さて、表記の件、なんで今更わざわざこんな簡単な内容のこと書こうと思ったかと、
重要な記載がない記事があまりにも多くて、イラッときたからです。
そう、このブログの使命はそこにあるのだ！
初学者でも、一発でたどり着ける実装、そこが大事ではないか！
では、まず、JavaScriptにて、画像をURLで取得、大きさを、なんて調べると、だいたいは下記のような構文が出てくる。
```javascript
const image = new Image();
image.src = 'image.png';
console.log(image.width);
console.log(image.height);
// 本当に画像の本来の大きさの場合は下記
console.log(image.naturalWidth);
console.log(image.naturalHeight);
```
えらく簡単やん、楽勝やん！
んなわけあるかよ。
これ書くとたいていどうなるかというと、
全部0が出力される。
何が原因かって？
そんなん当たり前だ。
画像の読み込みが完了される前に取得しようとしているからだ。
本当に大きさなどを得たいなら、下記のようにせねばならない。
```javascript
const image = new Image();
image.src = 'image.png';
image.onload = () => {
console.log(image.width);
console.log(image.height);
// 本当に画像の本来の大きさの場合は下記
console.log(image.naturalWidth);
console.log(image.naturalHeight);
};
```
つまりは、画像の読み込みが完了した時点での実行にせねばならないということだ。
コールバック地獄の回避や、外部で使用したりしたい場合は、Promiseを使うと、やりやすいだろう。
だがしかし、このonloadつきの記事が、思ったより見つからなかった。
なんでやねん！
確かに、あたりまえだよ、読み込みは非同期だって、少し開発経験とかあればわかるよ？
でもよ、この話題調べてる時点で初学者なんだよ。
だったら、そこも言及すべきでしょが。
というわけで、久々に、現場目線系記事でした。
#### 著者
著者名: みやびプリン
職業: フロントエンドエンジニア
プロフィール: 基本はイラストレイター（自称）だが、
本職は札幌市のフロントエンドエンジニア。
フロントエンドだけではなく、各種プログラミング言語に精通していると自負している。
HTML、CSSはもちろんのこと、JavaScript、TypeScript、PHP、Perl、Python、C#、Kotlin、Swift、Objective-Cなど多くの多くの言語に精通している他、
Movable Type、WordPressなど各種CMS、React.js、Angularなどフロントエンドフレームワークも扱える。
最近はUnityによる3Dコンテンツにも手を出している。
---
### 【SEO】Search Consoleで、sitemap.xmlが反映されない時
URL: https://highmoon-miyabi.net/blog/2020/04/03_000572.html
公開日時: 2020-04-03T11:43:43+09:00
更新日時: 2020-10-15T03:04:16+09:00
カテゴリ: SEO
概要: そう、最近やたらとSEOにハマっている。...
本文: そう、最近やたらとSEOにハマっている。
いや、前からか。
さて、ということで、なにかと欲しい情報が見つからない、サイトマップについてだが、
今回のエントリーは、Search Consoleにて、そのsitemap.xmlが認識されない、反映されない時に確認することについてだ。
ファイルが存在していること
当たり前なんだけど、そもそもsitemap.xmlがないと、そら認識もくそもない。
CMSとか使ってたり、ファイルの場所を変えたりとすると、意外に忘れがちなので注意。
robots.txtの設定
ここ、実は重要で、robots.txtでの設定がsitemap.xml送信時に影響がある。
なぜなら、Search Consoleにてのsitemap.xmlの認識は、ロボットが行うからである。
下記のように設定をするといいだろう。
```text
Sitemap: https://example.com/sitemap.xml
```
もちろん、これ入れなくてもいいんだけど、明示的に指定することによって、サイトマップとして認識されやすくなる。
robots.txtの更新を反映させる
さて、実は本エントリーの主題はここにある。
sitemap.xmlは、robots.txtの影響を受けることは上記の通りなのだが、
robots.txtの更新の反映に関しては、Search Console側にあるのだ。
どういうことかというと、例えば、
/xml/sitemap.xmlとファイルを置いていた場合でも、実はロボットは、
/sitemap.xmlを参照しようとしてくる。
ここに関しては、だいたいのWebサイトがそうであり、また、Google自体がその置き場所を推奨しているからだ。
そんな時に、Search Consoleでは404だ！とエラーを吐きやがるので、うざいことこのうえない。
なので、下記のようにして、ロボット避けをしたりするのだが、
```text
Disallow: /sitemap.xml
```
その後、やっぱり、ルールに従おう・・・ってなった時に、
/sitemap.xmlにファイルを置き直したとしよう。
すると、ファイルが存在しているのに、sitemap.xmlを有効にできないなんて現象が起こる。
これは、上記のロボット避けを削除してもだ。
そう、こうなった時、robots.txtをSearch Console上で更新をしなければいけないのだ！
つまり、キャッシュクソ強いってことよ、robots.txtは！
そのSearch Console上で更新をするには、
robots.txtを更新した上で、下記にアクセスして、ログイン、プロパティの選択をした後、
送信 > Google に更新をリクエスト の送信と押さなければいけない。
Search Console
上記三点の確認で、だいたいは解決できると思う。
あとは、sitemap.xmlの中身次第だ。
書き方のコツとかはそのうちやりますわ。
いやでもさ、三つ目なんだけどさ、Googleさん、これ旧バージョンツールやで？
robots.txtを更新しなきゃいけないのはまぁ別にいいさ。
でもさ、そんな重要な機能、旧バージョンでしかできないって、まずくね？？
ってわけで、実は半分以上は愚痴なエントリーでした。
#### 著者
著者名: みやびプリン
職業: フロントエンドエンジニア
プロフィール: 基本はイラストレイター（自称）だが、
本職は札幌市のフロントエンドエンジニア。
フロントエンドだけではなく、各種プログラミング言語に精通していると自負している。
HTML、CSSはもちろんのこと、JavaScript、TypeScript、PHP、Perl、Python、C#、Kotlin、Swift、Objective-Cなど多くの多くの言語に精通している他、
Movable Type、WordPressなど各種CMS、React.js、Angularなどフロントエンドフレームワークも扱える。
最近はUnityによる3Dコンテンツにも手を出している。
---
### 【JavaScript】擬似列挙型
URL: https://highmoon-miyabi.net/blog/2020/02/26_000571.html
公開日時: 2020-02-26T13:19:02+09:00
更新日時: 2025-09-30T00:29:05+09:00
カテゴリ: JavaScript
概要: どうも。 だいぶ寝不足なみやびです。 今...
本文: どうも。
だいぶ寝不足なみやびです。
今日はさっさと寝よう、マジで。
さて、列挙型といえば、めちゃんこ便利なデータ型だ。
とくにアプリケーションとかの大規模開発においては、開発効率の向上に非常に貢献できるデータ型であると言えよう。
だが、これ、性質的にしゃーないのだが、動的型付けのJavaScriptには存在しない。
（糖衣言語のTypeScriptには存在する）
ってわけで、作ってみよた、ってのが今回のエントリーってわけ。
いろんな人がやってみたりしてるが、ES6〜で、ってのはなかなかなかったので、
ガンガン使ってやってみた。
（ES6〜使用なので、IEには対応してない）
```javascript
const EnumCaseStruct = (() => {
const key = Symbol();
return class EnumCaseStruct {
constructor(val) {
this[key] = val;
}
// Swiftを参考に、rawValueで、値を取得できるようにしている
get rawValue() {
return this[key];
}
};
})();
class Enum {
constructor(...cases) {
if (!cases.every(v => {
switch (typeof v) {
case 'object':
// オブジェクトの場合、各キー値にて、上のクラスのインスタンスとして定義
Object.keys(v).forEach(ve => {
Object.defineProperty(this, ve, {value: new EnumCaseStruct(v[ve])});
});
return true;
case 'string':
// 文字列型なら、そのまま初期化する
Object.defineProperty(this, v, {value: new EnumCaseStruct(v)});
return true;
defalult:
// オブジェクトか、文字列型以外は受け付けないようにする
return false;
}
})) {
// オブジェクトか文字列以外は、エラーをスローする
throw new Error('Type error!');
}
}
}
```
使い方は下記のような感じ。
```javascript
const fruits = new Enum(
{apple: 25},
{melon: 125}
);
const apple01 = fruits.apple;
const apple02 = fruits.apple;
console.log(apple01 == apple02); // true
// 可変長引数のため、下記のようにも定義可能
const fruits02 = new Enum(
{
apple: 25,
melon: 125
},
'pine'
);
// 各列挙型は各値が一意となるため、比較時は偽となる。
console.log(fruits.apple == fruits02.apple); // false
// Swiftを参考に、rawValueにて、設定した値を返す
console.log(fruits.apple.rawValue); // 25
// 文字列をそのまま入れた場合は、rawValueはその文字列を返す
console.log(fruits.pine.rawValue); // pine
```
もちろん完全にというわけではないが、だいたいそれっぽく実装できたと思う。
列挙型を、JSでも使っていきたいとなればどうかご参考あれ。
#### 著者
著者名: みやびプリン
職業: フロントエンドエンジニア
プロフィール: 基本はイラストレイター（自称）だが、
本職は札幌市のフロントエンドエンジニア。
フロントエンドだけではなく、各種プログラミング言語に精通していると自負している。
HTML、CSSはもちろんのこと、JavaScript、TypeScript、PHP、Perl、Python、C#、Kotlin、Swift、Objective-Cなど多くの多くの言語に精通している他、
Movable Type、WordPressなど各種CMS、React.js、Angularなどフロントエンドフレームワークも扱える。
最近はUnityによる3Dコンテンツにも手を出している。
---
### 【Angular】コンポーネント間共通定数を定義（改善Ver）
URL: https://highmoon-miyabi.net/blog/2020/02/04_000570.html
公開日時: 2020-02-04T13:46:54+09:00
更新日時: 2020-03-25T15:48:43+09:00
カテゴリ: Angular
概要: どうも、お昼、行こうとしたスープカレー屋...
本文: どうも、お昼、行こうとしたスープカレー屋さんが激混みで入れず、不機嫌なみやびです。
どうでもいいってな。
さて、表記の件。
前回同じものやったのだが、
（【Angular】コンポーネント間共通定数を定義 / 今日のプリン言 | イラストポートフォリオWebサイト - 月の高いところ）
今見ると、Angular的にはそうするしかなくても、TypeScript的にはナンセンスな定義だったので、
Linterにも注意されない改善案を出しておこうと思って、今回のエントリーだ。
主にまずかったのは下記の部分。
```javascript
import { Component, OnInit } from '@angular/core';
// 定数ファイルをクラス名でインポート
import { AppConst } from 'app.const.tsがあるディレクトリまでの相対パス/app.const';
@Component({
selector: 'app-sitetop',
templateUrl: './sitetop.component.html',
styleUrls: [
'./sitetop.component.scss'
]
})
export class SitetopComponent implements OnInit {
// AppClass型変数を定義
AppConstClass: AppConst;
// 最終的に使用する型なしの変数定義
AppConst;
constructor() {
// スタティックで使うのに、newさせてる
// クラスがconstructor定義なしだから、()つけれないが、TypeScript的に怒られるに決まってる。
// というふうにとにかくいろんな面でダメダメ
this.AppConstClass = new AppConst;
// インスタンスのメソッドを実行し、staticなクラスを代入
this.AppConst = this.AppConstClass.main();
}
ngOnInit() {
}
}
```
ようは、静的なクラスとして定義してんのに、newでインスタンス生成してるとことか、もういろいろダメなわけだ。
じゃぁ、どうするかというと、interfaceを使うってわけだよ。
```javascript
export interface AppConstInterface {
readonly PAGE_CHARSET: string;
readonly AUTHOR: string;
readonly COPYRIGHT: string;
readonly PAGE_TITLE: string;
readonly APP_TITLE: string;
}
export const AppConst: AppConstInterface = {
PAGE_CHARSET: 'utf-8',
AUTHOR: 'みやびプリン',
COPYRIGHT: 'Highmoon CO., LTD.',
PAGE_TITLE: '月の高いところ',
APP_TITLE: 'イラストサイト'
}
```
要は、変数の型として、readonlyにしちゃって、変数として定義しちゃうってわけ。
コンポーネント、ならびにビューで使うには下記だ。
```javascript
import { Component, OnInit } from '@angular/core';
// 定数ファイルをクラス名でインポート
import { AppConst, AppConstInterface } from 'app.const.tsがあるディレクトリまでの相対パス/app.const';
@Component({
selector: 'app-sitetop',
templateUrl: './sitetop.component.html',
styleUrls: [
'./sitetop.component.scss'
]
})
export class SitetopComponent implements OnInit {
// AppConstInterface型変数を定義
public AppConst: AppConstInterface = AppConst;
constructor() {
// あとはなんも考えずに、テンプレート内で使用可能
}
ngOnInit() {
}
}
```
ほんとに、interface便利すぎやで。
#### 著者
著者名: みやびプリン
職業: フロントエンドエンジニア
プロフィール: 基本はイラストレイター（自称）だが、
本職は札幌市のフロントエンドエンジニア。
フロントエンドだけではなく、各種プログラミング言語に精通していると自負している。
HTML、CSSはもちろんのこと、JavaScript、TypeScript、PHP、Perl、Python、C#、Kotlin、Swift、Objective-Cなど多くの多くの言語に精通している他、
Movable Type、WordPressなど各種CMS、React.js、Angularなどフロントエンドフレームワークも扱える。
最近はUnityによる3Dコンテンツにも手を出している。
---
### 【JavaScript】真・オブジェクトのディープコピー
URL: https://highmoon-miyabi.net/blog/2020/02/03_000569.html
公開日時: 2020-02-03T14:06:20+09:00
更新日時: 2020-11-13T11:57:39+09:00
カテゴリ: JavaScript
概要: あけおめことよろ。 ご無沙汰でした。 死...
本文: あけおめことよろ。
ご無沙汰でした。
死んでません。生きてました。
ただ、新しいネタがあっても、書く気力と時間がなかっただけです。
さて、さっそく表記の件行ってみよう。
参照型言語である、JavaScriptにおいては、このディープコピーっていうのはたいそう難しい。
一番簡単なのは、JSON文字列に変換後に、再度オブジェクト化する方法だが、
他にも、再帰的にプロパティを潜っていき、新しくオブジェクトを作成し、再度新しい値の参照として同名プロパティを定義していく、という下記の方法がある。
```javascript
function deepCopy(obj) {
// 配列なら配列、と定義した方が手っ取り早い。
const r = Array.isArray(obj) ? [] : {};
// Object.keys(obj).forEachとかでもよし。ただし、entriesは、IEでは使えないので注意
for (let key in obj) {
// プロパティがオブジェクトなら、再帰的に自身を実行して潜っていく、値なら、そのまま代入
r[key] = typeof obj[key] === 'object' ? deepCopy(obj[key]) : obj[key];
}
return r;
}
```
だが、この方法、最大の欠点があり、それが多くのデベロッパーを苦しませた。
上記の方法だと、クラスメソッド（prototypeで定義したメソッド）は引き継がれないのである。
例えば下記のようなものは、オブジェクトとしてディープコピーはされるものの、
参照不可のクラス（プロトタイプ）メソッドは消滅してしまう。
```javascript
// 上記deepCopyメソッドを、定義済みとする
class TestClass {
constructor(hoge, mog) {
this.hoge = hoge;
this.mog = mog;
}
testFunc() {
return this.hoge + this.mog;
}
}
// IE対応するなら、下記になる
/*
const TestClass = function(hoge, mog){
this.hoge = hoge;
this.mog = mog;
};
TestClass.prototype.testFunc = function(){
return this.hoge + this.mog;
};
*/
const testInstanse = new TestClass('ほげ', 'もぐ');
const testCopy = deepCopy(testInstanse);
console.log(testCopy.testFunc()); // Uncaught TypeError: testCopy.testFunc is not a function
```
これは、prototype構文を使ったとしても同様で、
（JSのクラスはprototypeの糖衣だからね）prototypeメソッドは、引き継げない。
おそらくオブジェクトのプロトタイプ汚染をなるたけ防ぐためと思われる。
だが、けっこうな場合は、インスタンスのコピーという形で、メソッドは実行したい、とはなるだろう。
実は、__proto__属性を使えば案外さっくり実装できるのだが、いかんせん、__proto__属性は現在非推奨となっている。（Object.prototype.__proto__ - JavaScript | MDN）
メソッドのコピーは泣き寝入りするしかないか・・・？
そんなことはない。
Object.createをうまく使うことによって、汎用的にオブジェクトのディープコピーをすることができるのだ。
（先ほどの関数を少し変えている）
```javascript
function deepCopy(obj) {
const r = (() => {
// 一応、余計な処理をいれないために、プロトタイプ名がObjectか、Arrayだったらそのまま返す
if (obj.constructor.name === 'Array' || obj.constructor.name === 'Object') return Array.isArray(obj) ? [] : {};
// プロトタイプ名が上記以外なら、Object.createをうまく使って、新しくインスタンスを生成して返す
return Object.create(obj.constructor.prototype);
})();
// IEはアロー関数が使えないので、下記のようにするといいだろう。
/*
const r = (function(){
// 中は同じ処理
})();
*/
// Object.keys(obj).forEachとかでもよし。ただし、entriesは、IEでは使えないので注意
for (let key in obj) {
// プロパティがオブジェクトなら、再帰的に自身を実行して潜っていく、値なら、そのまま代入
r[key] = typeof obj[key] === 'object' ? deepCopy(obj[key]) : obj[key];
}
return r;
}
```
Object.createメソッドは、第一引数のオブジェクトをプロトタイプとした新しいオブジェクトを返すメソッドだ。
よって、コピー元のオブジェクトのコンストラクターをプロトタイプとすることによって、同じプロトタイプからインスタンスを生成できる、って寸法だ。
あとは、従来の再帰実行を持って、各プロパティに潜って、値を別参照で定義していけばいい。
さぁ、これで、JSでの大規模開発も本格的にできるぜよ。
ではまた。
#### 著者
著者名: みやびプリン
職業: フロントエンドエンジニア
プロフィール: 基本はイラストレイター（自称）だが、
本職は札幌市のフロントエンドエンジニア。
フロントエンドだけではなく、各種プログラミング言語に精通していると自負している。
HTML、CSSはもちろんのこと、JavaScript、TypeScript、PHP、Perl、Python、C#、Kotlin、Swift、Objective-Cなど多くの多くの言語に精通している他、
Movable Type、WordPressなど各種CMS、React.js、Angularなどフロントエンドフレームワークも扱える。
最近はUnityによる3Dコンテンツにも手を出している。
---
### 【MP4】続・MP4動画が再生できない問題を解決
URL: https://highmoon-miyabi.net/blog/2019/12/03_000566.html
公開日時: 2019-12-03T13:53:33+09:00
更新日時: 2020-07-22T01:13:02+09:00
カテゴリ: HTML5,JavaScript,サーバー
概要: だいぶ久々だな。 メチャんこ忙しかった。...
本文: だいぶ久々だな。
メチャんこ忙しかった。今年は、特別多忙モードロングランだったお。
さて、表記の件、以前もやったんよね。
【MP4】macOS・iOS SafariでMP4動画が再生できない問題を解決 / 今日のプリン言 | イラストポートフォリオWebサイト - 月の高いところ
そう、前回で解決したんだけど、
また再生できなくなってたよ。
ちょうど、iOS13 & Catalinaにアップデートしたタイミング。
今回のアップデートは、Web屋にとっては、コロしたくなるような仕様変更ばっかだったから、
その一つが原因だと思われる。
前置きが長いと、離脱されてまうので、結論行こうか。
サーバー設定でした。
```text
<Files *.mp4>
Header set Accept-Ranges none
RequestHeader unset Range
</Files>
```
こいつを全部#でコメントアウトしたら再生できた。
あとは、httpのリクエストを圧縮したリソースにするよう設定してんだが、一部の圧縮済み系ファイルは除外してんだが、一応、mp4も追加しておいた。
```text
SetEnvIfNoCase Request_URI \.(?:gif|jpg|png|webp|ico|mp4)$ no-gzip dont-vary
```つまり、サーバー設定で余計な事すんな、って話なのね、リンゴよ・・・。
この設定に関しては、前回時に、LOLIPOPさんから、アドバイスをもらったものだ。
おそらく、前回時は、これを入れるべきだったのだろうが、
リンゴアプデで、動画に余計な設定すな、ってなったんだろうなと予想する。
そもそも、iOSなりmacOSなり、Safariでvideo要素での動画再生ができないって原因は、いろいろあるが、
（上記前回記事に書いてる）今回も結局サーバー設定だったのね・・・。
どうでもいいけど（いくないけど）、最近、WebのというかSafariの仕様が鬼畜でねーかね？
マジでやめてくれ 泣
#### 著者
著者名: みやびプリン
職業: フロントエンドエンジニア
プロフィール: 基本はイラストレイター（自称）だが、
本職は札幌市のフロントエンドエンジニア。
フロントエンドだけではなく、各種プログラミング言語に精通していると自負している。
HTML、CSSはもちろんのこと、JavaScript、TypeScript、PHP、Perl、Python、C#、Kotlin、Swift、Objective-Cなど多くの多くの言語に精通している他、
Movable Type、WordPressなど各種CMS、React.js、Angularなどフロントエンドフレームワークも扱える。
最近はUnityによる3Dコンテンツにも手を出している。
---
### 微妙に怖い話
URL: https://highmoon-miyabi.net/blog/2019/08/12_000564.html
公開日時: 2019-08-12T13:50:31+09:00
更新日時: 2019-08-12T21:54:20+09:00
カテゴリ: 雑記
概要: だいぶ忙しい日続いて全然更新できなかった...
本文: だいぶ忙しい日続いて全然更新できなかったわい。
そんななかでも、とりあえず、長期休暇入れたので、実家でのんびりしてます。
だいぶ涼しくなりましたね。
天気悪いけど。
ってわけで、夏なんで微妙に怖い話をしようと思う。
（暑くないのに迷惑）
俺が体験した、実話の怖い話。
小学校に入る前なので、26年ほど前の話だ。
当時は、母方のおばぁちゃん家が近く、よく家族で泊まりに行っていたのだが、
祖母の家は、二階建ての、当時から少し古めの一戸建てだった。
小さかった自分にとっては、自分の家以外の家に行くのはわくわくするもので、そこまで広い家でないにかかわらず、歩き回っていた。
その中で、二階の一室で、普段、祖父母の寝室として使っている部屋があった。
その部屋は、15畳程度の縦長、縦長の両端に窓があり、衣裳部屋みたいな雰囲気で、タンスやら棚やらが少々置いてあった。
その部屋の窓際に、棚があり、二体の、二頭身の双子の女の子の人形があった。
人形は、浅黒い肌色のソフビ製で、アジアンテイストな感じのかっこうをしていた。
確か、祖母に、どういった経緯でこの人形がここにあるかを聞いたと思うがその内容は覚えていない。
俺はとかく、その人形が少々不気味であった。
夜になり、俺と、両親はその例の部屋で、寝ることになった。
部屋の間取りと、寝ていた位置などはこんな感じ。
俺は、普通に寝ていたのだが、何時かわからないが、ぼんやりと目が覚めた。
再び寝ようとしていたのだが、ふと、足が向いている方の窓際に目線がいった。目線の先では、信じられない光景があった。
窓際にある棚の中の、双子の人形が、何かごそごそ動いているのである。
何かこそこそ話しているような動きだ。そして、その目は淡く光っているのだ。
その時点で、かなりの怖くなっていた俺だが、妙にそこから目を離せなかった。
しばらく話している様子の双子の人形だったが、
さらに驚くべき行動をしだした。
なんと、棚から、飛び降りたのだ。
床に着地した双子はあたりを見回し、そして、その光る眼で俺のことを凝視してきたのだ。
『バレた！』
俺は恐怖が限界点に達し、布団を頭から被り、お経のようなものを心で唱え続けながら、必死に寝ようとした。
その甲斐あってか、眠りにつくことができ、その後何事もなく朝を迎えた。
次の日のことは、そこまで鮮明に覚えているわけではないが、家族に必死になって、人形が動いた事を、それが夢ではなかったことを、必死に訴えていたことだけは覚えている。
後に家族に聞くと、俺が、狂ったんじゃないかという勢いで騒いでいたらしい。
その双子の人形はというと、何事もなかったように、元の位置に佇んでいた。
祖母や家族に聞いても、人形が別の位置に移動していたなどのことはなかったようだ。
当時は5歳児ではあったが、それが夢か、現実かくらいの判別はできており、多少なりけり、理屈的な部分も理解できていたが、（父からは、窓から入った車の光を見間違えたのでは？との意見が出ていた）それでも、あの光景は、人形が動いている、目が淡く光っていたとしか見えなかった。
大人になって、様々なことで一見怖い出来事も勘違いだったり、「正体見たり枯れお花」ということが理解できるようになった今でも、あれはなんだったのかわからないし、現実だったとしか思えない。
それ以来、未だに、古めの人形全般がとかく苦手である。
（特に日本人形はダメ）
実家の俺がいつも使っている寝室で、頭身が高いフランス人形が佇んでいるのだが、
俺が帰った時は必ず、別の部屋にずらしている。
そして、その例の双子の人形は、今も祖母の家にいるのだ・・・。
別にこの事があったからといって、呪われているとかそういうのではないが、とにかく、俺が体験した怖い話だ。
まったく脚色はしていない。
（オチがないから信憑性あるしょ？）
他にも、怖い体験は一つだけあるが（少っ）、それはまた別の機会に。
ではまた。
#### 著者
著者名: みやびプリン
職業: フロントエンドエンジニア
プロフィール: 基本はイラストレイター（自称）だが、
本職は札幌市のフロントエンドエンジニア。
フロントエンドだけではなく、各種プログラミング言語に精通していると自負している。
HTML、CSSはもちろんのこと、JavaScript、TypeScript、PHP、Perl、Python、C#、Kotlin、Swift、Objective-Cなど多くの多くの言語に精通している他、
Movable Type、WordPressなど各種CMS、React.js、Angularなどフロントエンドフレームワークも扱える。
最近はUnityによる3Dコンテンツにも手を出している。
---
### 【MAMP】ヴァーチャルホストを立てる時の注意点
URL: https://highmoon-miyabi.net/blog/2019/05/26_000563.html
公開日時: 2019-05-26T18:17:07+09:00
更新日時: 2019-08-14T20:18:19+09:00
カテゴリ: サーバー
概要: 休みも寝まくってるみやびです。 （時間モ...
本文: 休みも寝まくってるみやびです。
（時間モッタイネー）
さて、表記の件だが、
ヴァーチャルホスト立てること自体はそんなに難しい話じゃない。
方法載せてる記事は、いっぱいあるだよ。
MAMPを使って複数バーチャルホストのローカル環境を設定する - Qiita
みたいにすぐ参考記事がでてくる。
だが、たいていはね、その通りにやっても、
クソもうまくいかねーんだよ（激おこ）そう、たいていの記事では、ある記述が足りない。
というか、そのことに言及している記事が皆無なのだ。
実際には、httpd-vhosts.confにて下記の記述が必要になる。
```text
Listen 80
```
ようは、どのローカルポートを使うか、の記述だ。
これがなければ、他のvhostsの設定が有効にならない。
これは、同ファイルの
```text
NameVirtualHost *:80
```
の記述の前に記述するといいだろう。
これで、記事に書いてることも行えば、ヴァーチャルホストが利用できるようになる。
ほんとさ、記事書くのはいいんだけどさ、
足りねーのはやめろよ！
初心者でもわかる、動く記事をどうか！！！！
#### 著者
著者名: みやびプリン
職業: フロントエンドエンジニア
プロフィール: 基本はイラストレイター（自称）だが、
本職は札幌市のフロントエンドエンジニア。
フロントエンドだけではなく、各種プログラミング言語に精通していると自負している。
HTML、CSSはもちろんのこと、JavaScript、TypeScript、PHP、Perl、Python、C#、Kotlin、Swift、Objective-Cなど多くの多くの言語に精通している他、
Movable Type、WordPressなど各種CMS、React.js、Angularなどフロントエンドフレームワークも扱える。
最近はUnityによる3Dコンテンツにも手を出している。
---
### 【Angular】コンポーネント間共通定数を定義
URL: https://highmoon-miyabi.net/blog/2019/04/11_000562.html
公開日時: 2019-04-11T16:31:57+09:00
更新日時: 2020-11-13T11:58:52+09:00
カテゴリ: Angular,JavaScript
概要: Angularにて、コンポーネント間で共通定数を持つ方法を解説。ただし、新しく書いた記事の方がいい。
本文: Angularどっぷり浸かってますが、
これはむずい。
非常にむずい。
何がむずいって、ピンポイントな情報がほんとに見つからない！！！
（なに、それくらい自分で考えて書けって？）
もう、なんだ、Swiftの方がまだ情報でてくるぞ！？
そこーまで新しいってわけじゃないのに、これ！
さて、愚痴はここまでにしておいて、表記の件・・・。
これ自体はなんのこたなく、すぐ方法見つかるんだが、prodオプションでのビルドや、
Angular-CLIを使用した上で、htmlテンプレート内で使用する時に、くっそエラー出まくったので、みやびがうまくいった方法をエントリーに起こしておく・・・。
※まず、Angular-CLIを使って、制作を進めていることを前提で話を進めますのでご了承ください。
（使ってないと、ディレクトリ構成や、ファイル名変わる。）
まずは、スタティックなクラスで定数を定義したファイルを用意し、
Angularのアプリケーション領域内に置く。
appディレクトリ内が一番適切だろう。
（ぶっちゃけどこでもいい）
```javascript
export class AppConst {
static readonly PAGE_CHARSET: string = 'utf-8';
static readonly AUTHOR: string = 'みやびプリン';
static readonly COPYRIGHT: string = 'Highmoon CO., LTD.';
static readonly PAGE_TITLE: string = '月の高いところ';
static readonly APP_TITLE: string = 'イラストサイト';
}
```
んで、コンポーネントの制御ファイルではこうする。
コンポーネント名は、sitetopとする
```javascript
import { Component, OnInit } from '@angular/core';
// 定数ファイルをクラス名でインポート
import { AppConst } from 'app-const.tsがあるディレクトリまでの相対パス/app-const';
@Component({
selector: 'app-sitetop',
templateUrl: './sitetop.component.html',
styleUrls: [
'./sitetop.component.scss'
]
})
export class SitetopComponent implements OnInit {
// 変数を定義（テンプレート内で使うために定義の必要がある）
AppConst: AppConst;
constructor() {
// クラスの変数を定義（テンプレート内で使うために定義の必要がある）
this.AppConst = AppConst;
}
ngOnInit() {
}
}
```
んで、コンポーネントテンプレートのhtmlではこう書く。
```html
{{AppConst.AUTHOR}}
```
コンポーネントでは"みやびプリン"と出たはずである。
よっしゃー、これでうまく行ったね！！！と思ったか？
そう、これ、開発環境（ng serve実行時）や、prodオプションでないビルドではうまくいくのだが、prodオプションをつけて、製品版をビルドするときに、おもっくそエラーが起きる。
それもそのはず、そもそもスタティッククラスなのに、変数に代入し直してる時点でおかしいんだよ。
（というかそうしないとテンプレート内で使えないってどういうことよ）
そして、なぜprodオプションつけなければ通るのかは謎だが、
本来Angularでは、htmlテンプレート上では、"staticなクラス"のプロパティは使用できないのだ。
（エラーの内容細かく覚えてないけど、そんな感じで出てた）
じゃぁ、どうするかというと、一工夫必要なのだ 泣
ちなみに、調べても、上の変数に格納しないとHTMLテンプレートで使えないって情報さえ、出てこなかったぜ。全部エラー文と格闘して見つけたよ・・・。
まず、定数定義ファイルを修正する。
```javascript
export class AppConst {
static readonly PAGE_CHARSET: string = 'utf-8';
static readonly AUTHOR: string = 'みやびプリン';
static readonly COPYRIGHT: string = 'Highmoon CO., LTD.';
static readonly PAGE_TITLE: string = '月の高いところ';
static readonly APP_TITLE: string = 'イラストサイト';
// スタティックな自身を返すクラスメソッドを追加
public main(){
const obj = AppConst;
return obj;
}
}
```
なんとまぁ、アホくさい話だが、定数クラスに、staticな自身を返すメソッドを追加する。
して、コンポーネント制御ファイルは次のように修正する。
```javascript
import { Component, OnInit } from '@angular/core';
// 定数ファイルをクラス名でインポート
import { AppConst } from 'app-const.tsがあるディレクトリまでの相対パス/app-const';
@Component({
selector: 'app-sitetop',
templateUrl: './sitetop.component.html',
styleUrls: [
'./sitetop.component.scss'
]
})
export class SitetopComponent implements OnInit {
// AppClass型変数を定義
AppConstClass: AppConst;
// 最終的に使用する型なしの変数定義
AppConst;
constructor() {
// AppConstのインスタンスを代入
this.AppConstClass = new AppConst;
// インスタンスのメソッドを実行し、staticなクラスを代入
this.AppConst = this.AppConstClass.main();
}
ngOnInit() {
}
}
```
これで、prodオプションでも通るようになったはずだ。
いや、しかし、なんていうかその、難し上に、情報全然ないし、
本買うしかないかなーと思ってる・・・。
アプリだよね、完全に。
そして、アプリ系の技術記事にありがちな、イラっとくる事実だが、
とにかく、検証足らずが多い。
まともにしっかり最後まで動くようなものにしてから、記事を書いてもらいたい。
俺も頑張るから！！！！
あと、Googleさん、検索アルゴリズムの改善を早ぅ！
ってわけでてんやわんやアピールエントリーでした。
#### 著者
著者名: みやびプリン
職業: フロントエンドエンジニア
プロフィール: 基本はイラストレイター（自称）だが、
本職は札幌市のフロントエンドエンジニア。
フロントエンドだけではなく、各種プログラミング言語に精通していると自負している。
HTML、CSSはもちろんのこと、JavaScript、TypeScript、PHP、Perl、Python、C#、Kotlin、Swift、Objective-Cなど多くの多くの言語に精通している他、
Movable Type、WordPressなど各種CMS、React.js、Angularなどフロントエンドフレームワークも扱える。
最近はUnityによる3Dコンテンツにも手を出している。
---
### 【Angular】子プロジェクトにコンポーネントを追加する
URL: https://highmoon-miyabi.net/blog/2019/04/08_000561.html
公開日時: 2019-04-08T11:50:00+09:00
更新日時: 2020-07-22T01:13:46+09:00
カテゴリ: Angular,JavaScript
概要: どうも。久々の投稿やな。 ちょっと昨日ま...
本文: どうも。久々の投稿やな。
ちょっと昨日までかなり忙しかったでな。
あと、トップページだけなぜかインデックス外されてしまって、てんやわんやよ。
んで、最近、Angularをいろいろやっているんだけど。
こいつは難しいね。JSだからなんとかなんべ思ってたら、
これ普通にアプリケーション制作やんけ
ってなったよ。
タイプスクリプトも、JSの糖衣言語のくせして、完全にオブジェクト指向だし。
んでもって、表記のやつも、できそうなのに、まともにピンポイントに記事でてこないし。
いや、それはGo◯gle検索様が最近クソ品質だから悪いんだよ。
（↑そんなこと言ってるからトップページインデックスガイされんだよ）
さて愚痴はここまでにしといて、表記の件。
まずはマルチプロジェクト化。これはすぐできる。
（Angular自体やAngular-CLIとかの導入はもうできていて、準備が完了している体で話を進めます）
コマンドプロンプト（Windows）やターミナル（Mac）ないし、コマンドを実行するアプリケーションにて、
Angularを入れたいディレクトリの上のディレクトリに移動し、下記コマンドを実行する。
```text
ng new プロジェクト名（ディレクトリ名）
```
あと、スタイルシートを、scssとか、sassにしたい場合は下記のように実行すす。
（コレ最初にやっとかないと、修正が非常に困難になる）
```text
ng new プロジェクト名（ディレクトリ名） --style=scssかsass
```
んで、新規プロジェクトが生成されたら、その作ったプロジェクトに、コマンド上で移動し、
下記でマルチプロジェクト化ができる。
```text
ng g application プロジェクト名（ディレクトリ名） --style=scssかsass
```
上記のように、こちらもスタイルシートを変えたい場合は、後半のオプションを必ず指定すること。さて、こっからだ。
この子プロジェクトに対してコンポーネントを追加する方法だが、
いっくら調べても出てこない。
親プロジェクトに追加するのは、下記のように通常通りだ。
```text
ng g component コンポーネント名（ディレクトリ名）
```
子プロジェクトに紐づけて追加する方法は本当に出てこない。
だが、答えは、オプションにあった。
このng gコマンドには様々なオプションをつけることができる。
--project=プロジェクト名
とすれば、指定したプロジェクトに対して、各種、生成を実行することができるのだ。
上記でスタイルシートの形式を指定したのと同様にすればいい。
```text
ng g component コンポーネント名（ディレクトリ名） --project=子プロジェクト名
```
こうすれば、子プロジェクトに紐づいたコンポーネントが生成される。
他生成コマンドの、serviceなどの各種生成系コマンドも同様にオプションで、
子プロジェクトに紐づけ以外にも様々なオプションが設定できる。
（オプションに関しては、再度検索したら、見当たらなかったので割愛・・・）
もうね、なんだろう、確かに、Angularは新しい技術かもしれないけどさ、
それにしてもGo◯gleよ、検索の質悪すぎないか？最近。
ってわけで、文句たらたらなエントリーなのであった。
#### 著者
著者名: みやびプリン
職業: フロントエンドエンジニア
プロフィール: 基本はイラストレイター（自称）だが、
本職は札幌市のフロントエンドエンジニア。
フロントエンドだけではなく、各種プログラミング言語に精通していると自負している。
HTML、CSSはもちろんのこと、JavaScript、TypeScript、PHP、Perl、Python、C#、Kotlin、Swift、Objective-Cなど多くの多くの言語に精通している他、
Movable Type、WordPressなど各種CMS、React.js、Angularなどフロントエンドフレームワークも扱える。
最近はUnityによる3Dコンテンツにも手を出している。
---
### 【MP4】SafariでMP4動画が再生できない問題を解決
URL: https://highmoon-miyabi.net/blog/2019/03/17_000550.html
公開日時: 2019-03-17T13:29:59+09:00
更新日時: 2020-11-13T12:00:05+09:00
カテゴリ: HTML5,JavaScript,サーバー,リダイレクト
概要: macOSならびにiOSのSafariで、MP4動画が再生できない時の解決方法についての記事です。ただし、ぶっちゃけ、よくわからない。
本文: うーん、どうにも釈然としないんだけど、とりあえず解決したので記事に書いてみた。
なんか少し前のアップデートあたりから、再生できなくなったんだけど、解決できたんでね・・・。
今回は、macOS、iOSのSafariにおいての、サーバー上での動画再生の話。
調べてみてもらえればわかると思うが、
様々な理由が考えられるため、けっこう多くの記事が散見される。
修正が、比較的簡単なものから順にやっていこう。
（当サイトでの解決できた方法は一番最後）
1.JavaScriptないし、属性によっての自動再生をしている時
これはすぐ解決できる。
Safariはユーザビリティの観点から、
Web上で、いきなり音声が再生されることに対して、
制限を設けている。
そのため、video要素の、autoplay属性、jsコントロールによる、playメソッドでの自動再生は、
音声がない動画ないし、mute設定（属性にmuteをつけている、もしくはjsにおいての音声ミュート処理）している動画に限り有効となっている。
macOSのSafariは最近制限が緩和されているようだが、
iOSにおいては、いまだに制限解除はされていない。
これは、audio要素においても同様の処置がされている。
それもそのはず、Webページ見るのって、会社で暇つぶしとかに見る時多いからね。
いきなり音鳴ったら、いろいろ迷惑になるしね。そういう観点だろうおそらく。
（特に、Webページの場合、ちゃんと制御しないと、マナーモード中でも音声が鳴ってしまう）
まぁ、これに関しては、
自動再生を妥協すれば、すぐ解決できるし、
動画ファイルの読み込み自体を制限してるわけじゃないから、
どうとでもなるわけだ。
問題は次以降の問題・・・。
2.ブラウザのリクエストに対して、サーバー側が合わないレスポンスを返している
これよ、これ、もうHTMLとか、JSといった、フロント側では解決できない部分。
Safariは、動画などの重い容量のファイルには、「少しずつ容量小分けして、レスポンス返せよ！」
とリクエストするらしい。
Safariで動画を表示する際、サーバーのHTTP Range Request対応が必須になっている - Qiita
上記エントリーを参考に、要素検証などをして、やってみたが、確かに
```text
Range: bytes=0-1
```
というリクエストが入っていた。
この部分ずつで、容量小分けでレスポンスを返すことに対応していないサーバーとかだと、
Safariでは動画が再生できないのだ。おいたわしや。
だが、当サイトにおいては、これに対してPHPをかませて、レスポンスヘッダを調整したりなどをしてみたが、いっこうに再生できなかった・・・。
だいたいにおいて、天下のロリポップ様が、小分けレスポンスに対応してないわけがない。3.QuickTime（Safariの動画プラグイン）からのアクセスを制限している
そう、当サイトでの解決の糸口はここにあった。
もう、サーバー側でしか原因わからんと、ロリポップに問い合わせたところ、
どうやら、こちらで設定している、.htaccess上で、QuickTimeからのアクセスを制限している可能性がある記述がある、
と返事がきた。
値千金の情報だったよ、ありがとうロリポップ！
それまで、もう何が原因かわからなかったからね。
どこが原因か可能性が高い箇所さえわかればこっちのもんだ。
下記の箇所だと、教えてもらったので、コメントアウトしてみた。
```text
#SetEnvIf Referer "^(.*)compliance-(.*)\.xyz" ref_ng
#SetEnvIf Referer "^(.*)test(.*)" ref_ng
#order allow,deny
#allow from all
#deny from env=ref_ng
#<Files ~ "^(.*)compliance-(.*)\.xyz$">
# Deny from all
#</Files>
```
・・・再生できた！
上記制御に関して、.xyzやcomplianceなど、一時期、不正アクセスが相次ぎ起こった時に、
そのアクセスを制限するために入れたものである。
確か、前回のアメリカの大統領選挙の時にやたら世界中で流行った不正アクセスだった気が。
おそらく、xyzで引っかかってたのかなと思う。
だから、もう解除しても大丈夫かな、とは思う。
以上、Safariで動画が再生できない可能性がある時の対応でした。
ちなみに、.htaccessは、キャッシュがかなり強く、下手したら、キャッシュクリアでもうまく更新されないことがあるので注意してください。
今回の、macOS、iOSのSafariにおいて、MP4動画が再生できない問題は、
以上の、どれかをやれば、だいたいは問題解決できると思う。
今回、僕が行った修正工程では、この順番だったが、
本来なら、1、3、2の順で検証を行うといいと思います。
どう考えても、サーバーが最終的に考えられる原因だからね。
僕がこういう順番になったのは、あれだ、すぐ人のせいにするからだよw
では、また。
#### 著者
著者名: みやびプリン
職業: フロントエンドエンジニア
プロフィール: 基本はイラストレイター（自称）だが、
本職は札幌市のフロントエンドエンジニア。
フロントエンドだけではなく、各種プログラミング言語に精通していると自負している。
HTML、CSSはもちろんのこと、JavaScript、TypeScript、PHP、Perl、Python、C#、Kotlin、Swift、Objective-Cなど多くの多くの言語に精通している他、
Movable Type、WordPressなど各種CMS、React.js、Angularなどフロントエンドフレームワークも扱える。
最近はUnityによる3Dコンテンツにも手を出している。
---
### 【Movable Type】undefined valueエラーに関して
URL: https://highmoon-miyabi.net/blog/2019/02/27_000517.html
公開日時: 2019-02-27T09:45:58+09:00
更新日時: 2019-03-12T15:07:18+09:00
カテゴリ: Movable Type
概要: どうも、まぁまぁ給料貰っておきながら、ネ...
本文: どうも、まぁまぁ給料貰っておきながら、ネトゲでやばくなってるみやびです。
もう、無駄遣いしすぎ問題。
さて、表記の件なんだけど、ひょんなことでMovable Type（以下MT）をアップデートしたら、ある子ブログのインデックステンプレートの再構築で、
"Can't call method "entry_based" on an undefined value"
ってエラーが出るようになった。
今まで出なかったのに、なんぞこれ？って調べたが、さすがMT、全然情報出てこないのね。
（MT7から、ちょいちょいUI英語になったから余計に）
その中でなんとかエントリーを見つけ出した。
・【Movable Type】アップグレード時に発生したエラーとその解決
どうやら、
```html
<MTCategories>
```
がダメらしい。
ほんとかよ、と思いつつ、書かれてる通りにやってみるも、案の定変わらず・・・。
と、もっと調べてみると、別のエントリーでは、
```html
<$mt:ArchiveTitle$>
```
が原因だよ！
と出てきた。
「・・・・・・」
てきとうかよ！！！！！！！！！そうこのエラー、惑わされてはいけない。
とにかくMT上で値が拾えなかった時に出るエラー
なのだ。
確かに、エラー文をよく見れば、そう書いてるとも見えなくない。
"entry_based"に惑わされず、"undefined value"を見るべきだった。
まぁ、正しい記事が見つからないのもしょうがない。
このMovable TypeというCMS、再構築時のエラーで、どこでどの行がとか詳しく出てこない。
エラーには死ぬほど不親切なのだ。
当サイトでのエラーは、探しに探して、やっと見つけたのは、
```html
<MTSetVarBlock name="hoge"><$mt:BlogID$></MTSetVarBlock>
```
であった。
ブログIDがないとか言ってるのだ。
んなわけあるかい！って思いましたが、下記に修正。
```html
<$MTSetVar name="hoge" value="$mt:BlogID"$>
```
ようやっと再構築できた・・・。
ということで、このエラーが出たら、
テンプレート内、インクルードしているテンプレートなど洗いざらい探すしかない。
コツはというと、洗いざらい一箇所ずつ消して、再構築して、の繰り返ししかない・・・。
（コーディングのエラー探しと同じやり方ね）
もうね、MTさんよ、
ほんとエラーに対して親切になれ！ファイルと行数とか出せよ！！！
他のトラブルもあって、寝たの4時過ぎだよ！
（↑それはおまえが悪い）
他のトラブルってのも、MT上の話なので、それはまた別のエントリーで。
眠いわ。
#### 著者
著者名: みやびプリン
職業: フロントエンドエンジニア
プロフィール: 基本はイラストレイター（自称）だが、
本職は札幌市のフロントエンドエンジニア。
フロントエンドだけではなく、各種プログラミング言語に精通していると自負している。
HTML、CSSはもちろんのこと、JavaScript、TypeScript、PHP、Perl、Python、C#、Kotlin、Swift、Objective-Cなど多くの多くの言語に精通している他、
Movable Type、WordPressなど各種CMS、React.js、Angularなどフロントエンドフレームワークも扱える。
最近はUnityによる3Dコンテンツにも手を出している。
---
### 【ロリポップ！】HTMLをPHPとして動かす（モジュール版）
URL: https://highmoon-miyabi.net/blog/2019/02/01_000516.html
公開日時: 2019-02-01T17:27:42+09:00
更新日時: 2020-11-13T12:05:08+09:00
カテゴリ: HTML5,PHP,サーバー,リダイレクト
概要: LOLIPOPにて、モジュール版PHPにおいても、HTMLをPHPとして動作させるための、.htaccessの設定について解説しています。でも、今の時代俺以外それやっているやついるのかw
本文: どうも、正直、ヒマなみやびです。
（殺される）
さて、表記の件。
前提として、当サイト、サーバープランをあげたのと、
PHPのバージョンを、7.1モジュール版としました。
体感的に速くなった気がする。して、PageSpeed Insightsにおいても、
サーバー応答時間が大幅に短縮されたのが確認できた。
だが、一つ問題として、
表記の件の動作がならなくなった。
レンタルサーバーにおいてHTMLをPHPスクリプトとして実行するには、
.htaccessに、記述を加えるのだが、レンタルサーバーによって、記述の仕方が異なる。
ロリポップの場合は下記となる。
```text
AddHandler php○-script .html
```
○のところには、サーバー側で設定している、PHPのバージョン番号を入れる
だがこれ、CGI版に限ったやり方なのだ。
モジュール版では動かない。
そう、だいたいにおいて、-scriptって入ってるもね。そらCGIっぽいよな。
モジュール版では、多くのサーバーと同じ下記のような書き方で記述すればいい。
```text
AddType application/x-httpd-php .html
```
これで、モジュール版でも、HTMLをPHPとして実行できる。
表示されなくなった時は、めっさ焦ったが、
すぐ解決してよかった・・・。
#### 著者
著者名: みやびプリン
職業: フロントエンドエンジニア
プロフィール: 基本はイラストレイター（自称）だが、
本職は札幌市のフロントエンドエンジニア。
フロントエンドだけではなく、各種プログラミング言語に精通していると自負している。
HTML、CSSはもちろんのこと、JavaScript、TypeScript、PHP、Perl、Python、C#、Kotlin、Swift、Objective-Cなど多くの多くの言語に精通している他、
Movable Type、WordPressなど各種CMS、React.js、Angularなどフロントエンドフレームワークも扱える。
最近はUnityによる3Dコンテンツにも手を出している。
---
### 【JavaScript】再定義不可のグローバル変数（定数）を定義
URL: https://highmoon-miyabi.net/blog/2019/01/21_000515.html
公開日時: 2019-01-21T09:38:51+09:00
更新日時: 2020-07-22T01:14:42+09:00
カテゴリ: JavaScript,jQuery
概要: どうも、朝からベビースターラーメンをほお...
本文: どうも、朝からベビースターラーメンをほおばるみやびです。
（メシを食え）
さて、表記の件、実は、けっこう難しくて、長年頭を悩ませていたが、ついに方法を見つけたので、記事に起こしてみた。
例えば、中規模以上のライブラリ、Webアプリケーションを作ったりするときは、だいたいは下記のように、無名関数のスコープ内ないし、名前空間を利用するだろう。（スクリプト汚染を防ぐため）
```javascript
(function(){
// 生のJS
})();
$(function(){
// jQueryだとこれとか
});
(function($){
$.fn.hoge = function(){
// jQueryプラグイン内容を定義
};
})(jQuery);
```
JavaScriptの性質上、基本一つのファイルで完結することが望ましいが、（他の言語よりスパゲティコードになりやすい）
中～大規模の開発の場合、どうしてもファイル分けをして、これらのスコープ内かつ、グローバル変数を定義したいときがある。
そういう時の技として、下記がある。
```javascript
(function(){
window.hoge = 'aaaaa';
})();
```
windowオブジェクトに関しては、Webブラウザ上で動くJS限定ではあるが、他のプラットホームでも同様のものがあるはず。
とかく、WebブラウザJSに関しては、ルートで変数を定義した場合、全て関数も含め、windowのプロパティ（ざっくり異訳すると子要素）となるため、それを利用して、windowオブジェクトのプロパティとして、変数や関数を定義することによって、グローバルを定義できるのだ。
だが、このやり方だと、
再代入はできるわ、ぶっ壊すこともできるわで、あまり、スコープから定義した意味がなくなってしまう。
だが、constで変数を定義しようとしてもスコープ内の変数となってしまう。
どうすれば、スコープ内からグローバル変数を、定数っぽく、constで定義したような変数にすることができるのか。
Object.freeze()使えばいんじゃね？と思うかもしれないが、
これは実は、あくまでプロパティの凍結を行うだけで、
変数自体の再代入は可能なのだ。
```javascript
(function(){
window.hoge = {};
hoge.mogu = 'ak47';
Object.freeze(hoge);
hoge = 25;
console.log(hoge); // 出力：25
})();
```しかし、class構文は、まだ使えるブラウザもそう多くない。
じゃぁ、どうするか。
便利な関数があるんですよ。お兄さん。
```javascript
(function(){
Object.defineProperty(window, 'hoge', {writable: false, value: 'akb48'});
})();
```
この、defineProperty、要は、オブジェクトの定数的なプロパティを生成する関数。
もちろん値だけでなく、関数だって定義できる。（さすがゆるガバスクリプト言語）
```javascript
(function(){
Object.defineProperty(window, 'mogu', {writable: false, value: function(){
// 処理内容
}});
})();
```
この、defineProperty、constとほぼ同じ挙動をし、
再代入はできないが、プロパティはいくらでも変更可能というもの。
（というか、const出る前に使われていた関数かもしれない）
プロパティも凍結したかったら、freezeとか、sealを使えばいい。（試してないけど多分イケる）
いやー、オブジェクト指向っぽくなんかかっこいいやり方ないか、探しに探してましたが、まさかこんな方法があったとはね。
でも、class構文がどのブラウザでもできるようになれば、こんないらん苦労しなくていいんだけどね 汗
どうにも、ここら辺の制約緩くてかなわんわ、JSは。
さて今回は、JSの変数に関して熱く語ってきましたが、特にSPAやるときなんかはけっこう使えるテクニックなんじゃないかな、と思います。
また、昨今のJS事情として、Web以外でもけっこう広く使われている傾向にあるので、JS自体もけっこう注目されてるんかなーとか個人的に思っており、これからも勉強していこうと思ってます。
ではまた。
#### 著者
著者名: みやびプリン
職業: フロントエンドエンジニア
プロフィール: 基本はイラストレイター（自称）だが、
本職は札幌市のフロントエンドエンジニア。
フロントエンドだけではなく、各種プログラミング言語に精通していると自負している。
HTML、CSSはもちろんのこと、JavaScript、TypeScript、PHP、Perl、Python、C#、Kotlin、Swift、Objective-Cなど多くの多くの言語に精通している他、
Movable Type、WordPressなど各種CMS、React.js、Angularなどフロントエンドフレームワークも扱える。
最近はUnityによる3Dコンテンツにも手を出している。
---
### 【SEO】PSI対策No.2 - 画像の読み込み遅延
URL: https://highmoon-miyabi.net/blog/2018/12/21_000513.html
公開日時: 2018-12-21T10:03:44+09:00
更新日時: 2020-07-22T01:18:36+09:00
カテゴリ: HTML5,JavaScript,SEO
概要: 今年も元気にクリぼっちのみやびです。 も...
本文: 今年も元気にクリぼっちのみやびです。
もう、マジで来年こそ相手見つけないとやばい。
さて、表記の件、前回の続きだ。
PageSpeed Insights（以下PSI）は、スクリーンの外の画像は読み込む必要ないんだから、読み込まないようにしてね〜と警告してくる。
確かにごもっともな意見だが、
これさ、無理じゃね？
うん無理だよ。
普通に。
現に、諦めてる人が大半だろう。
だって、HTMLにimg要素記述している限り、無理でしょう、ほんとに。
勝手に読み込みしちゃうもん。
というわけで、なんとか遅延読み込みを作ってみたってのが、今回の記事。
ちなみに、画像遅延読み込みで有名なスクリプトライブラリは、
jQuery Lazy Load
だ。
導入も簡単だし。
ただ、実は、PSIの要求を満たすものになっていない。
スピードが若干足りないのだ。
というのも、jQueryを使用していることで、jQuery読み込み後でないと、動かないので、
その間に読み込みが開始された画像に関しては、警告を受けてしまう。
そこらへんをクリアするには、どうしても、ネイティブJSを使う必要がある。
実は以前、画像遅延読み込みスクリプトを作ったことがある。
【jQuery】画像読み込み遅延プラグイン
Lazy Load導入がどうしてもうまくいかず、仕方なく自作したもの。
だが、jQueryを使用している以上、どうしても限界があった。
そこで、ネイティブを使用し、改良を加え、完全に、画像読み込み前に読み込みをシャットアウトするスクリプトを作ることができた。置き場所はここ
（zipファイルがダウンロードされるはず）
使用方法は、headに、スクリプトを読み込むだけだ。
```html
<html>
<head>
<script sec="/common/js/simagesloading.min.js"></script>
</head>
<body>
<img src="images/hoge.png">
</body>
</html>
```
一応、IE、モバイルデバイスで動作が確認できている。
またpicture要素にも対応している。
ちなみに、同スクリプトは、必ず、head内で読み込むように。
でないと、画像の読み込みが開始してしまう恐れがあるからだ。
よって、前回エントリーの、スクリプトのインライン出力を使わないといけないかもしれない。
以上で、PSI対策に関してのエントリーは終わりだ。
三つの課題をクリアすることで、モバイルの点数もだいぶ安定するかと思う。
どうか、お試しあれ。
本当に、今回のアップデートには閉口したよ。
検索市場はGoogle寡占な感が強くなってきたと思いますが、使用画像にまで制限入れんのはほんとどうなんだろうねそれって。
（のくせブラウザの表示はまだまだ差異があって、コーダー殺しという）
今後どうなることやら。
#### 著者
著者名: みやびプリン
職業: フロントエンドエンジニア
プロフィール: 基本はイラストレイター（自称）だが、
本職は札幌市のフロントエンドエンジニア。
フロントエンドだけではなく、各種プログラミング言語に精通していると自負している。
HTML、CSSはもちろんのこと、JavaScript、TypeScript、PHP、Perl、Python、C#、Kotlin、Swift、Objective-Cなど多くの多くの言語に精通している他、
Movable Type、WordPressなど各種CMS、React.js、Angularなどフロントエンドフレームワークも扱える。
最近はUnityによる3Dコンテンツにも手を出している。
---
### 【SEO】PSI対策No.1 - リソースインライン化・WebP導入
URL: https://highmoon-miyabi.net/blog/2018/12/18_000512.html
公開日時: 2018-12-18T13:10:51+09:00
更新日時: 2020-07-22T01:18:00+09:00
カテゴリ: CSS,HTML5,JavaScript,PHP,SEO
概要: どうも、おひさです。 繁忙期過ぎても忙し...
本文: どうも、おひさです。
繁忙期過ぎても忙しくて、全然更新できなかった・・・。
というか、ドメイン死んでモチベーションが下がったｗ
さて、表記の件だが、
二回に分けて、
特に難しいかつ、重要視される、三つの課題をクリアできる記事にしようと思う。
今回は二つくらいクリアできるかな。
なんでこの書こうかと思ったかというのも、今年の10月あたりから、急にモバイルの基準が厳しくなったのはご存知だと思いますが、
当サイトも、それまで97点とかいってたのに、50点あたりまで下げられてしまい、なんとか、70点以上キープできるようになったのででした。
ほんとねー、余計なことすんなよ、Gよ・・・。
特に、WebPとか使えってったてさ、ほとんどのブラウザで表示できねーじゃねーかよ・・・。
と、愚痴はここまでにして、本題に入ろうか。
厳しくなる前でもあった項目もあるが、
特に難しい対策、敷設は、以下だろうと思う。
・レンダリングを妨げるリソースの除外
・次世代フォーマットでの画像の配信（効率的な画像フォーマットもほぼ併さる）
・オフスクリーン画像の遅延読み込み
今回は、上二つの対策方法をやっていこう。
■レンダリングを妨げるリソースの除外
これに関しては、実は悲しいことに、外部からCSS、JavaScriptを読み込んでいる限り、永遠に警告が消えない。
そんな言っても、インラインにしたら管理ができなくなるじゃん・・・。
ということで、サーバーサイドでインラインに出力しちゃおうというやつである。
実は、一回その記事書いたことあるんだよ。
CSS レンダリング ブロック対策（PHP使用）をする
今回は、それをちょっとだけ使いやすくしたものを公開しようかと。
今回はPHPだが、必要に応じて、PHP以外のサーバーサイド言語に書き換える必要があろう。
下記のPHPスクリプトをどこかに置き、
```php
<?php /* ファイルを読み込み、インライン出力する */
define('SEARVER_SITE_ROOT', 'サーバーのルートパス書いとく');
// ↑は別に、下記で環境変数を使えば別に定義しなくてもいい
function cssOutput( $cssRoot = 'common/css/', $cssFileName = 'common' ) {
$cssFile = file_get_contents(SEARVER_SITE_ROOT . $cssRoot . $cssFileName . '.css');
if ($cssFile) {
$cssFileInner = str_replace("(../images", "(/" . $cssRoot . "images", $cssFile);
$cssLast = '';
$cssArray = explode("¥n", $cssFileInner); // とりあえず行に分割
$cssArray = array_map('trim', $cssArray); // 各行にtrim()をかける
$cssArray = array_filter($cssArray, 'strlen'); // 文字数が0の行を取り除く
$cssArray = array_values($cssArray); // これはキーを連番に振りなおしてるだけ
foreach ($cssArray as $key => $value) {
$cssLast .= $value;
}
// 複数行コメントアウトトル
$cssLast = preg_replace('/¥/¥*([^¥]|¥*[^¥/])*¥*¥//s', '', $cssLast);
return '<style type="text/css">' . $cssLast . '</style>';
}
}
function jsOutput( $filepath, $idText = null ) {
$js_str = file_get_contents( SEARVER_SITE_ROOT . $filepath );
if( $js_str === false ) {
return '';
} else {
return '<script' . ($idText ? ' id="' . $idText . '"' : '') . '>' . $js_str . '</script>';
}
}
```
んで、このPHPを読み込む。
```php
<?php require_once( '/サーバーのルートパス/common/script/view_includ.php' ); ?>
```
実際に使うには、下記のようにする。
```php
<?php // CSSを読み込む
// 第一引数には、cssファイル格納のディレクトリ、第二引数には、ファイル名を入れる
// 上記のようにするのは、画像の相対パスを解決するため
echo cssOutput('common/', 'common'); ?>
<?php // JavaScriptを読み込む
echo jsOutput('common/js/common.js'); ?>
```
これで、ファイル読み込み自体は、サーバーサイドで行われ、HTML上では、インライン出力となるため、
PageSpeed Insights（以下PSI）では文句を言われなくなる。■次世代フォーマットでの画像の配信（効率的な画像フォーマットもほぼ併さる）
この課題をクリアするには、
大きく分けて二つの敷設を行う必要がある。
img要素に新フォーマットの画像を当て込むこと、
そして、CSSのbackground-imageに、新フォーマット画像を当て込むことだ。
img要素の置き換えはそんなに難しくない。
例えば、PNGだった画像にWebPを当て込むには下記のようにする。
```html
<picture>
<source srcset="hoge.webp" type="image/webp">
<img src="hoge.png">
</picture>
```
picture要素を使い、後方互換として、imgを入れ、従来の画像フォーマットを当て込めばいい。
こうしておけば、picture要素に対応しているブラウザはもちろん、
IEでも、pictureを無視し、imgを表示してくれるって寸法だ。
画像フォーマットには、WebPが一番適当だろう。
JPEG 2000、JPEG XRなどもあるが、
その中では普及率が高く、画質もそこまで変わらない。
（むしろ、JPEG 2000は若干重いような気がする）
だが、問題は、background-imageなどで指定する画像だ。
PSIのやつは、ここにまでチャチャをいれてくる。
JSで差し替えるのは意味がない。
Webページが読み込まれた時点で、WebPなりを使用していないと、警告がでるからだ。
そこで、先ほどのインライン出力スクリプトが役に立つ。
CSSファイル本体の方では、webpやjp2を使用したうえで、
先ほどのインライン出力スクリプトを下記のように書き換える
```php
<?php /* ファイルを読み込み、インライン出力する */
define('SEARVER_SITE_ROOT', 'サーバーのルートパス書いとく');
define('INNER_UA', mb_strtolower($_SERVER['HTTP_USER_AGENT']));
define('IPHONE_FLG', (strpos(INNER_UA, 'iphone') !== false || strpos(INNER_UA, 'ipod') !== false));
define('ANDROID_FLG', (strpos(INNER_UA, 'android') !== false && strpos(INNER_UA, 'mobile') !== false));
define('WEBP_FLG', ( (strpos(INNER_UA, 'chrome') !== false && strpos(INNER_UA, 'edge') === false) || strpos(INNER_UA, 'opera') !== false ));
function cssOutput( $cssRoot = 'common/css/', $cssFileName = 'common' ) {
$cssFile = file_get_contents(SEARVER_SITE_ROOT . $cssRoot . $cssFileName . '.css');
if ($cssFile) {
// iPhoneの場合、いずれの場合もWebPは表示できないので差し替え
if (IPHONE_FLG) {
// 元がJPEGと示すため、URLパラメータを使用
$cssFile = str_replace(".webp?jpg", ".jpg", $cssFile);
$cssFile = str_replace(".webp", ".png", $cssFile);
}
// Androidは、jp2に対応していないので差し替え
if (ANDROID_FLG) {
$cssFile = str_replace(".jp2", ".jpg", $cssFile);
}
// PCでは、Google Chrome、Opera以外はWebPに対応してないため、差し替え
if (!WEBP_FLG && (!IPHONE_FLG && !ANDROID_FLG)) {
// 元がJPEGと示すため、URLパラメータを使用
$cssFile = str_replace(".webp?jpg", ".jpg", $cssFile);
$cssFile = str_replace(".webp", ".png", $cssFile);
}
$cssFileInner = str_replace("(../images", "(/" . $cssRoot . "images", $cssFile);
$cssLast = '';
$cssArray = explode("¥n", $cssFileInner); // とりあえず行に分割
$cssArray = array_map('trim', $cssArray); // 各行にtrim()をかける
$cssArray = array_filter($cssArray, 'strlen'); // 文字数が0の行を取り除く
$cssArray = array_values($cssArray); // これはキーを連番に振りなおしてるだけ
foreach ($cssArray as $key => $value) {
$cssLast .= $value;
}
// 複数行コメントアウトトル
$cssLast = preg_replace('/¥/¥*([^¥]|¥*[^¥/])*¥*¥//s', '', $cssLast);
return '<style type="text/css">' . $cssLast . '</style>';
}
}
// JavaScript出力メソッドは省略
```
CSSの出力をするスクリプトに、PHPでのブラウザ判定を行い、
それによって、WebPなどに対応していないブラウザでは、
拡張子を、従来の画像拡張子に差し替えているというわけだ。
これなら、PSIで点数を稼ぎつつ、全ブラウザで表示できるってわけ。
CSSと画像の運用も変えずに済む。
本当にね、今回のPSIのアップデートでイラっときたのは、
新しいフォーマット使えってことなんだよ。
そんなクッソ普及してない過疎フォーマット使えって、無理があるって。あほかって。
もっと、寛大な点数の付け方をしてもらいたいものだ・・・。
さて、次の記事では、これまた難しい、
オフスクリーン画像の遅延読み込みについてやっていく。
ではまた。
#### 著者
著者名: みやびプリン
職業: フロントエンドエンジニア
プロフィール: 基本はイラストレイター（自称）だが、
本職は札幌市のフロントエンドエンジニア。
フロントエンドだけではなく、各種プログラミング言語に精通していると自負している。
HTML、CSSはもちろんのこと、JavaScript、TypeScript、PHP、Perl、Python、C#、Kotlin、Swift、Objective-Cなど多くの多くの言語に精通している他、
Movable Type、WordPressなど各種CMS、React.js、Angularなどフロントエンドフレームワークも扱える。
最近はUnityによる3Dコンテンツにも手を出している。
---
### ドメイン変更しました。
URL: https://highmoon-miyabi.net/blog/2018/10/24_000509.html
公開日時: 2018-10-24T23:00:02+09:00
更新日時: 2018-12-21T00:24:59+09:00
カテゴリ: 雑記
概要: どうも。 ドメイン変更しました！ これで...
本文: どうも。
ドメイン変更しました！
これで心機一転、新たな気持ちで、サイト運営していけるぜ！
頑張るぞ〜
なわけねーだろ
はい、ドメインの料金払い忘れたんです。
有効期限、おもっくそ過ぎてました。
復旧するのに、2万円かかります、
して、復旧できなくなってたうえに、ドメインが海外のオークションに売却されてました、
再取得に、79ドルかかります。
はい、完全に詰んだ。
もうダメだお。
言い訳をさせてください。
・まず、Gmailほとんど見てませんでした。
期限切れの警告メール、完全に見落としてました。
・財布落として、クレジットカード再発行した時にカード番号変わりました、ドメインの方のカード番号、変えてませんでした、引き落とされてません。
もう、なんなのよ！！！！
（いや、おめえが悪いwwwwww）
いや、まぁ、ドメイン変えるのは今までもけっこうやってきたしな、全然いいんだが。
しかし、何がきついって、
SEO力が引き継がれないんだよ。
なんでかって、前のドメインが完全に使用不能になってるからよ、
それだと、Search Console上で、サイトURLの変更ができねんだよ。
詰んだ。
ｦﾜﾀ>＼(^o^)／
10年間の蓄積が。
ぐあああああ
ただ、よかったのは、ドメイン使用料が、半額以下になったことだな。
ほんとそれだけ。
あー、もう、アクセス数激減やねん。
ってか、ゼロスタートやんけ。
Googleさん、まじかんにんな・・・。
悪口散々言ってごめんなさい。だから許してください。
ほんと仕事より命かけてんな自分のサイトに。
#### 著者
著者名: みやびプリン
職業: フロントエンドエンジニア
プロフィール: 基本はイラストレイター（自称）だが、
本職は札幌市のフロントエンドエンジニア。
フロントエンドだけではなく、各種プログラミング言語に精通していると自負している。
HTML、CSSはもちろんのこと、JavaScript、TypeScript、PHP、Perl、Python、C#、Kotlin、Swift、Objective-Cなど多くの多くの言語に精通している他、
Movable Type、WordPressなど各種CMS、React.js、Angularなどフロントエンドフレームワークも扱える。
最近はUnityによる3Dコンテンツにも手を出している。
---
### 【iOS12】モバイルデータ通信不能の戦犯
URL: https://highmoon-miyabi.net/blog/2018/10/11_000508.html
公開日時: 2018-10-11T21:56:53+09:00
更新日時: 2018-10-13T01:02:01+09:00
カテゴリ: プログラム全般
概要: どうも、毎年のごとくこの時期は死ぬほど忙...
本文: どうも、毎年のごとくこの時期は死ぬほど忙しいみやびです。
死ねる。
さて、表記の件。
特に、つい先日リリースされた、iOS12.0.1が特に、なのですが、とにかく酷い。
僕も食らいましたよ。
なぜか、モバイルデータ通信ができなくなり、Wi-Fi環境下じゃないとネットにつながらなくなった。
これはもうモバイルとしては死んでるも同然です。（電話もできない状態）
いろいろ調べようにも、つながらないので調べようがなかったという。
ひょんなことでつながるようになって（ニュースサイトからのプッシュ通知がきたらつながった）、その隙に調べたが、やれ、再起動しろだの、ネットワークの設定初期化しろだの、出てる。
だが、どれも確証のない話のようで、全部試したが、改善されませんでした。（泣）
と、調べていくうち、不吉なエントリーを発見した。
【iOS 12】「USB制限モード」を解除あるいは設定する方法。ロックが１時間超過しているUSBとLightningポート間でのデータ通信を調整するには？
iOS11.4.1からある機能である、USB制限モードを、iOS12で強化した、ってやつ。
これ、もしや、バグでモバイルデータ通信も制限してしまうんじゃ・・・と思い、USB制限モードを起動しなくした。
すると、通常通り、ロック時間長くても、全然つながるようになったではないか！
とりあえず、しばらく様子見たが大丈夫そう。
もう、余計なことすんなって、アップルよ。
マジ勘弁。
セキュリティ強化はわかるけど、ちゃんと検証しろよって。
というわけで、今回のモバイルデータ通信できないバグの戦犯はUSB制限モードですわよ、奥さん。
同じ症状の人でいくらやってもダメな人、試してみてください。
早くアップデートしろよ、リンゴよ。
#### 著者
著者名: みやびプリン
職業: フロントエンドエンジニア
プロフィール: 基本はイラストレイター（自称）だが、
本職は札幌市のフロントエンドエンジニア。
フロントエンドだけではなく、各種プログラミング言語に精通していると自負している。
HTML、CSSはもちろんのこと、JavaScript、TypeScript、PHP、Perl、Python、C#、Kotlin、Swift、Objective-Cなど多くの多くの言語に精通している他、
Movable Type、WordPressなど各種CMS、React.js、Angularなどフロントエンドフレームワークも扱える。
最近はUnityによる3Dコンテンツにも手を出している。
---
### 被災者になりました
URL: https://highmoon-miyabi.net/blog/2018/09/08_000507.html
公開日時: 2018-09-08T21:35:16+09:00
更新日時: 2019-03-12T15:53:46+09:00
カテゴリ: 雑記
概要: どうも、もれなく北海道で被災したみやびプ...
本文: どうも、もれなく北海道で被災したみやびプリンです。
このブログも何人見てるわからんけど、とりあえず安否報告。
というか、被災して、食い物もまともにないのに、ネットしてブログ書くなんていいご身分です。
叩かれるw
さて、実は、ちょうど地震が起きた時、まだ仕事してましたw
ビルのちょっと上の方の階なので、まぁ揺れました。
揺れ収まってから、機材を確認しましたが、全部無事。
ほっと一安心して、
さすがに、地震きたし、逃げよう思って、帰り支度にデータをGitにプッシュしてしてる途中で、
停電が。PCも含め全部落ちました。
まじで、うわぁああぁあぁ・・・！！！！ってなりました。
（心配すんのそこかよ）
しゃーないので、ひとまず避難することに。
会社の施錠は電子錠でしたが、無停電電源装置で動いていたため、無事脱出。
街に出ると、そこには幻想的な景色が。
あの札幌が、眠らない街が、真っ暗ではないか・・・！
不謹慎ながら、ちょっとテンション上がってました。
ですが、信号も止まっていたので、とにかく車が危なかったという。
帰宅中、時間が時間でしたが、家族や友人などの安否を確認していきましたが、
みんな無事っぽい。
そこで、水が出なくなるかもしれないから、風呂桶に水貯めといた方がいいよ！との注意が流れてきましたが、
嫌な予感がしました。
なので、帰りに速攻でコンビニに寄り、物の確保に。
なんとコンビニの定員さんは、健気にも手書きで、清算に当たっていました。
お釣りは出ないですが、いいですか？と言いつつ、紙に、物と値段を記載している、店員さん。
大変だなと思いつつ、入ってくるお客さんも、そうだよね、大丈夫、など声をかけている。
みんな必死だが、理解をしあえるっていうのは、悪くないな、と感じました。
様々考え、手に入れたのは、水、保存の効く食べ物、ポータブルの携帯充電器、電池でした。
地震直後で、何より夜中だったため、ギリギリ品切れになる前にそれらを入手。
ちょっと、仕事がきつい締め切りで、いやなっちゃうなと思ってましたが、こんな時間まで働いていたからこそ、
すぐに店に走れたんだと思うと、仕事をさせてくれた会社に感謝しました。
（いやほんとに）
さて、案の定、家に着くと、「やっぱり水が出ない・・・」となりました。
それもそのはず、札幌含め、多くのマンション等のビルディングの高階層では、水をポンプで汲み上げており、
電気で動いているため、水は停電で即アウトなのです。
先々週かに、雷の影響でウチのマンションだけが停電したので、それを知っていました。
街の景色とか非日常楽しんでる場合じゃないなとは思いましたが、
釣りに使ってるヘッドライトを使って寝る用意をして、その日は就寝。明けて、シャワーは当然浴びれないので、買った水を使って、歯と顔だけ洗って、
昨夜に、買いそびれた、カロリーメイトと水の追加を買おうと、家を出るも、
当然どのコンビニ、スーパーも長蛇の列でした。
とにかく狸小路のドンキホーテはやばかった。
店外はもちろんのこと、狸小路四丁目中に二、三重の列並んでたもん。
まぁ、そうなるよね・・・と思いつ、半ば諦め気味でしたが、水がまだ残っているコンビニを発見。
そこではカロリーメイトもまだ置いているではないですか！
抱えて購入し、ふと、会社で、お菓子やらカロリーメイトが社内で販売していることを思い出し、
出社してみることにしました。
いや、自分がほしかったからではなく、可能な限り、社内の人たちで分け合えないだろうかと思ったんですよ、ええ。
行くと、会社の上役の方一人と、他部署の部長さん二人が来ており、様々情報交換してましたが、
どこも、断水が始まってたりなど、事態は進行していました。
その中で会社が備蓄していた、水が大量にあったため、
それをおすそ分けしてくれることに・・・。
やっぱこの会社入ってて、よかったと涙がでました。
サーバーの様子などを確認しましたが、ひとまず大丈夫そう。
各々帰宅することになりました。
行きもそうでしたが、帰りも街は騒然としていました。
何より、信号が全部点いていなかったので、とにかく車が危なかったです。
そこかしこで鳴り響くクラクション、救急車のサイレン。
そして、午前中やっていたお店も、どこも閉店になっており、
まさしく世紀末状態でした。
家に着くと、何もすることがなく、ひとまず、友達たちと、通信しあっていました。
こんな時、連絡しあえる人がいるのって、とてもありがたいことだな、と思いました。
多分一人だったら、絶望してたな、と思いますよ。
その中の一人と連絡すると、家にこないか？とのお誘いが。その家では、ひとまず水は通ってる、とのこと。
家では、一人暮らしの友人を数名集めており、居間でキャンドルを点けてパーティみたいな雰囲気にしていました。
ほんとにそいつはたくましいw
そのお宅では、一宿一飯させてもらい、感謝に尽くせない、一夜でした。
地震発生から翌日、その友人宅も電力が回復、テレビで映像で現状の情報を入手しましたが、
思ったより、他地域がひどいことになっているのに、愕然としました。
楽しんでるのを申し訳ないな、とも思い、これからを考えると、
やはり不安感が大きかったです。ですが、こうやって多くの友人、仲間がいる状況のおかげで、
本当に不思議と、絶望感がなかったのです。
友人に送ってもらい帰宅。僕の部屋も、電気、水が復活していることにほっとしました。
会社は当然のことながら、休みという連絡が入りましたが、
上司がサーバーの確認をしに出社すると言っていたのと、
データが無事か心配で（そこかよw）可能なら、仕事させてもらおうと、出社することに。
ほんと運がいいことに、全然データが無事だったのです。
少し作業させてもらい、退社しました。
街は、電気が復旧しつつあり、元の姿を取り戻してきていましたが、
相変わらず、どこの店もとにかく食料品は全滅していました。
今回の震災、地震自体の被害も相当なのですが、
一番は二次災害が大きかったのかなと思います。
地震発生から三日経った今でも、
物流が滞っている地域では（僕が住んでいるところ含めて）、いまだに食べ物がほとんどありません。
たった一日電気が通らないだけで、こんな状況になるなんて、思いもよりませんでした。
間違いなく、一番打撃を受けたのは、食料品を扱う人たちではないでしょうか。
備蓄食料も数が少なく、少しずつ食べていこうと思いましたが、
今までだらしなくも外食ばかりしてきていた、食生活に反省しました。
また、多くの仲間、友人、連絡が取り合えること、連携が取れることが、どれだけすごいことなのか、と実感しました。
東北の震災や、熊本の震災など、大災害を経験した地域では、多くの人が、生き方を見直したと、
言っていたのが、少しわかった気がします。
さて、大変なのはこれから。
物流が回復するまでは、油断せずしのがなければ。
#### 著者
著者名: みやびプリン
職業: フロントエンドエンジニア
プロフィール: 基本はイラストレイター（自称）だが、
本職は札幌市のフロントエンドエンジニア。
フロントエンドだけではなく、各種プログラミング言語に精通していると自負している。
HTML、CSSはもちろんのこと、JavaScript、TypeScript、PHP、Perl、Python、C#、Kotlin、Swift、Objective-Cなど多くの多くの言語に精通している他、
Movable Type、WordPressなど各種CMS、React.js、Angularなどフロントエンドフレームワークも扱える。
最近はUnityによる3Dコンテンツにも手を出している。
---
### 【MAMP】VHosts設定時にBad Request 400エラーが出た時
URL: https://highmoon-miyabi.net/blog/2018/08/10_000505.html
公開日時: 2018-08-10T21:28:27+09:00
更新日時: 2020-07-22T01:19:22+09:00
カテゴリ: SEO,サーバー,プログラム全般,リダイレクト
概要: どうも、最近釣りにハマってるみやびです。...
本文: どうも、最近釣りにハマってるみやびです。
先輩に勧められてから、ちょいちょい、便乗してます。
先日も行ってきました。
アウトドアスポーツハマるなんて、絶対ないと思ってましたが、楽しい。
さて、そんなみやびの趣味の話はどうでもよくて、表記の件。
ウェブ長いことやってるけど、400番のエラーなんて初めて見たよ。
404とか、403とか500とかはよく見るけど、400番って・・・。
後輩のローカルサーバー構築してた際に、起きたエラー。
マシンがMacなので、MAMPにて、いつも通りにヴァーチャルホストを立ててやろうとしたが、
今回のエラーが出てきた。
問題のホスト名は、
localhost.2018hogehoge
だ。
様々試したが、うまくいかず、
結局、先頭のlocalhost.を抜いたらうまく動いたので、
とりあえず、それ以降、localhost.はつけない方針にしたが、
釈然としない。
それもそのはず、Windowsマシンで、XAMPPを使用している時は、
いくらlocalhost、とつけたホストが林立してても、全然動いていた。
ましてや、今回と同じホスト名でも動いた。
MAMP特有なのかもしれないと、後輩が帰った後、自身のMacマシンとMAMPを使い調査してみたが、
下記のエントリーに当たった。
Apache ローカル環境 400 Bad Request になるときどうやら、ホスト名に"_"（アンダースコア）は使えないのは有名なようだ。
しかし、今回のケースでは"_"はついてない。
まてよ、と思い、
localhost.hogehoge
にすると、普通に動いた。
そう、第二ラベルに原因があったのだ。
もしかしたら、MacでMAMPを使用したローカル環境のみかもしれないが、
第二ラベル以下（ラベルとは、ホスト名においての、.（ピリオド）で区切られた文字列のこと）で、先頭に数字を使用すると、400番エラーが発生するのだ。
ちなみに、第三ラベルに使用しても、同じくエラーが起きた。
localhost.hoge.500mogu
とか。
ちなみに、あくまで先頭に使用した場合だけで、
localhost.hoge500
とかでは普通に動く。
あと、第一ラベルで、先頭が数字でも、動く
500hogemogu.local
うーん、原因がわかったがやはり釈然としない。
おそらく、第二ラベル以下だと、
ローカルサーバーの方で、
物理アドレス（IPアドレス）とごっちゃになるのではないだろうか。
今のところそれしか思い浮かばない。
とにかく、この件、ググってみても、ピンポイントなエントリーが見当たらないところからみると、
記事中腹でも述べたとおり、Macマシンで、MAMPを使用した時に限るのだろう。
（だって多分そんなホスト名、世の中にゴロゴロあるはずだし）
もし、ローカルにてホスト名によって、400エラーが出るようなら、
本エントリーの事を試してみてほしい。
ってわけで、最後まで真面目な記事でした。
#### 著者
著者名: みやびプリン
職業: フロントエンドエンジニア
プロフィール: 基本はイラストレイター（自称）だが、
本職は札幌市のフロントエンドエンジニア。
フロントエンドだけではなく、各種プログラミング言語に精通していると自負している。
HTML、CSSはもちろんのこと、JavaScript、TypeScript、PHP、Perl、Python、C#、Kotlin、Swift、Objective-Cなど多くの多くの言語に精通している他、
Movable Type、WordPressなど各種CMS、React.js、Angularなどフロントエンドフレームワークも扱える。
最近はUnityによる3Dコンテンツにも手を出している。
---
### 【jQuery】画像読み込み遅延プラグイン
URL: https://highmoon-miyabi.net/blog/2018/07/18_000504.html
公開日時: 2018-07-18T19:33:48+09:00
更新日時: 2019-03-12T15:46:12+09:00
カテゴリ: JavaScript,jQuery
概要: なんか、npmがやたらまずいことになって...
本文: なんか、npmがやたらまずいことになってるっぽい。
詳しくは、npm, Inc. Status - Compromised version of eslint-scope published
どうやら、不正なパッケージが公開されて、情報が盗まれそうになったらしいので、
ユーザートークンを全て無効にした、みたいな感じ。
おかげで、自作パッケージをアップできないという。
困ったもんや。
さて、前置きはこのくらいにして・・・。（というかnpmで公開しようとしたら、だめだったんでさ）
画像読み込み遅延プラグインを作ってみました！
置き場所はここ
（zipファイルがダウンロードされるはず）
今回作った経緯としては、画像がやたら多いページで、読み込み速度が遅いので、なんとかならないかということで、
スクロールで見えてる範囲の分だけ画像を読み込む、としてほしいとの要望に応えるためだ。
プラグインとして有名なのが、Lazy Loadだが、
こいつがどうもうまく動かなくて、しゃーなく、自作することにしたってわけ・・・ 汗
使い方は、jQueryでやる。
```html
<body>
<ul id="sampleImages">
<li><img src="images/sample001.jpg"></li>
<li><img src="images/sample002.jpg"></li>
<li><img src="images/sample003.jpg"></li>
<li><img src="images/sample004.jpg"></li>
<li><img src="images/sample005.jpg"></li>
<li><img src="images/sample006.jpg"></li>
<li><img src="images/sample007.jpg"></li>
<li><img src="images/sample008.jpg"></li>
<li><img src="images/sample009.jpg"></li>
<li><img src="images/sample010.jpg"></li>
<li><img src="images/sample011.jpg"></li>
<li><img src="images/sample012.jpg"></li>
<li><img src="images/sample013.jpg"></li>
<li><img src="images/sample014.jpg"></li>
<li><img src="images/sample015.jpg"></li>
</ul>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src=" 本エントリーのJSを格納した場所 /jquery.simagesloading.js"></script>
<script>
$(function(){
//遅延表示させたいブロックのセレクタに、simpleImagesLoadingを適用
$('#sampleImages > li > img').simpleImagesLoading({
fade: true,
time: 800
});
});
</script>
</body>
```
画像のセレクタに、今回のプラグインを適用するだけ。
ちなみに、セレクタは画像でなくても大丈夫。
（その要素の中の画像要素を探すようになっている）仕組みとしては、いったん画像のsrcを消して、強制的に読み込みをストップさせたのち、
スクロールの範囲に来たら画像を読み込む的な感じ。
軽い画像だとあまり効果がないが、重い画像を、多数表示しているページなんかでは有効だ。
オプションに関しては二つしかない。
オプション名
説明
値の形式
初期値
fade
表示させる時にアニメーションさせるかどうか
true / false（真偽値）
true
time
アニメーション時の時間
数値
700
もっとオプション必要かもね。
また、第二〜第四引数に無名関数を入れることによって各コールバックを実行できる。
```javascript
$(function(){
//遅延表示させたいブロックのセレクタに、simpleImagesLoadingを適用
$('#sampleImages > li > img').simpleImagesLoading({
fade: true,
time: 800
}, function(img, dataFlg){
// 画像読み込み開始時に実行
// imgには画像単体、dataFlgには、ネイティブ変数、datasetが使えるかどうかが入っている
}, function(img, flg, dataFlg){
// 画像読み込み完了時に実行（エラーが出た場合も実行される）
// imgには画像単体、flgには画像の読み込みが成功したか、dataFlgにはネイティブ変数、datasetが使えるかどうかが入っている
}, function(img, dataFlg){
// 画像の最終的に適用するSRCを加工したい時に入れる。
// 必ず、return Stringを実行すること。
return dataFlg ? img.dataset.srcdata : img.getAttribute('data-srcdata');
});
});
```
我ながらなかなかいい感じのプラグインになりました。
これのいいところは、レイアウトが崩れないことだ。
（画像の親に対して、style属性のheightの指定がない限り、画像の縦幅を一時的にいれている）
けっこう、他のプラグインだとレイアウト崩れたりするらしいしね。
どんどん使ってください。
というか、npm復活早ぅ
#### 著者
著者名: みやびプリン
職業: フロントエンドエンジニア
プロフィール: 基本はイラストレイター（自称）だが、
本職は札幌市のフロントエンドエンジニア。
フロントエンドだけではなく、各種プログラミング言語に精通していると自負している。
HTML、CSSはもちろんのこと、JavaScript、TypeScript、PHP、Perl、Python、C#、Kotlin、Swift、Objective-Cなど多くの多くの言語に精通している他、
Movable Type、WordPressなど各種CMS、React.js、Angularなどフロントエンドフレームワークも扱える。
最近はUnityによる3Dコンテンツにも手を出している。
---
### 【Swift4】必須でなくてもいいデリゲートメソッド
URL: https://highmoon-miyabi.net/blog/2018/06/12_000503.html
公開日時: 2018-06-12T15:45:15+09:00
更新日時: 2018-12-21T00:33:08+09:00
カテゴリ: Swift・Objective-C
概要: どうも。 すっかりどっぷりSwift浸か...
本文: どうも。
すっかりどっぷりSwift浸かってるみやびです。
だいぶ慣れたが、やっぱ制約とかあって難しいわ、オブジェクト指向言語・・・。
（というか、Swiftの場合、とにかくストーリーボードとオートレイアウトがうざい。←マジで滅べ）
さて、表記の件だが、
通常、デリゲートメソッドを指定する場合、
処理譲渡先に、必ずデリゲートメソッドを記述しなくてはならないが、
今回は、必須で書かなくてもよくする方法を紹介したい。
デリゲートメソッドってなんぞやって人は下記をご参照されたし。
（めんどくさい説明は他者に任せるスタイル）
●【Swift入門】難解なデリゲート(delegate)の使い方を理解しよう！
例えば、下記のような、二つのクラスがあるとする。
```swift
// デリゲート元
import UIKit
protocol AclassDelegate {
func testFunc(_ image: UIImage?)
}
class A {
var delegate: AclassDelegate? = nil
init(){
}
func testRun(){
let testImage = UIImage()
self.delegate?.testFunc(testImage)
}
}
```
```swift
// デリゲート先
import UIKit
class B: AclassDelegate {
var aInstanse: A = A()
init(){
self.aInstanse.delegate = self
}
// デリゲートメソッドを記載しなければいけない
func testFunc(_ image: UIImage?) {
// 処理内容
}
}
```
クラスBでは、Aのデリゲートを継承しているが、
この場合、クラスB内で、必ずデリゲートメソッドを全て記述しなくてはならない。
いいんだけど、めんどうというか、余計な記述しなきゃいけない時があるから、
少々不便だ。
だが、よく考えれば、例えば、UITableViewのデリゲートメソッドとか、各種既存クラスでは、
必須でないデリゲートメソッドが存在する。
例えば下記。
```swift
func tableView(_ tableView: UITableView, sectionForSectionIndexTitle title: String, at index: Int) -> Int {
return 5
}
```
したらカスタムクラスでもできんじゃね？
ってことで調べてみたが、これが出ない出ない。
調べ方がいけなかったか、本当に出てこなかった。
ってことで、奥の手、teratailで質問した結果、
下記の方法を教えてくれた。
```swift
extension AclassDelegate {
func testFunc(_ image: UIImage?) {}
}
```
つまり、プロトコルを拡張して、ダミー関数を追加するというもの。
うん、実装できた。
おそらくこれが一番いい方法。
fuzzballさん、本当にありがとうございます。大感謝。
して、実はもう一個の方法がある。
UITableViewなどと同じ方法をとる方法だ。
UITableViewのデリゲートは下記のように定義されている。
```swift
public protocol UITableViewDataSource : NSObjectProtocol {
public func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell // 必須
optional public func tableView(_ tableView: UITableView, sectionForSectionIndexTitle title: String, at index: Int) -> Int // 非必須
}
```
optionalキーワードで定義すれば、非必須にできるようだ。
これを参考に、Swift4で定義すると下記になる。
```swift
@objc protocol AclassDelegate: NSObjectProtocol {
@objc optional func testFunc(_ image: UIImage?)
}
```
どうやら、@objcを使って無理やりなのであまり推奨されはしないようだ。
だが、既存クラスと同じ仕様でやれるのはスマートな方法ではないだろうか。
こちらの方法は、tyobigoroさんが教えてくれた。
こちらも大変に感謝です。
やっぱ、あれだね、わかる人に聞いた方が早いね。
Google先生と対話するのもいいんだけど、
的外れな記事ばかり出ると、イライラしかしないし、時間ももったいないしね。
さて、今日もオートレイアウトとの格闘が続くか・・・。
#### 著者
著者名: みやびプリン
職業: フロントエンドエンジニア
プロフィール: 基本はイラストレイター（自称）だが、
本職は札幌市のフロントエンドエンジニア。
フロントエンドだけではなく、各種プログラミング言語に精通していると自負している。
HTML、CSSはもちろんのこと、JavaScript、TypeScript、PHP、Perl、Python、C#、Kotlin、Swift、Objective-Cなど多くの多くの言語に精通している他、
Movable Type、WordPressなど各種CMS、React.js、Angularなどフロントエンドフレームワークも扱える。
最近はUnityによる3Dコンテンツにも手を出している。
---
### 【Swift4】オートレイアウト滅びろ
URL: https://highmoon-miyabi.net/blog/2018/04/30_000502.html
公開日時: 2018-04-30T23:07:41+09:00
更新日時: 2018-05-01T14:18:46+09:00
カテゴリ: Swift・Objective-C
概要: どうも、さっそく自分の駐車場で車ぶっけた...
本文: どうも、さっそく自分の駐車場で車ぶっけたみやびです。
だって、入り口の幅、車の幅プラス40cmくらいなんだもさ。
さて、表記の件だが、
もう今回は、何かの解決策とかでは全くなく、ただの愚痴です。
ほんとにね、マジで死んでくれ、オートレイアウト。
マジ、クソだよ、ほんとに。
オートレイアウト。
下記に、オートレイアウトの何がクソなのか列挙する。
・数値はpt固定（デバイス別でも一緒なので、当然、比率全然違くなる）
・一度レイアウトが完了してしまうと、その後は二度とコードからのレイアウト変更が効かなくなる。
（アウトレット接続して、数値変えるのは可能。ただし、オートレイアウトでしかコントロールがきかなくなる）
・一つのクラスで、複数のビューからアウトレット接続していて、ビューによってオートレイアウトのコントロールを効かせているが、
それが存在しないものに対して処理を行ってしまっている場合、アプリ落ちる
（当たり前だけど、nilに対して処理するから落ちる）
一つ目は、まぁそうでもないんだが、それを合わせるために、二つ目、三つ目が出てくる。
そして、その二、三つ目が本当に致命的。
もうね、ほんとね、使えねんだよ。
扱いづらいんだよ。
大したわかりやすくもならねーしよ。
オートレイアウト、充実させるんならね、デバイス別にしっかり同じ比率に調整されるようにしろよ。
どこが"オート"やねん！
それしっかりしてくれてれば、こんなに苦労しねんだよ！
して、あとからコードで変更しやすくしろよ。
まじで、滅びろ、Fu*k！オートレイアウト！
頼むから、もっと使いやすいものにしてくれ、Appleよ・・・。
すみません、というわけで完全にただの愚痴でした。
#### 著者
著者名: みやびプリン
職業: フロントエンドエンジニア
プロフィール: 基本はイラストレイター（自称）だが、
本職は札幌市のフロントエンドエンジニア。
フロントエンドだけではなく、各種プログラミング言語に精通していると自負している。
HTML、CSSはもちろんのこと、JavaScript、TypeScript、PHP、Perl、Python、C#、Kotlin、Swift、Objective-Cなど多くの多くの言語に精通している他、
Movable Type、WordPressなど各種CMS、React.js、Angularなどフロントエンドフレームワークも扱える。
最近はUnityによる3Dコンテンツにも手を出している。
---
### 【Swift4】UITabBarController、タブ切り替え時に処理実行
URL: https://highmoon-miyabi.net/blog/2018/04/17_000501.html
公開日時: 2018-04-17T14:49:49+09:00
更新日時: 2020-07-22T01:19:59+09:00
カテゴリ: Swift・Objective-C
概要: どうも、車で、早速事故りかけたみやびです...
本文: どうも、車で、早速事故りかけたみやびです。
札幌運転難しい・・・。
（いや、落ち着いて運転しろ）
表記の件、
以前、こんな記事を書いたが、
●【Swift4】UIViewController、タブ切り替え後戻ってきた時にメソッドを実行する
もっと、根っこからやれる方法を編み出したので、やり方Tipsしようかと。
（UINavigationControllerでも、別のプロパティを使えば同じようにやることができるはず）
今回の記事のやり方なら、
ViewController側で処理を書く必要がなく、
共通の処理を実行することが可能だ。
まず、Swiftの便利な変数の書き方から。
Swiftには、プロパティの値が、セットされたり変化したらブロック内の処理を実行、という便利な書き方がある。
```swift
class hoge {
var hogeValue: Bool {
get {
return self.hogeValue
}
set {
self.hogeValue = newValue
}
}
}
```こうしておけば、hogeValueが変更される度に、setのブロックの処理が実行されるのだ。
では、UITabが切り替わった時に実行させるにはというと、これを応用すればできる。
下記のように定義した、クラスを、ストーリーボードないし、コード内のUITabBarControllerに適用する。
```swift
import UIKit
class CustomUITabBarViewController: UITabBarController {
// 現在のタブが格納されている変数をオーバーライド
override var selectedViewController: UIViewController? {
get {
return super.selectedViewController
}
set {
let value = newValue
super.selectedViewController = value
self.tabChange()
}
}
private func tabChange(){
//様々処理
}
}
```
そう、タブが切り替われば、当然ViewControllerを格納している変数は変化する。
その変数をオーバーライドして、処理を追加すればいいのだ。
ただ、UITabBarControllerのタブが切り替わる度に、実行されるコールバック関数を見つけれれば、
当然それを使った方がいい。
しかし、僕は、いくら調べても見つかりませんでした（泣）
して、このやり方なら、他のいろんな面でも応用が効く。
そういう方法を見つけれたのはでかいね。
ではまた。
#### 著者
著者名: みやびプリン
職業: フロントエンドエンジニア
プロフィール: 基本はイラストレイター（自称）だが、
本職は札幌市のフロントエンドエンジニア。
フロントエンドだけではなく、各種プログラミング言語に精通していると自負している。
HTML、CSSはもちろんのこと、JavaScript、TypeScript、PHP、Perl、Python、C#、Kotlin、Swift、Objective-Cなど多くの多くの言語に精通している他、
Movable Type、WordPressなど各種CMS、React.js、Angularなどフロントエンドフレームワークも扱える。
最近はUnityによる3Dコンテンツにも手を出している。
---
### 【Swift4】UITextFieldの高さを変更
URL: https://highmoon-miyabi.net/blog/2018/04/12_000500.html
公開日時: 2018-04-12T13:53:45+09:00
更新日時: 2018-12-21T00:38:02+09:00
カテゴリ: Swift・Objective-C
概要: どうも、ついに車買いましたー！ フィット...
本文: どうも、ついに車買いましたー！
フィットのRSです。
車のことはよくわからないですが、
いい車とのことです。
（宝の持ち腐れか）
さて、そんな自慢話はよくて、表記の件。
調べてみればわかるが、これ、実はかなり難しい。
ストーリーボードで置いた物の高さを変えるのは特に難しい。
調べてだいたい見つかるのは下記のエントリーのような方法。
●ランキング画面の作成、UITextFieldの高さを変更
いや、角丸つけたまんまにしたいんだから。
しかも、やっても効かんし。
さらに調べて、こんなエントリーにたどり着いたが・・・。
●UITextFieldに余白（パディング、マージン）を持たせる【正攻法】
これはかなり確信に近づいた。
実際、最初調べてたのは余白の付け方だし、
余白つけるのはうまくいった。
しかし、高さを調整するにはいたらず・・・。
そこで、発想を転換して調べることにした。
UIViewの生成サイクルの中でなんかすればいいのでは？
と調べてみたのだ。
（UITextField含め、多くのView系クラスは、UIViewがスーパークラスなので）
そして、見つけたのが、下記記事。
●UIKitのView表示ライフサイクルを理解する
これを参考に、レイアウトを決めるメソッドの前に、実行してみた。
すると、うまく動いたではないか！
余白の変更と併せたものが下記。
```swift
import UIKit
class CustomTextField: UITextField {
//入力したテキストの余白
override func textRect(forBounds bounds: CGRect) -> CGRect {
return bounds.insetBy(dx: 20, dy: 0)
}
//編集中のテキストの余白
override func editingRect(forBounds bounds: CGRect) -> CGRect {
return bounds.insetBy(dx: 20, dy: 0.0)
}
//プレースホルダーの余白
override func placeholderRect(forBounds bounds: CGRect) -> CGRect {
return bounds.insetBy(dx: 20, dy: 0.0)
}
// 高さを高くするために実行（デフォ値は、フォントサイズによって変動）
override func layoutSubviews() {
self.frame = CGRect(x: self.frame.origin.x, y: self.frame.origin.y, width: self.frame.size.width, height: 50)
super.layoutSubviews()
}
}
```
つまり、layoutSubviewsが実行される前に、親View（自身）の大きさを変えてしまえばいいのだ。
あとは、ストーリーボード上のテキストフィールドに、このカスタムクラスを適用すればいい。
これ、おそらく、テキストの量によって高さを変動なんてもできるはず。
というか、これを使えば、オートレイアウトも、デフォルト値もなんも怖くない。
なんせ、レイアウトする前に全て終わらせてしまえばいいのだから・・・。
（↑暗殺者みたいなセリフやな←中二）
これはきたかもしれないですね。
#### 著者
著者名: みやびプリン
職業: フロントエンドエンジニア
プロフィール: 基本はイラストレイター（自称）だが、
本職は札幌市のフロントエンドエンジニア。
フロントエンドだけではなく、各種プログラミング言語に精通していると自負している。
HTML、CSSはもちろんのこと、JavaScript、TypeScript、PHP、Perl、Python、C#、Kotlin、Swift、Objective-Cなど多くの多くの言語に精通している他、
Movable Type、WordPressなど各種CMS、React.js、Angularなどフロントエンドフレームワークも扱える。
最近はUnityによる3Dコンテンツにも手を出している。
---
### 【CSS】実はあまり知らない？text-indentが効かない時
URL: https://highmoon-miyabi.net/blog/2018/03/27_000499.html
公開日時: 2018-03-27T22:56:17+09:00
更新日時: 2025-11-17T15:33:41+09:00
カテゴリ: CSS
概要: text-indentが効かない時の意外な原因について解説しています。これ知った時は、俺よく見つけた！って自画自賛しました。（え
本文: どうも、車がなかなか買いに行けない、みやびです。
狙ってる車買われてまう。
というか駐車場の料金が腐っちまうよ。
さて、表記の話だが、
たとえば下記のように、
SEO的には、文字を入れておきたいが、
文字は表示せず、背景画像によって、表現したいブロックかなんかにtext-indentをきかせ、
文字を飛ばす時があるだろう。
```html
<p id="testId">
<span>ここはテキスト</span><b>ハートマーク</b>
</p>
```
```css
#testId > span,
#testId > b {
display: inline-block;
vertical-align: middle;
}
#testId > b {
background: 0 0 url(images/test.png) no-repeat;
height: 20px;
text-indent: -9999px;
width: 20px;
}
```
それでいて、右寄せしたい時なんて時もあるが、
```css
#testId {
text-align: right;
}
#testId > span,
#testId > b {
display: inline-block;
vertical-align: middle;
}
#testId > b {
background: 0 0 url(images/test.png) no-repeat;
height: 20px;
text-indent: -9999px;
width: 20px;
}
```
これで、右寄せかつ、bには背景画像をきかせることができる。
ただし、このパターン、
text-indent: -9999px;がきかない。
text-indent: 9999px;にすると、効きだす。
```css
#testId {
text-align: right;
}
#testId > span,
#testId > b {
display: inline-block;
vertical-align: middle;
}
#testId > b {
background: 0 0 url(images/test.png) no-repeat;
height: 20px;
text-indent: 9999px;
width: 20px;
}
```
このtext-indent、ブロックの文字スタートに対して、隙間を効かせるCSS。
通常の考え方であれば、
-9999pxは、スタートから文字が流れる方向と逆の方向の座標に9999pxずらすというものになる。
だから当然、マイナスにすれば、右揃えに対しては、右方向に、インデントをずらすと思いがちだが・・・、
どうやら、座標においてのマイナスは、あくまで左方向ということで、
右寄せなのに、左方向にマイナスでいくら引っ張ってもダメのよう。
つまり、右寄せの場合は、右のインデントを増やして、飛ばすのが正解みたいだ。
しかし、わかりずらい。
以前、なぜかtext-indentが効かない現象が起きたが、
原因がわからずだった。
今考えれば、これが原因だったようだ・・・。
一つの方法でダメなら、いろいろやったり、
逆を試したら、うまくいくのかもしれない。
え、みんな知ってるって？
いや、気づかんしょ、これは！！！
#### 著者
著者名: みやびプリン
職業: フロントエンドエンジニア
プロフィール: 基本はイラストレイター（自称）だが、
本職は札幌市のフロントエンドエンジニア。
フロントエンドだけではなく、各種プログラミング言語に精通していると自負している。
HTML、CSSはもちろんのこと、JavaScript、TypeScript、PHP、Perl、Python、C#、Kotlin、Swift、Objective-Cなど多くの多くの言語に精通している他、
Movable Type、WordPressなど各種CMS、React.js、Angularなどフロントエンドフレームワークも扱える。
最近はUnityによる3Dコンテンツにも手を出している。
---
### 【Swift4】UIViewController、タブ切り替え後戻ってきた時処理実行
URL: https://highmoon-miyabi.net/blog/2018/03/15_000498.html
公開日時: 2018-03-15T01:06:06+09:00
更新日時: 2020-07-22T01:21:27+09:00
カテゴリ: Swift・Objective-C
概要: どうも、やっと駐車場見つかりました！ や...
本文: どうも、やっと駐車場見つかりました！
やっとだよ、ほんとにないんだよ、札幌中央区！
50軒あたってやっとだよ。明らかに空いてるのに、空いてないって言い張られるし。
これでやっと車買える！
さて、ここまでにしといて・・・。
表記の件。
タブ切り替え時というよりは、
ViewControllerが切り替わって戻ってきた時、だ。
UIViewControllerが表示された直後に実行される関数は下記。
```swift
override func viewDidLoad() {
super.viewDidLoad()
}
```
で、タブを一旦切り替え、また同じViewControllerに戻った時、
表示をリロードしたい、なんてことはよくあること。
しかし、このviewDidLoadメソッド、そのUIViewControllerが表示された一回目しか実行されない。
その後、タブ切り替えだろうが、Navigationで戻ってこようが、二度と実行されない。
つまりこのメソッドをもっかい実行するにはアプリを再起動するしかない。
じゃぁどうするかというと、
該当のUIViewControllerにくるたびに実行されるメソッドがあるので、それを使えばいい。
```swift
// viewDidLoadが完了時に実行
override func viewWillAppear(_ animated: Bool) {
}
// 完全に全ての読み込みが完了時に実行
override func viewDidAppear(_ animated: Bool) {
}
```
他にもいろいろ各タイミングで実行されるメソッドがありそうだが、
ここら辺詳しくは下記の記事参照のこと。
●UIViewControllerのライフサイクル
そう、このメソッドの中に処理を書けば、
UIViewControllerにきた時に毎回実行させることができるってわけだ。
え、なに、それくらい常識だって？
すみませんね、初心者で・・・。
でも絶対、わからんってなってる人は多いはず！
さて、もう寝る。
#### 著者
著者名: みやびプリン
職業: フロントエンドエンジニア
プロフィール: 基本はイラストレイター（自称）だが、
本職は札幌市のフロントエンドエンジニア。
フロントエンドだけではなく、各種プログラミング言語に精通していると自負している。
HTML、CSSはもちろんのこと、JavaScript、TypeScript、PHP、Perl、Python、C#、Kotlin、Swift、Objective-Cなど多くの多くの言語に精通している他、
Movable Type、WordPressなど各種CMS、React.js、Angularなどフロントエンドフレームワークも扱える。
最近はUnityによる3Dコンテンツにも手を出している。
---
### 【Swift4】円のアニメーションにイージングをつける
URL: https://highmoon-miyabi.net/blog/2018/03/01_000496.html
公開日時: 2018-03-01T10:01:47+09:00
更新日時: 2019-03-12T15:51:30+09:00
カテゴリ: Swift・Objective-C
概要: どうも、なぜだか本当に駐車場が見つからな...
本文: どうも、なぜだか本当に駐車場が見つからないみやびです。
どうなってるの、札幌中央区！？
さて、表記の件。
よくある円グラフにアニメーションをつけるってやつなのですが、
下記エントリーが非常に参考になった。
（というか、ほぼほぼパクり）
●【iOS】【swift】アニメーション付き円グラフ
さすがQiitaさんです。
上記のものを、Swift4用に若干変えたのが下記だ。
```swift
import UIKit
struct CircleParamStruct {
let value: Float
let color: UIColor
init(setValue: Float, setColor: UIColor){
self.value = setValue
self.color = setColor
}
}
class CircleAnimationView: UIView {
private let params: Array<CircleParamStruct>
private var endAngle: CGFloat = CGFloat(Double.pi / 2.0) * -1
private let endAngleFirst: CGFloat = CGFloat(Double.pi / 2.0) * -1
private let maxAngle: CGFloat
private let allCount: CGFloat
private let holeFlg: Bool
private let holeWidth: CGFloat
private var animationTimer: Timer?
private var animationWait: CGFloat
private let animationFrame: Int
private let frameCountAll: Double
private var frameCountNow: Int = 0
required init(coder aDecoder: NSCoder) {
fatalError("init(coder:) has not been implemented")
}
init(frame: CGRect, params: Array<CircleParamStruct>, setHoleFlg: Bool = false, allCount: CGFloat = 0, setWait: CGFloat = 1.0, setHoleWidth: CGFloat = 0.0, setFps: Int = 60) {
self.params = params
self.holeWidth = setHoleWidth
self.holeFlg = setHoleFlg
self.allCount = allCount
self.animationWait = setWait
self.animationFrame = setFps
self.frameCountAll = Double(Float(setWait) / (1.0 / Float(setFps)))
if params.count == 1 && allCount != 0 {
self.maxAngle = CGFloat(Double.pi * 2) * CGFloat(params[0].value) / CGFloat(allCount)
} else {
self.maxAngle = CGFloat(Double.pi * 2)
}
super.init(frame: frame)
self.isOpaque = false
self.backgroundColor = UIColor.init(red: 0, green: 0, blue: 0, alpha: 0)
}
@objc private func update(){
let angle = CGFloat(Double.pi * 2.0 / self.frameCountAll)
self.endAngle = angle
if(self.endAngle > self.maxAngle) {
//終了
self.animationTimer?.invalidate()
} else {
self.setNeedsDisplay()
}
self.frameCountNow += 1
}
func startAnimatin(){
self.animationTimer = Timer.scheduledTimer(timeInterval: TimeInterval(1.0 / CGFloat(self.animationFrame)), target: self, selector: #selector(self.update), userInfo: nil, repeats: true)
}
override func draw(_ rect: CGRect) {
// Drawing code
let context: CGContext = UIGraphicsGetCurrentContext()!
var x: CGFloat = rect.origin.x
x += rect.size.width / 2
var y: CGFloat = rect.origin.y
y += rect.size.height / 2
var max: CGFloat = 0
if self.allCount == 0 {
for dic: CircleParamStruct in self.params {
let value = CGFloat(dic.value)
max += value
}
} else {
max = self.allCount
}
var startAngleInner: CGFloat = CGFloat(Double.pi / 2) * -1
var endAngleInner: CGFloat = 0
let radius: CGFloat = self.frame.size.width / 2
let radiusInner: CGFloat = self.frame.size.width / 2
for dic: CircleParamStruct in self.params {
let value = CGFloat(dic.value)
endAngleInner = startAngleInner + CGFloat(Double.pi * 2) * (value / max)
if(endAngleInner > self.endAngle) {
endAngleInner = self.endAngle
}
let color: UIColor = dic.color
context.move(to: CGPoint(x: x, y: y))
context.addArc(center: CGPoint(x: x, y: y), radius: radius, startAngle: startAngleInner, endAngle: endAngleInner, clockwise: false)
if self.holeFlg {
context.addArc(center: CGPoint(x: x, y: y), radius: radius - self.holeWidth, startAngle: endAngleInner, endAngle: startAngleInner, clockwise: true)
}
context.setFillColor(color.cgColor)
context.closePath()
context.fillPath()
startAngleInner = endAngleInner
}
}
}
```
エントリーとの相違点は、
パスを生成するさいのメソッドの実行の仕方と、
アニメーションの実行を、繰り返しのTimerを使うってのに変更してる点、
一個一個のデータの持ち方を、構造体（struct）に変更してる点、
それに伴って、イニシャライザをいじっている。
これを使用するには、下記のようにする。
```swift
import UIKit
class ViewController: UIViewController {
var graphView: CircleAnimationView!
override func viewDidLoad() {
super.viewDidLoad()
var params = Array<CircleParamStruct>()
params.append(CircleParamStruct(setValue: 2, setColor: UIColor.blue))
params.append(CircleParamStruct(setValue: 1, setColor: UIColor.red))
params.append(CircleParamStruct(setValue: 4, setColor: UIColor.yellow))
self.graphView = CircleAnimationView(frame: CGRect(x: 0, y: 0, width: 320, height: 320), params: params)
self.view.addSubview(graphView)
graphView.startAnimatin()
}
override func didReceiveMemoryWarning() {
super.didReceiveMemoryWarning()
}
}
```
これを、真ん中に穴を開ける場合は、イニシャライザを下記のようにする。
```swift
self.graphView = CircleAnimationView(frame: CGRect(x: 0, y: 0, width: 320, height: 320), params: params, setHoleFlg: true, allCount: 0, setWait: 1.0, setHoleWidth: 20)
```
イニシャライザめんどくさい感じなのはごめんなさない。
もっといいやり方あると思う。さて、ここまでやって気づいた方もいるでしょうが、
このままだと、アニメーションにイージングをつけることができない。
タイマーで繰り返しやってるだけだからね。
ではどうすれば、イージングをつけるかというと、
回転の角度をアップデートする時に、その角度の数値に対して、
イージングの計算をさせればいいのだ。（当然のことながら、円のアニメーションは、回転の角度によって、アニメーションさせているため）
まず、イージング関数を格納した列挙と構造体を用意する。
下記のエントリーを参照に、計算式を入れていく。
●イージング処理の計算式 - 強火で進め
import UIKit
// イージングの種類
public enum EaseType: String {
case Empty = "null",
easeIn = "easeIn",
easeOut = "easeOut",
easeInOut = "easeInOut",
easeInCubic = "easeInCubic",
easeOutCubic = "easeOutCubic",
easeInOutCubic = "easeInOutCubic",
easeInQuart = "easeInQuart",
easeOutQuart = "easeOutQuart",
easeInOutQuart = "easeInOutQuart",
easeInQuint = "easeInQuint",
easeOutQuint = "easeOutQuint",
easeInOutQuint = "easeInOutQuint"
}
// イージング適用の値を出す構造体、メソッド
struct AnimationEasingValue {
public static func valueFunc(easeType: EaseType, t: CGFloat, b: CGFloat, c: CGFloat, d: CGFloat) -> CGFloat {
var ret: CGFloat = 0.0
var ti = t
switch easeType {
case .easeIn:
ti /= d
ret = c*ti*ti + b
case .easeOut:
ti /= d
ret = -c*ti*(ti - 2.0) + b
case .easeInOut:
ti /= d / 2.0
if ti < 1 {
ret = c / 2.0 * ti * ti + b
} else {
ti = ti - 1
ret = -c / 2.0 * (ti*(ti - 2) - 1) + b
}
case .easeInCubic:
ti /= d
ret = c*ti*ti*ti + b
case .easeOutCubic:
ti /= d
ti = ti - 1
ret = c*(ti*ti*ti + 1) + b
case .easeInOutCubic:
ti /= d/2.0
if ti < 1 {
ret = c/2.0*ti*ti*ti + b
} else {
ti = ti - 2
ret = c/2.0 * (ti*ti*ti + 2) + b
}
case .easeInQuart:
ti /= d
ret = c*ti*ti*ti*ti + b
case .easeOutQuart:
ti /= d
ti = ti - 1
ret = -c*(ti*ti*ti*ti - 1) + b
case .easeInOutQuart:
ti /= d/2.0
if ti < 1 {
ret = c/2.0*ti*ti*ti*ti + b
} else {
ti = ti - 2
ret = -c/2.0 * (ti*ti*ti*ti - 2) + b
}
case .easeInQuint:
ti /= d
ret = c*ti*ti*ti*ti*ti + b
case .easeOutQuint:
ti /= d
ti = ti - 1
ret = c*(ti*ti*ti*ti*ti + 1) + b
case .easeInOutQuint:
ti /= d/2.0
if ti < 1 {
ret = c/2.0*ti*ti*ti*ti*ti + b
} else {
ti = ti - 2
ret = c/2.0 * (ti*ti*ti*ti*ti + 2) + b
}
default:
ti /= d
ret = c*ti*ti*ti + b
}
return ret
}
}
```
さすがに全部のイージングは用意していないが、
列挙型と、関数中身のswitchのcaseを増やしていけば、イージングの種類をなんぼでも作れる。
さて、先ほどの、CircleAnimationViewを変えていこう。
```swift
//let angle = CGFloat(Double.pi * 2.0 / self.frameCountAll)
let angle = AnimationEasingValue.valueFunc(easeType: .easeOutQuint, t: CGFloat(self.frameCountNow), b: self.endAngleFirst, c: self.maxAngle, d: CGFloat(self.frameCountAll))
```
これで、円のアニメーションにもイージングをつけることができた。
これ、もちろん円だけでなくあらゆるもののアニメーションに応用できるので、
いろいろ使ってみてほしい。
UIView.animateメソッドでもイージングは効かせられるけど、なんか物足りないって方は、
Timerで、このイージングをつかってみるのもいいかもしれない。
ではまた。
#### 著者
著者名: みやびプリン
職業: フロントエンドエンジニア
プロフィール: 基本はイラストレイター（自称）だが、
本職は札幌市のフロントエンドエンジニア。
フロントエンドだけではなく、各種プログラミング言語に精通していると自負している。
HTML、CSSはもちろんのこと、JavaScript、TypeScript、PHP、Perl、Python、C#、Kotlin、Swift、Objective-Cなど多くの多くの言語に精通している他、
Movable Type、WordPressなど各種CMS、React.js、Angularなどフロントエンドフレームワークも扱える。
最近はUnityによる3Dコンテンツにも手を出している。
---
### A8.net、複数広告からランダムに一個表示 - PHP編
URL: https://highmoon-miyabi.net/blog/2018/02/17_000488.html
公開日時: 2018-02-17T14:31:49+09:00
更新日時: 2018-02-23T01:30:14+09:00
カテゴリ: PHP,SEO
概要: どうも、やっぱり駐車場が見つからないみや...
本文: どうも、やっぱり駐車場が見つからないみやびです。
札幌の中央区マジで見つからん、というかどこも空いてない・・・。
さて表記の件。
当サイトでもやっと、A8.net導入できました。
いや、これいいですわ。
ほんとに。どこ行っても、A8.netの名がでてくる理由がわかった気がする。
その自由度たるや。
もしかしたら、高度なコーディングやる人向けなのかもしれない。
（実は、アカウント自体はもっていたのだが、やり方がわからず、放置していた・・・。）
A8.netとは、まぁいわゆるアフィリエイトサイトです。
●【アフィリエイトA8.net】日本最大級の広告数・サイト数のアフィリエイトサービス
さて、今回は、
複数のA8.net広告をランダムに表示する、ってのをやってみようと思う。
PHP編です。
JSでもやれるのでそのうちね。
下記のようなPHPファイルを用意する。
```php
<?php
class AffiliateSingleStruct {
// 各広告単体の構造を定義したクラス
// 各プロパティ定義
public $title;
public $link;
public $imageMainUrl;
public $imageDotUrl;
public $width;
public $height;
/**
* コンストラクタ
*/
public function __construct( $title, $link, $imageUrl, $dotUrl, $width, $height) {
$this->title = $title;
$this->link = $link;
$this->imageMainUrl = $imageUrl;
$this->imageDotUrl = $dotUrl;
$this->width = $width;
$this->height = $height;
}
}
class AffiliateRondomizerView {
// アフィリエイトの元リンク
private static $BASE_URL = 'https://px.a8.net/svt/ejp?a8mat=';
// アフィリエイトリストから一件ランダムで抽出し、表示するメソッド
public static function viewAffList() {
echo self::setViewAff();
}
// アフィリエイト一覧を生成し、一件返すメソッド
private static function setViewAff() {
$usedArr = array();
// 下記の要領で各広告を定義していく
$usedArr[] = new AffiliateSingleStruct('広告のタイトル', 'メインのリンクの、変動する部分', 'メインの画像のURL', '1pxの計測用の画像のURL', 広告の横幅数値, 広告の縦幅数値);
// ........
return self::selectAff($usedArr);
}
// 配列から、一個抽出し、タグ文字列を返す
private static function selectAff($setArr) {
// 配列の個数を最高値に、ランダムの数値をとる
$setNo = array_rand($setArr, 1);
// 表示する広告のデータを変数に
$usedAff = $setArr[$setNo];
// HTMLタグに起こしていく
$ret = '<a href="' . self::$BASE_URL . $usedAff->link . '" target="_blank" rel="nofollow" style="display: block;">';
$ret .= '<img width="' . $usedAff->width . '" height="' . $usedAff->height . '" alt="' . $usedAff->title . ' - メイン" src="' . $usedAff->imageMainUrl . '" style="display: block;"></a>';
$ret .= '<img width="1" height="1" alt="' . $usedAff->title . ' - 計測" src="' . $usedAff->imageDotUrl . '" style="display: block;">';
return $ret;
}
}
```
39行目をコピーして、各広告を追加していく。
んで、使い方。
```php
<?php require_once('サーバールートからのパス/AffiliateRondomizerView.php');
AffiliateRondomizerView::viewAffList(); ?>
```
これで、複数広告の中から一個ランダムに表示することができる。
A8.netの場合、最初から複数広告のウィジェットがあるとかそういうのはないが、
一個一個単体であるから、こうやっていくらでもカスタマイズして表示することができる。
やっぱり、全部自動じゃなくて、自分で操作できるほうがいいよ。
A8.net、マジでおすすめです！
#### 著者
著者名: みやびプリン
職業: フロントエンドエンジニア
プロフィール: 基本はイラストレイター（自称）だが、
本職は札幌市のフロントエンドエンジニア。
フロントエンドだけではなく、各種プログラミング言語に精通していると自負している。
HTML、CSSはもちろんのこと、JavaScript、TypeScript、PHP、Perl、Python、C#、Kotlin、Swift、Objective-Cなど多くの多くの言語に精通している他、
Movable Type、WordPressなど各種CMS、React.js、Angularなどフロントエンドフレームワークも扱える。
最近はUnityによる3Dコンテンツにも手を出している。
---
### CSSの実寸サイズについて
URL: https://highmoon-miyabi.net/blog/2018/02/14_000462.html
公開日時: 2018-02-14T16:53:35+09:00
更新日時: 2018-02-15T00:24:24+09:00
カテゴリ: CSS
概要: どうも、 車買おうにも、駐車場が見つから...
本文: どうも、
車買おうにも、駐車場が見つからないみやびです。
ほんと、見つからないんだよ、誰か探して・・・。
さて、表記の件。
現在、僕は、ある案件で、Web上で実寸表示っていうのに挑戦しているのですが、
これまた、ひどく難しく、
ディレクターさんが見つけた、下記のサイトの方法しかないっぽいという結論に達しそうです。
●オンライン定規 - ULTRAZONE
●モニター画面に正確な原寸大/実物大を表示
それぞれ、基準をユーザーに指定してもらう方法です。
実は、IEだと、dpiの理論値を取得できるんですが、
他のブラウザではなぜか存在しない・・・。
しかし、なんとか自動でできないか、って探していたところ、
CSSのinという単位を発見した。
1インチの大きさを表示するっていう単位です。
これ使えばいけんじゃん！と思いました。
あるサイトでは、この単位のブロックの画面上のピクセル数との比率から、
dpiを取得しているサイトがいくつかでてきたのだ。
dpiわかればこっちのもんだ！
（Web上ではdpi＝ppiみたいなもんだし）
と喜んだのも束の間。
なんと、MacbookのRetinaでは、22mm前後、
iPhoneでは、15mm前後の実寸だった。
（1インチは、25.4mm）
全然1インチじゃないじゃーーーーん！！！
というか、全部96pxになりました。
そう、この単位、Webというかディスプレイが、96dpiであることが前提なのだ。
それもそのはず、CSSが策定されたころからの単位だし、
その頃のディスプレイは、99.9％、96dpiだったのだから。
（macは72dpi）
CSSには他にも、
・
cm...まんまcm。96dpiでは、約37.8px
・
mm...まんまmm。96dpiでは、約3.78px
・
pt...1/72inch。96dpiでは、約1.3334px
・
pc...12pt。96dpiでは、約16px
といった実寸単位が存在するが、
全部96dpiであることが前提である。
もう、ぬかよろこびさせんなよ・・・。
というか、頼むから、モニターの実寸取れるようにしてくれーーー！！！！
なんかいい方法ないか・・・。
やはり、あらゆる人がお手上げしてるのにはわけがあったか・・・。
#### 著者
著者名: みやびプリン
職業: フロントエンドエンジニア
プロフィール: 基本はイラストレイター（自称）だが、
本職は札幌市のフロントエンドエンジニア。
フロントエンドだけではなく、各種プログラミング言語に精通していると自負している。
HTML、CSSはもちろんのこと、JavaScript、TypeScript、PHP、Perl、Python、C#、Kotlin、Swift、Objective-Cなど多くの多くの言語に精通している他、
Movable Type、WordPressなど各種CMS、React.js、Angularなどフロントエンドフレームワークも扱える。
最近はUnityによる3Dコンテンツにも手を出している。
---
### 解像度について
URL: https://highmoon-miyabi.net/blog/2018/02/13_000461.html
公開日時: 2018-02-13T16:40:20+09:00
更新日時: 2018-02-14T14:19:36+09:00
カテゴリ: CSS,HTML5,JavaScript,プログラム全般,雑記
概要: どうも。 今回は、イラっとしたことを書い...
本文: どうも。
今回は、イラっとしたことを書いていこうかと。
みなさん、解像度っていうと、なんのことだと思うでしょうか？
デジカメやインターネットが普及しているこのご時世、だいたいこう答えるでしょう。
5メガピクセルとかいうあれ、1920 * 1200とか画面サイズ
と。
違うからね
それピクセル数（画素数）だからね
特にWebデザインやるうえでも、
紙やったことない、にわかデザイナーに多い。この勘違い。
マジでイラっとくる。
正確には、
解像度というのは、dpiとかppiのことです。
この二つは、ほぼほぼ同じ意味だが、
ピクセルという単位が多く使われている昨今、ppiの方が使うことが多いだろう。
ppiとは、
Pixel Par Inch（ピクセル・パー・インチ）のことで、
要は、1インチ（2.54cm）の中に何ピクセル含まれてますよ
というものだ。
当然、この数値が多いほど、画像は綺麗になる。
だって、同じ実寸の中に多くピクセルが含まれることになるからね。
その分詳細な画像になるってわけ。
デジカメの場合、だいたいは、72ppiで保存されてることが多く、
画素数が多かった場合は、そのままだととんでもない実寸の画像になる。
（ちなみに解像度が違ってもピクセル数は変わらないのでデータ容量は変わらない）
800万画素だった場合、横のピクセル数は3,456ピクセルなので、
そのまま印刷しようとすると、横121.92cmにもなる。
それを写真サイズ（L判）にするには、解像度を691ppiにすればいい。
調べものしてて、モニターの解像度をとってきたいのに、
出てくるのは、モニターサイズの取得方法ばかりで、
しかもそれを解像度です！ってほざいてる記事があまりにも多く、イラっときたので、
書きました。
して、なーんでか、今の時代、それで正しいみたいな風潮がある。
公式の記事でもそれで使われてたりする。
ざけんな！
正確な情報探せないじゃないか！
ということで、
みなさん勘違いしないでください。
解像度は、ピクセル数のことじゃないですから！！
#### 著者
著者名: みやびプリン
職業: フロントエンドエンジニア
プロフィール: 基本はイラストレイター（自称）だが、
本職は札幌市のフロントエンドエンジニア。
フロントエンドだけではなく、各種プログラミング言語に精通していると自負している。
HTML、CSSはもちろんのこと、JavaScript、TypeScript、PHP、Perl、Python、C#、Kotlin、Swift、Objective-Cなど多くの多くの言語に精通している他、
Movable Type、WordPressなど各種CMS、React.js、Angularなどフロントエンドフレームワークも扱える。
最近はUnityによる3Dコンテンツにも手を出している。
---
### グリムノーツ、ヒーラーのロールを極める
URL: https://highmoon-miyabi.net/blog/2018/01/18_000460.html
公開日時: 2018-01-18T11:59:33+09:00
更新日時: 2019-03-12T15:19:29+09:00
カテゴリ: 雑記
概要: どうも、久々です。 時計ウサギかわいいよ...
本文: どうも、久々です。
時計ウサギかわいいよね。
カオスの方もほしかったが、資金不足w
というか、穂里みきねさんの絵はサイコーです。
はい、というわけで、グリムノーツ、一年前からハマってます。
みやびは重課金者で、もう何十万つぎ込んだがわかりません。
（ダメ人間）
スマホのオンゲーです。
紹介ページはこちら
グリムノーツ
さて、そんなグリムノーツですが、
その中で、闘技場という、プレーヤー同士の対決ができる、オンゲーによくあるモードがあるのですが、
闘技場では、プレーヤーが操作はできなく、完全にAIにお任せになります。
そのAIの優先順位や行動のことは、ロールと呼ばれていて、
今回は、どういう仕組みか解析してみたのと、特にヒーラーのロールについて考察してみました。
基本の仕組みに関しては、下記エントリーをご参照のこと。（めんどい説明は人に頼る）
グリムノーツ｜ロールAI設定の優先度とロールの消費パターン
さて上記エントリーのように、
グリムノーツのAIは基本的に、1〜6のロールを総なめして、それを繰り返している。
んで、ヒーラーの行動で一番イラッとくるのは、回復が間に合わないことだ。
特に以下のように、【ヒーロー切り替え】を【常に】にしてるってとき、回復しないうちに替わったりする。
1.【HPが50%以下の味方】 + 【その場で必殺技】
2.【常に 】 + 【ヒーロー切り替え】
表のヒーローには、
【HPが50%以下の味方】 + 【ヒーロー切り替え】
とかにしてるパターンが多いだろう。
しかしこれだと、ヒーラーに切り替わった時、
必殺技ゲージが足りない時はロール1はスルーされ、回復をせずに次の【ヒーロー切り替え】のロールが発動してしまう。
これはマジでイラッとくる。
ここでタイミングよく回復してりゃ勝てたのに！なんて場面、いくつあったことか・・・。じゃぁどうすれば、回復をしっかりしてから、ヒーロー切り替えをしてくれるのか。
実は、【常に】以外にも、それ以下のロールを参照しないパターンが存在する。
条件に当てはまる間はそのロールを実行し続け、それより上位の条件が発生した時、上位の行動をしてくれるのだ。
というより、グリムノーツのAIは、条件が当てはまる間は、そのロールをし続けるのだが、それを出しやすい行動ロールがあるってこと。
条件が当てはまる間はそれをし続けやすい行動ロールは下記
・逃げる
・待機
・しばらく待機
・追いかける
・守る
・援護系
・攻撃系
必殺技は当然のことだが、ゲージが足りないと下のロールに向かうので、持続はほぼないと考えていいだろう。
攻撃系と援護系に関しては、持続しつつも、一発一発で、上位の条件を参照しやすいので、けっこう重宝する。
（フルコンボ系は行動が長いため、持続されやすいが、他の行動に切り替わりずらいのであまりオススメできない）
以上の事を考え、時計ウサギ（布告役）を例にヒーラーベストロールを組んでみた
1.【必殺技ゲージ2以上】 + 【その場で必殺技】
2.【必殺技ゲージ2以上】 + 【その場で必殺技】
3.【必殺技ゲージ2以上】 + 【その場で必殺技】
4.【HPが50%以下の味方】 + 【守る】
5.【常に】 + 【ヒーロー切り替え】
6.【常に】 + 【逃げる】
こうすれば、HPが50%以下の味方がいる間は切り替わらずに止まり、回復が完了次第、ヒーロー切り替えをしてくれるって寸法だ。
必殺技を三つ並べてるのは、必殺技ゲージが足りない時に、貯まるまで待たせるため。
ゲージ2以上なのは、なるたけ他のヒーローより、発動を優先させるためだ。
なぜ、4の行動が【守る】なのかというと、【追いかける】にすると5秒間追いかけてしまうので、
回復の機会を逃してしまう可能性が高いからだ。
【守る】なら、必殺技条件が整えばすぐに必殺技を実行してくれる。
時計ウサギは専用武器で防御がかなりあがるので、落ちる心配はそこまでない。
ブドゥール姫なんかだと、必殺技で防御が上がるので、同様の効果を期待できるだろう。
【近づいて援護】にしないのは、リジェネを効かせるため。
ルイスとかだと、専用武器で、"攻撃中効果R"スキルがあるため、【近づいて援護】でもいいだろう。
ちなみに、【逃げる】と、時間が3秒間と、ちょうどいい、【待機】は、【HPが50%以下の味方】には使えない。
いかがだったでしょうか？
闘技場は、戦闘力が高くないはずのパーティが、死ぬほど強かったり、
（僕は戦闘力詐欺って呼んでます）
最強ヒーローランキングに上がってないヒーローなのに、なぜかそいつに勝てないって現象が多々あります。
僕自身も、重課金者でwけっこう最強クラスのヒーロー揃ってるくせして、今まで全然勝てませんでした。
しかし、ロールの仕組みを理解して、組んでからは、けっこう勝てるようになってきました。
闘技場で勝てないって人は、ロールの仕組みを理解し、組んでみてはいかがでしょうか？
まぁ、結局、強いヒーローの方が勝てるんだけどね。
（台無し）
#### 著者
著者名: みやびプリン
職業: フロントエンドエンジニア
プロフィール: 基本はイラストレイター（自称）だが、
本職は札幌市のフロントエンドエンジニア。
フロントエンドだけではなく、各種プログラミング言語に精通していると自負している。
HTML、CSSはもちろんのこと、JavaScript、TypeScript、PHP、Perl、Python、C#、Kotlin、Swift、Objective-Cなど多くの多くの言語に精通している他、
Movable Type、WordPressなど各種CMS、React.js、Angularなどフロントエンドフレームワークも扱える。
最近はUnityによる3Dコンテンツにも手を出している。
---
### while文の危険性と対応（無限ループ防止）
URL: https://highmoon-miyabi.net/blog/2017/12/26_000459.html
公開日時: 2017-12-26T13:02:49+09:00
更新日時: 2020-11-13T12:06:11+09:00
カテゴリ: PHP,プログラム全般
概要: どうも。 仕事でかなり危ないミスをしてし...
本文: どうも。
仕事でかなり危ないミスをしてしまいました・・・。
関係各所、そして、お客様、本当に申し訳ございません。。。
さて、その原因となった、whileについて。
whileってのはとても便利な構造文で、
何回繰り返しすればわからない時に、条件に当てはまる間は、実行を繰り返すというもので、
おおよそほぼ全てのプログラム言語に存在するものだ。
例えば、運動会に来る家族の中で、パパがその日誕生日の家族を割り出し、その家族より前に入場してきた家族で、対象家族の子供と同じクラスの子供がいる家族を5組割り出すなんて時。
（ややこしくてすみませんが、whileをわざわざ使う状況を作りたかった）
```php
<?php
// 運動会の日
$sportsDay = strtotime(date('Y-m-d'));
$sportsMonth = date('m', $sportsDay);
$sportsDay = date('d', $sportsDay)
// 入場した家族を格納する
$familys = array();
// 対象家族を入れる
$targetFamily = array();
// 割り出した家族を格納する
$matchingFamilyArr = array();
// 家族を入場させる
$familys[] = array('papaBirthday' => '1988-01-06', 'childClass' => 'A');
$familys[] = array('papaBirthday' => '1985-05-03', 'childClass' => 'B');
$familys[] = array('papaBirthday' => '1979-03-16', 'childClass' => 'B');
$familys[] = array('papaBirthday' => '1980-11-18', 'childClass' => 'C');
$familys[] = array('papaBirthday' => '1975-02-16', 'childClass' => 'A');
// .
// .
// .
// 対象がこの家族だとする
$familys[] = array('papaBirthday' => '1990-12-26', 'childClass' => 'A');
// .
// .
// .
$familys[] = array('papaBirthday' => '1982-07-11', 'childClass' => 'C');
// ここから繰り返し実行
foreach ($familys as $listNo => $famiValue) {
// 誕生日を取得
$birsMonth = date('m', $famiValue['papaBirthday']);
$birsDay = date('d', $famiValue['papaBirthday']);
if ($birsMonth == $sportsMonth && $birsDay == $sportsDay) {
//今日が誕生日のパパ
$targetFamily = $famiValue;
// ここからwhile
$countPrev = 1;
while (count($matchingFamilyArr) < 6) {
// 対象となる家族が、五組になるまで繰り返す。
if (isset($familys[$listNo - $countPrev])) {
if ($famiValue['childClass'] == $familys[$listNo - $countPrev]['childClass']) {
$matchingFamilyArr[] = $familys[$listNo - $countPrev];
}
}
$countPrev++;
}
break;
}
}
```
今回は、PHPでの事故だったので、PHPで書いてみた。
（そして、サーバーサイドの言語の方が、事故の規模が大きいので・・・。）
while文で、こんな風にすれば、条件に見合う家族が、五組割り出せる。しかし、気付いた人はいると思うが、
もうこの時点で、無限ループの可能性が大いにある。
39行目のwhile文の条件だと、
対象家族の前に入場した家族の子供と同じクラスの子供が、五組以下なら、
while文は止まらなくなるのだ・・・。
無限ループは、特にPHPやサーバーサイドの言語の場合、
サーバーにタイムアウトの嵐を呼びこみ、とんでもないことになる。
今回は、かなりの時間、ダウンさせてしまった・・・。
これを防ぐとっておきの方法を、上司から教えてもらった。
カウンターをつける、だ。
while文の部分を下記のように直す。
```php
// 上記省略
// 上のスクリプトで定義している変数も使ってるので注意
// ここからwhile
$stopperCount = 0;
$countPrev = 1;
while (count($matchingFamilyArr) < 6 && $stopperCount そう、今回の条件なら、来た家族の組み数以上繰り返す必要はない。
つまり、その数を超えた回数を実行しようとしていたら、それは無限ループが発生しているってことだ。
なら、その回数以上になったら、whileを止める、って仕組みを作ればいい。
また、それプラス、万一のために、2000回を超えないようにしている。
こうすれば、よっぽどのことがない限り、バグはでない。
プログラマーとしては、常識なのかもしれませんが、
全然なってませんでした・・・。
今回はいい勉強になりました。
ほんと気をつけよう・・・。
#### 著者
著者名: みやびプリン
職業: フロントエンドエンジニア
プロフィール: 基本はイラストレイター（自称）だが、
本職は札幌市のフロントエンドエンジニア。
フロントエンドだけではなく、各種プログラミング言語に精通していると自負している。
HTML、CSSはもちろんのこと、JavaScript、TypeScript、PHP、Perl、Python、C#、Kotlin、Swift、Objective-Cなど多くの多くの言語に精通している他、
Movable Type、WordPressなど各種CMS、React.js、Angularなどフロントエンドフレームワークも扱える。
最近はUnityによる3Dコンテンツにも手を出している。
---
### 【Swift】Photos frameworkのPHAssetの情報取得
URL: https://highmoon-miyabi.net/blog/2017/12/13_000458.html
公開日時: 2017-12-13T10:30:00+09:00
更新日時: 2020-11-13T12:11:59+09:00
カテゴリ: Swift・Objective-C
概要: Swiftにおいて、Photos frameworkのPHAssetの様々な情報について、取得とおそらくの意味を探ってみました。いろいろと使い道ありそう。
本文: どうも、
昨日なんとか自学の卒検合格しました、みやびです。
あのクソ運動音痴の僕が取れたなんて、いまだに信じられん・・・！
あとは本免試験だけだ！！
さて、そんなどうでもいいことは置いておいて・・・。
表記の件、
載ってるエントリーがほとんどなく、ほんとに苦労したので、覚書的に。
もうね、ただ、写真の保存場所（パス）を取ってきたいだけなのに、えらい苦労した。
まずは下記の通りに、
まずは、カメラロールの全写真のPHAssetを取ってくる。
（iOS11以降は、info.plistの修正、もしかしたらPhotos frameworkの追加が必要なので、ご自分でググってやってください。）
```swift
import UIKit
// これ忘れるとそもそも使えない
import Photos
class ViewController: UIViewController {
// アラート変数
var photoAlert: UIAlertController? = nil
// PHAssetのリスト変数
var photoAssets: Array<PHAsset> = Array<PHAsset>()
override func viewDidLoad() {
super.viewDidLoad()
}
// カメラロールへのアクセス許可を確認。許可ないなら、アラートを出す
private func libraryRequestAuthorization() {
PHPhotoLibrary.requestAuthorization({ [weak self] status in
switch status {
case .authorized:
self.getAllPhotosInfo()
case .denied:
self.photoAlert = self.showDeniedAlert()
callBack()
case .notDetermined:
print("NotDetermined")
case .restricted:
print("Restricted")
}
})
}
// カメラロールへのアクセスが拒否されている場合のアラートを生成するメソッド
private func showDeniedAlert() -> UIAlertController {
let alert: UIAlertController = UIAlertController(title: "エラー", message: "「写真」へのアクセスが拒否されています。設定より変更してください。", preferredStyle: .alert)
let cancel: UIAlertAction = UIAlertAction(title: "キャンセル", style: .cancel, handler: nil)
let ok: UIAlertAction = UIAlertAction(title: "設定画面へ", style: .default, handler: { [weak self] (action) -> Void in
self.transitionToSettingsApplition()
})
alert.addAction(cancel)
alert.addAction(ok)
return alert
}
private func transitionToSettingsApplition() {
let url = URL(string: UIApplicationOpenSettingsURLString)
if let url = url {
UIApplication.shared.open(url, options: [:], completionHandler: nil)
}
}
// カメラロールにアクセスできるなら、そのまま、リストにAssetをぶち込む
private func getAllPhotosInfo() {
let assets: PHFetchResult = PHAsset.fetchAssets(with: .image, options: nil)
assets.enumerateObjects({ [weak self] (asset, index, stop) -> Void in
self.photoAssets.append(asset as PHAsset)
})
}
}
```
これで、self.photoAssetsにカメラロールの全写真のリストを取ってこれた。
さて、この写真の情報だが、まずデバイス内に保存されているディレクトリを取ってくるには、下記のやり方。
```swift
// あらゆるものを省略します
if let firstAsset = self.photoAssets[0] {
// directoryに、画像保存場所パスを入れる
let directory: String = firstAsset.value(forKey: "directory") as! String
}
```
このvalueメソッドは、オブジェクト内の、対象のkeyを取り出すことができる。
けっこう便利。
（ただ、do catch構文を使っても、エラーで止まるので注意）こんな簡単なの探すのに、えらい時間かかった。
副産物として、PHAssetで取ってこれる、写真情報っぽいkeyを全部知ることができたので、
列挙する。
```text
localResourcesState：？
avalanchePickType：？
groupingState：グループの状態？
groupingUUID：グループのID？
locationData：撮影地の緯度経度
savedAssetType：アセットのタイプ
videoCpVisibilityState：ムービーの状態？
cloudIsDeletable：クラウドで消してるかどうか？
sceneClassifications：？
distanceIdentity：？
imageOrientation：写真の向き
aspectRatio：写真のアスペクト比
uniformTypeIdentifier：？
persistenceState：？
thumbnailIndex：サムネイルの番号
directory：保存場所
filename：ファイル名
trashedDate：更新日？
adjustmentTimestamp：撮った日のタイムスタンプ？
thumbnailIdentifier：サムネイルのなんか
complete：完了？
ALAssetURL：アセットで取り出した時のパス
exifOrientation：写真の向き
originalColorSpace：色？
curationScore：？
cloudPlaceholderKind：？
hasAdjustments：揃ってるかどうか？
videoCpDurationValue：ムービーのなんか？
locationCoordinate：撮影場所のなんか？
playbackVariation：？
hasPhotoColorAdjustments：色のなんか情報あるか？
faceRegions：顔認証のなんか？
faceAreaMinX：顔認証の横座標の最小値？
faceAreaMaxX：顔認証の横座標の最大値？
faceAreaMinY：顔認証の縦座標の最小値？
faceAreaMaxY：顔認証の縦座標の最大値？
cloudIdentifier：クラウドのなんか？
faceAdjustmentVersion：顔認証のバージョン？
assetDescriptionWasSet：アセットの概要？
canUseLocationCoordinateForLocation：撮影地で使える？
isVideo：ビデオかどうか
isLoopingVideo：リピートビデオかどうか
isPhoto：写真かどうか
isAudio：音声データかどうか
isPhotoStreamPhoto：フォトストリームの写真かどうか
isCloudSharedAsset：クラウドでシェアしてるかどうか
isCloudPlaceholder：クラウドのなんか
isCloudPhotoLibraryAsset：クラウドライブラリのアセットかどうか
isStreamedVideo：ビデオストリームのかどうか
isHighFrameRateVideo：高解像度かどうか？
isHDVideo：HDビデオかどうか
isJPEG：JPEGかどうか
isRAW：RAWかどうか
isAnimatedGIF：アニメーションGIFかどうか
isPartOfBurst：？
isPartOfGroup：なんぞ？
isPrimaryInGroup：プライマリーのグループのものかどうか？
isPhotoIris：写真のなんか？
isPhotoIrisPlaceholder：写真のなんか？
canPlayPhotoIris：写真のなんか？
canPlayAutoloop：オートループできるかどうか
canPlayMirror：ミラー再生できるか？
canPlayLongExposure：長時間再生できるか？
canPlayLoopingVideo：ループ再生できるかどうか
isTimelapsePlaceholder：タイムラプスのなんか？
isIncludedInMoments：？
isIncludedInCloudFeeds：クラウドフィードを読みこんでいるかどうか？
trashed：捨てたかどうか？
canPerformSharingAction：？
metadataDebugDescription：メタデータのなんか？
variationSuggestionStatesDetails：？
playbackStyle：？
mediaType：メディアタイプ
mediaSubtypes：メディアのサブタイプ？
pixelWidth：横幅
pixelHeight：高さ
creationDate：作成日
modificationDate：更新日
location：撮影地
duration：？
hidden：非表示かどうか
favorite：？
burstIdentifier：？
burstSelectionTypes：？
representsBurst：？
sourceType：おそらく、オブジェクトにもともとあるプロパティ
hash：おそらく、オブジェクトにもともとあるプロパティ
superclass：おそらく、オブジェクトにもともとあるプロパティ
description：概要
debugDescription：デバッグの概要
```
横の解説いらないって？
しかも英語読めてない？？
まぁまぁ。
使えそうな情報いろいろありそうですね。
して、オブジェクトにもともと備わってるプロパティも入っちゃってるので、あしからず。
この情報を使って、いろいろできそうですね。
ではまた。
#### 著者
著者名: みやびプリン
職業: フロントエンドエンジニア
プロフィール: 基本はイラストレイター（自称）だが、
本職は札幌市のフロントエンドエンジニア。
フロントエンドだけではなく、各種プログラミング言語に精通していると自負している。
HTML、CSSはもちろんのこと、JavaScript、TypeScript、PHP、Perl、Python、C#、Kotlin、Swift、Objective-Cなど多くの多くの言語に精通している他、
Movable Type、WordPressなど各種CMS、React.js、Angularなどフロントエンドフレームワークも扱える。
最近はUnityによる3Dコンテンツにも手を出している。
---
### 【Swift】UINavigationController、戻り時に処理実行
URL: https://highmoon-miyabi.net/blog/2017/12/03_000457.html
公開日時: 2017-12-03T23:02:04+09:00
更新日時: 2020-07-22T01:23:22+09:00
カテゴリ: Swift・Objective-C
概要: どうも。 自学がやっと、残り一時間となっ...
本文: どうも。
自学がやっと、残り一時間となったみやびです。
仮免までめっちゃ長くかかったのに、
卒業までの教習、二ヶ月もかかっておらん。
仮免までどんだけ、なまけてたっちゅうねん。
さて、本題に移ろう。。。
表記の件、なんだかなかなかいい方法が見つからなかったので、最終的に自分で考えてやったヨ。
ってわけで備忘録。
まず、下記エントリーを参照して、Storyboad使わずにUINavigationControllerを配置する方法をやってください。
（本エントリーがやりたいことは、Storyboad使っても多分できますが、本エントリーでは、Storyboad無しの方法です）
●storyboardを使わず、Swiftでナビゲーションバーをつくる（UINavigationControllerとか）
では、流れの説明。
AとBのビューがありまして、
AからBビューを表示して、その後、
BからAに戻った時に、Aビューのメソッドを実行、ってことをします。
まずAビューの準備。
```swift
import UIKit
class AViewController: UIViewController {
// ボタンを用意
private var nextBtn: UIBarButtonItem!
override func viewDidLoad() {
super.viewDidLoad()
self.title = "Aビュー"
setNavigation()
}
// ナビゲーションの準備
func setNavigation(){
self.nextBtn = UIBarButtonItem(title: "Bビューへ", style: .plain, target: self, action: #selector(AViewController.toNextView(sender: )))
let font = UIFont.boldSystemFont(ofSize: 16)
self.nextBtn.setTitleTextAttributes([NSAttributedStringKey.font: font], for: UIControlState.normal)
self.navigationItem.rightBarButtonItem = self.nextBtn
}
func toNextView(sender: Any){
// この二行で、アニメーションつきで移動
let nextView = BViewController()
self.navigationController?.pushViewController(nextView, animated: true)
}
func backToTheFuture(){
// 戻ってきた時に実行するメソッド
print("懐かしいなをい")
}
}
```
お次は、次ビューの、Bビューだ。
```swift
import UIKit
class BViewController: UIViewController {
// ボタンを用意
private var prevBtn: UIBarButtonItem!
override func viewDidLoad() {
super.viewDidLoad()
self.title = "Bビュー"
setNavigation()
}
// ナビゲーションの準備
func setNavigation(){
self.prevBtn = UIBarButtonItem(title: "Aビューへ", style: .plain, target: self, action: #selector(BViewController.toPrevView(sender: )))
let font = UIFont.boldSystemFont(ofSize: 16)
self.prevBtn.setTitleTextAttributes([NSAttributedStringKey.font: font], for: UIControlState.normal)
self.navigationItem.leftBarButtonItem = self.prevBtn
}
func toPrevView(sender: Any){
// アニメーションつきで移動
let vcCount = (self.navigationController?.viewControllers.count)! - 2
let vcBefore = self.navigationController?.viewControllers[vcCount] as? AViewController
// ここで、前ページで実行したいメソッドを実行する
vcBefore?.backToTheFuture()
self.navigationController?.popToViewController(vcBefore!, animated: true)
}
}
```
見てもらえればわかると思うが、
戻る移動をする時に、戻り先のインスタンスを使い、メソッドを実行すればいい。
これ、戻り先の方で、戻ってきた時を検知して、そのビュー内で実行したかったのだが、
どうやってもうまくいかなかったので、この方法を編み出しました。
やっぱり、スクリプト言語に慣れた自分にとっては、難しいわ、オブジェクト指向・・・。
さて、まだまだ頑張るか。
#### 著者
著者名: みやびプリン
職業: フロントエンドエンジニア
プロフィール: 基本はイラストレイター（自称）だが、
本職は札幌市のフロントエンドエンジニア。
フロントエンドだけではなく、各種プログラミング言語に精通していると自負している。
HTML、CSSはもちろんのこと、JavaScript、TypeScript、PHP、Perl、Python、C#、Kotlin、Swift、Objective-Cなど多くの多くの言語に精通している他、
Movable Type、WordPressなど各種CMS、React.js、Angularなどフロントエンドフレームワークも扱える。
最近はUnityによる3Dコンテンツにも手を出している。
---
### Swift4、一回転のアニメーション
URL: https://highmoon-miyabi.net/blog/2017/12/02_000456.html
公開日時: 2017-12-02T16:46:26+09:00
更新日時: 2017-12-03T23:23:58+09:00
カテゴリ: Swift・Objective-C
概要: どうも、ずいぶんごぶさたです。 ここ最近...
本文: どうも、ずいぶんごぶさたです。
ここ最近、またSwiftやらせてもらってます。
しかも、上司から正式に、やってみて、言うわれてやっております。
でも本職やりながらですけどねw
さて、表記の件いってみようか。
ローディングのスピナー作る時とかよくやるよね。
だいたいは、下記の方法が出てくるだろう。
```swift
import UIKit
// ひとまず画面サイズをとっとく
let screenSize: CGSize = CGSize(width: UIScreen.main.bounds.size.width, height: UIScreen.main.bounds.size.height)
class ViewController: UIViewController {
// ひとまず回転画像インスタンスを定義
let loadingImage: UIImageView = UIImageView(image: UIImage(named: "loading_circle"))
override func viewDidLoad() {
super.viewDidLoad()
setUpLoading()
}
func setUpLoading(){
// ローディング画像の設定
self.loadingImage.frame = CGRect(x: (screenSize.width - self.loadingImage.frame.size.width) / 2, y: (screenSize.height - self.loadingImage.frame.size.height) / 2, width: self.loadingImage.frame.size.width, height: self.loadingImage.frame.size.height)
self.view.addSubview(self.loadingImage)
// UIViewのanimateメソッドを使ってやる
UIView.animate(withDuration: 2.0, animations: {
// アニメーションの最終状態
self.loadingImage.transform = CGAffineTransform(rotationAngle: CGFloat(Double.pi))
}, completion: ({ (openFlgIn) in
// アニメーション完了時になんかする。引数には完了できたかのBool値が入ってる
}))
}
}
```
今は、便利だね。animateってメソッド、デフォであるもんね。
昔そんな便利なの無かったよ。
んで、お気づきの方は気づいただろうが、
実はこれだと半回転しかしないし、リピートもされない。
CGFloat(Double.pi)には円周率が入ってるんだけど、
これだと半回転なのだ。
だったら、単純に2倍すればいいんじゃね？思うけど、
それだと、一回転して元の回転量（0）と認識され、アニメーションは実行されない。
他のサイトのエントリだったら、こっからいろいろやるんだけど、
（現在のtransformの回転値をとってなんだかんだしたりする）
みやびは、めんどうなので、タイマーを使って、
セルフアニメーションを作った。
それが下記になる。
```swift
import UIKit
// ひとまず画面サイズをとっとく
let screenSize: CGSize = CGSize(width: UIScreen.main.bounds.size.width, height: UIScreen.main.bounds.size.height)
class ViewController: UIViewController {
// ひとまず回転画像インスタンスを定義
let loadingImage: UIImageView = UIImageView(image: UIImage(named: "loading_circle"))
// タイマーと回転の変数を用意
var animationTimer: Timer? = nil
var rotate: CGFloat = 0
// 一回転にかかる秒数
let singleRotateTime: CGFloat = 4.0
// 一回のタイマー操作で回転する量
var singleRotateValue: CGFloat = 0
// 円周率から、度数法でいう1度の時のラジアン（円周率）を求めておく
let radSingle: CGFloat = CGFloat(Double.pi) / 180
override func viewDidLoad() {
super.viewDidLoad()
setUpLoading()
}
func setUpLoading(){
// ローディング画像の設定
self.loadingImage.frame = CGRect(x: (screenSize.width - self.loadingImage.frame.size.width) / 2, y: (screenSize.height - self.loadingImage.frame.size.height) / 2, width: self.loadingImage.frame.size.width, height: self.loadingImage.frame.size.height)
self.view.addSubview(self.loadingImage)
// 一回のタイマー操作で回転する量を入れる
self.singleRotateValue = CGFloat(Double.pi) * 2 / self.singleRotateTime / 30
// ↑円周率 × 2(一回転の量) ÷ 一回転の秒数（これで一回転の時の量） / 30フレーム（タイマー一回分の回転量）
// Timerメソッドを使ってやる
self.animationTimer = Timer.scheduledTimer(withTimeInterval: TimeInterval(0.033333333), repeats: true, block: {(Timer) in
// 現在の回転量から、一回分を足す
self.rotate += self.singleRotateValue
// 度数法の時何度か
let chkAngle = self.rotate / self.radSingle
// 360度以上（0度超えた）だったら、0に戻す
if chkAngle >= 360 {
self.rotate = 0
}
// Transformで、回転かける
self.loadingImage.transform = CGAffineTransform(rotationAngle: self.rotate)
})
}
}
```
これで、回転する画像ができたってわけだ。
回転を終えたければ、self.animationTimer.inalidate()を実行すればいい。
（ただし、一回これを実行すると、Timerを再定義しなければいけない）
Swiftは敷居が低めになっているとはいえ、オブジェクト指向なので、
やっぱり難しいです。
制約も多いし（制約と聞くとクラピカとゴンが目に浮かんだ）
でも、やってく中でいろいろ見つけてるので、また記事あげたいと思います。
（今回、えらいあっさり終えれた）
ではまた。
#### 著者
著者名: みやびプリン
職業: フロントエンドエンジニア
プロフィール: 基本はイラストレイター（自称）だが、
本職は札幌市のフロントエンドエンジニア。
フロントエンドだけではなく、各種プログラミング言語に精通していると自負している。
HTML、CSSはもちろんのこと、JavaScript、TypeScript、PHP、Perl、Python、C#、Kotlin、Swift、Objective-Cなど多くの多くの言語に精通している他、
Movable Type、WordPressなど各種CMS、React.js、Angularなどフロントエンドフレームワークも扱える。
最近はUnityによる3Dコンテンツにも手を出している。
---
### IEより凶悪なブラウザ
URL: https://highmoon-miyabi.net/blog/2017/11/11_000455.html
公開日時: 2017-11-11T22:40:11+09:00
更新日時: 2017-11-13T11:43:20+09:00
カテゴリ: CSS,IE,JavaScript
概要: どうも、繁忙期を越えても、やっぱり忙しい...
本文: どうも、繁忙期を越えても、やっぱり忙しいみやびです。
修正やら、改善やらでなかなか抜けれない・・・。
（おまえが修正必要なの書いてるからだヨ）
さて、今日は、愚痴90%な記事です。
表記の話だが、みなさんもご存知Internet Explorerと言えば、
言わずと知れた、凶悪ブラウザです。
僕ら年代のコーダーは、散々苦しめられました。特にIE6な。
それでも、最近は、Microsoftさんが、空気読んで強制アップデートをかけてくれたおかげで、
IE9以下はほとんど気にしなくても済むようになりました。
（みやびの勤める会社も、IE9以下は、ほぼほぼサポート外にしてる）
やっと平和が訪れたか・・・、と思うのも束の間、
もっと凶悪なブラウザがこの世に出現したんですよ。
Android標準ブラウザだ。
これは、Android OS4.X系に標準搭載されている、ブラウザ。
もう何世代も前のOSの搭載なので、だいぶユーザーは少なくなってきたが、
根強く残ってるんですよ、これが・・・。
このブラウザの嫌なところといえば、
CSS3の大半がサポートされていないこと。
スマホなのにだよ！？
CSS3なんて、今の時代、IEでさえ、だいぶサポートしてんのに（IE11は割とまともにサポートしてくれてる）、
時代遅れもいいとこです。
そして、Googleもサポート切っちゃってるしね。
改善は今後絶対行われない。
ただ、お客様にそんなこと強要はできないし、
ネットリテラシーがあまり高くないユーザーを無視するわけにはいかない。
というわけで、いろいろ調べて、
ユーザーエージェントで判別して、
Android OS4.4以下かつ、標準ブラウザを使ってたら、サポート外だぜ、的なアラートを出すという結論に至った。
$(function() {
var $usedUA = navigator.userAgent;
if ($usedUA.indexOf('Android') != -1) {
// Androidである
//Android Version取得
var androidPos = $usedUA.indexOf('Android') + 8;
var aVersion = $usedUA.slice(androidPos, androidPos + 5);
var aVersionArr = aVersion.split('.');
// OSのバージョンが低い
var $lowBrowserFlg = parseInt(aVersionArr[0]) これで、Android OS4.4以下かつ標準ブラウザを対象に処理ができるようになった。
アラートを出すなりなんなりすればいい。
これでAndroidは大丈夫だろう。
そう思ったのも束の間。
そう、本エントリーは、こっからが本題。（前置きなg以下ry）
Android標準ブラウザよりもっと凶悪で強烈なブラウザがいた。
Yahoo!ブラウザー（Android版）である。
何を隠そう、このブラウザ、
Chromeなどの大手ブラウザと違い、
その機種に搭載されている、デフォルトブラウザと同じ表示をしやがるのだ。
ということは、古いAndroid OSの機種は当然、
標準ブラウザと同じ表示となる。
（新しいOSで、Chromeが標準搭載の機種は、Chromeと同じ表示）
おそらくアプリのWebビューという技術を使っている。そう考えれば標準ブラウザと同じ表示になるのはうなづける。
ふざけんなって。
せっかく標準ブラウザを排除したと思ったら、今度は、表示は一緒なのに、ユーザーエージェントが違うブラウザが存在したってわけだ。
つまり、新たなユーザーエージェントの分岐をする必要があるってこった。
コーダー泣かせもいいところだ。
というわけで、先ほどのJSに、Yahooブラウザの処理も合わせたのが、こちら。
$(function() {
var $usedUA = navigator.userAgent;
if ($usedUA.indexOf('Android') != -1) {
// Androidである
//Android Version取得
var androidPos = $usedUA.indexOf('Android') + 8;
var aVersion = $usedUA.slice(androidPos, androidPos + 5);
var aVersionArr = aVersion.split('.');
// OSのバージョンが低い
var $lowBrowserFlg = parseInt(aVersionArr[0]) 対象は、Android OS4.4以下かつ、Yahoo!ブラウザー、または、Android OS4.4以下かつ標準ブラウザー
って感じ。
Yahoo!ブラウザの質が悪いのは、表示だけでなく、
なまじ大手プロバイダの名を冠してるので、
ユーザー数が意外に多いことだ。
（どうせ広告とかでいっぱい出してんでしょ）
また、いろいろな便利機能があるためか、評判も割といいってのも質が悪い。
だけどさぁ、
だったら、表示なんとかしろよ！
せめて、Chrome並みになるようによ！！！
というわけで、愚痴90％なエントリーでした。
#### 著者
著者名: みやびプリン
職業: フロントエンドエンジニア
プロフィール: 基本はイラストレイター（自称）だが、
本職は札幌市のフロントエンドエンジニア。
フロントエンドだけではなく、各種プログラミング言語に精通していると自負している。
HTML、CSSはもちろんのこと、JavaScript、TypeScript、PHP、Perl、Python、C#、Kotlin、Swift、Objective-Cなど多くの多くの言語に精通している他、
Movable Type、WordPressなど各種CMS、React.js、Angularなどフロントエンドフレームワークも扱える。
最近はUnityによる3Dコンテンツにも手を出している。
---
### SEOのためのsectionタグの使い方（アウトラインの作り方）
URL: https://highmoon-miyabi.net/blog/2017/10/27_000453.html
公開日時: 2017-10-27T10:55:41+09:00
更新日時: 2017-10-27T15:05:42+09:00
カテゴリ: HTML5,SEO
概要: タイトル、いつになく長いな。 完全にタイ...
本文: タイトル、いつになく長いな。
完全にタイトル通りSEO狙ってるよね。
さて、今回はちょっと記事自体も長くなります。
特に前置き長いので、御託はいいからさっさと本題を、って方はこちら。
今回はSEOの話。
当サイトでは、一貫してSEOこだわってきました。
（作品集サイトちゃうんかい）
SEO
とは"Search Engine Optimization"の略で、
検索エンジン最適化の意。検索結果でWebサイトがより多く露出されるために行う一連の取り組みのことを指す。
詳しくは下記エントリーをご参照されたし。
●SEO（検索エンジン最適化）とは
SEOにおいて重要なのは、一番はコンテンツの充実なのだが、
コンテンツを配信していく上で、大事なのは、サーチエンジンにしっかりと、ページの構造を明示することだ。
とりわけ、そのためには、セマンティクスなコーディングもそうなのだが、
"アウトライン"を考慮したコーディングが必要になってくる。
アウトラインとは、
サーチエンジンがHTMLを解析するにあたっての、
ページの構造を示すものである。
わかりやすく本で例えると、
本には、本自体のタイトルがあり、
章、節、段落、単位が小さくなっていく構造がある。
ウェブページも本のように、
サイトタイトル、ページタイトル、大見出し、中見出し、小見出し、
という構造で書くのが望ましいのだが、その構造のことをアウトライン、と呼ぶのだ。
さてさて、こっからが本記事の内容に入ってくる。
（今回は前置きも重要だった）
HTML5以前では、アウトライン形成は、h1～h6タグのみで行うことができた。
例えば、下記のHTMLの場合、
<html>
<head>
<title>ページタイトル | サイトタイトル</title>
</head>
<body>
<h1>サイトタイトル</h1>
<h2>ページタイトル</h2>
<p>ページ概要だよ</p>
<h3>大見出し01</h3>
<p>大見出し01の内容だよ</p>
<h4>小見出し</h4>
<p>小見出しの内容だよ</p>
<h3>大見出し02</h3>
</body>
</html>
```
アウトラインは次のようになる。
1.サイトタイトル h1
1.ページタイトル h2
1.大見出し01 h3
1.小見出し h4
2.大見出し02 h3
```
生成ルールとして、
hの数字を増やすと、アウトラインを一段階下げることができる。
そうやって、ページの構造を作ることができる。
非常にわかりやすい。
だが、後述するが致命的な弱点がある。
HTML5からはsection、asideなどの新要素（セクショニング要素）でも、アウトラインを生成することが可能となった。
<html>
<head>
<title>ページタイトル | サイトタイトル</title>
</head>
<body>
<h1>サイトタイトル</h1>
<section>
<h2>ページタイトル</h2>
<p>ページ概要だよ</p>
<section>
<h3>大見出し01</h3>
<p>大見出し01の内容だよ</p>
<h4>小見出し</h4>
<p>小見出しの内容だよ</p>
</section>
<h3>大見出し02
</section>
</body>
</html>
```
とマークアップした場合、
1.サイトタイトル h1
1.ページタイトル h2
1.大見出し01 h3
1.小見出し h4
2.大見出し02 h3
```
のようなアウトラインになる。
（というか上記と同じアウトライン）
ブロック単位で明確にアウトラインを生成できるのだ。
しかし、ここで一つ疑問が浮かぶ。
hタグでアウトラインを作れるなら、わざわざsection使う必要無くね？
だ。
本エントリーの本題はまさにここだ。
（やっぱ前置き長ぇ）
確かに、役割が明確に分かれてる分、
（sectionはアウトラインの生成、articleは独立できる内容、asideはページ内容と直接関係がない内容、とか）
各セクショニング要素は価値的に見える。
そして、視覚的にも検索エンジン的にも、ブロック単位で明確化できる。
だが、ことアウトラインの生成はhタグで元からできたのだ。
アウトライン生成のみのsection要素は、
使う必要あるのか。
sectionはいらない子・・・、
なんてことはない！
section要素は、h要素の弱点を見事に解決してくれる。
h要素の最大の弱点は、
二段飛ばしはできない だ。
例えば
<html>
<head>
<title>ページタイトル | サイトタイトル</title>
</head>
<body>
<h1>サイトタイトル</h1>
<h2>ページタイトル</h2>
<p>ページ概要だよ</p>
<h4>大見出し01</h3>
<p>見出しの内容01だよ</p>
<h6>小見出し</h4>
<p>小見出しの内容だよ</p>
</body>
</html>
```
のように数字の二段以上飛ばしは推奨されない。
また、
<html>
<head>
<title>ページタイトル | サイトタイトル</title>
</head>
<body>
<h1>サイトタイトル</h1>
<h2>ページタイトル</h2>
<p>ページ概要だよ</p>
<h3>大見出し01</h3>
<p>見出しの内容01だよ</p>
<h4>小見出し</h4>
<p>小見出しの内容だよ</p>
<h5>ミジンコ見出し</h5>
ミジンコ見出しの内容だよ</p>
<h3>大見出し02</h3>
<p>上に二個戻りたい</p>
<h4>小見出し 2-1</h4>
<p>あれれ？</p>
</body>
</html>
```
と、一度見出しレベルを5まで下げた後に見出しレベルを二つ上げても、アウトラインは下記のようになる。
1.サイトタイトル h1
1.ページタイトル h2
1.大見出し01 h3
1.小見出し h4
1.ミジンコ見出し h5
2.大見出し02 h3
1.小見出し 2-1 h4
```
つまり、見出しレベルを何段飛ばして上げても、上がるアウトラインは一個だけなのだ。
これは、もう、h6まで下げようものなら、二度とh2の見出しレベルには戻ることはできないだろう。（h5、h4、h3と、一個ずつ戻すのはできる。）
そうなるともう、文章構造の生成が不自由でしかたなくなる。
h5から、またh2に一気に戻したいなんてよくあるしね。
泣き寝入りしてマークアップするしかないか・・・。
いやいやそんなことするこたない、
これを可能にするのが、HTML5のセクショニング要素なのだ！
どういうことかというと、
<html>
<head>
<title>ページタイトル | サイトタイトル</title>
</head>
<body>
<h1>サイトタイトル</h1>
<section>
<h2>ページタイトル</h2>
<p>ページ概要だよ</p>
<h3>大見出し01</h3>
<p>見出しの内容01だよ</p>
<h4>小見出し</h4>
<p>小見出しの内容だよ</p>
<h5>ミジンコ見出し</h5>
<p>ミジンコ見出しの内容だよ</p>
<section>
<h3>大見出し02</h3>
<p>上に二個戻りたい</p>
<h4>小見出し 2-1</h4>
<p>でたーーー！</p>
</section>
</section>
</body>
</html>
```
このHTMLは
1.サイトタイトル h1
1.ページタイトル h2
1.大見出し01 h3
1.小見出し h4
1.ミジンコ見出し h5
2.大見出し02 h3
1.小見出し 2-1 h4
```
というアウトラインになる。
つまり、section要素を使うと直近の親section要素までアウトラインを戻すことができる、のだ！
（戻すというか、section要素はsection要素同士の構造でしかアウトラインを生成しない。）
他のセクショニング要素との混合も可能だ。
sectionの中に、articleを入れれば、親sectionの下にarticleのアウトラインができる、
って構造にできる。
こうすれば、こちらが意図した文章構造を検索エンジンに伝えることが容易に可能なのだ。
つまり、sectionの使い道はまさに、ここにあると言っても過言ではない。
文章構造が自由自在なのだ。
今回のことを発見し、理解できたきっかけは、
HTML5.1の勧告だ。
それまでは、HTML5では、
「セクショニング要素が出現するたびに、h1使っていいよ」
って仕様だったのだが、
HTML5.1からは、
「やっぱ、セクショニング要素使っても、文章の見出しレベルに沿ってhタグ使ってね」
って仕様になったのだが（従来のマークアップルールに戻った）
当サイトも含め、僕がやってた仕事では、
全部HTML5方式でコーディングしてたので、まいったな・・・と思いながらも、
HTML5.1に合わせていった。
その中で、そうかこういう使い道があったのか、と気づくにいたったのだ。
その結果、仕事でやっているサイトの検索順位が、大手競合を抜いてしまったのだ。（けっこうビッグキーワードで）
昨今、そこまで重要視されないSEOだが、
自然検索での順位上昇は、お金をかけないで流入する大事な要素だ。
それを上げるのはあくまで、正しい文章構造のマークアップなのではないだろうか？
これからも、地道かもしれないが、正しいコーディングを心がけていきたい。
（今回綺麗にまとめたなー）
#### 著者
著者名: みやびプリン
職業: フロントエンドエンジニア
プロフィール: 基本はイラストレイター（自称）だが、
本職は札幌市のフロントエンドエンジニア。
フロントエンドだけではなく、各種プログラミング言語に精通していると自負している。
HTML、CSSはもちろんのこと、JavaScript、TypeScript、PHP、Perl、Python、C#、Kotlin、Swift、Objective-Cなど多くの多くの言語に精通している他、
Movable Type、WordPressなど各種CMS、React.js、Angularなどフロントエンドフレームワークも扱える。
最近はUnityによる3Dコンテンツにも手を出している。
---
### Gulp、Sassのコンパイル高速化と一行化
URL: https://highmoon-miyabi.net/blog/2017/10/10_000452.html
公開日時: 2017-10-10T16:13:53+09:00
更新日時: 2017-10-11T19:08:24+09:00
カテゴリ: CSS,JavaScript
概要: どうも、ずいぶんご無沙汰でした。 やっと...
本文: どうも、ずいぶんご無沙汰でした。
やっと繁忙期抜けれた・・・。
さて、最近はGulpやること多いのですが、
Sassのコンパイルが遅いので、速くできないか？との要望があったので、
そこに関して。
今まで、compassを通していたのでやたらと時間かかっていたってことが判明した。
（下手したら、2分くらいかかる）
そこで、LibSassというのを使えば速くなることがわかたったので、下記エントリーを参考に導入してみました。
●gulpのsass,scssのコンパイルの高速化（LibSassをつかって)
いやはや速くなった速くなった。
500ms（0.5秒）くらいで終わるようになった。
しかし、compassを通さないので、ある困ったことになった。
compassが使えないのはまぁいいとして、
config.rbを通せない
のだ。
これ、何が困るかというと、
書き出しの仕方が、操作しずらくなる。
一応、gulp-sassにもオプションで基本の書き出し形式は選択できるのだが、
僕の書き出し環境はちょいと改造して、一行化してるので、
（to_css.rbを改造してる）困ったことになったわけだ。
いや、compressed形式で一行化しろって話だが、気持ち悪いんだもん、compressed。
LibSassで、config.rbを通すようにする方法を探すもなかなか見つからなかった・・・。
じゃぁ、どうするって、自作プラグインで一行化すればいい。
下記のようなjsファイルを、gulpfile.jsと同じ階層に置く
var through = require('through2');
var PluginError = require('gulp-util').PluginError;
var PLUGIN_NAME = 'gulp-css-comp-add';
module.exports = function() {
var transform = function(file, encoding, callback) {
if (file.isNull()) {
return callback(null, file);
}
if (file.isStream()) {
this.emit('error', new PluginError(PLUGIN_NAME, 'Streams not supported!'));
}
// プラグインの処理本体
if (file.isBuffer()) {
var submitContents = '';
// ファイルの内容をcontentsに読み込み
var contents = String(file.contents);
// タブを削除
contents = contents.replace( /\t/g, "");
contents = contents.replace(/\/\*([\s\S]*?)\*\//g, "");
// 改行別に処理
var breakArr = contents.split("\n"),
lineFlgPHP = false,
lineFlgJS = false;
// 一行化
breakArr.forEach(function(val, index){
var innerLastText = val;
// 行頭スペースを削除
innerLastText = innerLastText.replace( /^\s+/g, '');
submitContents += innerLastText;
});
// breakArr.forEach END
// 複数セレクタのスペーストル
if (submitContents.indexOf(", ")) {
submitContents = submitContents.replace(/\, /g, ',');
}
// セレクタのスペーストル
if (submitContents.indexOf(" {")) {
submitContents = submitContents.replace(/ \{/g, '{');
}
// プロパティのスペーストル
if (submitContents.indexOf(": ")) {
submitContents = submitContents.replace(/\: /g, ':');
}
// 編集した内容を出力
file.contents = new Buffer(submitContents);
// 処理の完了を通知
return callback(null, file);
}
this.push(file);
callback();
};
return through.obj(transform);
};
```
さて、どう使うかはgulpfile.jsにて下記のようにする。
（必要なパッケージはインストールしているとして話進めます）
// 各npm読み込み
var gulp = require('gulp'),
sass = require('gulp-sass'),
cssComp = require('./gulp-css-comp-add');
// Sassコンパイル
gulp.task('sass-comp', function () {
// 出力のパスとかに関しては、環境によって変える
gulp.src('scss/**/*.scss')
.pipe(
// 書き出し形式は、expandedにする
sass({outputStyle: 'expanded'}))
// ここで、自作プラグインを通す
.pipe(cssComp())
.pipe(gulp.dest('css'));
console.log('SASSをコンパイルしました。');
return merge(tasks);
});
gulp.task('watch', function() {
gulp.watch('sass/**/*.scss', ['scss']);
});
```
watchに関してはおまけですね。
これで、速いし一行化もできました！
やっぱパッケージ一個で片付けようってのはムシがいい話なんだろうかね。
また一つ勉強になりました。
#### 著者
著者名: みやびプリン
職業: フロントエンドエンジニア
プロフィール: 基本はイラストレイター（自称）だが、
本職は札幌市のフロントエンドエンジニア。
フロントエンドだけではなく、各種プログラミング言語に精通していると自負している。
HTML、CSSはもちろんのこと、JavaScript、TypeScript、PHP、Perl、Python、C#、Kotlin、Swift、Objective-Cなど多くの多くの言語に精通している他、
Movable Type、WordPressなど各種CMS、React.js、Angularなどフロントエンドフレームワークも扱える。
最近はUnityによる3Dコンテンツにも手を出している。
---
### ドメイン取得しました。
URL: https://highmoon-miyabi.net/blog/2017/09/26_000448.html
公開日時: 2017-09-26T01:11:03+09:00
更新日時: 2017-10-10T18:29:55+09:00
カテゴリ: リダイレクト,雑記
概要: 画像は完全に釣りだけどな。 このモデルさ...
本文: 画像は完全に釣りだけどな。
このモデルさんもそうだし、
ぱくたそさんの写真素材の女の子可愛い子そろってます。
表記の通り、ドメインやっと取得しました。
今まではロリポドメインだったけど、
思い切って、取得しました。
というか、今、ドメイン取得、こんなに安いのね・・・。
（.com、1年間で1,000円って、大人にとっちゃはした金よ）
さて、なんでいきなりドメイン取得したのかというと、
きっかけは、SSL。
Google Chromeさんが、数世代後、それまでform送信があるページでのみ、
SSL以外の警告をだしていたのが、全ページで警告出すとか言い出しやがったもんだから、
そろそろやらねばあかんか、と乗り出した次第です。
ロリポドメインだと、SSLは、共有SSLしか使えないのと、
今年7月あたりから、独自ドメインには無料でSSL効かせられるようになったので、
（ロリポップ最高です）
それに乗じてです。
しかし、ウェブマスターツールの、URL移行がうまくいかず、というか、
時間かかりすぎて、しかもアクセス減ってるから、少し心配だ・・・。
それまでの3/4しかこない。
（一日何人来てるかは言わない。←プライド）
URL移行、全部終わったら、回復するんだろうな、本当に。
とまぁ、やっとちゃんとしたサイトになりましたね。
（何年かかってるんだよ）
というわけで、完全に独り言でした。
#### 著者
著者名: みやびプリン
職業: フロントエンドエンジニア
プロフィール: 基本はイラストレイター（自称）だが、
本職は札幌市のフロントエンドエンジニア。
フロントエンドだけではなく、各種プログラミング言語に精通していると自負している。
HTML、CSSはもちろんのこと、JavaScript、TypeScript、PHP、Perl、Python、C#、Kotlin、Swift、Objective-Cなど多くの多くの言語に精通している他、
Movable Type、WordPressなど各種CMS、React.js、Angularなどフロントエンドフレームワークも扱える。
最近はUnityによる3Dコンテンツにも手を出している。
---
### Gulp、HTMLの圧縮（PHPer向き、PHP入りHTMLの圧縮）
URL: https://highmoon-miyabi.net/blog/2017/05/18_000447.html
公開日時: 2017-05-18T01:31:52+09:00
更新日時: 2019-03-12T15:14:49+09:00
カテゴリ: HTML5,JavaScript,PHP
概要: どうも、目覚めた人類こと、みやびプリンで...
本文: どうも、目覚めた人類こと、みやびプリンです。
（↑いっぺん死んでこい）
最近、Gulp挑戦しております。
扱えたらなまら便利よね。
その中で、保存時にファイルを圧縮なんてやれるから便利で、
HTMLの圧縮もしちゃおう、ということで、
調べて出る中で、使ってて一番いいと思ったのは下記だ。
gulp-htmlmin
HTML整形を一番まともにしてくれる。
gulp-minify-html もあるが、
属性のダブルクォーテーションが消えたりと、目も当てられない状態になった。
だが、このgulp-htmlmin、非常に不満である。
何が不満というかダメってと、下記になる。
・PHP、JavaScript（以下JS）部分が圧縮されない。
・スクリプトの複数行コメントを使うと、うまくいかない。
・閉じタグのみの場合、消される。
まぁ、上の二つはいいとしよう。
スクリプト部分なんて、ユーザーからは見えんし。
だが、最後のやつが、非常にやっかい！！
通常のHTMLならいいが、うちの会社は、PHPのフレームワークでパーツ分けをしているため、
閉じタグのみが存在するなんてしょっちゅうだ。
PHPerのみなさんもそういう人ほとんどでしょう。
PHP入りのHTMLをうまく圧縮する方法を探してたでしょう。
じゃぁ、どうするかって？
プラグインを自作するしかない。自作してnpmにあげたったよ。
npm install gulp-phtml-simple-comp
```
でインストールできるからじゃんじゃん使ったってください。
使い方はいたってシンプル。
下記のようにタスクを書く。
※基本的なGulpの使い方はこちら
var gulp = require('gulp'),
htmlComp = require('gulp-phtml-simple-comp');
gulp.task('build-html', function() {
gulp.src('./root/uncomp/**/*.php')
.pipe(htmlComp())
.pipe(gulp.dest('./root'));
});
gulp.task('default', ['build-html']);
```
もうね、php入りのhtmlの場合さ、コードチェックとかいらんのよ。
そんまま一行化せっちゅーねん。
シンプルにいこうぜ。
というわけで、やっていることとしては、下記だ。
・行頭のタブと空白削除
・スクリプト内一行コメント削除（//から始まるやつ）
・複数行コメント削除（/**/とか<!-- -->）
※ただし、意図的なHTMLコメント（たとえば、</li><!-- --><li> など）、
HTMLコメントの間にPHPが挟まっている場合、
条件付きコメントは削除対象外
・<?phpaaaとかにならないように、<?phpを調整
・そのまま一行化
他余計なことは一切やっていない。
シンプルが一番だよ。JSとかなら、むしろいろいろ処理してくれて嬉しいが、
こと、HTMLに関しては変数名とかあるわけでもなし。
構文間違っている時に自動で修正されてしまったら、
スクリプトのために意図的にやっていることまで直ってしまう。
というわけで、じゃんじゃん使ってください。
そして当サイトの拡大を
#### 著者
著者名: みやびプリン
職業: フロントエンドエンジニア
プロフィール: 基本はイラストレイター（自称）だが、
本職は札幌市のフロントエンドエンジニア。
フロントエンドだけではなく、各種プログラミング言語に精通していると自負している。
HTML、CSSはもちろんのこと、JavaScript、TypeScript、PHP、Perl、Python、C#、Kotlin、Swift、Objective-Cなど多くの多くの言語に精通している他、
Movable Type、WordPressなど各種CMS、React.js、Angularなどフロントエンドフレームワークも扱える。
最近はUnityによる3Dコンテンツにも手を出している。
---
### Gulp、watchの自動起動（Windows）
URL: https://highmoon-miyabi.net/blog/2017/04/24_000446.html
公開日時: 2017-04-24T15:11:49+09:00
更新日時: 2017-05-01T10:41:06+09:00
カテゴリ: JavaScript,プログラム全般
概要: どうも、 最近、Gulpをちょいちょいや...
本文: どうも、
最近、Gulpをちょいちょいやっています。
以前の記事で、てきとうにRubyだとか言ってしまったが、
JavaScript（以下JS）でしたね。
本当にごめんなさい。
NodeJSで動かします、Gulpは。
サーバー側（というかコマンドライン）で動かすと、ファイル出力もできるのな。
マジですごいぜ、JS。
さて、表記をいってみよう。
Gulp入れても、マシンを立ち上げて、
ファイル変更の監視を起動するのは、少々面倒だ。
そこで、それを自動化しようってのが今回のエントリー
今回のは、Windows Script Host（以下WSH）のjScriptを使ってやるので、
Windows限定です。
Macでも、AppleScript、JXAを使えば同じことができるはず。（多分WSHより簡単にな）
WSHとは、OSの操作を、スクリプトから自動実行できるってやつ。
Gulpは導入済み、watchで監視もできること前提で話進めますよー
（Gulpの導入、ファイル監視、のやり方は左記リンク）
まず適当に、テキストエディタにて、下記スクリプトを書いて、
てきとうに名前をつけて保存する。
（ファイルの保存ディレクトリは、ドライブルートからたどっても半角英数字のみのパスになるような場所が望ましい。なぜなら、jScriptがShift-jisじゃないとうまく動かせないから）
// Get WSH Object
var $wsco = WScript.CreateObject('Shell.Application'),
$sh = new ActiveXObject('WScript.Shell'),
$cmdApp = null;
var $cmdSrc = "\"C:/Windows/System32/cmd.exe\"";
function $appStartFunc(startFlg, cmdFlg){
if (startFlg) {
// cmp.exe Start
$sh.Run($cmdSrc, 1);
} else {
if ($cmdApp) {
var result = $cmdApp.Terminate();
}
}
}
function $connectFunc() {
var locator = WScript.CreateObject('WbemScripting.SWbemLocator.1');
return locator.ConnectServer();
}
// cmd Insert in Value
function $searchingProcessFunc(){
var service = $connectFunc();
var set = service.ExecQuery('select * from Win32_Process');
for (var i = new Enumerator(set); !i.atEnd(); i.moveNext()) {
var p = i.item();
if (p.Caption == 'cmd.exe'){
$cmdApp = p;
break;
}
}
}
$searchingProcessFunc();
// Last Func
function $nextActionFunc() {
// Moved First View at CommandPronpt
$sh.AppActivate($cmdApp.Caption);
// To hit keys
var stKeys = "cd C:\\Program Files\\nodejs\\".split('');
var datKey = "nodevars.bat".split('');
for (var i = 0; i < stKeys.length; i++) {
$sh.SendKeys(stKeys[i]);
if (stKeys.length == i +1) {
$sh.SendKeys('{ENTER}');
WScript.Sleep(200);
}
}
for (var iD = 0; iD < datKey.length; iD++) {
$sh.SendKeys(datKey[iD]);
if (datKey.length == iD +1) {
$sh.SendKeys('{ENTER}');
WScript.Sleep(200);
}
}
$sh.SendKeys('D');
$sh.SendKeys(':');
$sh.SendKeys('{ENTER}');
WScript.Sleep(200);
var gulpSrc = "cd D:\\save_data\\var\\www\\gulp_files".split('');
for (var iG = 0; iG < gulpSrc.length; iG++) {
$sh.SendKeys(gulpSrc[iG]);
if (gulpSrc.length == iG +1) {
$sh.SendKeys('{ENTER}');
WScript.Sleep(200);
}
}
var gulpWatchCmd = "gulp watch".split('');
for (var iGS = 0; iGS < gulpWatchCmd.length; iGS++) {
$sh.SendKeys(gulpWatchCmd[iGS]);
if (gulpWatchCmd.length == iGS +1) {
$sh.SendKeys('{ENTER}');
WScript.Sleep(200);
}
}
WScript.Sleep(5000);
$sh = null;
}
if ($cmdApp) {
// Starting Cmd
$nextActionFunc();
} else {
// Start & Set Values
WScript.Echo('Not Start');
$appStartFunc(true);
$searchingProcessFunc();
WScript.Sleep(5500);
$nextActionFunc();
}
```
スクリプトの細かい説明はここでは省く。
環境によって違う部分だけ、説明する。
まず、5行目のコマンドプロンプトのパス
43行目、これは、コマンドプロンプトをNodeJSモードに変えるためのDatファイルの実行。
この次の行のforで、コマンドを実行している。
このコマンドは、コマンドプロンプトを実行して、すぐに、
gulpコマンドが実行できる状態ならやる必要がない。
（npmのインストール状況などで変わるっぽい）
素のコマンドプロンプトで実行できないときは、
NodeJSを通す必要がある。
62～67行目、Gulpをローカルインストールしているディレクトリをたどるためなので、
当然、環境によってパスが変わる。
いずれの環境によって変わる行も、jScriptによって、自動的にキーボードを叩いて、コマンドを実行している部分だ。
さて、この保存したjScriptを実行するにはどうするかというと、
コマンドプロンプトへのショートカットに、自動的にjScriptを実行するようにする。
まずは、ショートカットを作る。
スタートメニュー＞すべてのプログラム＞アクセサリ＞コマンドプロンプト
のところで右クリック、送る＞デスクトップ（ショートカットを作成）で、デスクトップにショートカットを作成する。
できたショートカットを右クリックして、プロパティ、ショートカットタブのリンク先にて、起動後、速攻でコマンドを実行するようにする文を追加して、OKボタンを押す。
C:\Windows\System32\cmd.exe /k "cscript 作ったjScriptへのパス\auto_gulp_watch_start_ws.js"
```
これで、このショートカットを起動すれば、Gulpのwatchメソッドが実行されるようになった。
あとは、このショートカットをスタートアップに保存しておけば、
マシン起動時にスタートさせたりもできる。
Gulpもそうなんだけど、やっぱ、OSスクリプトは便利だね。
勉強する価値がありますな。
GulpもJSだし、どんどん勉強していきます。
JSベースのOSスクリプトもどんどんやっていきたい。
#### 著者
著者名: みやびプリン
職業: フロントエンドエンジニア
プロフィール: 基本はイラストレイター（自称）だが、
本職は札幌市のフロントエンドエンジニア。
フロントエンドだけではなく、各種プログラミング言語に精通していると自負している。
HTML、CSSはもちろんのこと、JavaScript、TypeScript、PHP、Perl、Python、C#、Kotlin、Swift、Objective-Cなど多くの多くの言語に精通している他、
Movable Type、WordPressなど各種CMS、React.js、Angularなどフロントエンドフレームワークも扱える。
最近はUnityによる3Dコンテンツにも手を出している。
---
### JXA、twitterで自動ツイートする
URL: https://highmoon-miyabi.net/blog/2017/04/17_000445.html
公開日時: 2017-04-17T15:41:02+09:00
更新日時: 2019-03-12T19:35:06+09:00
カテゴリ: JavaScript,雑記
概要: どうも、左折ができないみやびです。 難し...
本文: どうも、左折ができないみやびです。
難しい、車の運転・・・。
エントリーとまったく関係ない話をすると、
（早く本題見せろって人はこちら）
ここ2年くらい、ちょいちょい実力試しに、CodeIQってサイトの問題に挑戦したりしてるのだが、
その中で、プログラム言語を擬人化してるって、漫画があるんだけど、それの作者さんがかわいいのなんのって。
ちょまどさん。
イラストレーター・漫画家兼、プログラマーという、
僕と似た方向なので親近感が湧いたという。
（↑おまえは格下だけどな）
ちょまど帳というブログでいろいろやってるので、皆さんも応援＆拡散を！
（というかすでにかなり有名ですが）
いつも以上に、前置きひどいね。
（すでに前置きじゃなくなってるという）
さて、本題。
表記の通り、前回のエントリーでは、twitterへ自動ログインまでやったけど、
ログインまでいきゃ、当然投稿までできちゃいます。
今回はそれをやっていこうと。
まずはスクリプト。
前回のスクリプトに様々加えている。
// Google Chromeを定義
var app = Application("Google Chrome");
app.includeStandardAdditions = true;
var windowChrome = null,
tabFirst = null;
if (app.windows.length === 0) {
app.Window().make();
}
// twitterのURLを定義
var twitterUrlAccess = "https://twitter.com/?lang=ja";
windowChrome = app.windows[0];
tabFirst = windowChrome.tabs[0];
tabFirst.url = twitterUrlAccess;
// Chromeをアクティブにする
app.activate();
// 次に移るために、フォーム送信が成功したかを格納する変数
var formSubmitFlg = null;
// ブラウザ上で実行させる関数を定義
var runFunction = function(){
var loginBtn = document.getElementsByClassName('StreamsHero-buttonContainer').item(0).lastElementChild;
loginBtn.click();
var formDom = document.getElementsByClassName('LoginDialog-form').item(0).firstElementChild;
var inputDivs = document.getElementsByClassName('LoginForm-input');
var inputDivsUser = document.getElementsByClassName('LoginForm-username');
var inputDivsPass = document.getElementsByClassName('LoginForm-password');
for (var iU = 0; iU では、前回と違う部分だけ解説していこうか。
まずは、投稿をさせるスクリプト
// 投稿するメソッド
var runFunctionSubmit = function(){
var newTweetBtn = document.getElementById('global-new-tweet-button');
newTweetBtn.click();
var tweetBlock = document.getElementById('tweet-box-global');
var submitBlock = document.createDocumentFragment();
var text001 = document.createElement('div'),
text002 = document.createElement('div');
text001.textContent = 'JXAによるtwitter自動投稿テスト001';
text002.textContent = 'ああああああ';
submitBlock.appendChild(text001);
submitBlock.appendChild(text002);
tweetBlock.textContent = null;
tweetBlock.appendChild(submitBlock);
var formDom = tweetBlock.parentNode.parentNode.parentNode.parentNode.parentNode;
var formChildBtn = formDom.children.item(2).children.item(1).lastElementChild;
var timerF = setTimeout(function(){
document.activeElement.blur();
formChildBtn.click();
}, 500);
};
// 関数を一行テキストに
～ 中略 ～
var runFunctionSubmitStr = runFunctionSubmit.toString();
runFunctionSubmitStr = runFunctionSubmitStr.replace(/t/g, "");
runFunctionSubmitStr = runFunctionSubmitStr.replace(/n/g, "");
```前回同様、ページで実行する関数を作っただけなので、なんのことないのだが、
ポイントは、3点ある。
1点目は、
6行目で、Fragmentのメソッドを使ってるところ。
これは、レンダリングする前に、あらかじめ、仮DOMを生成するというもので、
こいつをエレメントにAppendChildすると、Fragmentの中身が入るってわけで。
これを使う利点としては、レンダリングが一回で済むのでメモリを節約、
どんな要素に対しても、中身のみを挿入できる点だ。
ツイッターの投稿フォームが、textareaではなく、divの入れ子構造だったので、
これを使った。
2点目は、
23行目からで、setTimeoutを使ってる点。
これ、setTimeout使わないと、
どうしても、フォームに書かれたあとってことを検知できない・・・。
そのタイムラグの穴埋めだ。
だから、もし、上の行のappendeChildeのコールバックとかが可能ならそっちを使った方がいい。
実際、回線状況とかによっては、処理タイミングがおかしくなりそうだ。
3点目は、
24行目で、document内でフォーカスされている全てのエレメントからフォーカスを解除している。
これをやることによって、ツイッターの投稿内容を反映させるJS（ツイッターの仕様）が起動する。
さて、投稿関数はこれでオーケーなので、
あとは、どう実行するか、だ。
// twitterに投稿するメソッドを実行するメソッド
function twitterSubmit(){
// ログインが完了したかを、タイトルから検知させる
if (tabFirst.title() == 'Twitter' && !tabFirst.loading()) {
formSubmitFlg = app.execute(tabFirst, {javascript: "(" + runFunctionSubmitStr + ")(); 'true'"});
} else {
while (tabFirst.title() != 'Twitter' || tabFirst.loading()) {
delay(0.5);
if (tabFirst.title() == 'Twitter' && !tabFirst.loading()) {
// 投稿メソッドの実行
formSubmitFlg = app.execute(tabFirst, {javascript: "(" + runFunctionSubmitStr + ")(); 'true'"});
break;
}
}
}
}
```
さてこっからが大事。
JXAから、投稿を実行させるのだが、
まず、ログインが完了しているかを、JXA上で検知させる必要がある。
（トップと、ログイン後じゃ、DOM構成全然違うからね）
ひとまず、ツイッターは、ログイン前と後では、titleが違うので、そいつを使って検知させる。
例の、条件合うまで、whileでdelayを実行して、処理を遅らせ続けるあれだ。
4行目のifで、タイトルがTwitterであるかつ、ローディングが完了してたら、
そのまま投稿メソッドを実行させている。
違ったら、while開始だ。
ここで、なぜ、また.loadingを使って、読み完了してるかをとっているいるというと、
ログインを常にするって状態の場合、
タイミング的に、ローディングが完了する前に、こっちの関数にきてしまうので、
こっちでもローディング完了チェックが必要なのだ。
では、最後に、前回のwhile文を少し変更する
// ページが完全に読み込まれるまで、delayを繰り返す
while (tabFirst.loading()) {
delay(0.5);
if (!tabFirst.loading()) {
if (tabFirst.title() != 'Twitter') {
formSubmitFlg = app.execute(tabFirst, {javascript: "(" + runFunctionStr + ")(); 'true'"});
}
twitterSubmit();
break;
}
}
```
前回と違う点は、
ローディングが完了したら、すぐさまログインメソッドを実行してたが、
今回は、自動ログインされた時のことを考え、
（前回のやつでも考えるべきだったという）
titleが、Twitterでない時にログイン、
そのまま、投稿メソッドを実行している。
前回は、ログインだけだったので、
使い道微妙でしたが、
投稿までいけば、たとえば、Macの起動時に、スクリプトを実行するようにしておけば、
起動時に、Mac起動！今日も頑張るぞ！とか、自動でツイートできるわけですよ。
（ただし、ツイッターは基本同じ文言のツイートはできないので、毎日内容変わるスクリプトを入れる必要がある）
PCからもしょっちゅうツイートする人とか、ぜひやってみてはいかがでしょうか。
ただ実際、ツイッターの仕様とか、DOMの構成とか変わったら、書きなおさなきゃいけないんだけどね、これ（汗
とにかく勉強になったばい。
#### 著者
著者名: みやびプリン
職業: フロントエンドエンジニア
プロフィール: 基本はイラストレイター（自称）だが、
本職は札幌市のフロントエンドエンジニア。
フロントエンドだけではなく、各種プログラミング言語に精通していると自負している。
HTML、CSSはもちろんのこと、JavaScript、TypeScript、PHP、Perl、Python、C#、Kotlin、Swift、Objective-Cなど多くの多くの言語に精通している他、
Movable Type、WordPressなど各種CMS、React.js、Angularなどフロントエンドフレームワークも扱える。
最近はUnityによる3Dコンテンツにも手を出している。
---
### JXA、Webページが読み込まれたら実行（twitterにログインする）
URL: https://highmoon-miyabi.net/blog/2017/04/14_000443.html
公開日時: 2017-04-14T13:49:07+09:00
更新日時: 2019-03-12T19:43:03+09:00
カテゴリ: JavaScript
概要: どうも、最近自動車学校通い始めました。 ...
本文: どうも、最近自動車学校通い始めました。
十年間避け続けてきたが、もう取らざるをえなくなった。（歳がばれる）
さて、表記の件、まずはJXAってなんぞやっていうと、
AppleのOS操作自動化スクリプト、AppleScriptの、JavaScript（以下JS）版である。
主に大量のバッチ操作などをする時に使用するものだ。
覚えれば超便利。
うちの会社では、WSH（Windows Script Host）を使って、お客様からのデータを加工したりしている（もちろんここでは詳しく書けない）ので、
Appleにもあるだろなーと、存在自体は知っていたが、別に手をだしていなかった。
だが、最近、ある人から頼まれて調べてたのだが、
これはとんでもない仕組みだと実感した。
ましてや、最近のOSだと、JSでできるときたではないか！
JSはもう大好きなんで、これはやってみるしかない！
ってわけで、ここ何日かはこれにハマってましたｗ
前置き長いってな。
では、表記の、自動で、ブラウザを立ち上げ、twitterにログインってのをやってみようかと。
Macのスクリプトエディタを立ち上げ、下記コードを書いて実行する。
// Google Chromeを定義
var app = Application("Google Chrome");
app.includeStandardAdditions = true;
var windowChrome = null,
tabFirst = null;
if (app.windows.length === 0) {
app.Window().make();
}
windowChrome = app.windows[0];
tabFirst = windowChrome.tabs[0];
tabFirst.url = "https://twitter.com/?lang=ja";
// Chromeをアクティブにする
app.activate();
// ブラウザ上で実行させる関数を定義
var runFunction = function(){
var loginBtn = document.getElementsByClassName('StreamsHero-buttonContainer').item(0).lastElementChild;
loginBtn.click();
var formDom = document.getElementsByClassName('LoginDialog-form').item(0).firstElementChild;
var inputDivsUser = document.getElementsByClassName('LoginForm-username');
var inputDivsPass = document.getElementsByClassName('LoginForm-password');
for (var iU = 0; iU と、こうやって、あとはスクリプトエディタの実行ボタン（再生マークっぽいの）を押すと、
Google Chrome（以下Chrome）が立ち上がって、twitterにログインできたはずだ。
さて、今回は、言語も言語なので、解説していこう。
var app = Application("Google Chrome");
app.includeStandardAdditions = true;
var windowChrome = null,
tabFirst = null;
```
一行目、まずは、当然のことながら、Chromeを取得。
二行目はよくわかんないです。おまじないみたいなもんかも。
んで、4、5行目は、後にオブジェクトを使いやすくするために、変数の宣言を行っている。if (app.windows.length === 0) {
app.Window().make();
}
windowChrome = app.windows[0];
tabFirst = windowChrome.tabs[0];
tabFirst.url = "https://twitter.com/?lang=ja";
app.activate();
```
1～3行目は、Chromeのウィンドウが出てなかったら、ウィンドウを追加する、としている。
（Macならではだね）
5、6行目で、ウィンドウ、最初のタブ、を変数に入れている。
7行目の時点で、twitterにアクセスがされる。
最後の行は、Chromeを最前面に移動する（Chromeウィンドウをクリックして、一番上に出した状態とだいたい同じ）。
// ブラウザ上で実行させる関数を定義
var runFunction = function(){
var loginBtn = document.getElementsByClassName('StreamsHero-buttonContainer').item(0).lastElementChild;
loginBtn.click();
var formDom = document.getElementsByClassName('LoginDialog-form').item(0).firstElementChild;
var inputDivsUser = document.getElementsByClassName('LoginForm-username');
var inputDivsPass = document.getElementsByClassName('LoginForm-password');
for (var iU = 0; iU さてここからが少し難しくなってくる。
これは、コメントにもある通り、ブラウザ上で実行させたいJSを記述している。
要はURLにjavascript: hoge();
みたいにするあれである。
やっていることとしては、twitterページ上で、
ログインボタンをクリック、
メールアドレス、パスワードのinputに文字列を挿入、
ログインフォーム送信
みたいな流れを書いてる。
最後の三行は、ブラウザのURLにスクリプトを打ち込むために、関数自体を一行テキストに変換している。
（正規表現に関しては、一発でやる方法があるはずだが、めんどいのでゴリ押した）
さて、ここからが大事、というか本題。
// ページが完全に読み込まれるまで、delayを繰り返す
while (tabFirst.loading()) {
delay(0.5);
if (!tabFirst.loading()) {
formSubmitFlg = app.execute(tabFirst, {javascript: "(" + runFunctionStr + ")(); 'true'"});
break;
}
}
```
Webページの読み込み完了してから、次の関数を実行するという工程だ。
まず、二行目からwhileしてるのがみそ。
tabFirstには、ブラウザのタブデータが入っているが、
そのloadingメソッドを実行すると、ページの読み込み状態が、Boolean値で返ってくる。
読み込み途中が、true、読み込み完了がfalse。
これを利用し、読み込み途中の間は、whileで、処理を待たせるメソッド（delay(second)）を実行し続ける。
これによって、ページを読み込んで、DOMを形成した後に、続きを実行ってできるわけ。
んで、lodaingがfalse（読み込み完了）になったら、次の関数を実行してる。
なぜ、こんなまどろっこしいことをしているかというと、
ブラウザ上の、URLからのJS実行（javascript: hogehoge();）だと、
タイマーメソッド（setTimeout、setInterval）が使えないことと、
読み込み後に実行される、window.onloadは、
ページが読み込まれた後に実行する、URLからのJS実行では、走らない、からだ。
以上二点から、JXA上で読み込み感知をする必要があった。
ほんと今回は勉強になったし、
まさかここまでやれるもんだとは思わなかった。
OSスクリプト恐るべし。
これ、今回のログインだけだったら、大したなんもできないけど、
例えば、Gigaファイル便とかにファイルをアップロード、
URL発行されたら、それをメールで送信、なんてできたら、
仕事にも十分使えるでしょう。
間違いなく、それできますよ、JXA（というかAppleScript）
にしても、JS流行りまくりだねｗ
AdobeのバッチスクリプトもJSベースじゃないですか。
Cなみに派生言語でてるんじゃないべか。
やれるようになっててよかったよほんに・・・。
#### 著者
著者名: みやびプリン
職業: フロントエンドエンジニア
プロフィール: 基本はイラストレイター（自称）だが、
本職は札幌市のフロントエンドエンジニア。
フロントエンドだけではなく、各種プログラミング言語に精通していると自負している。
HTML、CSSはもちろんのこと、JavaScript、TypeScript、PHP、Perl、Python、C#、Kotlin、Swift、Objective-Cなど多くの多くの言語に精通している他、
Movable Type、WordPressなど各種CMS、React.js、Angularなどフロントエンドフレームワークも扱える。
最近はUnityによる3Dコンテンツにも手を出している。
---
### Movable Type、新着記事順カテゴリ別記事一覧（PHP使用）
URL: https://highmoon-miyabi.net/blog/2017/04/08_000442.html
公開日時: 2017-04-08T00:24:40+09:00
更新日時: 2017-04-08T01:07:13+09:00
カテゴリ: Movable Type,PHP
概要: こんばんは。 明日早いってのに、夜にびく...
本文: こんばんは。
明日早いってのに、夜にびくドン行ってしまった。
まだ寝れん・・・。
そんなデブ活のことはどうでもいくて、
表記の件、やっていこう。
やりたいと思った人は僕だけじゃないはず、新着記事順にカテゴリ別記事一覧を表示する、だ。
一応、カテゴリの並べ替えのプラグインとかあんねんけど、それだと、新着記事順に並べると、とかはできなさそうだった。
して、これまた、Movable Type（以下MT）だけじゃめんどくさい難しいと思ったので、
例のごとく、PHPとの合わせ技です。
まずは、PHP変数に、MTのループを使って情報を入れていく。
```php
<MTIgnore>PHPスクリプト内で、カテゴリループを出す</MTIgnore>
<?php
// カテゴリ一覧用変数
$categoriesArr = array();
<MTTopLevelCategories><MTIgnore>カテゴリ毎ループを実行</MTIgnore>
<mt:Entries lastn="3">
<mt:EntriesHeader>
<MTIgnore>EntiesHeaderを使い、一記事目（最新記事）の日時を取得、PHP変数にタイムスタンプとして挿入</MTIgnore>
<$mt:EntryDate format="%Y-%m-%d" setvar="entryDate"$>
$catDate = strtotime('<MTGetVar name="entryDate">');
// タイムスタンプをkeyとして、一カテゴリを定義、
$categoriesArr[$catDate] = array(
'catTitle' => '<mt:CategoryLabel>',
'catLink' => '<$mt:CategoryArchiveLink$>',
'catDiscription' => '<$MTCategoryDescription nl2br="xhtml"$>',
// 記事一覧を配列として持っとくためにプロパティ定義
'entries' => array()
);
</mt:EntriesHeader>
<MTIgnore>ここからカテゴリ別記事ループ。情報を入れていく</MTIgnore>
$categoriesArr[$catDate]['entries'][] = array(
'title' => '<$mt:EntryTitle$>',
'link' => '<$mt:EntryPermalink$>'
);
</mt:Entries>
</MTTopLevelCategories>
// 最後に、配列をkeyでソート（降順ソートなので、一番最新の記事（タイムスタンプが大きい）順になる）
krsort($categoriesArr); ?>
```
みそなのは、PHP配列変数のkeyをカテゴリ毎の最新記事のタイムスタンプとしていること。
こうすれば、あとで、PHP上で並べ替えがしやすい。
これで、カテゴリ別記事一覧の、PHP配列変数が用意できた。
あとは出力。
```php
<?php foreach($categoriesArr as $catValue) { ?>
<article>
<h1><a href="<?php echo $catValue['catLink']; ?>"><?php echo $catValue['catTitle']; ?></a> 記事一覧</h1>
<ul>
<?php foreach($catValue['entries'] as $catEntry) { ?>
<li>・<a href="<?php echo $catEntry['link']; ?>"><?php echo $catEntry['title']; ?></a></li>
<?php } ?>
</ul>
</article>
<?php } ?>
```
これで、新着記事順のカテゴリ別記事一覧ができたはず。
これ、MTだけでできれば、もっとカッコいい、というか、サーバー負荷少ないのできるんだけど、
MTLoopとか使うんかね。
ちょっと、MTLoopもそうだけど、MTの辞書型変数とかできないかとか探してもなかなか出なくて・・・。
あきらめて、PHP使っタヨ・・・。
ここまで、PHP使うなら、WordPressにしろって？
いやいや、僕はどんな痛くて使いづらくてもMTを愛してますから、ええ。
ではまた。
#### 著者
著者名: みやびプリン
職業: フロントエンドエンジニア
プロフィール: 基本はイラストレイター（自称）だが、
本職は札幌市のフロントエンドエンジニア。
フロントエンドだけではなく、各種プログラミング言語に精通していると自負している。
HTML、CSSはもちろんのこと、JavaScript、TypeScript、PHP、Perl、Python、C#、Kotlin、Swift、Objective-Cなど多くの多くの言語に精通している他、
Movable Type、WordPressなど各種CMS、React.js、Angularなどフロントエンドフレームワークも扱える。
最近はUnityによる3Dコンテンツにも手を出している。
---
### CSS レンダリング ブロック対策（PHP使用）をする
URL: https://highmoon-miyabi.net/blog/2017/03/30_000441.html
公開日時: 2017-03-30T13:12:59+09:00
更新日時: 2017-03-30T14:30:10+09:00
カテゴリ: CSS,PHP
概要: どうも、Swift制作が停滞気味のみやび...
本文: どうも、Swift制作が停滞気味のみやびです。
さて、今回のエントリーはけっこう切実。
最近流行りのページ表示速度の話。
正直どうでもいいとか思ってましたが、
さすがにGoogleさんの検索順位に影響でるってのがわかってきたら、
やらざるをえない。
仕事でもそうだが、当サイトでも、一年前あたりからいろいろ試行錯誤している。
Googleさんのスピードチェッカーは下記。
閲覧中のあなたもやってみましょう！
●PageSpeed Insights
これで、80以上出せれば優秀で、数値の色が緑になる。
ちなみに対策前の当サイトは、パソコン：60あたり、モバイル：40後半
であった。
とりあえず、できることをやり、
（画像の圧縮をしっかりやったり、JSの読み込みをhtmlの最後にしたり、JSとCSSをSassにして一行に圧縮したり）
パソコン：80、モバイル：78
までいったが、限界が出てしまった。
そう、一番厄介なのは、ファーストビューのレンダリング時に、
レンダリングブロックしてしまう要因、
外部CSSの存在だ。
Googleさんは、これらはインラインCSSにするといいよ！
なんて言うわけよ。
んなもんやってられっか！
管理不可能になるわ！！
正直、どうしようもなくね？
なんて思って完全にあきらめてたんだけど、
プロとしてなんとかしようと、いろいろ考えた。
・PHPをCSSとして、そこからインラインCSSを出力
→システム作るの手間だし元のCSS編集から移すとか面倒。
・というか、CSSを直接インラインに書く
→CSS編集とかできんし、論外
まぁ、両者とも微妙。
そこでいろいろ考えてハイブリットな方法を思いついた。
PHP上で、CSSファイルを読み込み、インラインCSSとしてechoさせる！
これだ！
これなら、元のCSSの運用はなんも変えなくてもいいし、
管理もしやすい。
PHPスクリプトの書き方しだいでだいぶ楽にできる。
ってわけで、当サイトでやってみたやり方が下記。
まずはPHPスクリプト（例として、/common/css/css_include.phpとしている）
```php
<?php /* CSSを読み込み、インライン出力する */
// CSSファイルと画像など用に変数を定義（）
if(!isset($cssRoot)) {
$cssRoot = 'common/';
}
if(!isset($cssFileName)) {
$cssFileName = 'common';
}
// CSSファイルを読み込み
$cssFile = file_get_contents(dirname(__FILE__) . '/../../' . $cssRoot . 'css/' . $cssFileName . '.css');
if ($cssFile) {
// CSSファイルを読み込めたら、インラインCSSとして出力
// 画像のパスを、読み込んでいるhtmlからのパスに直す
$cssFile = str_replace("(../images", "(/" . $cssRoot . "images", $cssFile);
// インラインCSSとしてecho
echo '<style type="text/css">
' . $cssFile . '
</style>';
}
```
んで、読み込み側のPHPの書き方が下記（/common/css/common.cssってCSSを読み込む場合）
```html
<html>
<head>
<?php $cssRoot = 'common/';
$cssFileName = 'common';
include('/サーバーのドキュメントルート/common/css/css_includ.php'); ?>
</head>
<body>
～内容～
</body>
</html>
```
やってみた結果、
パソコン：94、モバイル：92！
となった。
まさかここまで跳ね上がるとは。
まぁ、今でもこんなどうしようもない部分に、口出すなよGめ、とか思ってますが、
うまくいったら嬉しいもんだ。
ちなみに、当サイトでは、CMS（Movable Type）を使ってるので、
こんな試行錯誤があったが、
Gulpってのを使えば、一元管理でhtml吐き出しができるので、
こんな工程はいらないらしい。
CMS使ってない時なんかは有効だと思う。
Gulpとは、Rubbyを使って、いろいろ管理とかファイル出力とか、一元的にやれたりする、
便利なスクリプトというかライブラリというか、らしい。
まだよくわからん。
Gulp、勉強せんとな・・・。
CMSとかいらなくなる時代も来るのかもしれない。
また余計な話が長くてすみません。
ではまた。
#### 著者
著者名: みやびプリン
職業: フロントエンドエンジニア
プロフィール: 基本はイラストレイター（自称）だが、
本職は札幌市のフロントエンドエンジニア。
フロントエンドだけではなく、各種プログラミング言語に精通していると自負している。
HTML、CSSはもちろんのこと、JavaScript、TypeScript、PHP、Perl、Python、C#、Kotlin、Swift、Objective-Cなど多くの多くの言語に精通している他、
Movable Type、WordPressなど各種CMS、React.js、Angularなどフロントエンドフレームワークも扱える。
最近はUnityによる3Dコンテンツにも手を出している。
---
### Swift、Timer、一時停止のやり方
URL: https://highmoon-miyabi.net/blog/2017/02/20_000440.html
公開日時: 2017-02-20T17:07:43+09:00
更新日時: 2020-11-13T12:03:45+09:00
カテゴリ: Swift・Objective-C
概要: Swiftにて、Timerクラスからのインスタンスにて、一時停止、その再開の実装の仕方を解説。一時停止ってのが地味に難しい。
本文: どうも、Swift、はまってます、みやびです。
表記の件、簡単にできるかなと思いきや、なかなかめんどくさかったので、覚書的に記事を書いてみようと思う。
Google先生に聞いてみると真っ先に出てくるのは下記の方法。
```swift
class GameViewController: UIViewController {
// タイマー変数を用意
var gameClearTimer: Timer?;
override func viewDidLoad() {
super.viewDidLoad()
self.gameClearTimer = Timer.scheduledTimer(timeInterval: 60, target: self, selector: #selector(GameViewController.clearFunc), userInfo: nil, repeats: false);
}
// タイマーを止めたり動かしたりするメソッド
func timerStopStart(setFlg: Bool){
if setFlg {
// タイマーを再開する
self.gameClearTimer?.fire();
} else {
// 一時停止をする
self.gameClearTimer?.invalidate();
}
}
// 終了時実行
func clearFunc(){
print("ゲーム終了");
}
}
```
一時停止は、Timerクラスの、invalidateメソッド、
再スタートは、fireメソッドを実行すればいい。
っていう記事がほとんどだが、これ、
動かないんだヨ！
そう、確かに、Timerの止め方は、invalidateで合ってるんだが、
そのメソッドを実行した時点で、Timerインスタンスは死んでしまうのだ。
なので、fireメソッドをいくら叩いても、タイマーはうんともすんとも言わない。
タイマーをセットし直さなければいけないのだ。
しかし、そうなると、例えば、60秒後に、なにかやるってタイマーで、
10秒経った時に停止、また再開、となると、また60秒タイマーになるので、
10秒多くなってしまう。じゃぁどうするかというと下記の方法をとる
```swift
class GameViewController: UIViewController {
// タイマー変数を用意
var gameClearTimer: Timer?;
// 時刻を取る変数を用意
let gameStartTime: Date = Date();
var gamePauseTime: Date = Date();
override func viewDidLoad() {
super.viewDidLoad()
self.timerStopStart();
}
// 一時停止を実行するメソッド
func pauseBtnFunc(){
// 一時停止時刻を変数に入れる
self.gamePauseTime = Date();
// 一時停止をする（タイマーを削除）
self.timerStopStart(false);
}
// タイマーを止めたり動かしたりするメソッド
func timerStopStart(setFlg: Bool){
if setFlg || self.gameClearTimer == nil {
// 一時停止時間から、最初の時間を引いて、その分をタイマーセット時間から引く
let defTime = self.gamePauseTime.timeIntervalSince1970 - self.gameStartTime.timeIntervalSince1970;
// タイマーを入れなおす
self.gameClearTimer = Timer.scheduledTimer(timeInterval: 60 - defTime, target: self, selector: #selector(GameViewController.clearFunc), userInfo: nil, repeats: false);
} else {
self.gameClearTimer?.invalidate();
}
}
// 終了時実行
func clearFunc(){
print("ゲーム終了");
}
}
```
つまりは、最初のスタート時間と、一時停止時間を取っておいて、
再度タイマーをセットするとき、一時停止時間から、スタート時間の差分を出して、
その分を、タイマーセットの時間から引くってわけだ。
こうすれば、一時停止を再現できる。
繰り返しの場合は、もう少しめんどいが、今回のスクリプトの応用でできるはずだ。
ここらへん、もっと便利な関数作ってくれんかね、マジ・・・。
そして、invalidateのことを一時停止と紹介している記事があまりにも多すぎる。
ちゃんと検証してから記事書いてほしいもんや。
（人のこと言えないけどな）
#### 著者
著者名: みやびプリン
職業: フロントエンドエンジニア
プロフィール: 基本はイラストレイター（自称）だが、
本職は札幌市のフロントエンドエンジニア。
フロントエンドだけではなく、各種プログラミング言語に精通していると自負している。
HTML、CSSはもちろんのこと、JavaScript、TypeScript、PHP、Perl、Python、C#、Kotlin、Swift、Objective-Cなど多くの多くの言語に精通している他、
Movable Type、WordPressなど各種CMS、React.js、Angularなどフロントエンドフレームワークも扱える。
最近はUnityによる3Dコンテンツにも手を出している。
---
### Swift、同確立を含む抽選
URL: https://highmoon-miyabi.net/blog/2017/02/02_000439.html
公開日時: 2017-02-02T15:30:27+09:00
更新日時: 2017-12-02T18:41:44+09:00
カテゴリ: Swift・Objective-C
概要: どうも、だいぶごぶさたです。 最近は、S...
本文: どうも、だいぶごぶさたです。
最近は、Swiftに挑戦しております。
（ゲーム作れるようになりたい）
ってわけで、表記の件だが、
今までどのプログラムでもやったことなかったから、
どんなアルゴリズムでやればいいかわからんかった。
なんで、いろいろ調べて、確立抽選の方法はあったが、
同確立のものを含むものはなかった。
応用してなんとかできたので、方法を公開しようかと。
下記手順でやる。
1、商品名と、確立の数値の列挙型を作り、関連付ける。
2、列挙型を、case単体が入った配列にし、確立数値がkeyの辞書にする。
3、抽選ボックスを作る
まず商品名と確立の列挙型、その関連付け
```swift
// 出現率基本
enum BaseRatioList: Float {
case Empty = 0.0,
ratio0250 = 25.0,
ratio0200 = 20.0,
ratio0100 = 10.0,
ratio0050 = 5.0,
ratio0010 = 1.0,
ratio0005 = 0.5,
ratio0001 = 0.1;
}
// 商品名リスト
enum PrizeList: String {
case Empty = "はずれ",
HinokiShield = "ひのきのたて",
HinokiRod = "ひのきのぼう",
HinokiBath = "ひのきのふろ",
MithrilSword = "ミスリルソード",
MithrilGauntlet = "ミスリルのこて",
GenjiGauntlet = "源氏の籠手",
MastorSword = "マスターソード";
// 商品によって確立を返すメソッド
func prizeByRatio() -> Float {
switch self {
case .Empty: return BaseRatioList.ratio0050.rawValue;
case .HinokiShield: return BaseRatioList.ratio0200.rawValue;
case .HinokiRod: return BaseRatioList.ratio0200.rawValue;
case .HinokiBath: return BaseRatioList.ratio0200.rawValue;
case .MithrilSword: return BaseRatioList.ratio0050.rawValue + BaseRatioList.ratio0100.rawValue;
case .MithrilGauntlet: return BaseRatioList.ratio0050.rawValue + BaseRatioList.ratio0100.rawValue;
case .GenjiGauntlet: return BaseRatioList.ratio0010.rawValue * 4;
case .MastorSword: return BaseRatioList.ratio0010.rawValue;
}
}
}
```
これで、商品と、その確立を定義できた。
続いて、列挙型を配列にして、辞書にする方法。
デフォルトではできないので、
下記エントリのものを使い、下記のようにする
●Swift3.0版、Enumのcaseを配列で返すProtocol Extension - Qiita
```swift
public protocol EnumEnumerable {
associatedtype Case = Self
}
public extension EnumEnumerable where Case: Hashable {
private static var iterator: AnyIterator<Case> {
var n = 0
return AnyIterator {
defer { n += 1 }
let next = withUnsafePointer(to: &n) {
UnsafeRawPointer($0).assumingMemoryBound(to: Case.self).pointee
}
return next.hashValue == n ? next : nil
}
}
public static func enumerate() -> EnumeratedSequence<AnySequence<Case>> {
return AnySequence(self.iterator).enumerated()
}
public static var cases: [Case] {
return Array(self.iterator)
}
public static var count: Int {
return self.cases.count
}
}
～ 中略 ～
// 商品名リスト
// 列挙型名に、extentionを追加している
enum PrizeList: String, EnumEnumerable {
case Empty = 0,
～ 中略 ～
// 確立の数値をkeyにして、caseを引き出せる辞書を返すメソッド
func prizeByRatioList() -> Dictionary<Int, Array<PrizeList>> {
let casesOnly = PrizeList.cases;
var ratios = Dictionary<Int, Array<PrizeList>>();
for caseSingle in casesOnly {
var inList = Array<PrizeList>();
if let inDic = ratios[Int(caseSingle.prizeByRatio() * 100)] {
// 同確立がすでにある場合、配列を取り出す
inList = inDic;
}
// 確立数値をkeyに、配列を突っ込む
inList.append(caseSingle);
ratios[Int(caseSingle.prizeByRatio() * 100)] = inList;
}
// 同確立のものを、key値を合算して、辞書に入れなおす。
for (key, value) in ratios {
if value.count > 1 {
// 配列要素が、1個のときは、やる必要ないので、2個以上の時
ratios[key * value.count] = value;
ratios[key] = nil;
}
}
return ratios;
}
}
```
これで、確立の数値をkeyにした、case型配列の辞書ができるようになった。
では、実際に使ってみようと。
```swift
class GameViewController: UIViewController {
// 確立辞書の変数を用意
let prizeRatioList = PrizeList.Empty.prizeByRatioList();
override func viewDidLoad() {
super.viewDidLoad()
// 商品名を定義
var prize: PrizeList = PrizeList.Empty;
// 1万を最大値にとる乱数
let prizeNo = arc4random_uniform(10000)
var k = 0;
for (key, prizeList) in self.prizeRatioList {
// kを使ってるのは、重なり分を解消するため
k = k + key;
if Int(prizeNo) こんな感じで使う。
ちなみに確立の部分は、下記エントリを参考にさせていただきました。
●Swiftで抽選マシン（ガチャ）を作ってみる その1 - Qiita
今回はけっこう勉強になったばい。
Swiftはなんというか、スクリプト言語に近い感覚で書けるので、
本当に、Webデベロッパ向け言語だなと痛感してます。
わかりやすい。
やっぱオブジェクト指向言語、敷居高いからね・・・。（C#ですら断念したという）
ちょっと、がんばって作ってみます。
しかし、まだゲームの根幹部分を作ってる段階で、
実装まで険しい道のり・・・。
でもやるぜ。
目指せセミプロプログラマー！！（セミかよ）
#### 著者
著者名: みやびプリン
職業: フロントエンドエンジニア
プロフィール: 基本はイラストレイター（自称）だが、
本職は札幌市のフロントエンドエンジニア。
フロントエンドだけではなく、各種プログラミング言語に精通していると自負している。
HTML、CSSはもちろんのこと、JavaScript、TypeScript、PHP、Perl、Python、C#、Kotlin、Swift、Objective-Cなど多くの多くの言語に精通している他、
Movable Type、WordPressなど各種CMS、React.js、Angularなどフロントエンドフレームワークも扱える。
最近はUnityによる3Dコンテンツにも手を出している。
---
### compliance リファラスパムを排除する。
URL: https://highmoon-miyabi.net/blog/2016/12/06_000437.html
公開日時: 2016-12-06T16:47:50+09:00
更新日時: 2016-12-07T19:28:57+09:00
カテゴリ: プログラム全般,リダイレクト
概要: お疲れ様です。 滝に打たれて精神修行でも...
本文: お疲れ様です。
滝に打たれて精神修行でもしていこうかと思ってる、みやびです。
時期が悪いな
（そういう問題か）
さて、表記の件。
けっこう有名な話らしいが、
みやびは昨日知ったっていうね。
リファラスパムとはなんぞやっていうと、下記エントリを参照のこと
（めんどくさい説明は他サイトに任せるという）
●【アクセス解析】リファラスパムの対策及びフィルタ設定について（除外リスト随時更新） - 検索サポーター
ようは、ウェブ管理者をターゲットとしたスパムだ。
当サイトでも、先日/xxxx-x.compliance-xxx.xyzと、
サイト内で見知らぬファイルへのアクセスがあった。
なんじゃこりゃと、調べていくと、リファラスパムってことがわかった。
害はないけど、アクセス解析が正確にできなくなる。
先週あたりから、やった、アクセス100行くようになった！なんてぬかよろこびしてたら、これだっという。
調べてると、トラ○プさんが大統領に就任したあたりから多数のサイトが被害にあってるらしい。
どういう関連があるやら・・・。
というかアクセスすんなら広告踏んでけって話（ヲイ
さて、本題。
（相変わらず前置き長い）
これの対策なんだけど、
上記エントリの通り、アクセス解析側で対応ってだけでもいいのだが、
せっかくなんでアクセス自体を排除しようってのが本エントリの目的。
サーバーのアパッチや、.htaccessってのは、
リファラー（参照元）URLによって、アクセス制御ってのができる。
下記の感じで書くといい。
```text
SetEnvIf Referer "^(.*)compliance-(.*)¥.xyz" ref_ng
order allow,deny
allow from all
deny from env=ref_ng
Deny from all
```
●特定の参照元（Referer）の禁止と許可｜.htaccess
で書かれてる方法の応用やね。
とりあえず、これで様子見るか・・・。
#### 著者
著者名: みやびプリン
職業: フロントエンドエンジニア
プロフィール: 基本はイラストレイター（自称）だが、
本職は札幌市のフロントエンドエンジニア。
フロントエンドだけではなく、各種プログラミング言語に精通していると自負している。
HTML、CSSはもちろんのこと、JavaScript、TypeScript、PHP、Perl、Python、C#、Kotlin、Swift、Objective-Cなど多くの多くの言語に精通している他、
Movable Type、WordPressなど各種CMS、React.js、Angularなどフロントエンドフレームワークも扱える。
最近はUnityによる3Dコンテンツにも手を出している。
---
### Windowsで、AppDataの移動はやったらあかん
URL: https://highmoon-miyabi.net/blog/2016/12/02_000436.html
公開日時: 2016-12-02T15:37:37+09:00
更新日時: 2016-12-04T19:26:29+09:00
カテゴリ: プログラム全般
概要: どうも、久々に連日投稿できてる。 さて表...
本文: どうも、久々に連日投稿できてる。
さて表記の件だすが、
珍しくOS的な話でもしようかな、って。
そうWindowsユーザーにとって、Cドライブの容量は結構切実だったりする。
最近Windowsマシンは、CドライブがSSD、他のドライブはHDDと、
なっており、容量ががぜん違う。
だが、根幹を動かすCドライブがSSDってのはすごくいい。
だって速いもん、マジで。
だが、容量の少なさから、アプリケーションをガンガン入れていると、
あっという間に圧迫するようになる。
そして、その中でも強敵なのが、AppDataである。
アプリケーション上で使用するファイルとかが入ってるのがこのディレクトリなんだけど、
たとえば、Adobe After Effectsなんか使ってると、
映像のキャッシュファイルが、ここにガンガンたまっていき、
あっという間に何十Gとかになったりする。
アプリケーションとかだけならまだしも、そうなると、ちょいときつい。
そこで誰もが考えること
AppDataを移動すればいいぢゃん
みやびプリンも同様のことを考えた。
さっそく調べて下記エントリー通りにやった。
●Windows7(64bit)でSSDを圧迫しているAppDataフォルダを別ドライブ(HDD)に移動する - おにぃちゃんの日記
もうなまら空いたよ、Cドライブ！
・・・・・・と思ってたのもつかの間だった。
しばらくして、マシンの調子がおかしくなり、
乗り換える羽目になった。
現象としては
・アプリケーションがしょっちゅう止まる
・Chromeでファイルをダウンロードしただけで止まる
・skypeでメッセージ受信しただけで止まる
・なぜかマウスポインターだけは元気
って感じ。
ひとまず、
ヒーヒー言いながらも乗り換え作業も終え、
なんの気なしにこっちでもAppDataを移動した。
・・・と、速攻で、上記の現象が起きた。
あ、そういうことか・・・。
上記エントリをご覧いただければわかると思うが、
Dドライブ（環境によっては、他のアルファベットだったりする）にAppData本体があり、
Cドライブからは、シンボリックリンクを貼り、Dドライブのデータを読みに行ってるわけだ。
少し考えればわかるが、
DドライブはHDD、そら処理遅くなるわ
って話なのだ。
ましてや、違うドライブに読みに行ってるんだしね。
AppDataがなぜ、Cドライブにあるか。
それはSSDで高速処理をして快適に作業できるようとの、
Microsoft様の計らいなのだ。
マシンの中身の構成や外見などは開発者の意図がある。
そうすべくしてそうなっているのだ。
だから、こっちの都合でなんやかんや変えたら、そら不都合でるんだわ。
じゃCドライブの圧迫はどうすればいいかというと、
自動で消えないいらない子ファイルを自分で手で消していくしかない・・・。
めんどうだけど、マシンは自分の道具だ。自分で手入れしなきゃね。
といっても、やっぱ面倒なわけで・・・。
大容量SSDが、安価で手に入れられる時代が早く来るのを切望してやまない・・・。
#### 著者
著者名: みやびプリン
職業: フロントエンドエンジニア
プロフィール: 基本はイラストレイター（自称）だが、
本職は札幌市のフロントエンドエンジニア。
フロントエンドだけではなく、各種プログラミング言語に精通していると自負している。
HTML、CSSはもちろんのこと、JavaScript、TypeScript、PHP、Perl、Python、C#、Kotlin、Swift、Objective-Cなど多くの多くの言語に精通している他、
Movable Type、WordPressなど各種CMS、React.js、Angularなどフロントエンドフレームワークも扱える。
最近はUnityによる3Dコンテンツにも手を出している。
---
### Sublime Text jshintが動かない時（Windows 7）
URL: https://highmoon-miyabi.net/blog/2016/12/02_000435.html
公開日時: 2016-12-02T12:26:36+09:00
更新日時: 2016-12-04T15:38:14+09:00
カテゴリ: JavaScript,プログラム全般
概要: どうも、なんとか忙しいゾーンを抜けたプリ...
本文: どうも、なんとか忙しいゾーンを抜けたプリンです。
会社のマシンが調子悪くなり、今週中、マシンを乗り換えたので、その際に起きたアレコレの中の一つ。
さて、表記の件、
恋するテキストエディタ、Sublime Textですが、
さまざまなエディタが新しく出る中、やっぱり恋してます。
その中で、JSのエラーとか構文チェックをリアルタイムにしてくれる、ってPackageがあって、それがめったくそ便利で、
乗り換えマシンにも、もちろんいれようとした。
導入の仕方は下記エントリーを参照のこと。
●Sublime Text3 に SublimeLinter-jshint をインストールしてみた
ただし、動かない。
とにかく、動かない。
んで、半日以上かけて、たどりついたエントリーがこちら。
●Sublime Text 3：jshintが動かなくなった
ようは、jshintへのパスが通ってないんじゃね？
って問題。
だが、これの通りにやってもうまくいかず・・・。
でも、これが原因なのは間違いないんだ。確信。（変なカンと妙な自信）
調べてくうち、SublimeLinter上でのエラーを表示させる方法あるってことを突き止めた。
さっそくエラー表示をしてみることにした。
やり方は、上記エントリーにもある、
メニューから、
Preferences > Package Setting > SublimeLinter > Settings - User
と押し、
下記の変更を記述する。
```javascript
{
"user": {
"debug": true
}
}
```
んで、Sublime Textを再起動し、
エラーコンソールの表示をする。
メニューで View > Show Console を押す。
そして、JSファイルでわざとエラーが出るような構文を書くとコンソールに下記の記述が・・・。
```javascript
C:¥Program Files¥Sublime Text 3¥AppData¥Roaming¥npm
```
Oh, fuck!
上記エントリー通り、やったら、
相対パス的に、Sublimeのアプリケーションディレクトリからのスタートになってるじゃないか！
そんなとこにjshintはいないヨ！
おそらく、Node.jsを入れる際のインストール場所とか、環境変数の設定で、間違ったからこんなことになったんだろう。
半分は自業自得ってわけだ。
じゃどうするかってと、無理やりjshintにたどりつかせればええねん。
ってわけで、上記よろしく、SublimeLinterのセッティングファイルを開き、"paths"の項目を下記にする。
```javascript
{
"user": {
"paths": {
"windows": [
"../../Users/ユーザー名/AppData/Roaming/npm/"
]
}
}
}
```
相対パスで無理くりPCのルート（C:んとこ）までもっていき、そっからjshintがある場所までたどったわけだ。
Sublimeを再起動して・・・
動いた！！
長い旅だった・・・。
こういう開発のためのアレコレって、環境によったり入れ方によったりで、全然違う原因が発生するから、
調べても、一つ目二つ目の記事だと絶対解決せんから、しんどかった・・・。
これでまたJS開発、さくさくいけますね。
よしよし。
#### 著者
著者名: みやびプリン
職業: フロントエンドエンジニア
プロフィール: 基本はイラストレイター（自称）だが、
本職は札幌市のフロントエンドエンジニア。
フロントエンドだけではなく、各種プログラミング言語に精通していると自負している。
HTML、CSSはもちろんのこと、JavaScript、TypeScript、PHP、Perl、Python、C#、Kotlin、Swift、Objective-Cなど多くの多くの言語に精通している他、
Movable Type、WordPressなど各種CMS、React.js、Angularなどフロントエンドフレームワークも扱える。
最近はUnityによる3Dコンテンツにも手を出している。
---
### Movable Type、スマホ版の作り方
URL: https://highmoon-miyabi.net/blog/2016/11/05_000434.html
公開日時: 2016-11-05T14:02:33+09:00
更新日時: 2016-11-05T18:48:47+09:00
カテゴリ: Movable Type,PHP,リダイレクト
概要: またまただいぶごぶさたで。 仕事がやばか...
本文: またまただいぶごぶさたで。
仕事がやばかった・・・。
さて、お気付きの方もいるかと思いますが、
月の高いところもやっとこさ、スマホ版公開できました。
実はまだ一部できてないけどね・・・。
というわけで、Movable Type（以下MT）でスマホ版ページを作る方法を解説してみようと思う。
さて、MTでスマホページを作る方法は大きく分けて二種類ある。
・MT公式のプラグインを使うか
・自作する
俺はどうしたかって？
当たり前だ、自作に決まっておろう。
というか、MTの公式プラグイン、16万もするもん、手出せんて。
ではどうするか、下記仕様のスマホサイトを作るとする。
・URLは同じ
・レスポンシブは使わない（コーディングめんどくさいから）
・PHPによる、ビューの振り分けをする
というわけで、下記の機能を備えたサーバーが必要だ。
・.htaccessなどを使ったサーバーサイドのリダイレクト、リライトを自分で設定できる。
・PHP、もしくはParlなどサーバーサイドプログラムが使用できる（MT使える時点でここは解決）
安めのレンタルサーバーなんかは、上記機能が使えない場合もあるので、注意してください。
さて、前置きは以上にしてやっていこう。
●スマホ用テンプレートの用意
スマホ用ページ生成のテンプレートを用意する。
ブログ記事を例にやっていく。
※MTの基本的な使い方は解説しないよ。
まずは、既存のテンプレートをコピーして、
テンプレート編集画面を開き、
テンプレートタイトルの頭を、まぁ、SP-とつけたりして区別する。
してとりあえず、保存（ここで再構築もしてしまうと、アーカイブマッピングがバッティングするのでしない）
次にアーカイブマッピングだが、
例えば、/blog/2016/11/05_******.htmlというふうに記事を作る場合、
アーカイブマッピングは、%y/%m/%d_%e.htmlとなるはず。
これを、スマホ用テンプレート領域に保存するために、
../sp/blog/%y/%m/%d_%e.html
と設定する。
こうすれば、ルートに、"sp"フォルダができ、
その中で、スマホ用テンプレートを溜めることができる。
実はこれMTの最大の利点で、
アーカイブマッピングをうまく使えば、領域内の、どこにでも好きなファイルを生成できるのだ。
あとは、スマホ用のコーディングにして、保存と再構築だ。
それ以外のテンプレートも同じように、スマホ用にコピーし、編集し、アーカイブマッピングを変更し、再構築していく。
次は、振り分け用のPHPだ。
●PC・スマホ振り分けPHPインデックス
これは下記のような感じでPHPファイルを用意し、/sp/sp_exchange.php って感じで置いておく。
```php
<?php
//アクセスURL・パラメータの取得
$hostName = $_SERVER['HTTP_HOST'];
$uriName = $_SERVER['REQUEST_URI'];
$queryString = (isset($_SERVER['QUERY_STRING'])) ? $_SERVER['QUERY_STRING'] : false;
//パラメータがある場合、URL格納変数からパラメータを取り除く
if ($queryString) {
$uriName = str_replace("?" . $queryString, "", $uriName);
}
//ユーザーエージェントを、全て小文字にして取得
$ua = mb_strtolower($_SERVER['HTTP_USER_AGENT']);
//モバイルかどうかのフラグを指定（このファイルでやっとくと、全ページで、PHP上でスマホフラグを持てる なんでかはのちに解説）
$mobileFlg = false;
$devices = array(
'iphone',
'android',
'ipod'
);
foreach ($devices as $dValue) {
if (strpos($ua, $dValue) !== false) {
$mobileFlg = true;
break;
}
}
//スマホの場合、色々と処理する
if ($mobileFlg) {
if (strpos($uriName,'.html') !== false || strpos($uriName,'.php') !== false) {
//リダイレクトで、index.html→/ という処理をしていた時のために、.phpとか.htmlをつけるための振り分け
if (strpos($uriName,'sp_exchange.php') !== false) {
//このファイルに直接アクセスじゃない場合
$uriName = '/index.php';
}
} else {
//上記同様に、/アクセスだった場合に、urlにアクセスファイル名を付加する。
$uriName .= 'index.html';
}
if (file_exists(dirname(__FILE__) . $uriName)) {
//このファイル自体が、/sp/内なので、同階層に同じファイル名のファイルがある場合、そのファイルをインクルードする
include(dirname(__FILE__) . $uriName);
} else {
//ファイルがない場合は、Not Foundとする。
header('HTTP/1.1 404 Not Found');
include(dirname(__FILE__) . '/404/index.html');
}
} else {
//PCは全てトップへ
$topUrl = 'http://' . $hostName;
header("Location: {$topUrl}");
exit;
}
```
アクセスURL、デバイスに対して上記のような処理をする。
とまぁ、PHP処理は以上で、次はサーバー側のアクセス処理なんだけど、勘のいい人は、何をやるかわかるでしょう。
●リライト・リダイレクト処理
最後にアクセスに対して、デバイスごとに振り分けをする。
.htaccess、もしくは、mod_rewrightなどで、下記の処理をする。
```text
RewriteEngine on
RewriteBase /
#スマホのユーザーエージェントを条件に追加
RewriteCond %{HTTP_USER_AGENT} (iPod|iPhone|iPad|Android|Windows\ Phone) [NC]
#各種画像などのファイルは除外
RewriteCond %{REQUEST_FILENAME} !^(.*)\.(gif|png|jpg|jpeg|css|js|mp4|ogv|zip|mp3|mid|ico|xml|rdf|rss|txt)$ [NC]
RewriteCond %{REQUEST_URI} !/sp/sp_exchange.php
RewriteRule ^(.*)$ /sp/sp_exchange.php [L,QSA]
```
そう、前項目でお気付きの方もいるかと思いますが、
スマホからのアクセスを全て、/sp/sp_exchange.php
に流してるのだ。
リダイレクトではなくリライトなのがポイント。
URLは変えずに、表示するものだけ変えている。
こうすることによって、処理と管理がグンとしやすくなるのだ。
実は、WordPressなんかも似たようなことしてたりする。
アクセスURLによって、インクルードさせるファイルを振り分けて、個々のページを表示しているのだ。
仕上げに、SEOのために、robots.txtに、/sp/以下のファイルには、ロボットが来ないようにしておく。
```text
User-agent: *
Disallow: /sp/
Allow: /
```
いかがだったでしょうか。
細かところは省いてるので、足りない部分があるかもしれませんが、
こんな感じで月の高いところは、スマホページ作ってみました。
もっといい方法があるって方は教えていただけると幸いです。
ではまた。
#### 著者
著者名: みやびプリン
職業: フロントエンドエンジニア
プロフィール: 基本はイラストレイター（自称）だが、
本職は札幌市のフロントエンドエンジニア。
フロントエンドだけではなく、各種プログラミング言語に精通していると自負している。
HTML、CSSはもちろんのこと、JavaScript、TypeScript、PHP、Perl、Python、C#、Kotlin、Swift、Objective-Cなど多くの多くの言語に精通している他、
Movable Type、WordPressなど各種CMS、React.js、Angularなどフロントエンドフレームワークも扱える。
最近はUnityによる3Dコンテンツにも手を出している。
---
### Sublime Text 自作ショートカット 選択テキスト前後に追加
URL: https://highmoon-miyabi.net/blog/2016/09/02_000433.html
公開日時: 2016-09-02T11:22:11+09:00
更新日時: 2016-11-05T17:21:26+09:00
カテゴリ: プログラム全般
概要: だいぶごぶさたです。 仕事がやばかった・...
本文: だいぶごぶさたです。
仕事がやばかった・・・。
みやびは、コーディングでSublime Textを使ってるのだが、
人気なだけあり、すごく使いやすい。
その中で、デフォルトでのキーボードショートカットが多彩で便利だ。
下記エントリーではコーディングで使えるショートカットを紹介している。
●覚えておくととても捗るSublime Textのショートカット | Select *
とまぁ、もちろんのこと自分でキーボードショートカットも追加できる。
コマンドメニュー、Preferences -> Key Bindings - Userと選んで開く。
例えば、ctrl+Enterで、改行タグと改行を入れたいなんて時下記のように書く。
```java
[
// brタグ挿入
{ "keys": ["shift+enter"], "command": "insert_snippet", "args": {"contents": "\n"},
"context": [
{ "key": "selector", "operand": "text.html" }
]
}
]
```
そんな勢いで、aタグとかよく使うclass付のタグとかもできるわけだが、
どうせタグを出すなら、選択テキストの前後に追加したいよねってわけで、いろいろ方法を考えた。
（デフォルトで、選択テキストの前後にタグを追加できるショートカットがあるが、本エントリの目的はよく使う属性付タグとかを一発で出せるように、だ）
グーグル先生では出てこなかったので、Preferences -> Key Bindings - Defaultをヒントに見つけた方法が下記
```java
[
// よく使うaタグ
{ "keys": ["ctrl+alt+a"], "command": "insert_snippet", "args": {"contents": "<a href=\"\/\">${0:$SELECTION}</a>"},
"context": [
{ "key": "selector", "operand": "text.html" }
]
}
]
```
ポイントは、${0:$SELECTION}。
Sublime Textの処理の中で、この変数にはどうやら選択テキストが入ってるっぽい。
これを応用して、他のものも出すことができるはずなので、
いろいろできそう。
既存のショートカットと合わせていろいろ便利に手早くやれるようになっていきたい。
ではまた。
#### 著者
著者名: みやびプリン
職業: フロントエンドエンジニア
プロフィール: 基本はイラストレイター（自称）だが、
本職は札幌市のフロントエンドエンジニア。
フロントエンドだけではなく、各種プログラミング言語に精通していると自負している。
HTML、CSSはもちろんのこと、JavaScript、TypeScript、PHP、Perl、Python、C#、Kotlin、Swift、Objective-Cなど多くの多くの言語に精通している他、
Movable Type、WordPressなど各種CMS、React.js、Angularなどフロントエンドフレームワークも扱える。
最近はUnityによる3Dコンテンツにも手を出している。
---
### 迷惑メール ヘッダ情報でなんとかならないか
URL: https://highmoon-miyabi.net/blog/2016/07/23_000432.html
公開日時: 2016-07-23T12:39:21+09:00
更新日時: 2016-10-25T01:50:47+09:00
カテゴリ: 雑記
概要: ※本エントリーは根本解決方法ではありませ...
本文: ※本エントリーは根本解決方法ではありません。どちらかというとこんなの誰か作って、という希望です。その点ご容赦ください。
久々の投稿だ。
もう、今多忙時期なため、けっこうきつい。
お腹もしくしくきてる。
さて、本題なんだけど、
この携帯社会において、かなり切実。
最近の迷惑メールって、こんな感じでくるわけよ。
```text
件名：携帯変えました♪
元気にしてますか(笑)
またご飯でも行きたいって思ってるんですけど、来週の金曜日なんてどうですか？(*´∀｀*)
最近暑いので、お互い体調管理には気を付けましょうね。
```
読んでる人もこんなメール一度は来た事あるでしょう。
名前も名乗らんで、明らかに業者だ。
みやびプリンは、あらゆる対策をこれまで試してきたが、
その中で一番効果があったのは、
"受信許可リスト"
受信拒否リストは、向こう側がアドレスを変えてきたらどうしようもない。
そこで、ある一定の傾向のアドレスなら受信許可をする、というのが威力を発揮した。
ちょっと前までは、@doComo.ne.jpとか、
微妙にドメインを変えてくるやつらにも効果が発揮できた。
しかし、ことここにきて、キャリアアドレスを完全に模倣してくるやからが出てきた。
本日来たメールも、
@docomo.ne.jpと、完全にキャリアのアドレスを使ってきやがった。
これではどうしようもない・・・。
ってなめんじゃねーよ
こちとらWEB業界のプロだ。
スマホでは見れない"ヘッダ情報"から、なんとかしてやろうと思った。
ヘッダ情報はPCからメールを見たり、PCにメールを転送したりなんだりで見る事ができる。
通常のdocomoのアドレスからのヘッダ情報は下記。
```text
Content-Type：text/plain; charset="utf-8"
Mime-Version：1.0
Return-Path：
X-Mailer：docomo mail ver.***01
Content-Transfer-Encoding：Base64
Received：from ebmky301sb.i.softbank.jp ([172.**.**.98]) by dmttsb02sb.i.softbank.jp with ESMTP id for ; Sat, 23 Jul 2016 07:45:53 +0900
Received：from docomo.ne.jp ([203.***.***.198]) by ebmky301sb.i.softbank.jp with ESMTP id for ; Sat, 23 Jul 2016 07:45:53 +0900
Message-Id：
X-Bmta-Type-Isp：
X-Dcmmail：spmode
```
個人情報っぽい部分は*で隠した。
さて、本日来たdocomoメールのヘッダ情報は下記
```text
Content-Type：text/plain; charset="utf-8"
Mime-Version：1.0
Return-Path：
Content-Transfer-Encoding：base64
X-Bmta-Type-Isp：
Message-Id：
Received：from ebmky301sb.i.softbank.jp ([172.**.**.98]) by dmttsa02sb.i.softbank.jp with ESMTP id for ; Sat, 23 Jul 2016 11:27:17 +0900
Received：from docomo.ne.jp ([203.***.***.195]) by ebmky301sb.i.softbank.jp with ESMTP id for ; Sat, 23 Jul 2016 11:27:17 +0900
Received：from docomo.ne.jp ([10.***.**.66]) by mfsmax.docomo.ne.jp(DOCOMO Mail Server Ver2.0) with SMTP id 0f5600695759b99023bb for ; Sat, 23 Jul 2016 11:27:16 +0900 (JST)
X-Php-Qdmail：version-1.2.6b The_MIT_License http://hal456.net/qdmail PHPver 5.4.45 send-by SMTP
X-Dcmmail：spmode
```
（迷惑メールアドレスの個人情報はあえて隠さない）
注目してほしいのは"Qdmail"という文字列
そして、下方の行"X-Php-Qdmail"
PHPって、明らかにPCからじゃねーかよ！！！！
Qdmailとは、PHPからメールを送信するアプリケーションというか、
ライブラリである。
動的にメールを送るような仕事をする人はお世話になった人も多いはず。
とにかく、ヘッダ情報から、
明らかに偽造だということがわかった。
これさえわかれば対策のしようがあるはず。
アドレスにdocomoってあるのに、Qdmailを使ってる、とか、いろいろ検知の方法があるはず。
と思ったが・・・。
現状では、
クライアント側でヘッダ情報で迷惑メールを検知する方法がない・・・。
非常に残念な話。
というわけで、下記サイトに、ヘッダ情報付きで報告するしかない・・・。
●迷惑メール相談センター
というわけで、誰か、
ヘッダ情報から受信拒否するメールクライアントを作ってくれ！
特にスマホアプリでキボンヌ！！！
↑自分で作れよ
#### 著者
著者名: みやびプリン
職業: フロントエンドエンジニア
プロフィール: 基本はイラストレイター（自称）だが、
本職は札幌市のフロントエンドエンジニア。
フロントエンドだけではなく、各種プログラミング言語に精通していると自負している。
HTML、CSSはもちろんのこと、JavaScript、TypeScript、PHP、Perl、Python、C#、Kotlin、Swift、Objective-Cなど多くの多くの言語に精通している他、
Movable Type、WordPressなど各種CMS、React.js、Angularなどフロントエンドフレームワークも扱える。
最近はUnityによる3Dコンテンツにも手を出している。
---
### CSS3、calcのTips的な
URL: https://highmoon-miyabi.net/blog/2016/06/29_000431.html
公開日時: 2016-06-29T12:20:55+09:00
更新日時: 2016-06-29T18:04:36+09:00
カテゴリ: CSS
概要: どうもエナジードリンク飲みすぎで、 寿命...
本文: どうもエナジードリンク飲みすぎで、
寿命が縮まってるんじゃないか疑惑のみやびです。
さて、さっそく表記をやっていこうか。
CSS3で超便利なファンクションがある。
calc()というもの。
こいつが便利も便利、超便利で、下手したらjsいらなくなるんじゃね？レベル。
なんと、CSSの値に、四則計算を入れれるってやつなのだ。
とまぁ、二年前から紹介記事出てるから、知ってる人多いと思うけどね・・・。
例えば、よくやりたいのが、100%に対して、npxだけマイナスしたい！
なんて時。
従来ならjsでやってたでしょう。
それがCSSだけでできちゃうって話。
```css
.testClass {
width: calc(100% - 200px);
}
```
ってやると、100%幅 - 200pxの横幅を指定できるってわけ。
こいつは便利だ。
そしてうれしいことに、IE9以上が対応してること。
今の時代ならもう使うことになんの抵抗もない。
まぁ、知ってる人多いと思うからね、
二つくらいチップスをやろうかと思う。
・ボックスの縦位置真ん中に画像
※画像の大きさは、一定ではないとする
<p class="centerImage">
<a href="test/"><img src="test_image.jpg" width="300" height="150" alt="Test image"></a>
</p>
```
```css
.centerImage {
background-color: #CCC;
padding: 320px 0 0;
position: relative;
text-align: center;
width: 320px;
}
.centerImage > a {
display: block;
height: calc(100% - 20px);
left: 10px;
position: absolute;
top: 10px;
width: calc(100% - 19px);
}
.centerImage > a:after,
.centerImage > a > img { vertical-align: middle;}
.centerImage > a > img {
height: auto;
max-height: 100%;
max-width: calc(100% - 1px);
width: auto;
}
.centerImage > a:after {
content: '';
display: inline-block;
height: 100%;
width: 1px;
}
```
after疑似要素もうまく使ってやってます。
display: teble-cellを使う方法もあるが、
そっちより、こっちのが俄然安定する。
また、画像大きさが固定なら、もっと単純にできるしね。
top: calc(50% - 25px)とかでできちゃいます。
・高さいっぱいいっぱいにブロック
※固定ヘッダーとかがあるパターン
<header>ヘッダー的な内容<header>
<div id="pageBody">
<div id="container">
<aside>
<nav>
リンクとか
</nav>
</aside>
<section>
内容とか
</section>
</div>
</div>
```
```css
header {
height: 50px;
position: fixed;
width: 100%;
}
#pageBody {
box-sizing: border-box;
height: 100%;
padding: 50px 0 0;
width: 100%;
}
#container {
height: calc(100% - 50px);
position: relative;
}
#container > aside {
background-color: #CCC;
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 200px;
}
#container > section {
background-color: #CCC;
margin: 0 0 0 200px;
height: 100%;
}
```
calcを使って、100%からheaderの高さ分を削ってるわけだ。
これを使えば、今まで難しかった、左右のブロックの高さを揃えてるかつ、ページいっぱいいっぱいの高さのブロックなんかが、
CSSだけでできる。
便利な時代になったもんや。
transitionとかもあるし、あまりJS使う機会もなくなるかもしらん勢い。
CSS3はマジで要習得やな。
#### 著者
著者名: みやびプリン
職業: フロントエンドエンジニア
プロフィール: 基本はイラストレイター（自称）だが、
本職は札幌市のフロントエンドエンジニア。
フロントエンドだけではなく、各種プログラミング言語に精通していると自負している。
HTML、CSSはもちろんのこと、JavaScript、TypeScript、PHP、Perl、Python、C#、Kotlin、Swift、Objective-Cなど多くの多くの言語に精通している他、
Movable Type、WordPressなど各種CMS、React.js、Angularなどフロントエンドフレームワークも扱える。
最近はUnityによる3Dコンテンツにも手を出している。
---
### CSS3、hoverのアニメーションに関して
URL: https://highmoon-miyabi.net/blog/2016/06/16_000427.html
公開日時: 2016-06-16T17:16:04+09:00
更新日時: 2016-06-16T18:11:14+09:00
カテゴリ: CSS,HTML5
概要: 暑い。 昨日、いったんゲーム解禁してしま...
本文: 暑い。
昨日、いったんゲーム解禁してしまったみやびです。
意志が弱い。
さて、表題の件。
かなーり乗り遅れてる感満載の題材ですが、ちょっと考えていく。
まずはCSS3を使った、オンマウス（hover）時のアニメーションのさせ方。
```css
.testClass {
opacity: 1;
-webkit-transition: 0.4s;
transition: 0.3s;
}
.testClass:hover {
opacity: 0.5;
}
```
いや、これだけでアニメーションできるなんて、ほんと便利な世の中になったもんだ・・・。
jQuery使うとどうしても重いし、なるたけCSS3使っていきたい。
さて、こっからが本題。
このCSS3のtransitionを、"使うか否か"である。
なぜなら、世紀のクソIE様は、
9以前のバージョンでは対応していないからだ。
8以下の葬儀は完了していて、ほぼ絶滅状態だし、
9も引退宣告をし、危篤状態ではあるが、
依然9の使用率は割と高く、無視できない。
うちの会社も、しばらくは対応予定だし。
だが、よく考えてみれば、
CSSにhoverを書いているこの書き方。
未対応ブラウザでも、hoverで反応してくれるではないか！
アニメーションされないだけで、ちゃんとhoverしてくれるなら、
これくらいは、もう使ってもいいじゃないか！！！
もう、JSでいちいち指定するのめんどかったんよ。
transition、イージングもできるからね！
もう、どんどん使いますよ！
名実ともにIE9の絶滅が確認できたら、ほとんどのことはCSS3使うんだ。
あと少し、あと少し・・・。
というわけで、ただ単に、独り言言いたいだけでした。
#### 著者
著者名: みやびプリン
職業: フロントエンドエンジニア
プロフィール: 基本はイラストレイター（自称）だが、
本職は札幌市のフロントエンドエンジニア。
フロントエンドだけではなく、各種プログラミング言語に精通していると自負している。
HTML、CSSはもちろんのこと、JavaScript、TypeScript、PHP、Perl、Python、C#、Kotlin、Swift、Objective-Cなど多くの多くの言語に精通している他、
Movable Type、WordPressなど各種CMS、React.js、Angularなどフロントエンドフレームワークも扱える。
最近はUnityによる3Dコンテンツにも手を出している。
---
### JavaScript、スマホで、bodyのみスクロール無効
URL: https://highmoon-miyabi.net/blog/2016/05/31_000424.html
公開日時: 2016-05-31T17:48:49+09:00
更新日時: 2016-11-11T15:41:44+09:00
カテゴリ: JavaScript,jQuery
概要: どうも、禁ゲーの禁断症状で死にそうなみや...
本文: どうも、禁ゲーの禁断症状で死にそうなみやびです。
もうね、会社行かなくなる勢いだからねマジ。
さて、表記の件やっていこう。
これね、全部スクロール無効にすんなら簡単なんだよ。
例えば、下記HTMLの、div#testTargetをスワイプした時はスクロールさせない、とか。
●HTML
<body>
<div id="testTarget" style="overflow-y: auto; height: 200px;">
<p>
あかさたな
はまやらわ
<span style="display: block; margin-top: 800%;">わをーーーん</span>
</p>
</div>
</body>
```
●JavaScript(jQuery)
$('#testTarget').on('touchmove.noScroll', function(e) {
e.preventDefault();
});
```
ターゲットDOMに対して、このようにイベントを追加すればいい。
ただし、これやるとどうなるかってと、
div自体のスクロールも不能になる。
例えば、サイドバーを表示する時、
サイドバーの高さが高い時なんかは、コンテンツの下のほうが見えなくなる。
そしたらねぇ、自分でスクロールを作るしかない。
※jQuery使ってます。
```javascript
$('#testTarget').on('touchmove.noScroll', function(e) {
e.preventDefault();
});//div上では全部スクロールできないようにする。
//共通変数を定義
var scrollYStart = 0,
scrollYMove = 0,
swipeTime = new Date();
var scrollAction = function(setDom, d, spd){
setDom.stop().animate({scrollTop: d}, spd, 'easeOutQuint');
};
$(function(){
$('#testTarget').bind({
touchstart: function(e) {
//タッチ始め
$(this).stop();//アニメーションストップ
scrollYStart = event.changedTouches[0].pageY;//タッチ始めの座標
scrollYMove = scrollYStart;
swipeTime = new Date();//タッチ始めの時間
},
touchmove: function(e) {
//スワイプ中
var posY = event.changedTouches[0].pageY,//スワイプ中の座標
scrollNow = $(this).scrollTop();//現在のスクロール
var lastSc = scrollNow + scrollYMove - posY;
scrollAction($(this), lastSc, 0.5);//スクロールを実行
scrollYMove = posY;//スワイプ中座標を格納
},
touchend: function(e) {
//タッチが終わった時
var lastY = scrollYStart - scrollYMove;//どれだけスワイプしたか
var nowT = new Date();//タッチ終了時間
var difTime = nowT.getTime() - swipeTime.getTime();//スワイプ経過時間
if (difTime 見ればわかると思うけど、
touchstart、touchmove、touchendの三点セットを使って、
スクロールを再現してるわけだ。
スタートでスワイプ開始時間をとり、タッチ終了時との時間比較で、
短ければ、スワイプとみなし、アニメーションで追加スクロールをする。
これを使えば、
サイドバーを表示している間は、bodyはスクロールさせないで、
その中身をスクロール、なんてできる。
設定数値を変えれば、スクロールの感じを変えることができる。
iPhoneでやればそれっぽくって設定したつもり。
やり方は全然違うが、下記エントリーが非常に参考になった。
●タッチイベントを用いたスワイプ＆フリックの実装サンプル
これやるのに、えらく苦労したんだよ。
最初は、背景要素とコンテンツ要素を分け、背景要素にだけ、スクロール禁止をし、
対象要素だけ、デフォルトのスクロールをそのまま残すようにした。
だが、それだと、対象要素をスクロールしている間に、bodyが動いてしまう時があった（特にiPhone）
しかし、これなら、そんなんもクリアできる。
問題はデバイスのスペックだけど、
現代のデバイスならだいたいいけると思う。
さて、帰るかね・・・。
#### 著者
著者名: みやびプリン
職業: フロントエンドエンジニア
プロフィール: 基本はイラストレイター（自称）だが、
本職は札幌市のフロントエンドエンジニア。
フロントエンドだけではなく、各種プログラミング言語に精通していると自負している。
HTML、CSSはもちろんのこと、JavaScript、TypeScript、PHP、Perl、Python、C#、Kotlin、Swift、Objective-Cなど多くの多くの言語に精通している他、
Movable Type、WordPressなど各種CMS、React.js、Angularなどフロントエンドフレームワークも扱える。
最近はUnityによる3Dコンテンツにも手を出している。
---
### JavaScript、イベント付きDOMの操作
URL: https://highmoon-miyabi.net/blog/2016/05/24_000423.html
公開日時: 2016-05-24T14:55:16+09:00
更新日時: 2016-05-25T00:12:54+09:00
カテゴリ: JavaScript,jQuery
概要: どうも、スープカレーが目に入って死ぬかと...
本文: どうも、スープカレーが目に入って死ぬかと思ったみやびです。
まじで染みるわ。
さて、
最近、jQueryとかライブラリ使わないでネイティブのJSに挑戦してるのですが、
その中でもDOM操作ってのが、けっこう難しいんだよ、ネイティブはさ。
ただ、jQueryなどのライブラリでDOM操作をするのは実は重い。
スマホなどの低スペックデバイスだと、けっこう悲鳴を上げたりする。
そんな中、ネイティブの有用なメソッドに、DocumentFragmentというのがある。
これは、通常一個一個DOMを挿入していかねばならんのを、予め、DOMの塊を生成することができるってやつ。
DOMって、操作する度にブラウザがレンダリングするので、無駄にメモリを食う。
なので、DOMの塊を予め作っておいて、一気に挿入、レンダリングは一回で！ってやることで、パフォーマンスの向上になるわけ。
●普通のやり方
var targetDOM = document.getElementById('targetID');//ulタグ
for(var i = 0; i これだと、一回入れるたんびにブラウザがレンダリングしる。
まぁ、途中jQuery使っても同じく一個入れるたびにブラウザはレンダリングする。
●DocumentFragmentを使った場合
var targetDOM = document.getElementById('targetID');//ulタグ
var fragmentDOM = document.createDocumentFragment();//Fragmentオブジェクトの生成
for(var i = 0; i こうすることによって、レンダリングは最後の一回だけってわけ。
けっして便利ではないけど、パフォーマンスの向上にはなります。
さてこっからが本題
（なげーよ前置きが）
ネイティブでのDOM操作の方が、軽くする方法があり、ライブラリを読み込むことによるパフォーマンスの低下も防げる。
前述した、DocumentFragmentなんてのは、特にスマホでどんどん使っていきたいものだ。
だが、やはり一から自分で書くのはけっこうきつい。
例えば、イベントをつけたDOMをいったんコピーし、別のところに入れたい時。
下記の方法では当然イベントはコピーされない。
```javascript
var btnElement = document.getElementById('testBtn');
$(btnElement).click(function(){
console.log('クリックイベントつけるにjQuery使っちゃってるのはめんどくさいからです。');
});
var wrapperTarget = document.getElementById('targetDOM');
var copyBtn = btnElement.cloneNode(true);//ボタンのコピーを生成
btnElement.parentNode.removeChild(btnElement);//ボタンを削除しちゃう
wrapperTarget.appendChild(copyBtn);//ターゲットにボタンのコピーを入れる
```
当然押してもなんもならん。
うん、そうだと思ったよ。
多分、付与されてるイベント検索して、
再付与しなきゃいけないだろう。
そうだろうよ。
だからね、あきらめたよ。
便利な部分はjQuery使おう
ってね。
```javascript
var btnElement = document.getElementById('testBtn');
$(btnElement).click(function(){
console.log('クリックイベントつけるにjQuery使っちゃってるのはめんどくさいからです。');
});
var wrapperTarget = document.getElementById('targetDOM');
var copyBtn = $(btnElement).clone(true);//jQueryでボタンのコピーを生成
btnElement.parentNode.removeChild(btnElement);//ボタンを削除しちゃう
$(wrapperTarget).append(copyBtn);//ターゲットにボタンのコピーを入れる。（もちろんjQueryで）
```
こんなとこくでぇでパフォーマンス落ちんべ。
→いや、読み込んでる時点で（以下ry
というわけで、パフォーマンス向上を目指す中でも、
落ちないような場所にはライブラリ積極的に使っていきましょうって話でした。
#### 著者
著者名: みやびプリン
職業: フロントエンドエンジニア
プロフィール: 基本はイラストレイター（自称）だが、
本職は札幌市のフロントエンドエンジニア。
フロントエンドだけではなく、各種プログラミング言語に精通していると自負している。
HTML、CSSはもちろんのこと、JavaScript、TypeScript、PHP、Perl、Python、C#、Kotlin、Swift、Objective-Cなど多くの多くの言語に精通している他、
Movable Type、WordPressなど各種CMS、React.js、Angularなどフロントエンドフレームワークも扱える。
最近はUnityによる3Dコンテンツにも手を出している。
---
### JavaScript、関数に処理を追加
URL: https://highmoon-miyabi.net/blog/2016/05/16_000420.html
公開日時: 2016-05-16T14:25:08+09:00
更新日時: 2016-05-16T23:19:41+09:00
カテゴリ: JavaScript
概要: お疲れ様です。 さっそく表記の件。 ペー...
本文: お疲れ様です。
さっそく表記の件。
ページ間で共通で読み込み、各々で違う処理をさせたいってなったので、
（例えばウィンドウリサイズ時に、起動させるメソッドは一緒だけど、ページごとに追加処理をさせたい、とか）
いろいろ探してみた。
が、
うまい方法が見つからなかった・・・。
ひとまず思いついた方法が下記。
```javascript
//ラッパークラスを定義
var $wrapperObjClass = function(c){
//コンストラクタ起動時に、初期化関数を実行するようにしている。
if(c){
this.init(c, true);
}
};
//初期化メソッドと処理メソッドを定義
$wrapperObjClass.prototype = {
init: function(c, f){
var orignTestFunc = this.testFunc;
this.testFunc = function(f){
orignTestFunc(f);
if (c) {
try {
c(f);
} catch(e) {
console.log(e);
}
}
};
},
testFunc: function(f){
console.log('そうだよ');
}
};
//インスタンス格納（コンストラクタ起動）
var $testFuncInstanse = new $wrapperObjClass(function(){
console.log('アホだよ');
});
$testFuncInstanse.testFunc(); //出力：そうだよアホだよ
```
クラスメソッド（コンストラクタで起動している初期化メソッドinit）定義時に、
11行目で、拡張したい関数のもともとのメソッドを、変数に格納して逃がし、
次の行からもともとのメソッドを定義し直して、
その中で、元メソッドと、追加処理を実行している。
下記エントリを参考にしている。
（やってることはほとんど一緒）
●javascript：既存の関数を拡張する（処理を追加する） - Qiita
なんかもっとスマートな方法ないんかね・・・。
jQueryだと、onとかで、処理を追加なんてやってるけど、
jQueryの中身を研究するなんて、めんどくさくてやってられんし、
探してもやっぱこんな方法しか思いつかなかった。
これでいくしかないか・・・。
誰かもっとスマートな方法あったら教えてほしい。。。
#### 著者
著者名: みやびプリン
職業: フロントエンドエンジニア
プロフィール: 基本はイラストレイター（自称）だが、
本職は札幌市のフロントエンドエンジニア。
フロントエンドだけではなく、各種プログラミング言語に精通していると自負している。
HTML、CSSはもちろんのこと、JavaScript、TypeScript、PHP、Perl、Python、C#、Kotlin、Swift、Objective-Cなど多くの多くの言語に精通している他、
Movable Type、WordPressなど各種CMS、React.js、Angularなどフロントエンドフレームワークも扱える。
最近はUnityによる3Dコンテンツにも手を出している。
---
### Mac El Capitan でcompassのパスが通らなくなった時
URL: https://highmoon-miyabi.net/blog/2016/05/15_000419.html
公開日時: 2016-05-15T12:15:55+09:00
更新日時: 2016-05-15T16:37:16+09:00
カテゴリ: CSS
概要: どうも、腹が痛いみやびです。 でもおまえ...
本文: どうも、腹が痛いみやびです。
でもおまえのキャラの方が痛いってみやびです。
さて、ここまでにしといて、表記の件。
私のPCはMacで、このサイトのCSSは、基本的にSassで書いてるのですが、
今年に入る少し前から、Sassのコンパイルができなくなった。
[ERROR] compass not found. Make sure it exists in your PATH.
ってエラーが出るのよ。
OSアップデート(El Capitanにしてからだったと思ふ)が原因だろなーと思いつつ、
調べても下記エントリーのような方法しかでてこなく、
それをやってもうまくいかなかった。
●[Mac]Sublime Text3でSassのコンパイルエラーが出た場合の解決方法 | ホームページ制作のことなら福岡のハブワークス
これならうまくいきそうなのに・・・と思いつ、
時間がないので、CSSを直接いじって修正をしていた。
だが、やはりSassとの整合性がなくなるのは気持ち悪いので、
調べ方を変えてみると、下記の不吉なエントリーを当てた。
●CompassをインストールするMac OS X El Capitan編 〜Sass（７） | IT工房｜Webデザイン入門
まさかと思い、compassをインストールし直してみた。
うん、コンパイルできたわ
つまり、パスが通る通らないの以前に、
そもそも、OSアップデート時に、
compassが動いてないか消えていたのだ。
OSアップデートは往々にしてこういうことはあるから、
した際にはいろいろな可能性ためすべきだね。
某PCの改悪アップデートは警戒するけど、
Macの場合、割としっかりサポートとマイナーアップデートしてくれるから、
ついつい油断してアップデートしちゃいます。
とにかく、Sassってcompass使ってる人、
El Capitanにアップデートして動かなくなったら、compass再インストールしてみて！
さて、SassとCSSの整合性とるか・・・。
#### 著者
著者名: みやびプリン
職業: フロントエンドエンジニア
プロフィール: 基本はイラストレイター（自称）だが、
本職は札幌市のフロントエンドエンジニア。
フロントエンドだけではなく、各種プログラミング言語に精通していると自負している。
HTML、CSSはもちろんのこと、JavaScript、TypeScript、PHP、Perl、Python、C#、Kotlin、Swift、Objective-Cなど多くの多くの言語に精通している他、
Movable Type、WordPressなど各種CMS、React.js、Angularなどフロントエンドフレームワークも扱える。
最近はUnityによる3Dコンテンツにも手を出している。
---
### tryの有用性について
URL: https://highmoon-miyabi.net/blog/2016/05/12_000418.html
公開日時: 2016-05-12T01:49:42+09:00
更新日時: 2016-05-15T11:32:42+09:00
カテゴリ: プログラム全般
概要: どうも、またおっそい時間になってしまった...
本文: どうも、またおっそい時間になってしまった。
さて、表記の件。
みやびプリンは、ガッサいことに、
tryをまず使ってなかった。
というか、存在は知ってたけど、いまいちわからず手をつけてなかった。
最近、会社での勉強会で、使い方を知り、
大規模開発には欠かせない存在だってことに気づいて使ってみたら、
あら便利
ってなったので、思わずその有用性を語りたく記事に。
なのでビギナー向けの記事だよ！
（つまり俺はビギナーってことなw）
だいたいどのプログラミング言語にもあるこの"try構文"。
いわゆる例外対策の予約語構文である。
エラーが起きた場合の通り道を作ることができる。
JavaScriptを例に使い方は下記。
```javascript
var arrObj = 55; //配列が入ってると思いきや、数値の場合もある
try {
arrObj.push('Insert string');
alert(arrObj[0]);
} catch(eStr) {
alert(eStr + '\n配列じゃねんだよアホンダラぁ！！！');
}
```
例では、変数に数値を入れ、
tryの中で、わざと配列用メソッドを実行している。
実行してもらえればわかると思うけど、
catchの中の命令が実行されると思う。
同じ命令を、tryなしで実行すると、プログラムの実行がそこで止まってしまうはずだ。
tryは、構文をまず実行してみて、エラーが起きなければ、そのまま実行、
構文内でエラーが起こると、処理が止まらずにcatchへと処理を移すことができる。
また、catch構文の引数には、try内で起こったエラーの文章が入る。
ifでもできるんじゃね？と思うかもしれないが、
ifだと、elseとかで、あらゆるパターンを示さないといけなく、キリが無い。
また、ifのための実行途中でエラーが起きてしまえば、当然そこで処理は止まってしまう。
まぁでも、短いプログラムなら、ifでもやりきれるかもしれない。
しかし、大規模開発で、例えば、
100個の画像一個一個に処理加えるが、
途中でエラーが起きてもひとまず、すべての画像の処理を終えてからエラー処理をしたいなんて時、
tryを使えば、一発で終わる。
なにより、エラーが起きても処理を続けれるってのがいい。
また、ifとか他の予約語と一緒で、どの言語もだいたい使い方は同じ。
こいつはマジで便利や。
もうこいつなしでは、プログラム書けんな。
ってわけで寝る
#### 著者
著者名: みやびプリン
職業: フロントエンドエンジニア
プロフィール: 基本はイラストレイター（自称）だが、
本職は札幌市のフロントエンドエンジニア。
フロントエンドだけではなく、各種プログラミング言語に精通していると自負している。
HTML、CSSはもちろんのこと、JavaScript、TypeScript、PHP、Perl、Python、C#、Kotlin、Swift、Objective-Cなど多くの多くの言語に精通している他、
Movable Type、WordPressなど各種CMS、React.js、Angularなどフロントエンドフレームワークも扱える。
最近はUnityによる3Dコンテンツにも手を出している。
---
### HTML5のtemplateタグが超便利
URL: https://highmoon-miyabi.net/blog/2016/05/10_000417.html
公開日時: 2016-05-10T10:27:34+09:00
更新日時: 2018-12-20T17:04:50+09:00
カテゴリ: HTML5,JavaScript
概要: どうも。 平均睡眠時間が3時間のみやびプ...
本文: どうも。
平均睡眠時間が3時間のみやびプリンです。
GW中にある本を購入しました。
●HTML5 Web標準APIバイブル
もうね、一目ぼれね。速攻で買ったよ。
どれも革新的情報ばかりですが、その中でも特にこれはいい！と思ったのが表記の新要素。
このtemplateタグ、
レンダリングや、SEO的には評価されないが、ソース的には存在させることができる、というものだ。
どういうことか説明していく。
例えば、
JavaScriptなどで、動的にメニューやらなんやらのDOMを追加する時、
従来だと下記手法が主流であると思う。
```html
<div id="scriptWrapper" style="display: none;">
<nav id="gNav">
<ul>
<li><a href="/">HOME</a></li>
<li><a href="/about/">あぼーと</a></li>
</ul>
</nav>
</div>
```
要素にdisplay: none;を効かせて隠す方法だ。
特に問題ないのだが、こいつの弱点といえば、
ブラウザレンダリング時に、中の画像とかはロードされてしまうことと、
SEO上の評価の対象となってしまうことだ。
いくらGoogle的にはdisplay: noneを否定していないといえど（技術の否定をしないため）
ページに直接関係ない情報などまで評価対象となるのは、いささかやりずらいというもの。
そこでtemplateタグなのである。
上記を下記のように書き換える。
```html
<template id="scriptWrapper">
<nav id="gNav">
<ul>
<li><a href="/">HOME</a></li>
<li><a href="/about/">あぼーと</a></li>
</ul>
</nav>
</template>
```
こうすれば、レンダリングされないばかりか、SEOの評価対象にもならない。
DOMツリーに挿入するには、下記のようなスクリプトを書く
var navTmp = document.getElementById('scriptWrapper').content;
var gNav = navTmp.getElementById('gNav');
document.getElementsByTagName('body').item(0).appendChild(gNav);
```
ネイティブなのはしゃーない。
jQueryでもできなくはないけど・・・。
とにかくこれを使えば動的なリッチコンテンツが非常に作りやすくなるのだ！
ただし、非常に残念なことに、IEはどのバージョンでもまったくサポートしていない。
Edgeが、ver13から対応してるようだ。
なので現状は業務に使えない・・・・なんてこたない
スマホがあるじゃないの、スマホが！
スマホはこういった最新技術を存分に使えるからほんといいね。
PCは、IEが完全に死ぬまで厳しいですが、
スマホで、ガンガン使っていきましょう。
僕もさっそく使う。
#### 著者
著者名: みやびプリン
職業: フロントエンドエンジニア
プロフィール: 基本はイラストレイター（自称）だが、
本職は札幌市のフロントエンドエンジニア。
フロントエンドだけではなく、各種プログラミング言語に精通していると自負している。
HTML、CSSはもちろんのこと、JavaScript、TypeScript、PHP、Perl、Python、C#、Kotlin、Swift、Objective-Cなど多くの多くの言語に精通している他、
Movable Type、WordPressなど各種CMS、React.js、Angularなどフロントエンドフレームワークも扱える。
最近はUnityによる3Dコンテンツにも手を出している。
---
### ポーカー（テキサス・ホールデム）の戦略的な話 - 攻撃（ブラフ）編
URL: https://highmoon-miyabi.net/blog/2016/05/07_000388.html
公開日時: 2016-05-07T01:30:03+09:00
更新日時: 2016-05-07T03:07:03+09:00
カテゴリ: 雑記
概要: どうも。 GWですね。 みやびはあれだ、...
本文: どうも。
GWですね。
みやびはあれだ、実家でのんびりしましたよ。
どうでもいいちゅうねん。
これ以上は表題が釣りになりかねんので、書いてくか。
（画像は完全に釣りね）
さて、ポーカー、一度飽きたのですがw
再燃したので、書こうと思ってた、戦略的なことを考察して書いていこうと思う。
ズバリ、今回はブラフの使いどころ。
ポーカーはおろか、賭け事全般最弱なみやびですが、
ある程度成果を上げている、ブラフのタイミングを列挙したい。
・ボタンであること
・POTにある程度溜まってる
・自分の前のプレーヤーがCheckかFoldしてること
・コミニュティが、強そうな役が出やすい状態
・ワンペア以下だがある程度勝負できる手であること
・フロップかターン時点では最強の手になっていること
みやびは、上記いくつかの条件が当てはまる時、ブラフを仕掛けている。
もちろん、プレーヤーの性格（プレイの仕方とかね）も考慮に入れるから、上記パターンがハマっても仕掛けない時もあれば、
逆に仕掛ける時もあるんだけど、あくまで基本的なタイミングだ。
一個一個解説してく。
・ボタンであること
結構重要。
ボタンはとにかく、自分以外の全てのプレーヤーの様子を見てから、アクションを決めれるので極めて有利。
ブラフ使わない時でも、かなりプレイしやすいポジション。
ボタンの時なぜブラフ仕掛けるかは、後述。
・POTにある程度溜まってる。
これがないと話にならない。
例えば、ブラインド$100の時に、
POTに$600しかありませんって時に、
$1万とか出してブラフって、相手降ろしても、
結果$400しか増額しない。
それだとハイリスク・ノーリターン。話にならない。
なので、これは絶対条件。
しかし、ブラフ仕掛けやすい時は往々にして、POTには溜まってないことも少なくないので、
ストレートとかフラッシュになりそうだったら、見込みでちょいちょいBetして貯めとくのも重要。
・自分の前のプレーヤーがCheckかFoldしてること
ボタンであると、ほぼ同義の条件。
例えばコミュニティがバラバラで、最高役が3カードなんて時に、
自分の前が全員checkかfoldしてるって時は、
破産しない程度にけっこう多めに出してみる。
すると、降りるか続投かはっきりと分かれるので、
相手の的を絞れ、戦いやすくなる。
また、全員降りてくれれば、そのまま、安い手でPOT回収になりしめしめである。
ただ、本当に強い手で様子見してきてる相手がいた時は注意が必要。
なので、破産しない程度、が肝心。
アウトボクシングでこのパターンは逃げ道残すのが大事。
・コミニュティが、強そうな役が出やすい状態
上の条件と少々似てるが、
こちらの方がリスクは高い。
コミュニティが強い時に、多めに出して相手をビビらすのはブラフの真骨頂といえるが、
かなりリスクは高い。
わかると思うけど、コミュニティ強いってこた、全員がチャンスだからね。
なので、ボタンかその右隣で、最後の方の順目であることと、自分の前がcheckかfoldで様子見してる、
との合わせ技で使っていきたい。
・ワンペア以下だがある程度勝負できる手であること
ブラフといえど、まるっきり3とか5のハイカードよりは、当然Aのハイカードとかワンペアくらいはほしいもの。
万が一オープンになった時の保険があったほうがいい。
（ってかむしろだいたい最後までいっちゃうし）
やたらめっこブラフ使うよりは、手が完全に勝負できない状況なら、
しっかり降りとこうって話。
・フロップかターン時点では最強の手になっていること
これが実は最重要。
ブラフとも言いづらい部分もある。
これが使える人はマジで強い。負けなしだと思う。
みやびは未だに数回程度しか成功したことない。
つまり、全部開いて、それ以上の役を作られる前に、降ろす！
である。
例えば、ターンの時点で、
♠5、♥Q、♠8、♦A
ってコミュニテイ。
ハンドが、
♥5、♣A
って時。
誰かが3カードやってる可能性があるも、この時点ではまず負けるわけ無いハンドだ。
だが、リバーが開けられて以下のようになったらどうだろう。
♠5、♥Q、♠8、♦A、♣Q
Qの3カードどころか、フルハウスさえも見える手になる。
こうなるともう、自身の手に不安さえ覚える。
そう、この状況は、リバーが開けられる前に、決着をつけねばならない手なのである。
だから、ターンの時点で、かなり多めに出して、行くしかない。
ターンで降ろせれば、値千金なのだ。
しかしながら、強い人ってのは、そうやすやすと降りてくれない。
可能性ある限りリバーまで絶対降りないって人もいる。
なので、それまでのプレイで、他プレヤーのスタイルを見ていくのはとても重要。
ほんと、ターンで決着つけれるようになりたい・・・。
以上、ブラフのタイミング的なのを解説してきましたが、
ここ間違ってるとか、もっといい戦い方あるとかあったら、教えて下さいー
かなり独断と偏見なので。
もっと強くなりてー
さて、もう寝よう・・・。
#### 著者
著者名: みやびプリン
職業: フロントエンドエンジニア
プロフィール: 基本はイラストレイター（自称）だが、
本職は札幌市のフロントエンドエンジニア。
フロントエンドだけではなく、各種プログラミング言語に精通していると自負している。
HTML、CSSはもちろんのこと、JavaScript、TypeScript、PHP、Perl、Python、C#、Kotlin、Swift、Objective-Cなど多くの多くの言語に精通している他、
Movable Type、WordPressなど各種CMS、React.js、Angularなどフロントエンドフレームワークも扱える。
最近はUnityによる3Dコンテンツにも手を出している。
---
### 金井憧れ
URL: https://highmoon-miyabi.net/blog/2016/05/02_000409.html
公開日時: 2016-05-02T15:34:29+09:00
更新日時: 2016-05-02T22:49:54+09:00
カテゴリ: 雑記
概要: さっき伊達市から苫小牧市に帰ってきました...
本文: さっき伊達市から苫小牧市に帰ってきました。
明日伊達市で「カーナビラジオ午後一番」ていうラジオ番組の公開生放送があって見たかったんだけど今晩、元同僚の人と飲む約束してたから帰ってきました。
だけどね、先方が用事あって「今札幌にいるから札幌で飲まない？」と言われました。
伊達市から帰ってきて札幌行くなんてなまら大義だから断りました。
今晩の予定が無くなったので無償にカーナビラジオの公開生放送が見たくなっちゃった。
トイレ掃除して今晩伊達市に戻ろうかな？明日の早朝行こうかな？諦めようかな？
こういう時フォロワーさんに投げ掛けて答え求めてる芸能人Twitterみると憧れるなぁ。
ここもそうならないかなぁ～。
#### 著者
著者名: 夕毛利
プロフィール: 管理人の・・・
---
### 恥めまして
URL: https://highmoon-miyabi.net/blog/2016/05/02_000407.html
公開日時: 2016-05-02T00:23:03+09:00
更新日時: 2016-05-02T01:25:35+09:00
カテゴリ: 雑記
概要: こんばー!!ユーモウリだ～よ～！ いや....
本文: こんばー!!ユーモウリだ～よ～！
いや...こんばんは...ユウモウリです。
ブログ書くのはmixiぶりなんで何書いていいかわかりません。
正直文章書くのも苦手だしネタなんて思い付きませんのでこれから書いていく記事は箇条書きの乱筆乱文な愚痴と文句のオンパレード、テーマパーク、ファンタジードームになると思います。NARUTO思います。だってばよ!!
今、古川未鈴さんがツイートしたと通知が来ました。「暴食が止まらない」だってさ。
古川未鈴さんに最近ハマってます。かわいくないけどかわいいです。
古川未鈴さんは元レギュラーなんですが年齢非公開なのに「おはスタ」のやまちゃん最終回でサプライズゲストとしてレイモンドが登場した時にやまちゃん、レイモンドのツーショットを見て「小学生の時テレビで見てた二人だぁ」と興奮してました。
そんな純粋な感じを見て好きになりました。
結婚して下さい。
結局あれだよね。美人さんとか可愛い人よりいきものがかりの吉岡聖恵ぐらいのルックスの女性が露出ある格好した方がドキドキしちゃうよね。
とりあえず今日はこの辺にします。
最後に熊本地震で被災された方々にはお見舞い申し上げます。
#### 著者
著者名: 夕毛利
プロフィール: 管理人の・・・
---
### IE、audio、videoタグについて結論
URL: https://highmoon-miyabi.net/blog/2016/04/27_000403.html
公開日時: 2016-04-27T10:21:43+09:00
更新日時: 2016-04-27T16:17:29+09:00
カテゴリ: HTML5,IE
概要: ※本エントリーは珍しく解決法ではない記事...
本文: ※本エントリーは珍しく解決法ではない記事です。
※結論を述べているだけです。（カッコつけ）
さすがIE、Web屋の敵です。
最新になってもファックなやろうです。
さて、表題の件。
昨日、当サイト音楽ページで、audioタグを導入した。
ずっとブランクリンクで音楽ファイル直接リンクさせてたんだけどね。
さしものIEでも、最新の11なら大丈夫だろうと思ったら、
無効なソース
と出てきた。
またIEかよ・・・と思い、調べてみた。
ところが、audioタグを検索にしてるにも関わらず、ヒットするのはvideoタグの記事が大半であった。
記事を見るにつけ、まさか・・・と不安になり、当サイト映像ページを見てみると、
案の定、videoタグで、無効なソースと出てきてたのだ。
いろいろ調べて試したが、うまくいかず・・・。
・HTML5のvideoタグを使って動画を貼り付ける時の注意点と問題点
※.htaccessの設定。当サイトではすでに行っていた。
・無効なソース | Osamushi.jp
※ビデオデータのコ―デックの設定によって表示されない的な感じ。
そもそも、当サイトではH264で書きだしてました。
・<video>タグの動画が表示されない（ベーシック認証・Android・無効なソース）
※videoタグの中にobjectを入れる方法。頼みの綱のこれもダメ・・・。
というわけで、結論。
うん、あきらめよう。
理由としては、
あらゆるサイトで、これならうまくいくよ、とのサンプルソースを見ても、
現在IEでは表示不可であった。
そして、当サイト、昨年、2015年8月あたりにリニューアルを行っており、
その時点は確かにIEでもvideoタグは再生できてた。
これを鑑みるに、Micro○Soft（伏字失敗）のアップデートのどこかのタイミングでおかしくなった可能性が非常に高い。
Windows 7のサポートはもうそろそろ終了する。
ということは、IEの現最高バージョンの11もサポートが終わる。
（もうWinの標準ブラウザはEdgeになるからね）
つまり、事実上IEでのvideo、audioタグの使用は
半永久的に不可能
って結論なんです。
MSが気まぐれでIEアップデートしない限りはね。
死ぬまで、Web屋を苦しめ続けたってことだな、クソIEは。
というわけで、
どんなに苦しい条件でも実現してきた僕ですが（えっへん）
今回だけはさすがに閉口しました。
マジでギブアップです。
だって、アップデートの仕様じゃぁねぇ。
アップデートして、対応してくれることを念願して止まない。
それまでは、IE使ってる人ごめんなさい。
さっさとブラウザ乗り換えましょう。
余談ですが、
ローカルのHTMLだと再生できました。
どういうこっちゃね！！！
（XAMPPなど、ローカルの仮想サーバーとかはダメ。純粋なHMLファイルからのみ）
サーバー上で再生できなきゃ意味ないぢゃん！！！！！！！！
はぁ・・・・。
#### 著者
著者名: みやびプリン
職業: フロントエンドエンジニア
プロフィール: 基本はイラストレイター（自称）だが、
本職は札幌市のフロントエンドエンジニア。
フロントエンドだけではなく、各種プログラミング言語に精通していると自負している。
HTML、CSSはもちろんのこと、JavaScript、TypeScript、PHP、Perl、Python、C#、Kotlin、Swift、Objective-Cなど多くの多くの言語に精通している他、
Movable Type、WordPressなど各種CMS、React.js、Angularなどフロントエンドフレームワークも扱える。
最近はUnityによる3Dコンテンツにも手を出している。
---
### Movable Typeで日付比較（Movable Type × PHP）
URL: https://highmoon-miyabi.net/blog/2016/04/24_000402.html
公開日時: 2016-04-24T09:03:13+09:00
更新日時: 2016-04-29T04:57:56+09:00
カテゴリ: Movable Type,PHP
概要: おはこんばちは。 このサイトのブログも、...
本文: おはこんばちは。
このサイトのブログも、気づけば4年くらいやってるのに気づき、
古い情報の記事も増えてきたので、
よくある、この記事は古いですよ〜表記をしようと思った。
というか、このサイト自体MTで作ってるのに、そういえばMTの記事まったく書いてなかったなっても思い、今回の題材。
そう、今回は、デベロッパーが必ずぶつかる壁、"日付比較"です。
MTだけでやろうと思ったけど、難しかったので、
PHPとの合わせ技にしました。
下記感じでやっていく。
```php
<MTIgnore>エントリーの日付を取得、MT変数に格納する</MTIgnore>
<MTEntryDate format="%Y-%m-%d" setvar="entryDate">
<?php
$articleModiTime = strtotime('<MTGetVar name="entryDate">'); // PHPの変数に、MT変数の日付をタイムスタンプに変換して格納。
$timeNow = time(); // 現在の日付タイムスタンプを格納。
$yearTime = 60 * 60 * 24 * 365; // タイムスタンプの年の秒数を定義
$yearDif = 0; // 現在との年の差を格納するための変数
// 現在と記事の日付が、一年以上の開きがあったら表示
if($timeNow - $articleModiTime > $yearTime):
$yearDif = floor(($timeNow - $articleModiTime) / $yearTime); // 時間差を年で割って、小数点以下切り捨て
?>
<p>
※この記事は<?php echo $yearDif; ?>年以上前の記事です。<br>
現在は状況が異なる可能性がありますのでご注意ください。
</p>
<?php endif; ?>
```
単純に、タイムスタンプに格納して、
比較して〜一年以上の開きがあったら、表示、みたいにしている。
MTだけで日付比較しようと思ったんだけど、今より古いかどうかしか
できないのと、タイムスタンプを出す方法がすぐ見つからなかったので、
どれだけの日付差があるか、はめちゃくちゃいろいろ調べないとor長いプログラム書かないと
できないと思ったので、PHP使ってしまえと思って、今回のスクリプトでした。
いやー、PHPあったらなまらいろいろできるわ。
多分Perl書ける人なら、わざわざPHP使わないでも、できるかと思います。
僕はMT使ってる割にPerlは全然使えませんw
ついでといってはなんだけど、
HTMLをPHPとして実行する方法というか、.htaccessの書き方に関しては下記エントリを参照のこと。
このサイトも、HTMLをPHPとして実行してます。
【サーバー別】HTML上でPHPを実行するための.htaccessの記述
http://m630.net/archives/816
いろいろとマルチに言語使えるといろいろやれるね。
つまづいたら、一つの言語にこだわらずに、
複合してみてる道が開けやすいかもしれない。
ではまた。
#### 著者
著者名: みやびプリン
職業: フロントエンドエンジニア
プロフィール: 基本はイラストレイター（自称）だが、
本職は札幌市のフロントエンドエンジニア。
フロントエンドだけではなく、各種プログラミング言語に精通していると自負している。
HTML、CSSはもちろんのこと、JavaScript、TypeScript、PHP、Perl、Python、C#、Kotlin、Swift、Objective-Cなど多くの多くの言語に精通している他、
Movable Type、WordPressなど各種CMS、React.js、Angularなどフロントエンドフレームワークも扱える。
最近はUnityによる3Dコンテンツにも手を出している。
---
### jQuery プラグイン、Lightbox風モーダルウィンドウ Ver2
URL: https://highmoon-miyabi.net/blog/2016/04/23_000401.html
公開日時: 2016-04-23T23:58:27+09:00
更新日時: 2016-04-25T12:03:28+09:00
カテゴリ: jQuery
概要: 親父が久々に家に来ました。 ちょいと、両...
本文: 親父が久々に家に来ました。
ちょいと、両親と叔母さんと一緒に札幌で用事があったそうな。
おかんと叔母さんはリッチなビジネスホテルに行ってるらしい。
経費削減と、叔母さんを一人にするわけにはいかないのはわかるけど、
男の待遇なんてこんなもんなのか、と悲しくなる。
そして、部屋が汚いので大変申し訳ない 泣
さて、いつも通りの長い余談はここまでにしといて、
会社でまたプラグイン作りました。
以前もおんなじの作ったけど、決定的な欠陥がありまして、それを改善したバージョンです。
改善欠陥は下記
・スマホで表示がまともにできなかった。
・インラインモード時に、元のブロックにつけてたイベントが軒並み消える
・iframeモードで、自動でのサイズ取得
スマホで使えなかったら、使えんよね、ほんと。
イベントが消えるのは、会社の案件で自分で使ってみて要望があったというね。
革命的なのは、iframeの自動サイズ取得
これはでかい。
（ただし、同サーバーのみ汗）
まずはスクリプト
●jQuery Simple Modal Window View Ver.2.2
使い方は下記。
```html
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
<script src=" 本エントリーのJSを格納した場所 /jquery.smwv.2.2.min.js">
<script>
$(function(){
//フリック表示させたいブロックのセレクタに、simpleModalWindowViewを適用
$('.testLink001').simpleModalWindowView({
groupe: 'aGroupe'
});
$('.testLink002').simpleModalWindowView();
});
</script>
</head>
<body>
<p>
<a href="images/test01.jpg" class="testLink001">グループ画像001</a>
<a href="images/test02.jpg" class="testLink001">グループ画像002</a>
<a href="images/test03.jpg" class="testLink001">グループ画像003</a>
<a href="images/test04.jpg" class="testLink002">単体画像001</a>
<a href="images/test05.jpg" class="testLink002">単体画像001</a>
</p>
</body>
```
みんなが大好きcolorboxとほぼ同じ使い方です。
特徴としては
・スマホ対応
・インライン、iframe表示可
・iframeの自動サイズ取得可（同サーバーに限る）
・iframeを使えば、動画の埋め込みも可
・グループ表示可
ってとこやな。
シンプルな構造なので、CSS後付けが簡単にできるようになってます。
オプションは下記
オプション名
説明
値の形式
初期値
viewMode
表示するコンテンツを指定する
img / inline / iframe文字列
img
speedOpen
ウィンドウを開く時のスピード
数値
700
speedClose
ウィンドウを閉じる時のスピード
数値
700
speedMove
ウィンドウのサイズを変更した時の、コンテンツの動くスピード
数値
500
closeBtn
閉じるボタンの中身
テキスト、タグ（imgも可能）
-
groupe
グループ表示する際のグループ名
文字列
null
groupeNext
グループ表示時の次へボタンの中身
テキスト、タグ（imgも可能）
-
groupePrev
グループ表示時の前へボタンの中身
テキスト、タグ（imgも可能）
-
shiftTime
グループの次の表示をするまでの時間
数値
200
nombersView
グループ表示時、番号表記をするかどうか
true / false（真偽値）
true
groupeText
グループ番号表記のタイトル
文字列
images
groupeTextCenter
グループ番号表記の真ん中の文字
文字列
of
shadowUsed
ウィンドウに影をつけるかどうか
true / false（真偽値）
true
shadowSize
影のぼかしの大きさ
数値(px指定)
10
shadowSpread
影の範囲
数値(px指定)
2
shadowOpacity
影の透明度
数値(0〜1)
0.2
backColor
背景のオーバーレイの色
文字列(カラーコード)
000000
backOpacity
背景のオーバーレイの透明度
数値(0〜1)
0.5
boxWidth
表示させるコンテンツの横幅
数値（PC：px、スマホ：横幅に対しての%）
auto
boxHeight
表示させるコンテンツの縦幅
数値（PC：px、スマホ：横幅に対しての%）
auto
boxColor
表示コンテンツの背景
文字列(カラーコード)
FFFFFF
boxColorOpacity
表示コンテンツの背景の透明度
数値(0〜1)
1
wrapperPaddingSide
表示コンテンツの内側の横の隙間
数値(PC：px、スマホ：%)
50
wrapperPaddingRow
表示コンテンツの内側の縦の隙間
数値(PC：px、スマホ：%)
50
wrapperPaddingAll
表示コンテンツの内側の隙間、一括指定
配列 / 文字列(PC：px、スマホ：%
例：文字列）15px 20px 30px
例：配列）[15, 20, 30])
null
radiusUsed
角丸にするかどうか
true / false（真偽値）
false
radiusSize
角丸の大きさ
数値(px指定)
10
imageShadow
画像の時、画像に影をつけるかどうか
true / false（真偽値）
false
imageShadowSize
画像の影のぼかしの大きさ
数値(px指定)
10
imageShadowSpread
画像の影の範囲
数値(px指定)
2
imageShadowOpacity
画像の影の透明度
数値(0〜1)
0.2
前回記事でも書きましたが、
完全に、IE8以下はサポート外になってるので、ご了承ください・・・。
ちゅうても、IE8以下はやっとお亡くなりになられたからね。
多分大丈夫。
あとは、ボタンのCSSとかは、下記に、よく変更するであろう、DOMを記載しておくので、
CSS割り当ての参考にしてください。
ブロック名
説明
#SModalContentsWrapper
コンテンツのラッパー
#SModalContents
コンテンツの直接の親要素
#SModalImageTitle
コンテンツのタイトル
#SModalCloseBtn
閉じるボタン
#SModalControllers
次へ前へボタンや、番号表記全体
#SModalBtns
次へ前へボタン
#SModalBtnNext
次へボタン
#SModalBtnPrev
前へボタン
#SModalNumbers
番号表記
#SModalNumberNow
番号表記、現在の番号
#SModalNumberAll
番号表記、要素数
しかし、元をすでに作ってたものなので、
けっこう早くできるかなと思ったら、
意外に一週間くらいかかった・・・。
もちろん他の案件もやりながらで、こだわって作ってからだけど、ちょいと時間かけすぎた。
そして、本当に、GitHub始めようって、本気で思いました・・・。
公開しずらいのなんの。
まぁとにかく、どんどん使っていただければ幸いです。
#### 著者
著者名: みやびプリン
職業: フロントエンドエンジニア
プロフィール: 基本はイラストレイター（自称）だが、
本職は札幌市のフロントエンドエンジニア。
フロントエンドだけではなく、各種プログラミング言語に精通していると自負している。
HTML、CSSはもちろんのこと、JavaScript、TypeScript、PHP、Perl、Python、C#、Kotlin、Swift、Objective-Cなど多くの多くの言語に精通している他、
Movable Type、WordPressなど各種CMS、React.js、Angularなどフロントエンドフレームワークも扱える。
最近はUnityによる3Dコンテンツにも手を出している。
---
### colorboxでiframeの高さを可変にする方法
URL: https://highmoon-miyabi.net/blog/2016/04/21_000398.html
公開日時: 2016-04-21T16:32:11+09:00
更新日時: 2016-04-24T17:33:54+09:00
カテゴリ: jQuery
概要: 本日、夜中、というか朝方まで起きて会社に...
本文: 本日、夜中、というか朝方まで起きて会社にきてしまいました。
アホです。
さて表記の件。
以前、3年も前にも書いた記事と同じだけど、もっといい方法を編み出したので、
記事を書いてみようかと。
ただし、モダンブラウザだと、セキュリティがうるさいのでクロスドメインだとうまくいかない方法なのであしからず・・・。
まずはみんな大好き、colorbox。
colorbox
http://www.jacklmoore.com/colorbox/
そしてスクリプト
```javascript
$(".iframe").colorbox({iframe:true, innerWidth:500}, function(){
//iframeをloadさせる
$('#cboxLoadedContent').children('iframe').load(function(e){
var iframeContSizeHeight = new Array(0);
try {
//iframe内のdivのサイズを片っ端から入れてく
$(this).contents().find('body').find('div,section').each(function(index, el) {
iframeContSizeHeight.push($(el).outerHeight());
});
}
catch (eTry) {
//iframe内ドキュメント取得不可の場合
iframeContSizeHeight.push(400);
}
var maxHeight = Math.max.apply(null, iframeContSizeHeight); //取得サイズから一番でかい数値を格納
//windowサイズ取得
var parentW = $(window).width();
var parentH = $(window).height();
var cboxWidth = $('#colorbox').width(); //ライトボックスの動的な横幅を取得
var left = parentW / 2 - cboxWidth / 2; //親の横幅／2 - ライトボックス横幅／2をして、横の余白を算出
var dt = parseInt($('#colorbox').css('top')); //ライトボックスに動的に入った「top」の値を取得
var pL = dt - (maxHeight / 2); //動的なtopの値からライトボックスの高さの半分を引く
if(pL とまぁこんな感じでいける。
みていただければわかる通り、colorboxさん、表示後のコールバック関数を定義できるのだ。
```javascript
$("せれくたー").colorbox({
//オプション
}, function(){
//コールバック処理
});
```
なので、表示後に大きさとかを計算し、入れ直してるってわけ。
さすがcolorbox。
前回の方法より改善させた部分として大きいのは、
親ページからの処理のみで完結してるところ。
これなら子ページにわざわざ処理を書かなくてもオーケー。
ただ、やっぱり、クロスドメインだと値が取ってこれないのが痛い・・・。
（tryでごまかしてる）
クロスドメインでも、AJAXできるプラグインありますが、
クロスドメインだと、iframeのload後のcontents()メソッドが動かない・・・。
そして、子ページHTML内に、divもsectionもなかったら当然うまくいきません。
さすがにそんなHTML書く人いないとは思うけど。
ここまで書いといてなんですが、
今だったらcolorbox使わんで自分でプラグイン書いちゃうけどねｗ
前回より進歩してるってこった、地味にこの業界長いんだよな俺。
今日は早く寝る。
#### 著者
著者名: みやびプリン
職業: フロントエンドエンジニア
プロフィール: 基本はイラストレイター（自称）だが、
本職は札幌市のフロントエンドエンジニア。
フロントエンドだけではなく、各種プログラミング言語に精通していると自負している。
HTML、CSSはもちろんのこと、JavaScript、TypeScript、PHP、Perl、Python、C#、Kotlin、Swift、Objective-Cなど多くの多くの言語に精通している他、
Movable Type、WordPressなど各種CMS、React.js、Angularなどフロントエンドフレームワークも扱える。
最近はUnityによる3Dコンテンツにも手を出している。
---
### jQuery スマホフリック対応スライドショー プラグイン
URL: https://highmoon-miyabi.net/blog/2016/04/14_000394.html
公開日時: 2016-04-14T01:13:31+09:00
更新日時: 2019-01-16T09:49:24+09:00
カテゴリ: jQuery
概要: またこんな時間だ・・・。 （AM 01:...
本文: またこんな時間だ・・・。
（AM 01:15）
さて、会社にて、スライドショーjQueryプラグイン作ったので公開してみた。
以前作った、スマホ用フリックスライドショーの改良版で、
スマホ、PC両方対応型です。
●jQuery Simple Slide Show
前回も言ったけどシンプルでいいんだよ、プラグインはごちゃごちゃした機能はいらないのだよ。
カスタマイズしやすいのが一番！
使い方は、簡単
```html
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
<script src=" 本エントリーのJSを格納した場所 /jquery.sslideshow.1.0.min.js">
<script>
$(function(){
//フリック表示させたいブロックのセレクタに、sslideshowを適用
$('.slideView').simpleSlideShow({
slideBtnPrev: '前へ',
slideBtnNext: '次へ'
});
});
</script>
</head>
<body>
<div class="slideView">
<ul>
<li><img src="images/test01.jpg" alt="" width="100%" height="auto"></li>
<li><img src="images/test02.jpg" alt="" width="100%" height="auto"></li>
<li><img src="images/test03.jpg" alt="" width="100%" height="auto"></li>
<li><img src="images/test04.jpg" alt="" width="100%" height="auto"></li>
<li><img src="images/test05.jpg" alt="" width="100%" height="auto"></li>
</ul>
</div>
</body>
```
divかなんかに、リストのラッパー要素(ulとか)、その中にリスト要素(liとか)って構造でタグをつける。
その一番外側のタグに対してプラグイン関数を効かせる。
そんだけ。
機能としては前回同様、
・フリックできる。
・自動スライドショー
・次へ前へボタン
・左右に次・前のスライドを表示可能
・サイズの指定可能
・中身は自由に編集できる
・サムネイルも付けれる
・PC、スマホ自動振り分け
・フェードとスライドの切り替えアリ
ってとこか。
ちなみに、サムネイルは、自分で定義すれば、それを使ってくれる。
下記のように、"S3-thumbList"ってクラスをつけたul、liタグを、スライドショー本体の後ろにくっつけてくれればいい。
```html
<ul>
<li><img src="images/test01.jpg" alt="" width="100%" height="auto"></li>
<li><img src="images/test02.jpg" alt="" width="100%" height="auto"></li>
<li><img src="images/test03.jpg" alt="" width="100%" height="auto"></li>
<li><img src="images/test04.jpg" alt="" width="100%" height="auto"></li>
<li><img src="images/test05.jpg" alt="" width="100%" height="auto"></li>
</ul>
<ul class="S3-thumbList">
<li><img src="images/thumb01.jpg" alt="" width="100%" height="auto"></li>
<li><img src="images/thumb02.jpg" alt="" width="100%" height="auto"></li>
<li><img src="images/thumb03.jpg" alt="" width="100%" height="auto"></li>
<li><img src="images/thumb04.jpg" alt="" width="100%" height="auto"></li>
<li><img src="images/thumb05.jpg" alt="" width="100%" height="auto"></li>
</ul>
</div>
```
オプションは下記になります。
オプション名
説明
値の形式
初期値
shiftTime
自動スライド時の、次のスライドまでの時間
数値
6000
speedMove
スライドが動く時間
数値
800
slideMode
フェードかスライドかを選択
slide / fade（文字列）
slide
listWidth
スライド単体の横幅
数値(スマホ%指定、PCはpx指定)
auto
listHeight
スライド単体の縦幅
数値(スマホは%指定←横幅に対して、PCはpx指定)
auto
tagSingle
スライド単体のタグ指定
タグ名
li
tagWrapper
スライドを囲っているタグ指定
タグ名
ul
slideBtnOn
次へ・前へボタンを表示させるかどうか
true/false（真偽値）
true
autoSlide
自動スライドさせるかどうか
true / false（真偽値）
true
slideBtnPrev
前へボタンの中身を指定
テキスト、タグ（imgも可能）
-
slideBtnNext
次へボタンの中身を指定
テキスト、タグ（imgも可能）
-
thumbList
サムネイルを表示させるかどうか
true / false（真偽値）
true
thumbContents
サムネイルliタグの中身を定義
テキスト、タグ（imgも可能）
-
reverseParsent
フリックが
中途半端な時に
どれくらいで戻すかの指定
数値（横幅/数値）
8
loadingBlock
フリック時、ループの
一番最後or最後に来た時に表示する、
ローディングブロックの中身
テキスト、タグ（imgも可能）
Loading...
flick
スライドモードの時、スマホでフリック可能にするかしないか
true / false（真偽値）
true
前回のやつから、若干オプション増えてます。
にしても、2年前くらいは、同じもの作るのに、5、6倍の時間かかったけど、
今は案外すんなりいった。
オブジェクト指向のおかげですぁ
さて、寝る。
#### 著者
著者名: みやびプリン
職業: フロントエンドエンジニア
プロフィール: 基本はイラストレイター（自称）だが、
本職は札幌市のフロントエンドエンジニア。
フロントエンドだけではなく、各種プログラミング言語に精通していると自負している。
HTML、CSSはもちろんのこと、JavaScript、TypeScript、PHP、Perl、Python、C#、Kotlin、Swift、Objective-Cなど多くの多くの言語に精通している他、
Movable Type、WordPressなど各種CMS、React.js、Angularなどフロントエンドフレームワークも扱える。
最近はUnityによる3Dコンテンツにも手を出している。
---
### JavaScript、文字列のn番目～n文字削除
URL: https://highmoon-miyabi.net/blog/2016/04/12_000393.html
公開日時: 2016-04-12T18:05:52+09:00
更新日時: 2016-04-12T22:36:46+09:00
カテゴリ: JavaScript
概要: こんばんは。 最近、JSの組み込みクラス...
本文: こんばんは。
最近、JSの組み込みクラスをオーバーライドして拡張する方法覚えてから、けっこう楽しい。
いずれjQueryいらん時がくるかもしらん。
さて、表題の件なんだけど、
よくある方法が、
sliceとかsubstringを使う方法なのだが、
これらのn番目系のメソッドは、n番目を抽出はすれど、
n番目を削除して残った文字列がほしい、なんてことはできない。
要は、
"あほやろーこのくそ"の、"やろー"を取った、
"あほこのくそ"がほしいって時に一発ではできない。
replace使えばって？
それだと、下記場合、どうするのと。
"あほやろーこのやろー"の二番目の"やろー"だけを取りたい時。
普通にreplaceを使った場合、
"あほこの"になってしまう。
（一応、n番目に出現した文字列って、正規表現はあるらしいけど・・・）
というわけでn番目～n文字を抜いた文字列を生成する、メソッドを作った。
```javascript
String.prototype.substrremove = function(offset, strNo){
var parent = this,
parentStr = '',
usedStrNo = 1,
usedOffset,
offsetNow=0;
if(offset){
usedOffset = offset;
}
if(strNo){
usedStrNo = strNo;
}
for (var i = 0; i = usedOffset && i 使い方は下記
```javascript
var testStr = 'あほやろーこのやろー';
var resStr = testStr.substrremove(7, 3);
console.log(resStr); // 出力結果：あほやろーこの になるはず。。。
```
前回記事のメソッドも組み合わせれば、
n番目に登場する指定文字を削除した文字列、なんてのもできる。
どんどん作ってこ～
#### 著者
著者名: みやびプリン
職業: フロントエンドエンジニア
プロフィール: 基本はイラストレイター（自称）だが、
本職は札幌市のフロントエンドエンジニア。
フロントエンドだけではなく、各種プログラミング言語に精通していると自負している。
HTML、CSSはもちろんのこと、JavaScript、TypeScript、PHP、Perl、Python、C#、Kotlin、Swift、Objective-Cなど多くの多くの言語に精通している他、
Movable Type、WordPressなど各種CMS、React.js、Angularなどフロントエンドフレームワークも扱える。
最近はUnityによる3Dコンテンツにも手を出している。
---
### PHPのpreg_match_allをJavaScriptで
URL: https://highmoon-miyabi.net/blog/2016/04/08_000392.html
公開日時: 2016-04-08T00:59:55+09:00
更新日時: 2016-04-12T18:07:12+09:00
カテゴリ: JavaScript
概要: こんばんみ。 AM1時40分。 眠い。 ...
本文: こんばんみ。
AM1時40分。
眠い。
さてさてPHPには死ぬほど便利な関数がある。
表記にもある、
"preg_match_all"だ！
詳しくは下記リファレンスをご参照のこと。
●preg_match_all
この関数を使えば、
正規表現を使って文字列の繰り返し検索ってのができる。
要は、文字列の中にある、<tag>文字列だお</tag>のような感じの
タグっぽいものの間の文字をとってこれたりする。
```php
あほだお';
preg_match_all("|<[^>]+>(.*)</[^>]+>|U", $str, $out, PREG_SET_ORDER);
echo $out[0][0] . ", " . $out[0][1] . "\n";
echo $out[1][0] . ", " . $out[1][1] . "\n";
/* 出力結果
文字列だお, 文字列だお
あほだお, あほだお
*/
```
なんて便利なんだ！！！！！！
これをJavaScriptでやれないか、なんて思い調べたら、案の定なかったので、
作ってみた。
```javascript
//every関数を使ってるので、対応してないブラウザのためになかったら定義
if(!Array.prototype.every){
Array.prototype.every = function(callBack){
var parent = this;
var lastReturnBool = true;
for(var i=0; i 使い方は下記
```javascript
あほだお';
//正規表現オブジェクトを生成
var reg = new RegExp("<[^>]+>(.*)</[^>]+>", "g");
var searchStrArr = strff.pregMatchAll(reg, PREG_PATTERN_ORDER);
```
これでPHPの方とだいたい同じ動きをするはず。
これ使ってこう、マジ便利。
ちなみに、下記エントリーを参考にさせていただきました。
whileの部分とか
●[Javascript] PHP の preg_match_all 関数のようにキャプチャの結果が格納された配列を得たい
さて、寝よう。。。。
#### 著者
著者名: みやびプリン
職業: フロントエンドエンジニア
プロフィール: 基本はイラストレイター（自称）だが、
本職は札幌市のフロントエンドエンジニア。
フロントエンドだけではなく、各種プログラミング言語に精通していると自負している。
HTML、CSSはもちろんのこと、JavaScript、TypeScript、PHP、Perl、Python、C#、Kotlin、Swift、Objective-Cなど多くの多くの言語に精通している他、
Movable Type、WordPressなど各種CMS、React.js、Angularなどフロントエンドフレームワークも扱える。
最近はUnityによる3Dコンテンツにも手を出している。
---
### こんにちは
URL: https://highmoon-miyabi.net/blog/2016/04/08_000391.html
公開日時: 2016-04-08T00:27:50+09:00
更新日時: 2016-04-08T00:35:24+09:00
カテゴリ: 雑記
概要: tes ...
本文: tes
#### 著者
著者名: 夕毛利
プロフィール: 管理人の・・・
---
### 続・WordPressのRSSフィードを外部から読み込めない時の話
URL: https://highmoon-miyabi.net/blog/2016/04/06_000390.html
公開日時: 2016-04-06T14:52:06+09:00
更新日時: 2016-04-06T15:08:21+09:00
カテゴリ: WordPress
概要: そう、 表記の件だけど、前回の記事、なま...
本文: そう、
表記の件だけど、前回の記事、なまら嘘こいてました。
WordPressはなんも悪くない。
素晴らしいCMSです。
大好きです。（ヲイ
そう、XML読み込みが安定しなかったのは、
僕が原因だった。
問題だったのは下記書式
```xml
<![CDATA[ 内容 ]]>
```
最初、うまく読み込めなかったから、このCDATAってやつ消してました。
（読み込めなかったのは違う部分が原因やった）
どうやら、XMLの正式な書式らしいです。
XMLとHTMLって、コードの書き方一緒じゃけん、
XMLタグの中にHTMLタグがあるとエラーが起きるので、
（むしろ、CDATA消してそのエラー起きて安定してなかった）
このCDATAってのを使うと、XMLタグの中にHTMLタグを入れることができる。
うん、安定しましたよ、表示。
して、AJAX使うよりはるかに安定しましたよ。
ごめんねお母さん。
先入観って怖い。
#### 著者
著者名: みやびプリン
職業: フロントエンドエンジニア
プロフィール: 基本はイラストレイター（自称）だが、
本職は札幌市のフロントエンドエンジニア。
フロントエンドだけではなく、各種プログラミング言語に精通していると自負している。
HTML、CSSはもちろんのこと、JavaScript、TypeScript、PHP、Perl、Python、C#、Kotlin、Swift、Objective-Cなど多くの多くの言語に精通している他、
Movable Type、WordPressなど各種CMS、React.js、Angularなどフロントエンドフレームワークも扱える。
最近はUnityによる3Dコンテンツにも手を出している。
---
### WordPressのRSSフィードを外部から読み込めない時の話
URL: https://highmoon-miyabi.net/blog/2016/04/04_000389.html
公開日時: 2016-04-04T10:12:25+09:00
更新日時: 2016-04-04T10:38:28+09:00
カテゴリ: WordPress
概要: どうもみやびプリンです。 北海道もやっと...
本文: どうもみやびプリンです。
北海道もやっとこさ雪解けの季節です。
ちょっと、久々にハマって一日使ったのでグチを。（ヲイ
さて、表記の話。
WordPressからRSSフィードを外部のPHPページ読み込みたい時がけっこうあり、
様々方法がありますが、
大体出てくるのは以下の方法だろう。
```php
$rss = simplexml_load_file(RSSのURL);
//XMLの構造が、の時（RSSフィードはだいたいこれ）
foreach($rss->channel->item as $item){
//処理
}
```
simplexml_load_file()メソッドを使う方法だ。
そう、これで問題ない。問題ないんだよ。
本来は。
こっからが問題、
ある案件でこれをやった時、おかしな現象が起きた。
更新するたびに、
1.読み込める
2.中のPHPが実行されない
3.そもそも読み込めない
の3パターンを繰り返したのだ。
一日もがきにもがいた結論
WordPressのフィードはレスポンスが安定しないってこと
要は、WordPressは外部PHPとしこたま相性が悪いってこと・・・。
さんざんあがいた挙句、PHPで読み込むのはあきらめ、
AJAXで読み込むことにした。
そうしたら、嘘のようにすんなり行きました・・・。
```javascript
$.ajax({
url: RSSのURL,
type: 'GET',
dataType: 'xml',
timeout: 1000,
error: function() {
location.reload();
},
success: function(xml){
$(xml).find('item').each(function(index, val) {
//処理
});
}
});
```
一日返せ！
今回、たまたま、サーバー的な問題もあったからこうしたことが起きたけど、
（DNS切り替え時だったから安定してなかった）
教訓は、
ダメなら違う方法を探せ
です。これに尽きる。
システム屋の基本だね・・・。
とりあえず、頭のしわが増えたって話
#### 著者
著者名: みやびプリン
職業: フロントエンドエンジニア
プロフィール: 基本はイラストレイター（自称）だが、
本職は札幌市のフロントエンドエンジニア。
フロントエンドだけではなく、各種プログラミング言語に精通していると自負している。
HTML、CSSはもちろんのこと、JavaScript、TypeScript、PHP、Perl、Python、C#、Kotlin、Swift、Objective-Cなど多くの多くの言語に精通している他、
Movable Type、WordPressなど各種CMS、React.js、Angularなどフロントエンドフレームワークも扱える。
最近はUnityによる3Dコンテンツにも手を出している。
---
### ポーカー（テキサスホールデム）にはまった
URL: https://highmoon-miyabi.net/blog/2016/03/11_000387.html
公開日時: 2016-03-11T12:28:53+09:00
更新日時: 2016-05-07T01:58:45+09:00
カテゴリ: 雑記
概要: どうも。 集中力が雀の涙のみやびプリンで...
本文: どうも。
集中力が雀の涙のみやびプリンです。
ほんとね、やる気がほしいよ。
さて、最近ポーカーはまってます。
面白い・・・！
ルールとか役とかはしってたけど、
本格的にチップを使ってやるやり方ってのは知らなかった。
きっかけは、Liar Gameです。
ようつべでドラマみてたら、
17ポーカーですか、それ観てて、
チップ使って本格的にやったらどうなんべ、とアプリ落としてやってみたってのが始まり。
はまったよ、マジで面白い。
チップも自分で買っちゃったよ。
（相変わらず無駄遣い）
ポーカーって、
最初に、5枚ずつ配って、いらないのは交換、ってイメージの方が強いのですが、
現代で行われてるポーカーのルールって違うのですよ。
フロップポーカーと呼ばれる、
いわゆる、共通手札を使ったルールです。
その中でも、最新というか多くプレイされているだろうルールが、
"テキサスホールデム"です。
ルールは、下記エントリーを参照のこと。
●テキサスホールデムの基本ルール
簡単に言うと、最初に各プレーヤーに2枚配って、
段階踏んで、最終的には5枚の共通手札が出ます。
その7枚の中で、5枚使って最強役を作り、
勝負するって感じです。
何が面白いって、
駆け引きだよ！！！
共通手札があることによって、
相手の手を予測し、自分の手札と比べ、
掛け金を決めたり、降りたりを選択する・・・。
そして、自分以外が降りた場合、自分の手札を開けることなく、勝利することができる・・・。
そう、ブラフ（自分の手が弱くても、掛け金をガボっと出して、強く見せる手法）でも十分勝負ができるのです。
そこが面白い。
たとえ、なんぼ多く出してきても、その人の手が強いとは限らないのです。
麻雀だとそうはいかないんだよ。
まぁ手が安くてもリーチくらいか。
その点、テキサスホールデムは、
駆け引きの仕方が縦横無尽なのです。
掛け金も自分で選べるし。
持ち金少なくなった時の大逆転は麻雀より難しいけど・・・。
とまぁ、ブラフ至上な感じで書いてきましたが、
最初は面白ぇって使いまくってたけど、最近はほとんど使ってません・・・。
その理由や戦略的な話は、次の記事にでも。
さて、仕事戻るぞ。
#### 著者
著者名: みやびプリン
職業: フロントエンドエンジニア
プロフィール: 基本はイラストレイター（自称）だが、
本職は札幌市のフロントエンドエンジニア。
フロントエンドだけではなく、各種プログラミング言語に精通していると自負している。
HTML、CSSはもちろんのこと、JavaScript、TypeScript、PHP、Perl、Python、C#、Kotlin、Swift、Objective-Cなど多くの多くの言語に精通している他、
Movable Type、WordPressなど各種CMS、React.js、Angularなどフロントエンドフレームワークも扱える。
最近はUnityによる3Dコンテンツにも手を出している。
---
### あけおめことよろ
URL: https://highmoon-miyabi.net/blog/2016/01/07_000386.html
公開日時: 2016-01-07T01:45:56+09:00
更新日時: 2016-10-25T08:53:24+09:00
カテゴリ: 雑記
概要: どうもみやびプリンです。 あけおめこと...
本文:
どうもみやびプリンです。
あけおめことよろ。
去年描けなかった干支絵、今年は描いた。
やっぱ集中力とか落ちてる。これで二時間くらい。
今年は、フィーバーしたい。
なんかでフィーバーしたい。
小説とか、絵とか。
そして、スチームパンクはまってます。
ほんに、スチームパンクなの描けるようになりたい。
いろいろ頑張る。
#### 著者
著者名: みやびプリン
職業: フロントエンドエンジニア
プロフィール: 基本はイラストレイター（自称）だが、
本職は札幌市のフロントエンドエンジニア。
フロントエンドだけではなく、各種プログラミング言語に精通していると自負している。
HTML、CSSはもちろんのこと、JavaScript、TypeScript、PHP、Perl、Python、C#、Kotlin、Swift、Objective-Cなど多くの多くの言語に精通している他、
Movable Type、WordPressなど各種CMS、React.js、Angularなどフロントエンドフレームワークも扱える。
最近はUnityによる3Dコンテンツにも手を出している。
---
### JavaScriptの組み込み関数、とか
URL: https://highmoon-miyabi.net/blog/2015/12/18_000384.html
公開日時: 2015-12-18T16:09:00+09:00
更新日時: 2016-04-12T22:42:59+09:00
カテゴリ: JavaScript
概要: お疲れ様です。 サーバーランクアップした...
本文: お疲れ様です。
サーバーランクアップした、金額が思いの外大きく、しょぼんとしてる今日この頃です。
なぜか今月は金が無い。
（主にGF（仮））
さて、タイトルなんだけど、
意外に知らない人が多いと思う。
否、最近はJSとけっこうお友達な僕ですが、ひょんなことで調べてみると、デフォルトでけっこう便利なメソッドやら関数があるもんです。
●JavaScript 言語リファレンス
https://msdn.microsoft.com/ja-jp/library/d1et7k7c(v=vs.94).aspx
MSさんの公式リファレンス。
なんでMSさんにあるのかは不明ですが 汗
JS言うたら、もっぱらjQueryとか、ライブラリ使っちゃいますが、
元のJSでもけっこう便利なものがある。
例えば
・every
これは、配列全部、条件OKか確かめる関数
https://msdn.microsoft.com/ja-jp/library/ff679981(v=vs.94).aspx
これ、以下のように先に、boolの変数宣言して、やってた・・・恥ずい。
```javascript
var testArray = ['aaa', 'hogeBB', 'ccc'];
var flg = true;
for (var i = 0; i このメソッドなら一発でできますね。
他にも、
・filter
https://msdn.microsoft.com/ja-jp/library/ff679973(v=vs.94).aspx
とか。
JSは配列系弱いと思ってたら意外に充実してました。
あとは、
・Object.freeze
https://msdn.microsoft.com/ja-jp/library/ff806186(v=vs.94).aspx
とかの組み込み関数とか
今まで、アルゴリズム自分で作ってたよ！ってもんがけっこうある・・・。
jQueryの中にも、そういう知らないで苦労してるのけっこうありそうだ・・・。
やっぱちゃんと勉強しないとですね。
#### 著者
著者名: みやびプリン
職業: フロントエンドエンジニア
プロフィール: 基本はイラストレイター（自称）だが、
本職は札幌市のフロントエンドエンジニア。
フロントエンドだけではなく、各種プログラミング言語に精通していると自負している。
HTML、CSSはもちろんのこと、JavaScript、TypeScript、PHP、Perl、Python、C#、Kotlin、Swift、Objective-Cなど多くの多くの言語に精通している他、
Movable Type、WordPressなど各種CMS、React.js、Angularなどフロントエンドフレームワークも扱える。
最近はUnityによる3Dコンテンツにも手を出している。
---
### サーバープランをアップグレードしたった
URL: https://highmoon-miyabi.net/blog/2015/12/12_000383.html
公開日時: 2015-12-12T04:03:18+09:00
更新日時: 2015-12-12T04:16:14+09:00
カテゴリ: 雑記
概要: みなさんおはようございます。 そう、今4...
本文: みなさんおはようございます。
そう、今4時だ。
そうだよアホだよ。
表記の通り、サーバープランをワンランク上げました。
その理由は三つ。
・MTをアップグレードしたかった。（SQLightじゃ、最新のMTは使えない）
・SSLを使えるようにしたかった。
・今割とお金あるから
そうなんすよ、MTを最新にしたかった。
別に今のままでも動くんだけど、
なんというか、もうサポートしませんよとか言われると、
やらなきゃいけないの？的な感じになるわけですよ。
そんなこんなで、多大な時間とお金を使ったわけだよ。
あと共有だけど、SSLが使えること。
お問い合わせと掲示板に使いたい。
設定は後ほどやな。
三つ目の理由は、殺されそうだから、触れないでおこう。
んで、そのMTのバックアップやら復元やらでやたらと手間取ったわけで、この時間なのだよ。
MTは好きだ。
なぜなら、ファイルをあらゆる階層に自由に出力できる上に、ファイルはサーバー上に残せるから、わりと安心していろいろやれる。
だけど、いかんせんいろいろとめんどいし、うまくいかない。
特に復元が、えらく手間取った・・・。
調べても結構、いろんな人がつまづいてるし。
あと、ロリポップ使ってるけど、オススメですよ〜
100円プランでも全然使い勝手いいです。
でも、ちゃんとやるならやっぱ、250円プランかと。
もう、寝たい。
でももう頭が覚醒してるから、寝ようにも寝れない・・・。
いや、寝よう。
#### 著者
著者名: みやびプリン
職業: フロントエンドエンジニア
プロフィール: 基本はイラストレイター（自称）だが、
本職は札幌市のフロントエンドエンジニア。
フロントエンドだけではなく、各種プログラミング言語に精通していると自負している。
HTML、CSSはもちろんのこと、JavaScript、TypeScript、PHP、Perl、Python、C#、Kotlin、Swift、Objective-Cなど多くの多くの言語に精通している他、
Movable Type、WordPressなど各種CMS、React.js、Angularなどフロントエンドフレームワークも扱える。
最近はUnityによる3Dコンテンツにも手を出している。
---
### jQuery フリックスライドショー プラグインだ！
URL: https://highmoon-miyabi.net/blog/2015/12/03_000378.html
公開日時: 2015-12-03T07:52:02+09:00
更新日時: 2015-12-04T08:31:34+09:00
カテゴリ: jQuery
概要: おはようございます。 いつもより少しだけ...
本文: おはようございます。
いつもより少しだけ早く起きた（8時）
なので（？）、表記の通り公開してみた。
スマホ用のフリックスライドショーです。
その名も、Simple Flicker View だ！
僕は、あれなんですよ、プラグインとかね、多機能なの多いけど、そんなのいらないのよ。
シンプルでいいのよ、シンプルで。
あと改造しやすいのがいいね。
というわけで、自作するわけですよ。
さて前置きはいい、まずはスクリプト！
●jquery.sfv.js
●jquery.sfv.min.js
(min版、は軽量版です。どっちでも動く)
スクリプトだけ書かれた画面が出るので、コピペしてお使いください。
さて、使い方は、下記。
```html
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
<script src=" 本エントリーのJSを格納した場所 /jquery.sfv.min.js">
<script>
$(function(){
//フリック表示させたいブロックのIDを入れたリンクのクラスに、sfvを適用
$('#flickView').simpleFlickerView({
slideBtnPrev: '前へ',
slideBtnNext: '次へ',
reverseParsent: 100,
listWidth: 80
});
});
</script>
</head>
<body>
<div id="flickView">
<ul>
<li><img src="images/test01.jpg" alt="" width="100%" height="auto"></li>
<li><img src="images/test02.jpg" alt="" width="100%" height="auto"></li>
<li><img src="images/test03.jpg" alt="" width="100%" height="auto"></li>
<li><img src="images/test04.jpg" alt="" width="100%" height="auto"></li>
<li><img src="images/test05.jpg" alt="" width="100%" height="auto"></li>
</ul>
</div>
</body>
```
divかなんかに、リストのラッパー要素(ulとか)、その中にリスト要素(liとか)って構造でタグをつける。
その一番外側のタグに対してプラグイン関数を効かせる。
すると、自動で下記DOMを生成してくれる。
```html
<ul class="SFVSlideShiftBtn">
<li class="SFVShiftPrev"><a href="javascript:void(0);">前へ</li>
<li class="SFVShiftNext"><a href="javascript:void(0);">次へ</li>
</ul>
<div class="SFVSliderWrapper">
<ul class="SFVSliderList">
<li class="SFVCopyList"><img src="images/test04.jpg" alt="" width="100%" height="auto"></li>
<li class="SFVCopyList"><img src="images/test05.jpg" alt="" width="100%" height="auto"></li>
<li><img src="images/test01.jpg" alt="" width="100%" height="auto"></li>
<li><img src="images/test02.jpg" alt="" width="100%" height="auto"></li>
<li><img src="images/test03.jpg" alt="" width="100%" height="auto"></li>
<li><img src="images/test04.jpg" alt="" width="100%" height="auto"></li>
<li><img src="images/test05.jpg" alt="" width="100%" height="auto"></li>
<li class="SFVCopyList"><img src="images/test01.jpg" alt="" width="100%" height="auto"></li>
<li class="SFVCopyList"><img src="images/test02.jpg" alt="" width="100%" height="auto"></li>
</ul>
</div>
<div class="SFVLoadingBlock" style="width: 100%; height: 100%; top: 0px; left: 0px; opacity: 0; display: none; position: absolute; z-index: 10;">Loading...</div>
</div>
```
機能としては、
・フリックできる。
・自動スライドショー
・次へ前へボタン
・左右に次・前のスライドを表示可能
・サイズの指定可能
・中身は自由に編集できる
ってとこか。
オプションは下記になります。
オプション名
説明
値の形式
初期値
shiftTime
自動スライド時の、次のスライドまでの時間
数値
6000
speedMove
スライドが動く時間
数値
800
listWidth
スライド単体の横幅
数値(%指定)
auto
listHeight
スライド単体の縦幅
数値(%指定←横幅に対して)
auto
tagSingle
スライド単体のタグ指定
タグ名
li
tagWrapper
スライドを囲っているタグ指定
タグ名
ul
slideBtnOn
次へ・前へボタンを表示させるかどうか
true/false（真偽値）
true
autoSlide
自動スライドさせるかどうか
true/false（真偽値）
true
slideBtnPrev
前へボタンの中身を指定
テキスト、タグ（imgも可能）
slideBtnNext
次へボタンの中身を指定
テキスト、タグ（imgも可能）
reverseParsent
フリックが
中途半端な時に
どれくらいで戻すかの指定
数値（横幅/数値）
8
loadingBlock
フリック時、ループの
一番最後or最後に来た時に表示する、
ローディングブロックの中身
テキスト、タグ（imgも可能）
Loading...
シンプルかつ、各種の設定は細かく、と作ってみますた。
CSSでの表示の仕方もわりとしやすく、って感じで作ったつもりです。
MITライセンスなので、
じゃんじゃん改造などお好きにお使いください。
さて、会社行こう。
#### 著者
著者名: みやびプリン
職業: フロントエンドエンジニア
プロフィール: 基本はイラストレイター（自称）だが、
本職は札幌市のフロントエンドエンジニア。
フロントエンドだけではなく、各種プログラミング言語に精通していると自負している。
HTML、CSSはもちろんのこと、JavaScript、TypeScript、PHP、Perl、Python、C#、Kotlin、Swift、Objective-Cなど多くの多くの言語に精通している他、
Movable Type、WordPressなど各種CMS、React.js、Angularなどフロントエンドフレームワークも扱える。
最近はUnityによる3Dコンテンツにも手を出している。
---
### 出会い系はあかん(PARTNERは悪徳)
URL: https://highmoon-miyabi.net/blog/2015/11/16_000377.html
公開日時: 2015-11-16T02:51:48+09:00
更新日時: 2015-11-16T04:15:22+09:00
カテゴリ: 雑記
概要: こんばんは。 次の日仕事やってんに、こん...
本文: こんばんは。
次の日仕事やってんに、こんな時間に更新かよ、と(AM3:00)。
いや、ね、出会い系にはまってしまってたんですよ。
もうどっぷりね。
4、5万くらいは費やしてしまってた。
でも、だめやってん。
ほんと無駄やってん。
さすがにもうやめた・・・。
そんなに彼女欲しいかと、
そらほしいわ
ってか結婚したいわ！！
んで、モテない僕なんで、ものは試しよう、とやってみたが、やはりダメなもんはダメだった・・・。
でも優良なものなら一つだけありました。
you bride
ここは、会員数も多いし、何より料金が他と比べてかなり安い。
通常出会い系といえば、一回メール送るのに100円かかったりする。
さらにはプロフィール見ただけで料金かかったりもするわけ。
（だいたいはポイント性で、100P、1,000円で買ったりなど）
しかし、ここは月額性でやり、1ヶ月3,800円だったかな。
3ヶ月とか半年プランにすると若干お得になる。
他のサイトでまともにやったらまぁ、5,000円以上はかかったりする。
しかも、ここは、初回月無料というおまけつき。
回しもんでもなんでもなく、ほんと出会い系の中では優良だと思う。
興味あったらやってみたらいいかも。
二人くらい、実際に会えました。
ただ、ぶっちゃけサクラいるけどな・・・。
（プラン終わる直前とかに、やたら可愛い娘から、お話ししたいです〜なんて来たら要注意。
その後、いきなり休会してくる）
んで、書きたいのはそんなんじゃねーんだよ。
優良サイトのことなんかどーでもいいんだよ。
注意してもらいたい、悪徳出会い系、史上最悪サイトを紹介したい。
PARTNER
ここ、よく見たら、悪徳なのが一目瞭然なのだ。
特商法の記載もない、会社概要の記載もない、
サイトガサい（おまえが言うな）。まぁとにかく怪しさマックスです。
どうやら、元は、中国らしい。
なんでひっかかったか自分でもわからん。
その手口がこすい。
他サイトの出会い系に潜り込み、
お話ししませんか？私はこういう人です、など長文のメッセージをよこしてくる。
そして、このサイト上で出会うまでやりとりしたいです、
と、このサイトに誘導してくる。
登録すると、よくわからん会話などを毎日メッセージしてくる。
当然、毎日なんぞかまってられんから（後述の料金がかかるし）、
ほっとくと、本当に真剣に出会う気あるんですか？
などと説教を垂れてくる。
驚くのは、その値段。
100P 1,000円
メールを見るのに20P、
メールの送信38P
プロフィールを見るのに3P
など
他の出会い系（悪徳含む）、よりあまりにもひどい料金。
というか単発料金的には結婚情報サイトよりはるかにかかる料金体系です。
アホです。
しかも、登録系サイトに必ず必要なのが、退会処理方法の明示と退会処理だが、このサイトにはない。
訴えたら、一発でやれるが、会社記載も何もない幽霊サイトなので、どうしようもない。
それに延々と騙され続け、まぁとりあえず会えるって話になって、
いざ当日
生◯で熱が出て、動けません。
わかりやすいドタキャン。
そこで初めて、あ、やられたかも・・・と思い、調べると案の定悪徳出会い系でヒット・・・・。
いろんなサイトとか、エロ動画系とかに騙され続け、もうさすがに耐性がついてただろう、と油断したのが運の尽きでした。
（大体のサクラは見破れる。ほんとに）
まさか、別サイトに出張してくる手段を使ってくるとは。
警察につぶしてもらうのがいいかもしれないけど、それはめんどい・・・。
まぁね、こういうのは結局騙された方が悪いんです。
ほんとにお金ドブにすてた・・・。（1万以上持ってかれた）
真面目に婚活してる人がこれ以上騙されないために、
これは流布してほしい、ほんとに！！！！
PARTNERはマジで悪徳！
#### 著者
著者名: みやびプリン
職業: フロントエンドエンジニア
プロフィール: 基本はイラストレイター（自称）だが、
本職は札幌市のフロントエンドエンジニア。
フロントエンドだけではなく、各種プログラミング言語に精通していると自負している。
HTML、CSSはもちろんのこと、JavaScript、TypeScript、PHP、Perl、Python、C#、Kotlin、Swift、Objective-Cなど多くの多くの言語に精通している他、
Movable Type、WordPressなど各種CMS、React.js、Angularなどフロントエンドフレームワークも扱える。
最近はUnityによる3Dコンテンツにも手を出している。
---
### スマホ、CSSだけで、ブロックの高さを決める方法
URL: https://highmoon-miyabi.net/blog/2015/11/12_000375.html
公開日時: 2015-11-12T12:03:01+09:00
更新日時: 2015-11-12T12:36:13+09:00
カテゴリ: CSS
概要: こんちは。 会社の昼休みです。 北海道は...
本文: こんちは。
会社の昼休みです。
北海道は、この11月なのに雨が連日降ってます。
異常気象・・・。
さて、表題いってみよう。
スマホの利用者が増えている昨今。
コーダーも、一つの案件でサイトをほぼ二つ作るような感覚だ。
であるからして、スマホ特有のコーディングテクニックみたいのが必要になってくる。
その中で、一つやっかいなのは、"ブロックの高さ"の問題。
ブロック内要素によって、高さが決まるなら特に問題はないが、
中身が、position: absolute、だったりしたら、親ブロックの高さは少々やっかい。
CSSのメディアクエリーで指定する？
JavaScriptでCSSを変える？
むしろ、jQueryで後付けする？
ぶっちゃけ、どれも微妙・・・。
メディアクエリーだと、指定するデバイスに限りがある。
JSだと、読み込みスピードによってはやっぱり調整前が出てしまうし、だいたいにおいて書くのもめんどう。
CSSだけでできないだろうか・・・？
はい、できます！
（youtubeのあの広告風に）
```css
.wrapperBlock {
padding: 60% 0 0;
position: relative;
overflow: hidden;
}
.wrapperBlock .childrenBlock {
position: absolute;
}
```
そう、paddingで指定するのだよワトソン君！
中身は、absoluteだから、paddingが地球より大きい値でも大丈夫だ、問題ない。
（いや、PC殺す気か）
知ってる人は知ってると思うが、この、
marginとpadding、%値を指定すると、ページの横幅から値を算出する。
つまり、デバイス横幅が、320px（iPhone 4～5S、など）の時60%と指定すると、
192pxになってくれるわけ。
縦margin、paddingでも同じく横幅から算出する。
これは、Webページが、縦に伸びる性質を持つので、どんな高さになっても、値が変動しないように、との仕様だろう。
PCはウィンドウ幅変えれるけど、スマホは基本的には変わらない。
（横にしなくても見やすいように工夫するしね）
これが、height値だとそうはいかず、heightで%指定すると、
そのページ全体から（厳密にいえば親ブロックの大きさから）算出するので、ページの高さが変わると当然値も変わってしまう。
このテクニックを使えば、全デバイスによってイーブンの高さを指定することができるってわけ。
既にやってる人はいるかもしらんが、
思いついた時、俺天才、どやぁ・・・でした。
さて、メシ食いに行くか・・・・。
#### 著者
著者名: みやびプリン
職業: フロントエンドエンジニア
プロフィール: 基本はイラストレイター（自称）だが、
本職は札幌市のフロントエンドエンジニア。
フロントエンドだけではなく、各種プログラミング言語に精通していると自負している。
HTML、CSSはもちろんのこと、JavaScript、TypeScript、PHP、Perl、Python、C#、Kotlin、Swift、Objective-Cなど多くの多くの言語に精通している他、
Movable Type、WordPressなど各種CMS、React.js、Angularなどフロントエンドフレームワークも扱える。
最近はUnityによる3Dコンテンツにも手を出している。
---
### FF二次、書きました。
URL: https://highmoon-miyabi.net/blog/2015/11/04_000373.html
公開日時: 2015-11-04T01:23:41+09:00
更新日時: 2015-11-04T01:45:07+09:00
カテゴリ: 雑記
概要: どうも、ひさっす、みやびプリンです。 見...
本文: どうも、ひさっす、みやびプリンです。
見てる人いなくても更新しますよええ。
めっきり寒くなりましたね。
僕は高っかい備え付けのガスストーブガンガンつけてますよ、ええ。
さて、タイトルの通り、書きました！
じゃなくて書いてます！FF小説！
二次創作ですがね、どれかのFFの世界とか使って、キャラとかのサブストーリーじゃなくてね、
オリジナルキャラのオリジナル設定のオリジナルストーリーですよ、ええ。
（じゃぁ世界観とか全部オリジナルにしろよ）
やりやすいね、二次は、世界観、用語その他etcを考えなくていいのは楽だわまじで。
でもね、僕ぁ、二次創作といえど、キャラとか、世界観とか丸っと使ったりしませんよ。
だってねぇ、そんなん、どうなんですかね。
いや、うまい人とか、面白いの書く人はいいけど、
なんていうんすかね、
オリジナル書けよ！って思うんですよ、
そういうの見てると
（オマエモナー）
いや、別に否定してるわけじゃないですよ。
でも、自分のあれで勝負しろよ、と。
だから、FFXIの小説書く人とか尊敬するわけよ。
面白いし。
オンラインゲームのとかね。
だって、オンラインゲームって、自動的にオリジナルストーリーやんか。
設定とか決まりごとあっても、基本的に個々のユーザーにしかないやんか。
もう、自分に負けないで、オリジナルいこうぜ、創作家よ！
すみませんでした、まじで。
二次創作家の方々本当にすんません。
まだなんも完成させてないのにほんとすんません。
と、とにかく！
書いてきます。
ずっと書きたかった、中学ん時からネタとしてあったんだ。
ストーリー的には、光の四戦士が、ラスボスを倒した後の世界って感じです。
永遠の闇は倒したが、世界はさらに混沌へと進み、何が正義で悪かわからなくなっている世界で、
主人公たちが、周りから非難轟々罵声を浴びながら世界を救うってストーリーです。
暗いストーリーですが、希望が見えるような、そんなの目指して書きます。
リンク貼っときます。
FINAL FANTASY DARK CRYSTAL
しかしまぁ、
あらすじから辿ると、軽く単行本10巻は下らないから、少しずつ気長に書いてきます・・・。
#### 著者
著者名: みやびプリン
職業: フロントエンドエンジニア
プロフィール: 基本はイラストレイター（自称）だが、
本職は札幌市のフロントエンドエンジニア。
フロントエンドだけではなく、各種プログラミング言語に精通していると自負している。
HTML、CSSはもちろんのこと、JavaScript、TypeScript、PHP、Perl、Python、C#、Kotlin、Swift、Objective-Cなど多くの多くの言語に精通している他、
Movable Type、WordPressなど各種CMS、React.js、Angularなどフロントエンドフレームワークも扱える。
最近はUnityによる3Dコンテンツにも手を出している。
---
### PHP アクセスカウンター 二重カウント防止付き
URL: https://highmoon-miyabi.net/blog/2015/09/02_000370.html
公開日時: 2015-09-02T01:15:00+09:00
更新日時: 2015-09-18T02:32:10+09:00
カテゴリ: PHP
概要: あぁ、今年ももう9月。4分の3が終わって...
本文: あぁ、今年ももう9月。4分の3が終わってまった。
いつもならもうか・・・、となりますが、
今年はサイトのリニューアルもできたのでよしとします。
（まだ終わってないって）
さて、サイトのアクセスカウンター、ずっとYahooのジオシティーズのを使ってたのですが、
そのサービスがいつのまにか終了しておりましたので・・・、
自作しました。ええ、しましたとも。
一応、二重カウント防止付き。
仕様としては、同IPは、アクセスから日付変更されるまで、二重カウントしない、です。
（例えば、8月25日にアクセスしたIPは、8月26日00時まで、二重カウントしない・・・って感じ）
というわけで、ソースコードを公開しようかな、とね。さてさて
まずは、下記ファイルを適当にテキストエディタかなんかで作っておく。
・countor.php
・count_no.dat
・first_access_time.dat
・ip_list.dat
とりあえず、全部空でよし。
ファイル名もなんでもよし。
だが、ひとまず、count_no.dat（カウントの数値が入るデータ）には適当に初期数値でも入れておくといい。
0でもいい。
では、スクリプトファイルである、countor.phpの中身を書いていこう。
```php
<?php
//カウンター桁数
define('DIGIT_NO', 7);
//datファイル読み込み
global $countDataFile;
global $firstAccessTimeFile;
global $ipListFile;
$countDataFile = dirname(__FILE__) . '/count_no.dat';
$firstAccessTimeFile = dirname(__FILE__) . '/first_access_time.dat';
$ipListFile = dirname(__FILE__) . '/ip_list.dat';
//IPチェックするかどうか
$doubleCheck = 1;
//ファイルの中身を配列にして変数に格納する。（行ごとに分けられて格納される）
$countData = file($countDataFile);
$firstAccessTimeData = file($firstAccessTimeFile);
$ipListData = file($ipListFile);
//必要データを変数に格納
global $countNo;
global $firstTimeStamp;
global $ipList;
//現在カウントを数値で取得
$countNo = intval($countData[0]);
//その日の最初のアクセス時間を格納する変数宣言
$firstTimeStamp = '';
//タイムdatにタイムが入っていれば、タイムスタンプ格納
if (count($firstAccessTimeData) > 0) {
$firstTimeStamp = $firstAccessTimeData[0];
}
//その日のIPリストの変数と格納
$ipList = array();
if (count($ipListData) > 0) {
$ipList = explode('<>', $ipListData[0]);
}
//今日のタイムスタンプ
$toDay = time();
//24時間後のタイムスタンプを格納
$nextDayBefore = intval($toDay) + 86400;
//年月日を各変数に格納
$nextDayTextYear = date('Y', $nextDayBefore);
$nextDayTextMonth = date('m', $nextDayBefore);
$nextDayTextDay = date('d', $nextDayBefore);
//次の日のテキストを格納 ex)2015-09-03
$nextText = date($nextDayTextYear . '-' . $nextDayTextMonth . '-' . $nextDayTextDay);
//次の日0時のタイムスタンプを取得
$nextDayUsed = strtotime(date($nextText . ' 00:00:00'));
//ファイルに書き込むメソッド
function fileReadFunc($fileUrl, $readText){
$fileOpen = fopen($fileUrl, 'w');
// ファイルロック
flock($fileOpen, LOCK_EX);
if (strlen($readText) > 0) {
//書き込み
fputs($fileOpen, $readText);
} else {
//ファイルを空にする
ftruncate($fileOpen, 0);
}
// ロック解除
flock($fileOpen, LOCK_UN);
// ファイルを閉じる
fclose($fileOpen);
}
//日付変更が行われたかをチェックするフラグ
$dayChange = false;
//一日の初期アクセスを格納
if (strlen($firstTimeStamp) > 0) {
//datにタイムスタンプがある
if ($firstTimeStamp 0) {
//IPdatに文字列あれば、空にする
fileReadFunc($ipListFile, '');
}
//IPリスト変数をリセット
$ipList = array();
}
//IPリストにIPをいれ、ファイルに書き込むメソッド
function ipPush(){
global $ipList;
global $ipListFile;
//IPリストに、現IPを格納
array_push($ipList, $_SERVER['REMOTE_ADDR']);
$insertIp = implode('<>', $ipList);
//ファイルに書き込み
fileReadFunc($ipListFile, $insertIp);
}
//カウントアップするかのフラグ
$countUP = true;
if (count($ipList) > 0) {
foreach ($ipList as $value) {
if ($_SERVER['REMOTE_ADDR'] == $value) {
//IPリストにあるIPならカウントをしない設定
$countUP = false;
break;
}
}
} else {
//IPリストが空なら、IP追加
ipPush();
}
//最終的なカウンター数値
$nextNo = $countNo;
if ($countUP) {
//カウントアップを実行
$nextNo = $countNo + 1;
fileReadFunc($countDataFile, $nextNo);
if (count($ipList) > 0) {
ipPush();
}
}
echo number_format($nextNo);
```
して、こいつを表示させたいPHPページから読み込む
```php
<?php
include('/サーバールートからの絶対パス/サイトルートからのディレクトリ/countor.php');
?>
```
とまぁ、こんな感じ。
だいたいは、コメントを見ていただければわかると思いますが、
二重カウント防止のポイントは、
まずは、最初のアクセスから次の日の00時を取得し、datファイルに書き込み
次にIPリストdatに書き込みし、
それを元に、IPの二重アクセスを防止。
もし日付変更されていたら、IPリストdatファイルを空にする。
こうすれば、その日の間は同IPでは二重カウントはされなく、日付が変更されるとリセットされる。
（最初、ここらをSessionでやろうとしたけど、有効期限などをうまくできなかった・・・。）
これで、世の多くのアクセスカウンターの仕様とだいたい一緒にすることができた。
まぁ、最も、アクセスカウンター自体が懐かしいものなんだけね・・・。
ここ何年かで随分減ったしね。アクセス解析は、アナリィティクスでできるしね・・・。
しかし、いいワークショップになりました。
セキュリティ？？
んなもん知るか
#### 著者
著者名: みやびプリン
職業: フロントエンドエンジニア
プロフィール: 基本はイラストレイター（自称）だが、
本職は札幌市のフロントエンドエンジニア。
フロントエンドだけではなく、各種プログラミング言語に精通していると自負している。
HTML、CSSはもちろんのこと、JavaScript、TypeScript、PHP、Perl、Python、C#、Kotlin、Swift、Objective-Cなど多くの多くの言語に精通している他、
Movable Type、WordPressなど各種CMS、React.js、Angularなどフロントエンドフレームワークも扱える。
最近はUnityによる3Dコンテンツにも手を出している。
---
### 久々のリニューアル！！
URL: https://highmoon-miyabi.net/blog/2015/08/16_000367.html
公開日時: 2015-08-16T21:40:24+09:00
更新日時: 2015-08-16T21:49:11+09:00
カテゴリ: 雑記
概要: さて、ご覧の通り、久々にリニューアルしま...
本文: さて、ご覧の通り、久々にリニューアルしました。
完了に、初期アップロードから3週間かかるとはね。
いや、ダラダラやってただけです。はい。
少し前に見た人ならわかると思いますが、完了までガッツリ崩れてましたw
これでやっと、理想の形になってきました。
まだ変えたいところとかあるけど、ひとまずこれでひと段落です。
前回同様、テーマはオンラインゲームっぽく！
あと前回、変なオブジェクトを使ってしまったが、ずっとやりたかった歯車使ってもデザインできました。
（前回も歯車っぽいの目指してた）
そして、念願の小説コーナーも開設できたし、もう満足です。
あと、歯車回ってるのうざいって人は、歯車クリックしてみてください。
とりあえず止まります。
そして、スクロールしたらひとまず止まります。
デフォで回したくないって人は、クッキーで判別するよう改善するので、ご要望ください。
（時間かかるのでやりたくなかった）
お問い合わせフォームは・・・、ちょっと待ちなさい。
#### 著者
著者名: みやびプリン
職業: フロントエンドエンジニア
プロフィール: 基本はイラストレイター（自称）だが、
本職は札幌市のフロントエンドエンジニア。
フロントエンドだけではなく、各種プログラミング言語に精通していると自負している。
HTML、CSSはもちろんのこと、JavaScript、TypeScript、PHP、Perl、Python、C#、Kotlin、Swift、Objective-Cなど多くの多くの言語に精通している他、
Movable Type、WordPressなど各種CMS、React.js、Angularなどフロントエンドフレームワークも扱える。
最近はUnityによる3Dコンテンツにも手を出している。
---
### jQuery、プラグイン、Lightbox風モーダルウィンドウ
URL: https://highmoon-miyabi.net/blog/2015/04/20_000362.html
公開日時: 2015-04-20T00:00:43+09:00
更新日時: 2016-04-24T02:24:31+09:00
カテゴリ: jQuery
概要: また投稿が久々になってしまった。 さて、...
本文: また投稿が久々になってしまった。
さて、今回は、仕事で、ライトボックス風モーダルウィンドウを出すjQueryプラグインを作ってみたので、
公開してみました。
というのも、探しても、求めるようなシンプルな機能じゃなかったり、デザインが変えれなかったりなどするので、
自作してみました。
まずは、スクリプト。
●jquery.smwv.js
●jquery.smwv.min.js
(min版、は軽量版なので、どちらでもオッケーです。)
スクリプトだけ書かれた画面が出るので、コピペしてお使いください。
さて、使い方は、下記。
```html
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
<script src=" 本エントリーのJSを格納した場所 /jquery.smwv.min.js">
<script>
$(function(){
//モーダルウィンドウを表示させたいブロックのIDを入れたリンクのクラスに、smwvを適用
$('.testLink').simpleModalWindowView({
'boxWidth': 650,
'viewMode': 'inline'
});
});
</script>
</head>
<body>
<div style="display: none;">
<p id="modalView"><img src="test.gif">
</div>
<p><a href="#modalView" class="testLink">テストリンク</a></p>
</body>
```
使い方としては、簡単で、
colorboxとほぼほぼ同じ使い方。
まずは、headの中でjQueryと、同エントリのプラグインを読み込み、
モーダルウィンドウで表示させたいリンクのクラスに対して、
本プラグインの関数をつける。
あとは、クラスをつけたaタグのhrefに、ハッシュタグで表示させたいブロックのIDを入れる。
そして、閉じる用のボタンが、
"SModalCloseBtn"のID名でdivが生成されるので、CSSで自由に表示を変えてください。
オプションでけっこう細かく設定もできます。
speedOpen：ウィンドウを開く時のスピード
speedClose：ウィンドウを閉じる時のスピード
speedMove：ウィンドウのサイズを変更した時の、コンテンツの動くスピード
shadowUsed：ウィンドウに影をつけるかどうか true/false
shadowSize：影のぼかしの大きさ
shadowSpread：影の範囲
shadowOpacity：影の透明度 （0〜1で指定）
backColor：背景のオーバーレイの色（カラーコードで指定）
backOpacity：背景のオーバーレイの透明度（0〜1で指定）
boxWidth：表示させるコンテンツの横幅
boxHeight：表示させるコンテンツの縦幅
boxColor：表示コンテンツの背景（カラーコードで指定）
wrapperPadding：表示コンテンツの内側の隙間の指定
radiusUsed：角丸にするかどうか。true/false
radiusSize：角丸の大きさ
viewMode：ブロックを表示させるか、画像化を文字列で指定。img/inline
※デフォルトは、img
と、細かく設定できるようになってます。
とまぁ、ここまで見ればわかるように・・・。
CSS3をふんだんに使っているので、
このプラグインは、IE8以下は完全にサポート外になってます。
IE8以下を無視できる状況ならば、お使いください。汗
グループ化可能にして、次へボタンとかつけれるようにしたいですね。
とりあえず、シンプルにライトボックスっぽく表示させたいなら、ぜひお使いください。
MITライセンスなので、ご自由にじゃんじゃんお使いください。
まだまだいろいろ作りたい。
#### 著者
著者名: みやびプリン
職業: フロントエンドエンジニア
プロフィール: 基本はイラストレイター（自称）だが、
本職は札幌市のフロントエンドエンジニア。
フロントエンドだけではなく、各種プログラミング言語に精通していると自負している。
HTML、CSSはもちろんのこと、JavaScript、TypeScript、PHP、Perl、Python、C#、Kotlin、Swift、Objective-Cなど多くの多くの言語に精通している他、
Movable Type、WordPressなど各種CMS、React.js、Angularなどフロントエンドフレームワークも扱える。
最近はUnityによる3Dコンテンツにも手を出している。
---
### javaScriptでオブジェクト指向
URL: https://highmoon-miyabi.net/blog/2015/01/28_000359.html
公開日時: 2015-01-28T10:52:08+09:00
更新日時: 2020-02-13T15:40:51+09:00
カテゴリ: JavaScript
概要: みなさん、あけましておめでとうございます...
本文: みなさん、あけましておめでとうございます。
見てる人いんのかわからないブログですが、ひとまず挨拶。
なんて遅い挨拶だｗ
仕事でバッタバタで死んでました。
そんな中こんな記事書いてんなって話ですが。
今回は、解決策などではなく、考察というか、独り言的なことを書きますので、あしからず。
ズバリ、javaScriptにおけるオブジェクト指向な書き方だ。
最近、javaScriptで、ローカルブラウザアプリケーションの開発やっているので、
すっかりJSとお友達になってるのですが、
大規模開発なので、C++とか、Objective-Cなどなどと同様の、オブジェクト指向な書き方が必要となってきた。
しかし、他の言語であるような、"クラス"と呼ばれる概念はない。
だが、一応クラスの"ようなもの"は定義することが可能である。
クラス、とは、関数やプロパティをひとまとめにしたもので、
それを元にしたコピーである、"インスタンス"を生成することができる。
例えるなら、車の構造や使用法をまとめた企画書（クラス）があり、
それを元に、車（インスタンス）を大量生産することができるってわけだ。
オブジェクト指向言語になじみがない人でも、Flashをやってる人とかはインスタンスという言葉は知っているでしょう。
だいたい同じ扱い。
これが、かなり便利ｗ
javaScriptでのオブジェクト指向な書き方は、下記のエントリーが非常に参考になる。
●JavaScriptのオブジェクト指向の書き方｜jQuery入門5
だが、もともと、厳密にオブジェクト指向で書かなくてもいい、javaScriptでは、
わざわざクラスを使う必要がない。
しかし、こいつがとても便利でしかも、コードの行数をかなり抑えられるのだ。
たとえば、下記のような構造のオブジェクトを作るとしよう。
```javascript
hogeObj {
testA: { frame : side: 25,
row : 125},
zoom : 15,
paramName: 'テストAでござる'},
testB: { frame : side: 32,
row : 140},
zoom : 33,
paramName: 'テストBでござる'},
testC: { frame : side: 65,
row : 200},
zoom : 56,
paramName: 'テストCでござる'}
}
```
最高三階層のめんどくさいオブジェクトだ。
これを生成する時、なんも考えないでやると下記になる。
```javascript
//変数を宣言
var hogeObj = new Object();
var testAFrame = new Object();
var testAObj = new Object();
var testBFrame = new Object();
var testBObj = new Object();
var testBFrame = new Object();
var testBObj = new Object();
//値を挿入
testAFrame.side = 25;
testAFrame.row = 125;
testAObj.frame = testAFrame;
testAObj.zoom = 15;
testAObj.paramName = 'テストAでござる';
testBFrame.side = 32;
testBFrame.row = 140;
testBObj.frame = testBFrame;
testBObj.zoom = 33;
testBObj.paramName = 'テストBでござる';
testCFrame.side = 65;
testCFrame.row = 200;
testCObj.frame = testCFrame;
testCObj.zoom = 56;
testCObj.paramName = 'テストCでござる';
hogeObj.testA = testAObj;
hogeObj.testB = testBObj;
hogeObj.testC = testCObj;
```
まぁ、めんどいけどこれくらいは大丈夫じゃない？と思う人もいようが、
だが、この構造のオブジェクトを使う、値を変更する関数が、何十個とあったらどうだろう？
いちいち、同じ工程を書かねばならないのだ。
そいつはうんざりだ。
上記の構造のオブジェクトを、returnで返す関数を作ったとしても、
構造のオブジェクトを返すだけだから、
オブジェクトの値を変更する場合、結局めんどうになる。
それよりはオブジェクトを生成した時点で、
そのオブジェクトの値を変更する関数もセットで入ってるなら、
それほど便利なことはない。
そこで"クラス"の登場なわけだ。
クラスで書くならならこうだ。
```javascript
//クラスを定義
var frameClass = function(){
this.side = 0;
this.row = 0;
};
frameClass.prototype = {
setValue: function(sideV, rowV){
this.side = sideV;
this.row = rowV;
}
};
var objClass = function(){
this.zoom = 1;
this.paramName = '';
this.frame = new frameClass;
};
objClass.prototype = {
setValueZoomName: function(zoomValue, nameValue){
this.zoom = value;
this.paramName = nameValue;
}
};
//クラスを使用する
var hogeObj = new Object();
hogeObj.testA = new objClass();
hogeObj.testB = new objClass();
hogeObj.testC = new objClass();
hogeObj.testA.frame.setValue(25, 125);
hogeObj.testA.setValueZoomName(15, 'テストAでござる');
hogeObj.testA.frame.setValue(32, 140);
hogeObj.testA.setValueZoomName(33, 'テストBでござる');
hogeObj.testA.frame.setValue(65, 200);
hogeObj.testA.setValueZoomName(56, 'テストCでござる');
```
となる。
最初はめんどうかもしれないが、
一度クラスを定義すれば、他の複数の関数からも、
インスタンスを生成し、クラスメソッドを使用すれば、
同じ構造のオブジェクトを生成できるわけだ。
同じ構造のオブジェクトを大量に使う、ゲームやらなんやらの大規模開発にはうってつけなのである。
行数もだいぶ節約できるってわけだ。
このオブジェクト指向、正直、Objective-Cやってた時は、全然わからなかったんだけど、
JSで大規模開発して、あぁなるほどね、と理解できたというｗ
さて、仕事に戻ろう・・・。
#### 著者
著者名: みやびプリン
職業: フロントエンドエンジニア
プロフィール: 基本はイラストレイター（自称）だが、
本職は札幌市のフロントエンドエンジニア。
フロントエンドだけではなく、各種プログラミング言語に精通していると自負している。
HTML、CSSはもちろんのこと、JavaScript、TypeScript、PHP、Perl、Python、C#、Kotlin、Swift、Objective-Cなど多くの多くの言語に精通している他、
Movable Type、WordPressなど各種CMS、React.js、Angularなどフロントエンドフレームワークも扱える。
最近はUnityによる3Dコンテンツにも手を出している。
---
### スマホ用、次のページを重ねて遷移させるトランジション
URL: https://highmoon-miyabi.net/blog/2014/07/04_000357.html
公開日時: 2014-07-04T14:52:52+09:00
更新日時: 2015-09-06T03:49:12+09:00
カテゴリ: jQuery
概要: どうも、未だiPhone 4Sのみやびで...
本文: どうも、未だiPhone 4Sのみやびです。
ほんとね、買うときiPhone 5出てたのにね。
いいんだ、俺は12月に6にするんだ。
さて、では、いっちょ言ってみましょう、今日の題号。
今回は、iPhoneアプリのページ遷移の動きを、なんとかWEBでも実現できないか、といろいろやってみたもの。
整理とかプラグイン化とかしてなく、かなり雑なコードなのであしからず。
まず、HTML側
●HTML
```html
<!doctype html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>スマホページ</title>
<meta name="Keywords" content="Keyword01,Keyword02,Keyword03">
<meta name="Description" content="Discription">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
<meta name="author" content="MIYABI PURINE">
<link rel="icon" href="/favicon.ico">
<link rel="apple-touch-icon-precomposed" href="/webclip.png">
<link rel="stylesheet" type="text/css" href="common/css/common.css" media="all">
<script src="common/js/jquery.js"></script>
<script src="common/js/easing.1.3.js"></script>
<script src="common/js/default.js"></script>
</head>
<body>
<div id="wrapper">
<div id="header-container">
<header>
<h1>タイトル</h1>
</header>
<nav>
<ul class="clearfix"><!--
--><li><a href="./"><img src="common/images/nav001.gif" width="137" height="150" alt="ナビゲーション-ホーム"></a></li><!--
トランジションをきかせたいリンクには、classに、right-move、hrefには、javascript: void(0)、data-hrefにリンク先を入れる
--><li><a href="javascript: void(0);" data-href="about/" class="right-move"><img src="common/images/nav002.gif" width="191" height="150" alt="ナビゲーション-このサイトについて"></a></li><!--
--><li><a href="ranking/"><img src="common/images/nav003.gif" alt="ナビゲーション-ランキング" width="217" height="150"></a></li><li><a href="grume/"><img src="common/images/nav004.gif" width="179" height="150" alt="ナビゲーション-グルメ"></a></li><!--
--><li><a href="member/"><img src="common/images/nav005.gif" alt="ナビゲーション-メンバー"></a></li><!--
--></ul>
</nav>
</div>
<section id="contents">
<div>
<p>
ホームページ<br>
ホームページ<br>
ホームページ<br>
ホームページ<br>
ホームページ<br>
ホームページ<br>
ホームページ<br>
ホームページ<br>
ホームページ<br>
ホームページ<br>
ホームページ<br>
ホームページ<br>
ホームページ<br>
ホームページ<br>
ホームページ
</p>
</div>
</section>
<footer id="all-footer">
<p><small>Copyright (C) 2015 MIYABI PURINE All Rights Reserved.</small></p>
</footer>
</div><!-- /wrapper -->
</body>
</html>
```
リンク以外の部分はなんの変哲もないHTMLです。
jQueryと、イージングプラグインを読み込み、
default.jsによって処理を書いてます。
上の方の、IDに"header-container"とつけてるDivは、position:fixedで、固定する予定。
あとは、重ねるトランジションをきかせたいリンクには、hrefには、"javascript: void(0);"でリンクを無効にし、
classに"right-move"、data-hrefに、リンクさせたいURLを突っ込んでます。
（SEO考えるなら、jQueryで、hrefの値と、data-hrefの値操作する必要があるな・・・）
これでHTMLの準備は完了。
お次はCSS。
これは、必要な箇所（トランジションに関係する箇所）だけ載せます。
●common.css
```css
/* ページ遷移時の動きのためのCSS
jsでiframeを作るので、それを包括するdivのcss */
#next-page-block {
position: absolute;
top: 0;
z-index: 1000;
}
```
CSSはこれだけw
さて、JSだ。
これもそんなに難しいものではない。
●default.js
```javascript
$(function() {
//以下次のページ用スクリプト
// 各種数値を変数に格納（画面の横幅と、縦幅を取得）
var PageWidth = $('body').width();
var PageHeight = $('body').height();
$('.right-move').click(function(){
//インラインフレーム要素生成
$('body').append('<div id="next-page-block"><iframe src="about/index.html" frameborder="0" scrolling="no"></iframe></div>');
//初期の大きさ、位置
//iframe入りのdivを画面外に飛ばす
$('#next-page-block').css({
'width': PageWidth
});
$('#next-page-block iframe').attr('width', PageWidth);
$('#next-page-block iframe').attr('height', PageHeight);
$('#next-page-block').css({
'left': PageWidth
});
//リンク先を取得
var pass = $(this).attr("data-href");
//生成したiframeのsrcに突っ込む
$('#next-page-block iframe').attr('src', pass);
//iframeのデータが読み込まれたら実行
$('#next-page-block iframe').bind("load", function() {
//スマホの、position: fixedのバグを見えなくするために、スクロールを0に
$('html,body').animate({
scrollTop: 0},
300,'easeOutCubic', function() {
//iframe入りのdivを左に移動
$('#next-page-block').animate({
"left":0
},500, 'easeOutCubic',function(){
//現在のページを消す
$('#wrapper').hide();
//次のページをAJAXにて先読み、成功したらURLを変更する
$.ajax({
type: 'GET',
url: pass,
dataType: 'html',
success: function(data) {
location.href = pass;
}
});
});
});
return false;
});
});
});
```
みそなのは、iframeをjsにて生成し、そこでまずリンク先ページを表示させて、
そのiframeを移動させている点と、
ページ移動の際、AJAXにて、リンク先を先読みしてる点。
先読みをしていないと、実機では、処理速度が追いつかなく、
ページ遷移の際に、一瞬白い画面が表示されてしまう。
ひとまず、これにて、iPhoneアプリっぽいページ遷移のできあがりだ。
一つ悔しいのは、スマホのposition:fixedのバグのおかげで、
一度スクロールを0にしなきゃいけないこと。
スクロールした状態で、トランジションすると、
読み込み最初、position:fixedを効かせているブロックがスクロールした状態で表示されてしまうのだ。
そこなんとかならんもんかな・・・。
まぁでも、あんまし違和感ないです。
いろんなトランジションいれて、プラグインでも作ってみっかな。
#### 著者
著者名: みやびプリン
職業: フロントエンドエンジニア
プロフィール: 基本はイラストレイター（自称）だが、
本職は札幌市のフロントエンドエンジニア。
フロントエンドだけではなく、各種プログラミング言語に精通していると自負している。
HTML、CSSはもちろんのこと、JavaScript、TypeScript、PHP、Perl、Python、C#、Kotlin、Swift、Objective-Cなど多くの多くの言語に精通している他、
Movable Type、WordPressなど各種CMS、React.js、Angularなどフロントエンドフレームワークも扱える。
最近はUnityによる3Dコンテンツにも手を出している。
---
### Objective-C、NSArray、配列をデータベースに保存する方法
URL: https://highmoon-miyabi.net/blog/2014/04/24_000356.html
公開日時: 2014-04-24T16:48:43+09:00
更新日時: 2015-09-06T03:41:28+09:00
カテゴリ: Swift・Objective-C
概要: どうもお久しぶりです。 みやびです。 だ...
本文: どうもお久しぶりです。
みやびです。
だいぶ空きましたね。
ずっとiPhoneアプリの開発やってました。
まだやってるけどね。
というわけで、Objective-Cの記事書いてくぜ！
ほんとに、このObjective-Cがくせ者です。
なんせ、Google先生があまり役に立たないっていうね。こんなん初めてだ。
自分で頭フル回転させて、英語の公式リファレンスみながらやらなきゃいけないなんてな・・・。
はい、毎度のごとく前置き長いっすね。
さて、題号の本題いってみよう。
今回は、一発ではいかないが、やれたら便利な技術。
アプリ側のNSArrayを、PHPにポスとして、データベースに保存する方法だ。
これをやれると便利なのは、例えばユーザーの情報の中に、さらに送り先の住所一覧をいれる、とか。いろいろやれる。
さて、やっていこう。まずはアプリ側からPOSTする方
```text
//NSArrayをNSDataに変換、JSONを生成
//PHP側にJSONとして送った時にDBでレコードを特定するために辞書にID的なものと、配列を格納する
NSMutableDictionary *SubmitDic = [NSMutableDictionary dictionary];
SubmitDic[@"ID"] = @"idString";
SubmitDic[@"Contents"] = ArrayData; //配列が入っている変数
//ここでJSONとしてのNSDataを生成
NSError *error002 = nil;
NSData *SubmitData = [NSJSONSerialization dataWithJSONObject:SubmitDic options:NSJSONWritingPrettyPrinted error:&error002];
if(error002){
NSLog(@"%@", [error002 localizedDescription]);
}
//NSURLSessionの生成
NSURLSessionConfiguration *URLSessionConfiguration = [NSURLSessionConfiguration defaultSessionConfiguration];
NSURLSession *URLSession = [NSURLSession sessionWithConfiguration:URLSessionConfiguration delegate:nil delegateQueue:nil];
//URLの生成
NSURL *URLU = [NSURL URLWithString:@"http://test.com/db_save.php"];
//NSURLRequestの生成
NSMutableURLRequest *request = [[NSMutableURLRequest alloc] initWithURL:URLU];
//HTTPメソッドは"POST"
[request setHTTPMethod:@"POST"];
[request addValue:@"application/json" forHTTPHeaderField:@"Content-Type"];
[request setHTTPBody: SubmitData];
NSURLSessionDataTask *URLSessionDataTask = [URLSession dataTaskWithRequest:request
completionHandler:^(NSData *data, NSURLResponse *response, NSError *error){
[URLSession invalidateAndCancel];
}];
[URLSessionDataTask resume];
[UIApplication sharedApplication].networkActivityIndicatorVisible = YES;
```
大事なのは、JSONに変換すること。
PHPと、Objective-cとの連携はJSONが最もやりやすい。
ではPHP側。
まずはDBに接続する準備として、まずは二つのPHPを用意する。
●DBConfig.php
```php
<?php
define("DB_SERVER","localhost"); // サーバ
define("DB_NAME","データベース名"); // データベース
define("DB_USER","DBユーザ名"); // ユーザ
define("DB_PASSWD","DBパスワード"); // パスワード
```
●DBConnect.php
```php
<?php
require_once('DBConfig.php');
function connect() {
$link = mysql_connect(DB_SERVER,DB_USER,DB_PASSWD);
if(!$link) {
die("Can not connect ".DB_SERVER." : ".mysql_error());
}
if(!mysql_select_db(DB_NAME)) {
die("Can not use ".DB_NAME." : ".mysql_error());
}
return $link;
}
// Close
function close($link) {
mysql_close($link);
}
// Prepare
function prepare ($value) {
return mysql_real_escape_string($value);
}
```
以上二つのファイルは最悪いらない。
というのも、管理しやすいように、ファイルを分けているだけで、一つのphpファイルでもDBに接続できる。
ただし、分けないでやると、一個のファイルの内容がバレると、DBの情報が盗み放題になるので、セキュリティ面を考えても、分けた方がいい。
さて、三つ目のPHP、アプリからPOSTしたJSONを、DBに保存するスクリプトだ。
●db_save.php
```php
<?php
//DB接続処理
require_once('DBConnect.php');
// 接続
$link = connect();
//POSTされた生データ（JSON）を取得
$json_string = file_get_contents('php://input');
//JSONを、PHPで扱える配列（元がNSDictionaryなので連想配列）に変換
$obj = json_decode($json_string);
//連想配列して入っているデータをそれぞれ変数に格納
$RecoadID = $obj -> {'ID'};
$addressBefore = $obj -> {'Contents'};
//'Contents'の中に入っている配列を、文字列にする
$paramAddressList = serialize($addressBefore);
//クエリ文を生成
//今回は、SQLのUPDATEを使って、user_baseというテーブルの、user_idというカラムで検索したレコードのuser_addresslistというカラムを更新している。
$sql = "UPDATE user_base SET user_addresslist = '$paramAddressList' WHERE user_id = '$RecoadID'";
//クエリの実行
$result = mysql_query($sql);
if (!$result) {
exit('データを更新できませんでした。');
}
//DBを閉じる（読み込んだPHPにあらかじめ記載している関数を実行）
close($link);
```
大事なのは、JSON→配列→シリアライズ（文字列化）というように、変換して最終的には文字列としてDBに保存すること。
だいたいにおいて、配列のまんまだとDBにゃ保存できんからね。
それと、SQLに関しては、
ついでにDBからアプリにデータを読み込むもやっておこうか。
こっちはPHPから説明する
●address_get.php
```php
<?php
//DB接続処理
require_once('DBConnect.php');
// 接続
$link = connect();
//POSTから、文字列を取得
$paramID = $_POST['id'];
//SQL文生成
$sql = "SELECT * FROM user_base WHERE user_id = '$paramID'";
//クエリの実行
$result = mysql_query($sql);
if (!$result) {
exit('データを取得できませんでした。');
}
//配列を取得するためにあらかじめ変数宣言
$result_addressData;
//実行したクエリ（$result）から、必要な情報を取ってくる
while($row = mysql_fetch_array($result)){
//文字列として保存された配列を、配列に直して、変数に格納
$result_addressData = unserialize($row["user_addresslist"]);
}
//配列をJSONに変換
$json_value = json_encode($result_addressData);
//JSONを出力
header( 'Content-Type: text/javascript; charset=utf-8' );
echo $json_value;
//DBを閉じる
close($link);
```
先ほどやった行程とは逆を実行する。
文字列→配列（文字列をアンシリアライズ化する）→JSON
そして、JSONをechoすれば、アクセスしたアプリはJSONを読めるってすんぽう。
さてアプリ側の受け取り
```text
//クエリ文を生成
NSString *queryBefore = [NSString stringWithFormat:@"id=%@", @"ユーザーのID"];
//NSURL生成
NSURL *url = [NSURL URLWithString:@"http://test.com/address_get.php"];
//クエリ文をNSDataに変換
NSData *InData = [queryBefore dataUsingEncoding:NSUTF8StringEncoding];
//NSURLRequestを生成
NSMutableURLRequest *request = [NSMutableURLRequest requestWithURL:url];
[request setHTTPMethod:HTTP_METHOD];
[request setValue:HTTP_VALUE forHTTPHeaderField:HTTP_HEADER_FIELD];
[request setHTTPBody:InData];
//JSONをNSDataとして受け取る
NSData *jsonData = [NSURLConnection sendSynchronousRequest:request returningResponse:nil error:nil];
NSError *error = nil;
//NSArray型の変数にJSONデータを元のデータに戻したものを入れる
NSMutableArray *InnerData = [NSJSONSerialization JSONObjectWithData:jsonData
options:NSJSONReadingAllowFragments
error:&error];
```
これで、配列が取得できました。
応用するといろんなことができると思う。
そしてさらに、同じ概念で、UserDefaultとか、CoreDataにも、配列を保存できる。
それはまた今度。
今回、コード自体が長い・・・。
#### 著者
著者名: みやびプリン
職業: フロントエンドエンジニア
プロフィール: 基本はイラストレイター（自称）だが、
本職は札幌市のフロントエンドエンジニア。
フロントエンドだけではなく、各種プログラミング言語に精通していると自負している。
HTML、CSSはもちろんのこと、JavaScript、TypeScript、PHP、Perl、Python、C#、Kotlin、Swift、Objective-Cなど多くの多くの言語に精通している他、
Movable Type、WordPressなど各種CMS、React.js、Angularなどフロントエンドフレームワークも扱える。
最近はUnityによる3Dコンテンツにも手を出している。
---
### After Effects、エクスプレッション、テキストの下に画像
URL: https://highmoon-miyabi.net/blog/2014/01/30_000353.html
公開日時: 2014-01-30T17:53:16+09:00
更新日時: 2015-09-02T20:06:52+09:00
カテゴリ: Expression
概要: さて、また、今回もAEです。 多分今回が...
本文: さて、また、今回もAEです。
多分今回が最後のAEになると思う。
なぜなら、映像の仕事は今週いっぱいで、
来週からはなんとiPhoneアプリの勉強に入るからです。
僕がiPhoneアプリやることになるとは、夢にも思わなかったｗ
でも、勉強する時間もらえるなら、チャレンジしようじゃぁないか。若いんだから。
と、まぁ、前置き長いね。
本題に入ります。
題号の通り。
ようは、テキストの行が増えても、それに追従して下に画像を自動で配置するってやつ。
最初簡単だと思ったら、テキストの高さが取ってこれなくて四苦八苦した（泣）
今回はソースを書くだけでは、解決しないので、
技も交えながら解説したい。
まずは、新規適当なコンポジションを作る。
（サイズ、ワークエリア、その他全部適当でいいです）
そのコンポジションに新規テキストレイヤーを追加。
レイヤー名を、なんか関数っぽい名前にする。
（今回は、テキストの下に画像を配置するので、textUnderImageとでもしておこう）
んで、そのレイヤーの、ソーステキストのエクスプレッションに、下記を記載する。
```javascript
'//テキスト下何px空けるか指定\
textPropaty.UnderP = 0;\
\
//対象テキストを取得\
textPropaty.targetText = thisComp. layer(targetLayer).text.sourceText.value;\
\
function imagePositioning(lineH,textCont,underP){\
var targetLine = textCont.split("\\r");\
\
var xPos = thisComp.width/2;\
var FixPosition = targetLine.length*lineH + underP;\
\
return [xPos,FixPosition];\
}'
```
次に、テキストと画像を配置するコンポジションに移り、
テキストを用意し、適当なレイヤー名にする。
そして、下に配置したい画像の、位置プロパティに、下記エクスプレッションを入れる。
```javascript
//対象テキストレイヤーの名前を記入
var targetLayer = "画像の上のテキストレイヤー名";
var textPropaty = {
//行送りを指定
lineHeight : 30
}
eval(comp('先ほど作ったコンポジションの名前').layer('先ほど作ったテキストレイヤー名').text.sourceText.value);
imagePositioning(textPropaty.lineHeight,textPropaty.textCont,textPropaty.UnderP);
```
これで、テキストレイヤーの下に画像がぴったりつくはず。
ただ、何個か指定しなきゃいけない部分がある。
まず、行送りの指定。
"lineHeight : 30"の30の部分を変える。
これはテキストレイヤーに指定した行送りと同じ数値を入れる。
これは、自動でとってくることはできなかった・・・残念。
あと、テキスト下なんpxに画像がくるかの指定。
"textPropaty.UnderP = 0;\"の0の部分の数値を変えるとできる。
仕組みとしては、テキストの行数を取ってきて、
それ×行送り＝画像の縦位置、となるようにしている。
今回のスクリプトは、エンドロールのテンプレートとか、文字数がしょっちゅう変わり、一番下に画像を配置したい時などに使えるだろう。
さて、このテキストレイヤーにエクスプレッションを書き、いろんなコンポジションから同じソースを使えるようにする技。
こっちも今回見てほしかった。
下記エントリーで紹介されてる技だ。
外部結合
http://www.da-tools.com/AE/exp/jisen/include.html
これを使えば、エクスプレッションの管理がぐんと楽になる。
めんどくさい動きの設定は、全部エクスプレッションに任せましょう。
映像クリエイターはそれでだいぶ楽になるはず。
ではまた。
次はきっとiPhoneアプリ開発の事書くんだろな～
#### 著者
著者名: みやびプリン
職業: フロントエンドエンジニア
プロフィール: 基本はイラストレイター（自称）だが、
本職は札幌市のフロントエンドエンジニア。
フロントエンドだけではなく、各種プログラミング言語に精通していると自負している。
HTML、CSSはもちろんのこと、JavaScript、TypeScript、PHP、Perl、Python、C#、Kotlin、Swift、Objective-Cなど多くの多くの言語に精通している他、
Movable Type、WordPressなど各種CMS、React.js、Angularなどフロントエンドフレームワークも扱える。
最近はUnityによる3Dコンテンツにも手を出している。
---
### 【エクスプレッション】画像の大きさをコンポジションに合わせる
URL: https://highmoon-miyabi.net/blog/2014/01/28_000352.html
公開日時: 2014-01-28T00:46:56+09:00
更新日時: 2020-07-22T01:24:29+09:00
カテゴリ: Expression
概要: どうも、みやびです。 またまた、AEです...
本文: どうも、みやびです。
またまた、AEです。
また頼まれて作ってみました。
今度は、題号の通り、
画像の大きさを、コンポジションの大きさと同じ大きさにするっていうのをやります。
まぁ、といっても、横幅は無視して、縦幅に合わせてますが・・・
下記を記述したスクリプトファイルを、拡張子.jsxで保存する。
```javascript
//プロジェクトを取得
var $project = app.project;
//リサイズしたいファイル名を配列に格納
fileName = new Array(".jpg",".gif",".png");
//コンポジション毎にループ処理
for( var i = 1; i そして、AEを起動し、ファイル＞スクリプト＞スクリプトを実行 とメニューを進み、保存したスクリプトファイルを選ぶ。
すると、4行目の配列に入れたファイル名（レイヤー名）が、レイヤー名に含まれる場合に、そのレイヤーの大きさを、直親のコンポジションに合わせた大きさにリサイズしてくれる。
仕組みとしては、「コンポジションの大きさ÷画像の大きさ」で、倍率を出して、それをスケールに適用するというもの。
予め固定サイズのコンポジションの中に画像を入れて合わせたい時とかに使えると思います。
特定のレイヤー名だけをリサイズしたい時は、4行目の配列の中身を変えてください。
ではでは。
今回ムダ話ないねｗ
#### 著者
著者名: みやびプリン
職業: フロントエンドエンジニア
プロフィール: 基本はイラストレイター（自称）だが、
本職は札幌市のフロントエンドエンジニア。
フロントエンドだけではなく、各種プログラミング言語に精通していると自負している。
HTML、CSSはもちろんのこと、JavaScript、TypeScript、PHP、Perl、Python、C#、Kotlin、Swift、Objective-Cなど多くの多くの言語に精通している他、
Movable Type、WordPressなど各種CMS、React.js、Angularなどフロントエンドフレームワークも扱える。
最近はUnityによる3Dコンテンツにも手を出している。
---
### フィギュア
URL: https://highmoon-miyabi.net/blog/2014/01/22_000351.html
公開日時: 2014-01-22T00:04:48+09:00
更新日時: 2019-08-15T22:11:55+09:00
カテゴリ: 雑記
概要: 今の僕のタンスの上。 やたら増えたフィ...
本文:
今の僕のタンスの上。
やたら増えたフィギュア。
・すーぱーそに子×4
・初音ミク×2
・けいおん！×3 澪×2、唯
・化物語×2 撫子、マヨイちゃん
・グレンラガンのヨーコ
・ソードアートオンラインの、妖精・・・？よく知らない
・ラブライブ！のキャラ？よく知らない
・飾ってないけど、コードギアスのキャラ。よく知らない
合計15体
なんで、急に増えたかというと
最近メチャメチャUFOキャッチャーにはまってる。
そのせいです。
もう散財しまくりです。
そして、やれば取れるくらい上手くなってしまってる自分。
誰か止めて（人任せ
あのチャリンチャリンって百円入れるのが快感で、快感で。
給料増えたのに今月ギリギリ
やっべーーー！！！ｗｗｗｗ
#### 著者
著者名: みやびプリン
職業: フロントエンドエンジニア
プロフィール: 基本はイラストレイター（自称）だが、
本職は札幌市のフロントエンドエンジニア。
フロントエンドだけではなく、各種プログラミング言語に精通していると自負している。
HTML、CSSはもちろんのこと、JavaScript、TypeScript、PHP、Perl、Python、C#、Kotlin、Swift、Objective-Cなど多くの多くの言語に精通している他、
Movable Type、WordPressなど各種CMS、React.js、Angularなどフロントエンドフレームワークも扱える。
最近はUnityによる3Dコンテンツにも手を出している。
---
### 【エクスプレッション】オーディオのフェードイン、アウト
URL: https://highmoon-miyabi.net/blog/2014/01/16_000350.html
公開日時: 2014-01-16T17:12:10+09:00
更新日時: 2020-07-22T01:25:16+09:00
カテゴリ: Expression
概要: どうもみやびです。 なんだかこのブログが...
本文: どうもみやびです。
なんだかこのブログが、プログラム系リファレンスとなりつつあるのは気のせいでしょうか。
まぁ、いいやｗ
さて、今回は、After Effectsの中にあります、エクスプレッションの話です。
これを使えば、細かく自分でキーフレームを打たなくても、プログラムによってアニメーションやら、なんやらをさせることができるという、
素晴らしいものです。
FlashのActionScriptが感覚的に近いと思う。
しかも、このエクスプレッション、JavaScriptを元にしてるとか。
僕の得意分野ですね、ハイ。
なんで、今エクスプレッションなのか？というと、
最近映像の仕事を一時的にやっているのです。
プログラム書けるっちゅうことで、エクスプレッションでこれできない？
となったわけです。
はい、相変わらず前置き長いですね。
題号の内容です。
これ、やっている人がいないのか、探しても記事がでてこない！
ってわけで自分で作ってみた。
下記スクリプトを、オーディオレイヤーのオーディオレベルプロパティのエクスプレッションにはっつけるとできる。
```javascript
/**************************************************************
●オーディオレイヤーのフェードイン、アウト
このスクリプトを使えば、オーディオレイヤーの
フェードイン、アウトが行えます。
その説明をしていきます。
①"var ftime"で指定するのは、フェードさせる時間です。
秒単位で指定します。
②"var audioRate"は音の最小値を指定します。
大方、48のままで大丈夫だと思われます。
③"AudioFadeInOut('Out');"関数の、引数（カッコの中の''の中の文字）によって、
インさせるのか、アウトさせるのか、イン・アウト両方させるのかを指定します。
●'In' → イン
●'Out' → アウト
●'InOut' → イン・アウト
**************************************************************/
var fTime =20.0;
var audioRate = 48;
var mRate = audioRate/fTime;
function AudioFadeInOut(InOrOut){
function AudioFadeOut(){
if(time >= thisLayer.outPoint-fTime){
var OnTime = time -(thisLayer.outPoint-fTime);
var mAudio = mRate*OnTime;
if(mAudio 上のコメントアウトは説明なので、ここでは説明は省きます。
エクスプレッション、わかると楽しいですな。
ライブラリでも作ってみようかな。
#### 著者
著者名: みやびプリン
職業: フロントエンドエンジニア
プロフィール: 基本はイラストレイター（自称）だが、
本職は札幌市のフロントエンドエンジニア。
フロントエンドだけではなく、各種プログラミング言語に精通していると自負している。
HTML、CSSはもちろんのこと、JavaScript、TypeScript、PHP、Perl、Python、C#、Kotlin、Swift、Objective-Cなど多くの多くの言語に精通している他、
Movable Type、WordPressなど各種CMS、React.js、Angularなどフロントエンドフレームワークも扱える。
最近はUnityによる3Dコンテンツにも手を出している。
---
### WordPress、記事のアクセス数を取得する方法
URL: https://highmoon-miyabi.net/blog/2014/01/06_000349.html
公開日時: 2014-01-06T15:54:52+09:00
更新日時: 2015-09-03T02:24:42+09:00
カテゴリ: WordPress
概要: どうも、鼻毛に白髪が交じってたみやびです...
本文: どうも、鼻毛に白髪が交じってたみやびです。
冒頭から汚い話ですみません。
さて、タイトルの通り、WordPressの記事のアクセス数を取得する方法です。
しかもプラグインなしでです。（←ここ重要）
まぁ、なんでプラグインなしというと、
今回使ったサーバーのPHPが古くて、下記プラグインが使えなかったからだ。
●WordPress Popular Posts
http://wordpress.org/plugins/wordpress-popular-posts/
そんなこんなでいたしかたなく自分でスクリプトを書いたのである。
このプラグイン使えたらこんなに苦労しなかった。
さて本題。
まず、カウンタ用のカスタムフィールドを用意する。
（カスタムフィールドなのは、記事ランキングなどを生成しやすくするため）
①WordPress管理画面から、
投稿 ＞ 新規追加 と行って、記事編集画面へ。
②記事編集画面右上の、表示オプションをクリックして開き、
カスタムフィールドにチェックする
③画面下のカスタムフィールド枠の中の"新規追加"リンクを押す。
④名前に、適当に英数字でカスタムフィールド名を入れる。
（今回はviews）
⑤その下のカスタムフィールドを追加ボタンを押す
以上で準備は完了だ。
そして、今度はテンプレート内から、
WordPressのデータベースに直接アクセスし、様々な処理を行う。
テーマの中の、single.phpにて下記スクリプトを記載すると、
カスタムフィールドの値をとってくることができる。
```php
global $wpdb; //データベースへの接続準備
$query = $wpdb->get_results("
SELECT *
FROM $wpdb->postmeta
WHERE post_id= $post->ID
AND meta_key='views' //カスタムフィールド名を入れる
");
foreach ($query as $value) {
$viewsCount = $value->meta_value;
echo $viewsCount;
}
```
あとは簡単で、取ってきた値に＋1をし、
dbのテーブルの値に入れてやればいい。
foreachの部分を下記に変更するとできる。
```php
foreach ($query as $value) {
$viewsCount = $value->meta_value;
$viewsCountP = $viewsCount+1;
$wpdb->query("
UPDATE wp_postmeta
SET meta_value = $viewsCountP
WHERE post_id= $post->ID
AND meta_key = 'views'
");
}
```
こうすれば、記事を表示するたびに、
カスタムフィールドの値が増えていき、
アクセス数がカウントされるわけだ。
だが、このままでは、二重カウントされてしまう。
そこで、SESSION関数を使って、24時間は二重カウントされないようにする。
```php
session_start();
if (!isset($_SESSION["visited"])){ //SESSIONの"visited"がなければ実行
$_SESSION["visited"] = true; //SESSIONの"visited"に値をいれる。
$_SESSION["date"] = date('Y-m-d H:i:s'); //SESSIONの"date"にアクセスした日時を入れる
global $wpdb;
$query = $wpdb->get_results("
SELECT *
FROM $wpdb->postmeta
WHERE post_id= $post->ID
AND meta_key='views'
");
foreach ($query as $value) {
$viewsCount = $value->meta_value;
$viewsCountP = $viewsCount+1;
$wpdb->query("
UPDATE wp_postmeta
SET meta_value = $viewsCountP
WHERE post_id= $post->ID
AND meta_key = 'views'
");
}
} else {
$onday = strtotime(date('Y-m-d H:i:s')); //strtotimeを使い、現在時刻を四則計算できる数字に変換
$getday = strtotime($_SESSION["date"]); //strtotimeを使い、SESSIONに入った初期アクセスの時間を四則計算できる数字に変換
$SecondDiff = abs($onday - $getday); //現在時刻 - 初期アクセス時刻をし、何時間経ったかを取得
$DayDiff = $SecondDiff / (60 * 60); //時間単位に変換
if($DayDiff >= 24){ //24時間経ってたら実行
unset($_SESSION["visited"]); //SESSIONの"visited"を削除
unset($_SESSION["date"]); //SESSIONの"date"を削除
}
}
```
初回アクセスの時だけ、カウントを実行し、
そして、時間をSESSIONに入れておき、
そいつと、次のアクセス時間を比べ、24時間以上経っていたら、
SESSIONを消す、といったことをしている。
SESSIONが消えれば再びカウント～といった流れ。
こうしとけば、1日間は二重カウントされない。
そして、ランキングの一覧だが、カウント用のカスタムフィールドの値から、記事一覧を取得する。
sidebar.php等に下記スクリプトを記述する。
```php
<?php
query_posts('posts_per_page=9&meta_key=views&orderby=meta_value_num');
$i = 1;
while ( have_posts() ) : the_post(); ?>
～各処理と表示～
<?php $i++; endwhile; ?>
```
これをいれると、記事のカウントが多い順に記事一覧を生成できる。
"$i"を定義しているのは、記事の順番によって分岐させるため。
whileの直前で、$iの値を増やしているのはそのため。
あとは、各処理と表示のところで、WordPressの記事のタイトルとかを入れていけばいい。
しかし、今回は手探りでやったから、もっといい方法あるかも。
もっとスマートな書き方とかあれば教えてください。
ではまた
#### 著者
著者名: みやびプリン
職業: フロントエンドエンジニア
プロフィール: 基本はイラストレイター（自称）だが、
本職は札幌市のフロントエンドエンジニア。
フロントエンドだけではなく、各種プログラミング言語に精通していると自負している。
HTML、CSSはもちろんのこと、JavaScript、TypeScript、PHP、Perl、Python、C#、Kotlin、Swift、Objective-Cなど多くの多くの言語に精通している他、
Movable Type、WordPressなど各種CMS、React.js、Angularなどフロントエンドフレームワークも扱える。
最近はUnityによる3Dコンテンツにも手を出している。
---
### jQueryとheightLine.jsが上手く動かない時の対処
URL: https://highmoon-miyabi.net/blog/2013/12/13_000347.html
公開日時: 2013-12-13T11:43:20+09:00
更新日時: 2015-09-03T02:26:02+09:00
カテゴリ: jQuery
概要: こんにちは、今の会社では、早く帰れてます...
本文: こんにちは、今の会社では、早く帰れてます、みやびプリンです。
今回は、jQueryとheightLine.jsが上手く整合できなかったので、
その対処方を備忘録も兼ねて。
まず、heightLineの紹介。
ブロックの高さを揃えるJavaScriptです。
●ブロックレベル要素の高さを揃えるheightLine.js
http://blog.webcreativepark.net/2007/07/26-010338.html
jQueryプラグインではないが、かなり使いやすい。
詳しくは、上記ページに書いていますが、クラスをつけるだけで、様々な揃え方ができる。
jQueryプラグインの中にも、ブロックの高さ系はあるが、僕はなぜかこっちを使ってしまう。
さて、本題。
このheightLineは、jsで動的に生成した要素に対しても有効で、
ブロックを追加したものに対してクラスを追加すれば、そのブロックの高さを揃えることができるの。
その仕組みとしては、heightLineの内部で、高さを揃える関数を一定時間で繰り返して実行しているというものだ。
（初期設定では1秒）
だが、こいつがたまに上手く動かないことがある。
たとえば、jQueryでタブ系のブロックをフェードインさせたりした時、
タブの内部でheightLineクラスを使用してたときなど・・・。
ページを更新しないと、高さがそろってくれないのだ。
おそらく、読み込みの関係なんだけど、読み込みを遅らせたり、
関数の実行タイミングを変えても、上手くいかなかった。
ではどうすればいいかというと、
タブを表示させた後に、強制的にheightLineの関数を実行させてしまえばいいのだ。
```javascript
<script type=""text/javascript>
changeBoxSize();
</script>
```
heightLine.jsの中身をみてみればわかると思うが、
"changeBoxSize();"の中で関数が展開されている。
そいつを、好きなタイミングで実行してしまえばいいのだ。
これに気付くのに、一日くらいかかった・・・。
でもいい勉強になりました。
相変わらず話長い・・・ｗ
#### 著者
著者名: みやびプリン
職業: フロントエンドエンジニア
プロフィール: 基本はイラストレイター（自称）だが、
本職は札幌市のフロントエンドエンジニア。
フロントエンドだけではなく、各種プログラミング言語に精通していると自負している。
HTML、CSSはもちろんのこと、JavaScript、TypeScript、PHP、Perl、Python、C#、Kotlin、Swift、Objective-Cなど多くの多くの言語に精通している他、
Movable Type、WordPressなど各種CMS、React.js、Angularなどフロントエンドフレームワークも扱える。
最近はUnityによる3Dコンテンツにも手を出している。
---
### CSS セレクタ IE6、7でも使えるようにする方法
URL: https://highmoon-miyabi.net/blog/2013/11/13_000346.html
公開日時: 2013-11-13T19:36:41+09:00
更新日時: 2019-03-12T19:38:56+09:00
カテゴリ: CSS
概要: みやびプリン、転職しました。 といっても...
本文: みやびプリン、転職しました。
といっても、前と変わらず、WEBですがｗ
コーダーとして今回就職しました。
前からデザインよりそっちの気があったので、
けっこう楽しくやってます。
転職多すぎっていうツッコミはご勘弁をｗ
相変わらず前置き長いですね。
さて、今回はCSSセレクタの話だ。
こいつは非常に便利にできている。
例えば、
擬似クラスの":first-child"がある。
```css
div p:first-child {
font-size: 120%;
}
```
```html
<div>
<p>・こんなに便利な</p>
<p>・ものがあったとは</p>
<p>・思いもよらなかった</p>
</div>
```
以上のようにすると、divの中の、最初のpにだけ、スタイルを効かせることができるのだ。
他にも、n番目の要素に対してスタイルを効かせる":nth-child(n)"や、
"h1 + p"のようにセレクタを書けば、h1のすぐ隣にあるpにだけスタイルを効かせることができるのだ。
詳しくは下記エントリをご参照あれ
意外と知らない!?CSSセレクタ20個のおさらい
http://weboook.blog22.fc2.com/?no=268
CSSって超便利！
とまぁ、これはコーダーなら誰でも知ってること。
しかし、このセレクタを使っている人は、ほとんどいない。
なぜかはおわかりでしょう。
天下のクソブラウザIE6がこのCSSセレクタのほとんどを使うことができないのだ！
（IE7も使えないセレクタが多い・・・）全てこいつのせいで、いちいち、最初の要素にはクラスをつけなければいけなかったりと、めんどうになるし、
コーディングにやたら時間かかったりする。
いちいち、クラスとかIDをつけなければいけないし。
Sassを使えれば大分いいんだろうけど、みやびは、練習中・・・。
そこで、今回紹介したいのは、IE6、7でも、便利なCSSセレクタを使う方法である！
（やっと本題かよ）
その方法とは、jQueryとプラグインを使う方法である。
下記ページからJavaScriptをダウンロードして、
HTMLに読み込んでください。
■IE6の表示や、機能をIE7に近づけるプラグイン
https://code.google.com/p/ie7-js/
※下の方にDownloadとあるので、
URLの飛び先にて、2.1(beta4)/ > IE7.js と飛ぶと、JavaScriptのコードが出てくるので、
それをコピーして、JavaScriptに保存
■IE7、IE8でCSS3用のセレクタを使えるようにするプラグイン
http://selectivizr.com/
※右の黄緑色のダウンロードボタンを押してダウンロード
ダウンロードしたら、条件付きコメントで読み込む。
```html
</script>
<!--[if lt IE 7]>
<script src="JSを置いているディレクトリ/IE7.js" type="text/javascript">
< ![endif]-->
<!--[if (gte IE 6)&(lte IE 8)]>
<script type="text/javascript" src="JSを置いているディレクトリ/selectivizr.js"></script>
<noscript><link rel="stylesheet" href="[fallback css]" /></noscript>
<![endif]-->
```
jQueryプラグインなので当然jQuery本体も読み込みます。
これを読み込んでおけば、IE6、7でもセレクタが自由に使えるようになる！
HTMLのコードもすっきりするでしょう。
これとSassやEmmetなどを使えば、作業時間は半減するはず。
コーダーにはぜひとも採用していただきたい。
#### 著者
著者名: みやびプリン
職業: フロントエンドエンジニア
プロフィール: 基本はイラストレイター（自称）だが、
本職は札幌市のフロントエンドエンジニア。
フロントエンドだけではなく、各種プログラミング言語に精通していると自負している。
HTML、CSSはもちろんのこと、JavaScript、TypeScript、PHP、Perl、Python、C#、Kotlin、Swift、Objective-Cなど多くの多くの言語に精通している他、
Movable Type、WordPressなど各種CMS、React.js、Angularなどフロントエンドフレームワークも扱える。
最近はUnityによる3Dコンテンツにも手を出している。
---
### EC-CUBE、商品一覧のカテゴリIDを取得する方法
URL: https://highmoon-miyabi.net/blog/2013/10/17_000344.html
公開日時: 2013-10-17T02:17:09+09:00
更新日時: 2015-09-03T02:31:11+09:00
カテゴリ: EC-CUBE
概要: さて、久々のエントリだけど、 今日は、最...
本文: さて、久々のエントリだけど、
今日は、最近仕事でよくやる、EC-CUBEでもやろうかね。
でも、先に言っておく。
今回のエントリは、ゴリ押しです。
ぶっちゃけ、そこから発展していろいろやろうとなんか一切考えてないのであしからず。
今回のタイトルの内容、簡単でググれば簡単に出ると思いきや、
難しいらしく、そうそうやり方がでてこない。
（やり方を求めてる人は相当いるらしい。）
まずは答え。
管理画面上で、デザイン＞詳細編集＞商品一覧
といった感じで進みます。
んで、テンプレ編集の中の任意の場所に下記スクリプトを書けばカテゴリIDが出てきます。
```php
$cat_id = $_GET['category_id'];
echo $cat_id;
```
そうです。
EC-CUBE上で使用する、Smarty関数は使ってません。
PHPの原文を使い、そのまま取得しているのだ。
通常なら、Smarty関数を使うべきなのだが、
それをやるなら、なぜか、内部のシステムをゴチャゴチャいじらなきゃいけないらしい・・・。
めんどうなCMSだ、EC-CUBE。
あとは、IDによって分岐させればいい。
```php
if($cat_id == 30):
endif ;
```
あと、新しめのバージョンなら、このサイトのエントリは非常に参考になると思う。
[EC-CUBE 2.11.2] 商品一覧ページに、サブカテゴリを表示させたい | NAKWEB × EC-CUBE
にしても、EC-CUBEってなんでこんなに自由度というか使いづらさが目立つのだろうか。
WordPressとかだったら、PHPの原文すぐ使えるし、いろいろカスタマイズもしやすい。
MovableTypeなら、機能的な強化がつよく、カスタムフィールドの使い勝手は抜群だ。
でも、EC-CUBEって、なんか使いづらいし、自由も少ない。
やり方調べても、まともなものを探すのにえらく時間かかるし。
僕はEC-CUBEがどうも苦手です。
#### 著者
著者名: みやびプリン
職業: フロントエンドエンジニア
プロフィール: 基本はイラストレイター（自称）だが、
本職は札幌市のフロントエンドエンジニア。
フロントエンドだけではなく、各種プログラミング言語に精通していると自負している。
HTML、CSSはもちろんのこと、JavaScript、TypeScript、PHP、Perl、Python、C#、Kotlin、Swift、Objective-Cなど多くの多くの言語に精通している他、
Movable Type、WordPressなど各種CMS、React.js、Angularなどフロントエンドフレームワークも扱える。
最近はUnityによる3Dコンテンツにも手を出している。
---
### 続・facebookいいねボタンのリンク先の注意事項
URL: https://highmoon-miyabi.net/blog/2013/08/01_000343.html
公開日時: 2013-08-01T23:57:30+09:00
更新日時: 2013-11-30T07:29:26+09:00
カテゴリ: facebook
概要: 前回の記事だが・・・・。 ウソこいてまし...
本文: 前回の記事だが・・・・。
ウソこいてました。
そう、いいねのリンック先に、"/"で終了するURLを指定すると、
ルートにバックリンクが張らさってしまう、と書いたが。
あれは間違いであった。
そう、しっかり動作するはずなのである。
なぜ、そのような現象が起こるかというと、
下記エントリーをご参照いただきたい。
Facebookのいいね数がおかしい・シェアしてもトップページのURLしか出てこないバグの対処法
http://ushigyu.net/2012/05/11/fix_facebook_number_of_like/
このfacebook、どうやら、OGPの設定を正しくやらないと、
クロールエラーを起こし、サイトトップにリンクさせてしまうのだ。
どうやってOGPエラーを探し出すかというと、
上記エントリー内にもリンクがありますが、下記URLにて、
デバッグしたいURLを入力するとできます。
デバッガー
https://developers.facebook.com/tools/debug
ここでチェックしてもらっただけで、
クロールエラーはとりあえず解消されます。
もちろん、エラーレポートを元にOGPの設定を修正した方がいい。
こんなの知らないよ！
と、先方のサイトでやりかた間違ってることに、今更数がリセットされるかもしれないのに、
デバッグチェックなんかできっこない・・・。
#### 著者
著者名: みやびプリン
職業: フロントエンドエンジニア
プロフィール: 基本はイラストレイター（自称）だが、
本職は札幌市のフロントエンドエンジニア。
フロントエンドだけではなく、各種プログラミング言語に精通していると自負している。
HTML、CSSはもちろんのこと、JavaScript、TypeScript、PHP、Perl、Python、C#、Kotlin、Swift、Objective-Cなど多くの多くの言語に精通している他、
Movable Type、WordPressなど各種CMS、React.js、Angularなどフロントエンドフレームワークも扱える。
最近はUnityによる3Dコンテンツにも手を出している。
---
### facebookいいねボタンのリンク先の注意事項
URL: https://highmoon-miyabi.net/blog/2013/07/25_000342.html
公開日時: 2013-07-25T12:45:16+09:00
更新日時: 2013-11-30T07:29:27+09:00
カテゴリ: facebook
概要: けっこう最近日記頻度高いですね。 忙殺プ...
本文: けっこう最近日記頻度高いですね。
忙殺プリンです。
さてさて、最近流行りの大手SNS、facebookの事で備忘録。
最近のWeb制作の現場では、やれいいねボタンつけてだの、
Likeボックスつけてなどの依頼が最近多いですが、
このfacebook、厄介な代物だというのは、Webクリエーターならば共通見解でしょう。
今日は、その中でも、いいねボタンについてちょっと書こうと思う。
まずは今回ぶつかったのは、いいねからのリンク先の指定。
いいねボタン設置方法は、下記URLからモジュールを生成し、
html内に記述します。
https://developers.facebook.com/docs/reference/plugins/like/
そして、いいねからのバックリンク先、こいつは、下記タグの、
"data-href"の中のURLを変えるだけだ。
さて、本題に入るが、このリンク先、
"/"で終了させてはいけない。
なぜなら、"/"で終了するURLのバックリンク先は、
サイトのルートに設定されてしまうからだ！
しかも、"/"で終了するURLか、
ファイル名（例えば、ファイル名.html）で終わるURLでは、
いいねのカウントは別カウントになってしまう。
仕事でそれ知らんでやっちまったわけだ。
いいねボタンの導入依頼があったWEBデザイナーさんは、
そこほんと注意しときなさい。
勉強になりました。
#### 著者
著者名: みやびプリン
職業: フロントエンドエンジニア
プロフィール: 基本はイラストレイター（自称）だが、
本職は札幌市のフロントエンドエンジニア。
フロントエンドだけではなく、各種プログラミング言語に精通していると自負している。
HTML、CSSはもちろんのこと、JavaScript、TypeScript、PHP、Perl、Python、C#、Kotlin、Swift、Objective-Cなど多くの多くの言語に精通している他、
Movable Type、WordPressなど各種CMS、React.js、Angularなどフロントエンドフレームワークも扱える。
最近はUnityによる3Dコンテンツにも手を出している。
---
### WordPress、リビジョンの回数を数える方法
URL: https://highmoon-miyabi.net/blog/2013/07/23_000341.html
公開日時: 2013-07-23T11:03:16+09:00
更新日時: 2015-09-03T02:32:42+09:00
カテゴリ: WordPress
概要: 最近少し仕事が空き気味で、調べ物をするこ...
本文: 最近少し仕事が空き気味で、調べ物をすることが多い。
そんな今日のプリンです。
んで、今日は、WordPressで一歩踏み込んだ情報を取得する方法を書いていこうと思う。
投稿などの"リビジョン"の情報の取得方法だ。
このリビジョンとは、WordPress上の、
投稿の修正とか、何かの修正とかを保存しとくもので、
要は、データベース上のバックアップとかアンドゥみたいなもの。
便利だけど、データベースを圧迫するので、
増えると動作が重くなったりするらしい。
んで、この情報を引っ張ってくるといった事をする人は少ないのか、
検索しても、リビジョンを削除する方法とか、リビジョンの管理をするプラグイン・・・
といったことしかでてこない。
つまり、本エントリのタイトル通りの事をする方法を見つけるのが大変苦労したので、
備忘録も兼ねて。
はい、前置きが長いですね。
下記スクリプトで取得できます。
```php
<?php
global $id;
$args = array(
'post_parent' => $id,
'post_type' => 'revision',
'numberposts' => -1,
'post_status' => 'any',
);
$st = -1;
$images = &get_children( $args, $output);
if ( empty($images) ) {
$st = 0;
} else {
foreach ( $images as $attachment_id) {
$st = $st + 1;
}
}
echo $st;
```
大事なのは、&get_childrenというWordPress関数。
これは、通常の投稿などの、"子投稿"の情報を取得できるのだ。
なんで、わざわざリビジョンの情報を取ってくるのに、投稿の子情報なのかというと、
WordPress上ではリビジョンも実は投稿として扱われるからだ。
つまり、"投稿のリビジョン"をとってくるには、その投稿と、リビジョンを関連付けた上で取得しなければいけない。
要は"投稿"と"そのリビジョン"は親子関係でなりたっているわけで、
その投稿の子情報の中として、リビジョンが存在するというわけだ。
と、感覚的に書いてるので、わかりづらいかもしれないが、
とかくこれで、その投稿のリビジョンの情報をとってくるには、
この方法でできるわけ。
このget_children、他にも応用ききそうな感じですね。
#### 著者
著者名: みやびプリン
職業: フロントエンドエンジニア
プロフィール: 基本はイラストレイター（自称）だが、
本職は札幌市のフロントエンドエンジニア。
フロントエンドだけではなく、各種プログラミング言語に精通していると自負している。
HTML、CSSはもちろんのこと、JavaScript、TypeScript、PHP、Perl、Python、C#、Kotlin、Swift、Objective-Cなど多くの多くの言語に精通している他、
Movable Type、WordPressなど各種CMS、React.js、Angularなどフロントエンドフレームワークも扱える。
最近はUnityによる3Dコンテンツにも手を出している。
---
### Wordpress、投稿の新規と更新の判別
URL: https://highmoon-miyabi.net/blog/2013/07/19_000340.html
公開日時: 2013-07-19T09:55:03+09:00
更新日時: 2015-09-03T02:33:54+09:00
カテゴリ: WordPress
概要: さてさて、今日も、現場目線にこだわって書...
本文: さてさて、今日も、現場目線にこだわって書いていこうか。
珍しくWordPressです。
最近、仕事でWordPressやることが多い。
世の中、どうやらWPの方が流行っているらしい。
しかしまぁ、けっこう厄介者で、
カスタマイズはどこまでも自由にできるけど、
いかんせん、PHPベースだから、わからん人にはわからんというか・・・。
前置き長いですね。本題に入ります。
タイトルの通り、
投稿記事が、新規投稿なのか、更新したものなのかを判別する方法です。
やる方法すぐ見つかるかなと思ったら、
これが難しいらしくなかなか見つからなかった。
なぜかというと、調べるとすぐ出てくる方法は下記だが・・・。
```php
<?php get_post_status( $ID ) ?>
```
これだと、投稿されているか、下書きか、くらいの判別しかできず、
新規投稿なのか、更新なのかの判別はできないからだ。
（新規記事も、更新した記事も、出てくる値は"publish"）
他も調べると、データベースに直接アクセスして、値をとってくるなど、
にわかエンジニアの僕にはちんぷんかんぷんな方法しかでてこない。
そこで、僕が見つけた方法が下記である。
```php
<?php
$postDate = $post->post_date;
$modiDate = $post->post_modified;
if($postDate == $modiDate){
echo "new";
} else {
echo "updated";
}
```
何をしているかというと、
新規投稿された日時と、その投稿が更新された日時を持ってきて、
双方を比べて、同じであれば、新規投稿、
違えば更新されている記事・・・、と判別させている。
そう、WordPressさんは、投稿が新規か投稿かを判別するのは、
めんどくさいが、新規投稿の日時と更新された日時はすぐ出せるのである。
普通、簡単さ逆じゃないの・・・？
というわけで、これ見つけるのに一日半かけてたのでした。
#### 著者
著者名: みやびプリン
職業: フロントエンドエンジニア
プロフィール: 基本はイラストレイター（自称）だが、
本職は札幌市のフロントエンドエンジニア。
フロントエンドだけではなく、各種プログラミング言語に精通していると自負している。
HTML、CSSはもちろんのこと、JavaScript、TypeScript、PHP、Perl、Python、C#、Kotlin、Swift、Objective-Cなど多くの多くの言語に精通している他、
Movable Type、WordPressなど各種CMS、React.js、Angularなどフロントエンドフレームワークも扱える。
最近はUnityによる3Dコンテンツにも手を出している。
---
### .htaccess、トップ以外のアクセスをトップにリダイレクトする方法
URL: https://highmoon-miyabi.net/blog/2013/05/31_000339.html
公開日時: 2013-05-31T14:11:47+09:00
更新日時: 2020-09-04T01:42:41+09:00
カテゴリ: リダイレクト
概要: .htaccessにて、トップ以外のアクセスを、トップにリライトする方法を解説。当時はRewriteBase /をしっかり記載している記事が本当に少なかった。
本文: さて、仕事の合間だけど、備忘録として。
今回は、WEBやるうえでは、一つ課題になる、リダイレクトに関してだ。
たとえばサイトを休止したい時、
サーバー内のファイルを残したまま、ページを隠したい、
なんて要望に応えるには、リダイレクトで全てのページへのアクセスを、
休止用HTMLにリダイレクトするのが一番いい。
方法は大きく分けて二つ。
各ページにリダイレクトのmetaタグを入れる
.htaccessを使う
metaの書き方は下記
```html
<meta http-equiv="refresh" content="秒数;URL=URL">
```
しかし、今回のようにページ全てとなると、これはめんどい。
というわけで、.htaccessを使う方法。これしかない。
.htaccess リダイレクト トップ以外
なんてキーワードでググれば、
だいたいは下記記述にあたるだろう。
```text
RewriteEngine on
RewriteCond %{REQUEST_URI} !^/index.html$
RewriteRule ^(.*)$ /index.html [L,R]
```
解説すると、RewriteCond %{REQUEST_URI} !^/index.html$で、
トップページは除外しますよ、と指定。
RewriteRule ^(.*)$ /index.html [L,R]で
全部のファイルを、トップへという指定だ。
しかし、これが、とにかくできない・・・！
どんなにやっても、できない！
リダイレクトループも発生して、
お手上げ！
いろいろ書き方試して、リダイレクトできるようになっても、
たとえば/about/index.htmlでアクセスすると、
画像とかCSSが効いてないページが表示される。
（※この時、/about/では上手くいった）
そう、この記述、一行足りないのだ。
下記記述であれば、完璧である。
```text
RewriteEngine on
RewriteBase /
RewriteCond %{REQUEST_URI} !^/index.html$
RewriteRule ^(.*)$ /index.html [L,R]
```
このRewriteBase /これが大事。
意味は、ベースのパスはここですよ！って意味。
/だけを書けば、ルートをベースに指定できる。
つまり、上の方の書き方だと、
「index.htmlだったらなんでも除外するよ！」
ってことになる。
たとえば、/about/index.htmlも除外するため、
/about/index.htmlにアクセスした時はリダイレクトされない。
パスを/から始めている意味がなくなっているのだ。
（パスを指定する時、/から始めると、サーバードキュメントのルートからのパスになる。）
よって、ベースをルートに指定してやればいいのだ。
そうすれば、/からパスを始めると、ルートをからに指定できるのだ。
下の書き方ならば、
「ルート階層にあるindex.htmlだけ除外するよ！」
とできるわけ。
ちなみに、ググった時に、
RewriteBase /をしっかり記述している記事は、
ほとんどない（怒）
それくらい.htaccessの常識ってこと・・・？
#### 著者
著者名: みやびプリン
職業: フロントエンドエンジニア
プロフィール: 基本はイラストレイター（自称）だが、
本職は札幌市のフロントエンドエンジニア。
フロントエンドだけではなく、各種プログラミング言語に精通していると自負している。
HTML、CSSはもちろんのこと、JavaScript、TypeScript、PHP、Perl、Python、C#、Kotlin、Swift、Objective-Cなど多くの多くの言語に精通している他、
Movable Type、WordPressなど各種CMS、React.js、Angularなどフロントエンドフレームワークも扱える。
最近はUnityによる3Dコンテンツにも手を出している。
---
### colorboxでiframeを可変にする方法
URL: https://highmoon-miyabi.net/blog/2013/05/30_000338.html
公開日時: 2013-05-30T01:01:07+09:00
更新日時: 2019-03-12T15:10:31+09:00
カテゴリ: jQuery
概要: 相変わらず仕事が遅い。 量が大量です。 ...
本文: 相変わらず仕事が遅い。
量が大量です。
辛いけど、生活のためならしかたないか・・・。
胃腸の治りもちょっと遅気味です。
さて、今日は、僕の大好きcolorboxのカスタマイズをやろうか。
colorbox
http://www.jacklmoore.com/colorbox/
ご存知の方も多いと思うけど、colorboxはiframeもライトボックス風に表示できます。
下記スクリプトでね。
```javascript
$(function() {
$("セレクタ名").colorbox({iframe:true});
});
```
これなら、外部HTMLもなんなく表示できる。
しかし、iframeは高さを可変にすることができない・・・。
colorboxも同様で、サイズは決め打ちである。
つまり、リンク先のページサイズによって可変にする・・・、
といったことはできない。
と思ったか？
あるんです。方法が。
下記エントリーがヒントになりました。
★iframeで読み込むページの高さを取得して、heigthに代入する方法
http://www.geocities.jp/eijispace/2012/0220.html
これをヒントにcolorbox用に組み直すと下記のようになる。
```javascript
setTimeout(resizeEvent,100); //処理を若干遅延させる（colorboxの処理終了後に処理させるため）
function resizeEvent() {
var parentW = $(window.parent).width(); //ライトボックスの横位置を合わせるために親ウィンドウの横幅取得
var cboxWidth = window.parent.$('#colorbox').width(); //ライトボックスに動的な横幅を取得
var left = parentW/2 - cboxWidth/2; //親の横幅／2 - ライトボックス横幅／2をして、横の余白を算出
var PageHeight = $("body").height() + 0; //iframeページの高さを取得
var parentH = $(window.parent).height(); //ライトボックス表示の位置を調整するために親のウィンドウの高さを取得
var dt = parseInt(window.parent.$("#colorbox").css('top')); //ライトボックスに動的に入った「top」の値を取得
var pL = dt - (PageHeight/2); //動的なtopの値からライトボックスの高さの半分を引く
if(pL それぞれアニメーションさせているのは、表示時に不自然にならないためである。
また、setTimeoutを使っているのは、colorboxのタグ生成が終わってから実行させるため。
もしかしたらいらないかも。
しかし、このままだと、親のウィンドウサイズを変えた時にバグってしまう。
ので、下記スクリプトを追記すると、あまり違和感なくできる。
```javascript
//親ウィンドウサイズを変えたときに、上記関数を実行させる、という関数。この時、スクロールが終わったタイミングで実行させるために、setTimeoutを使用している。
var resizeTimer = null;
$(window.parent).bind('resize', function(){
if (resizeTimer) clearTimeout(resizeTimer);
resizeTimer = setTimeout(function(){
resizeEvent();
}, 400);
});
```
iframeのページに直接書いてもいいが、外部jsで読み込みをすれば、メンテナンスが楽だ。
でもまぁ、もっといい書き方があるかもしれない。
スクリプト強い人ご意見いただければと思います。
ちなみに、なんで、colorboxが生成するタグがわかるかというと、
モダンブラウザの（Chorome、Fire Fox、IE9など）デベロッパーツールを使えば、
Javascript実行後のソースコードが見れるからデス。
jQueryといい、スマホといい、便利な世の中になったねぇ・・・。
#### 著者
著者名: みやびプリン
職業: フロントエンドエンジニア
プロフィール: 基本はイラストレイター（自称）だが、
本職は札幌市のフロントエンドエンジニア。
フロントエンドだけではなく、各種プログラミング言語に精通していると自負している。
HTML、CSSはもちろんのこと、JavaScript、TypeScript、PHP、Perl、Python、C#、Kotlin、Swift、Objective-Cなど多くの多くの言語に精通している他、
Movable Type、WordPressなど各種CMS、React.js、Angularなどフロントエンドフレームワークも扱える。
最近はUnityによる3Dコンテンツにも手を出している。
---
### HTML5、Firefoxでのvideoタグでハマったこと
URL: https://highmoon-miyabi.net/blog/2013/03/10_000335.html
公開日時: 2013-03-10T19:09:16+09:00
更新日時: 2014-11-22T19:54:00+09:00
カテゴリ: HTML5
概要: まぁ、たまにはね、僕も利いたことをしよう...
本文: まぁ、たまにはね、僕も利いたことをしようと思ったんだ。
そう、映像ページについにHTML5のタグを導入したのです！！！
念願だったお！もー、今までiframeでflv表示させてたんだよ。iPhoneじゃみれなかったんだヨ！
そして、このサイト、HTML5に準拠してるわりには、HTML5らしいこと一切してなかったんです。
まぁ、いいや。そうとにかく、ハマったんです。
何にって、Firefoxでのvideoタグの表示です。
これがなかなか上手くいかなかった。
多分、VIDEOタグを使おうとする多くの人が躓くことなのですが、
しかし、実は本題はそこではないのです。
まず、表示の仕方というかタグの書き方はは下記。
なぜこういう書き方なのかは、下記エントリーを参照いただきたい。
FirefoxのHTML5『video』タグの落とし穴？
この話はググって見れば解決方法は、だいたい同じ方法が出てきます。
動画ファイルを置いているフォルダに、.htaccessを置くのですが、
下記の書き方でね
AddType video/ogg .ogg .ogv
AddType video/mp4 .mp4
AddType application/ogg .ogg .ogv
しかし、僕の場合、表示されない・・・何度いろんな方法も試しました。
タグの中にMIME設定を書くのも試しました。
と追加します。
しかしダメ・・・・。
サーバーによるらしく、ロリポップのせいか！？と思ったけど、
腑に落ちないし、そんな記事はググってもでてこない。
Firefoxをサポート外にするのはさすがに忍びなく、あきらめないで検索。
と、今日になって不吉な記事を発見したわけですヨ
HTML5でサイトリニューアルしました。＋ 簡単な解説
そこの最初の方にこう書いてるんですよ。
文字コードは Shift_JIS で、改行コードは LF 。
.htaccess ファイルを設置したディレクトリ以下に適用されます。
パーミッションは604
サーバーによって違いがあるかもしれません。
【注】safariはQuickTimeがインストールされていないと動かなかったです。
・・・・・ま、まさか、と思い、自分が作っていた.htaccessファイルを見てみると、
UTF-8ではないですか・・・！？
しかも、改行コードも違う。
あの万能文字コードがなぜ・・・。
文字コードと改行コードを変えてアップすると・・・。
動いた！！！！！
この二三日の時間はなんだったの！！！？
というわけで、本題は、HTML5でもvideoタグでもなく、
.htaccessは文字コードによっては動かない！
なのでした・・・。
相変わらず話長いｗ
#### 著者
著者名: みやびプリン
職業: フロントエンドエンジニア
プロフィール: 基本はイラストレイター（自称）だが、
本職は札幌市のフロントエンドエンジニア。
フロントエンドだけではなく、各種プログラミング言語に精通していると自負している。
HTML、CSSはもちろんのこと、JavaScript、TypeScript、PHP、Perl、Python、C#、Kotlin、Swift、Objective-Cなど多くの多くの言語に精通している他、
Movable Type、WordPressなど各種CMS、React.js、Angularなどフロントエンドフレームワークも扱える。
最近はUnityによる3Dコンテンツにも手を出している。
---
### 「リキッドーーーーー！！！！」「スネーーーーク！！！！」
URL: https://highmoon-miyabi.net/blog/2013/01/14_000333.html
公開日時: 2013-01-14T22:11:47+09:00
更新日時: 2013-11-12T15:03:57+09:00
カテゴリ: 雑記
概要: 久々に書いたと思ったらなんだこのタイト...
本文:
久々に書いたと思ったらなんだこのタイトルはって感じよね。
はい、メタルギアは関係ないよ。
なんせ今年は巳年だからね！
つーわけで、今年は年賀状書かないつもりだったんだけど、さすがに、お世話になってる人から来たら、書かないわけにゃいかん！と、年賀絵描きました。
巳年ですね！ヘビですね！
ウチの母が大嫌いっつーね。
というわけで、絵をアップするの半年ぶりなのでした・・・。
#### 著者
著者名: みやびプリン
職業: フロントエンドエンジニア
プロフィール: 基本はイラストレイター（自称）だが、
本職は札幌市のフロントエンドエンジニア。
フロントエンドだけではなく、各種プログラミング言語に精通していると自負している。
HTML、CSSはもちろんのこと、JavaScript、TypeScript、PHP、Perl、Python、C#、Kotlin、Swift、Objective-Cなど多くの多くの言語に精通している他、
Movable Type、WordPressなど各種CMS、React.js、Angularなどフロントエンドフレームワークも扱える。
最近はUnityによる3Dコンテンツにも手を出している。
---
### 携帯を変えた
URL: https://highmoon-miyabi.net/blog/2012/11/27_000331.html
公開日時: 2012-11-27T20:27:10+09:00
更新日時: 2013-07-11T03:18:42+09:00
カテゴリ: 雑記
概要: 生きてます。 なんとか、生きてます。 ず...
本文: 生きてます。
なんとか、生きてます。
ずっと、姉の結婚式の映像を作ってました。
大変だったけど、なまら楽しかった！
なんでも、一生懸命にやると楽しいもんなんです。
さて、携帯を変えました。
やっとこさ僕もスマホの仲間入りです。
ガラケーで通そうとしてたんだけど、
ついに、充電がほとんどできなくなり、
そして、ショップに行っても、スマホしかなかったちゅうね。
店員は、スマホ押しだし。
抗えなくなったヨ・・・・。
ってわけで、iPhoneです！
やっとです！
別に特に、やりたいことがあるわけじゃないけど、
スマホにするなら、iPhoneと決めてました。
なんでかって、かっこいいからねｗ
Mac信者になりつつみやびだからです。
PCもMacにしてぇ～
でも高いから買えねぇ～・・・。
とにかく金欠なんです。いろいろ。
#### 著者
著者名: みやびプリン
職業: フロントエンドエンジニア
プロフィール: 基本はイラストレイター（自称）だが、
本職は札幌市のフロントエンドエンジニア。
フロントエンドだけではなく、各種プログラミング言語に精通していると自負している。
HTML、CSSはもちろんのこと、JavaScript、TypeScript、PHP、Perl、Python、C#、Kotlin、Swift、Objective-Cなど多くの多くの言語に精通している他、
Movable Type、WordPressなど各種CMS、React.js、Angularなどフロントエンドフレームワークも扱える。
最近はUnityによる3Dコンテンツにも手を出している。
---
### colorboxのカスタマイズ
URL: https://highmoon-miyabi.net/blog/2012/10/19_000330.html
公開日時: 2012-10-19T07:54:29+09:00
更新日時: 2019-03-12T19:29:41+09:00
カテゴリ: jQuery
概要: もう、すっかり冬だ。 そして、朝っぱらか...
本文: もう、すっかり冬だ。
そして、朝っぱらから何やってんだ俺は。
さて、今日は、"colorbox"のカスタマイズについて語ってみようと思う。
colorbox
http://www.jacklmoore.com/colorbox/
先日、ライトボックス風にブロックを表示してほしい、という案件に出くわして、案の定有名プラグインのcolorboxにたどり着いた。
div要素ごとライトボックスにするにはやっぱこれしかない。様々な要素をライトボックスにできるこのプラグインはとにかく便利である。
しかしながら、さしものcolorboxといえど、カスマイズには骨が折れる。
なぜかというと、元々がいくつかのデザインが用意されており、カスタマイズが必要ないように作られているからだ。
そして、デザインをサンプルごとに変えやすいためか、プラグイン内で様々なdiv要素を生成するようになっているため、一見プラグイン自体を解析しなければいけない？と思ってしまう。
しかし、デザイナーがデザインしたかっこいいデザインを完璧に実現するのがWEBデザイナーってもんだ！
ここであきらめてたまるか！
（もちろんcolorboxのもともとのデザインもなまらかっこいいけどね）
というわけで、colorboxのカスタマイズで検索。
だが、まともな記事は出てこない。
出てくるのは、設置の仕方とか、せいぜいデフォルトオプションの設定の仕方ぐらい。
そんなん見んでもできるわ！！！
つーわけで、きのこ味プリンことみやびが人肌脱ごうって算段よ。
そう、今日紹介したいのは、colorboxのデザインの変更方法なのである。
（はい、毎度のごとく前置きが長いですね）
どーするかってーと、実は、CSSのみでほとんどカスタマイズできちゃいます。デフォルトのcolorboxに、どこをいじればどこがどうなるかをコメントで書いてみました。
（example1のCSS）
●example1のCSSにコメント
```css
/*
ColorBox Core Style:
The following CSS is consistent between example themes and should not be altered.
*/
/* ここらへんはいじらない ここから */
#colorbox, #cboxOverlay, #cboxWrapper{position:absolute; top:0; left:0; z-index:9999; overflow:hidden;}
#cboxOverlay{position:fixed; width:100%; height:100%;}
#cboxMiddleLeft, #cboxBottomLeft{clear:left;}
#cboxContent{position:relative;}
#cboxLoadedContent{overflow:auto;}
#cboxTitle{margin:0;}
#cboxLoadingOverlay, #cboxLoadingGraphic{position:absolute; top:0; left:0; width:100%; height:100%;}
#cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow{cursor:pointer;}
.cboxPhoto{float:left; margin:auto; border:0; display:block; max-width:none;}
.cboxIframe{width:100%; height:100%; display:block; border:0;}
#colorbox, #cboxContent, #cboxLoadedContent{box-sizing:content-box;}
/* ここらへんはいじらない ここまで */
/*
User Style:
Change the following styles to modify the appearance of ColorBox. They are
ordered & tabbed in a way that represents the nesting of the generated HTML.
*/
#cboxOverlay{background:url(images/overlay.png) repeat 0 0;}
#colorbox{}
/* ボックスの端の設定ここから */
/* ボックス左上角 */
#cboxTopLeft{width:21px; height:21px; background:url(images/controls.png) no-repeat -101px 0;}
/* ボックス右上角 */
#cboxTopRight{width:21px; height:21px; background:url(images/controls.png) no-repeat -130px 0;}
/* ボックス左下角 */
#cboxBottomLeft{width:21px; height:21px; background:url(images/controls.png) no-repeat -101px -29px;}
/* ボックス右下角 */
#cboxBottomRight{width:21px; height:21px; background:url(images/controls.png) no-repeat -130px -29px;}
/* ボックス左辺 */
#cboxMiddleLeft{width:21px; background:url(images/controls.png) left top repeat-y;}
/* ボックス右辺 */
#cboxMiddleRight{width:21px; background:url(images/controls.png) right top repeat-y;}
/* ボックス上辺 */
#cboxTopCenter{height:21px; background:url(images/border.png) 0 0 repeat-x;}
/* ボックス下辺 */
#cboxBottomCenter{height:21px; background:url(images/border.png) 0 -29px repeat-x;}
/* ボックスの端の設定ここまで */
/* 表示させるボックス自体 ここから */
#cboxContent{background:#fff; overflow:hidden;}
/* 表示させるボックス自体 ここまで */
/* 必要なら調整 ここから */
.cboxIframe{background:#fff;}
#cboxError{padding:50px; border:1px solid #ccc;}
/* ボックスの下の幅 */
#cboxLoadedContent{margin-bottom:28px;}
/* タイトル部分 */
#cboxTitle{position:absolute; bottom:4px; left:0; text-align:center; width:100%; color:#949494;}
/* 下の"何番目"（2 of 3...とか）表示の表示設定 */
#cboxCurrent{position:absolute; bottom:4px; left:58px; color:#949494;}
#cboxSlideshow{position:absolute; bottom:4px; right:30px; color:#0092ef;}
/* 必要なら調整 ここまで */
/* 戻るボタン */
#cboxPrevious{position:absolute; bottom:0; left:0; background:url(images/controls.png) no-repeat -75px 0; width:25px; height:25px; text-indent:-9999px;}
#cboxPrevious:hover{background-position:-75px -25px;}
/* 次へボタン */
#cboxNext{position:absolute; bottom:0; left:27px; background:url(images/controls.png) no-repeat -50px 0; width:25px; height:25px; text-indent:-9999px;}
#cboxNext:hover{background-position:-50px -25px;}
/* ローディングボタン */
#cboxLoadingOverlay{background:url(images/loading_background.png) no-repeat center center;}
#cboxLoadingGraphic{background:url(images/loading.gif) no-repeat center center;}
/* 閉じるボタン */
#cboxClose{position:absolute; bottom:0; right:0; background:url(images/controls.png) no-repeat -25px 0; width:25px; height:25px; text-indent:-9999px;}
#cboxClose:hover{background-position:-25px -25px;}
/*
The following fixes a problem where IE7 and IE8 replace a PNG's alpha transparency with a black fill
when an alpha filter (opacity change) is set on the element or ancestor element. This style is not applied to or needed in IE9.
See: http://jacklmoore.com/notes/ie-transparency-problems/
*/
/* 以下、IE6用の設定のため、適当に上と合わせる */
.cboxIE #cboxTopLeft,
.cboxIE #cboxTopCenter,
.cboxIE #cboxTopRight,
.cboxIE #cboxBottomLeft,
.cboxIE #cboxBottomCenter,
.cboxIE #cboxBottomRight,
.cboxIE #cboxMiddleLeft,
.cboxIE #cboxMiddleRight {
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF,endColorstr=#00FFFFFF);
}
/*
The following provides PNG transparency support for IE6
Feel free to remove this and the /ie6/ directory if you have dropped IE6 support.
*/
.cboxIE6 #cboxTopLeft{background:url(images/ie6/borderTopLeft.png);}
.cboxIE6 #cboxTopCenter{background:url(images/ie6/borderTopCenter.png);}
.cboxIE6 #cboxTopRight{background:url(images/ie6/borderTopRight.png);}
.cboxIE6 #cboxBottomLeft{background:url(images/ie6/borderBottomLeft.png);}
.cboxIE6 #cboxBottomCenter{background:url(images/ie6/borderBottomCenter.png);}
.cboxIE6 #cboxBottomRight{background:url(images/ie6/borderBottomRight.png);}
.cboxIE6 #cboxMiddleLeft{background:url(images/ie6/borderMiddleLeft.png);}
.cboxIE6 #cboxMiddleRight{background:url(images/ie6/borderMiddleRight.png);}
.cboxIE6 #cboxTopLeft,
.cboxIE6 #cboxTopCenter,
.cboxIE6 #cboxTopRight,
.cboxIE6 #cboxBottomLeft,
.cboxIE6 #cboxBottomCenter,
.cboxIE6 #cboxBottomRight,
.cboxIE6 #cboxMiddleLeft,
.cboxIE6 #cboxMiddleRight {
_behavior: expression(this.src = this.src ? this.src : this.currentStyle.backgroundImage.split('"')[1], this.style.background = "none", this.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src=" + this.src + ", sizingMethod='scale')");
}
```
実はボタンの位置とかは、絶対位置表示になっているため、動かしやすかったりするのだ。
原点はライトボックスの左端になるようになっている。
（CSSである程度変更可能）
どうやってボタンの高さをボックスの真ん中にするかって？
そんな時は以下のように設定したまえよ。
（縦横30pxのボタンの場合）
```css
/* 戻るボタン */
#cboxPrevious {
width: 30px;
height:30px;
position: absolute;
top: 50%;
left: 0;
background:url(images/controls.png) no-repeat -75px 0;
text-indent: -9999px;
margin-top: -15px;
}
```
キモは、絶対位置にしてるので、top: 50%;でページ（親要素）の高さの半分の大きさの隙間をいれることができることである。
そして、上マージンに、ボタンの大きさの半分のネガティブマージンを入れてやればいいわけだ。
（ただし、ネガティブマージンは、IE6、7で崩れの原因となるので、ハックが必要になる場合も...）
これで、君もcolorboxマスター（？）ってわけだ。
え、マスターならプラグインの解析は？って？
あーいや、もう会社に行く時間なんでこの辺で・・・・。
#### 著者
著者名: みやびプリン
職業: フロントエンドエンジニア
プロフィール: 基本はイラストレイター（自称）だが、
本職は札幌市のフロントエンドエンジニア。
フロントエンドだけではなく、各種プログラミング言語に精通していると自負している。
HTML、CSSはもちろんのこと、JavaScript、TypeScript、PHP、Perl、Python、C#、Kotlin、Swift、Objective-Cなど多くの多くの言語に精通している他、
Movable Type、WordPressなど各種CMS、React.js、Angularなどフロントエンドフレームワークも扱える。
最近はUnityによる3Dコンテンツにも手を出している。
---
### 生きてます。
URL: https://highmoon-miyabi.net/blog/2012/10/09_000329.html
公開日時: 2012-10-09T03:07:02+09:00
更新日時: 2013-03-11T11:07:41+09:00
カテゴリ: 雑記
概要: 見てる人がいるかわからんが、一応・・・。...
本文: 見てる人がいるかわからんが、一応・・・。
なんとか生きてます。
ずっと仕事忙しくてなんもできなかったｗ
土日はずっと死んでましたｗ
と、いうわけで、
三連休を使い、とりあえず掃除しました。
とりあえず、すっきりし、とりあえず、夜更かししてしまいました。
明日仕事なのに・・・。
とりあえず、寝ます。
そして、最近やりたいことといえば、とりあえず麻雀サイトを立ち上げたいことです。
とりあえず、デザイン力をつけたいんです。
そして、とりあえず、給料あげるために色々やってみます。
とりあえず、とりあえずを何回言ったでしょうか、って野暮な問題も出しておきましょう。
とりあえず、まどろっこしいわ。
#### 著者
著者名: みやびプリン
職業: フロントエンドエンジニア
プロフィール: 基本はイラストレイター（自称）だが、
本職は札幌市のフロントエンドエンジニア。
フロントエンドだけではなく、各種プログラミング言語に精通していると自負している。
HTML、CSSはもちろんのこと、JavaScript、TypeScript、PHP、Perl、Python、C#、Kotlin、Swift、Objective-Cなど多くの多くの言語に精通している他、
Movable Type、WordPressなど各種CMS、React.js、Angularなどフロントエンドフレームワークも扱える。
最近はUnityによる3Dコンテンツにも手を出している。
---
### HTMLを雑誌っぽく見せるヒント 01
URL: https://highmoon-miyabi.net/blog/2012/08/31_000327.html
公開日時: 2012-08-31T03:00:39+09:00
更新日時: 2019-03-12T15:49:23+09:00
カテゴリ: CSS
概要: うん。うだるな、この暑さは。 ほんと、北...
本文: うん。うだるな、この暑さは。
ほんと、北海道の残暑ではないぞ。
そんななか、こんな時間に起きて壮大に体力の無駄遣いしてますｗｗｗ
さて、今日は、タイトルの通り、HTMLで雑誌っぽくテキストを表示させるヒントといいましょうか、クールなテキストの表示のさせかたを一つ紹介。
もう一個くらいは次もやりたい。
というのも、みやびは、ずっと、WEBのテキストなんてちんけなことしかできないと思ってました。クールなことするには、FlashやJavascript使わないとできない、ってね。
だってーのに、前の会社の上司には、「お客様に、WEB画面になるとがっかりされるんだよ！」って言われて、カッチーンってきて、思いっきりしっかりデザインしたら、コーディング大変だったけど、けっこうクールなページができて、けっこう喜ばれたんだ。
何が言いたいかってーと、人間本気になれば、どんなんだってできるってことだ。
前置き長すぎｗｗｗ
さて本題に入ろう。
今回は頭だしだ。
デザインにこだわるクライアントによく言われることナンバーワンといえば......。
リストの先頭行以下を字下げしてほしいというもの。
以下のソースとリストを見てほしい。
.bottom-margin li { margin-bottom: 10px;}
●HTMLソース
```html
<li>※みやびプリンの正しい食べ方に関しては、カップ下部の注意書きをご覧下さい。（本当の事が書いてあるとはかぎりません。）</li>
<li>※ペットにみやびプリンを与えないで下さい。爆○する恐れがあります。</li>
<li>※食べることによって、万が一健康を害するようなことがあっても、当社は一切責任を負いかねます。予めご了承下さい。</li>
</ul>
```
●実際の表示
※みやびプリンの正しい食べ方に関しては、カップ下部の注意書きをご覧下さい。（本当の事が書いてあるとはかぎりません。）
※ペットにみやびプリンを与えないで下さい。爆○する恐れがあります。
※食べることによって、万が一健康を害するようなことがあっても、当社は一切責任を負いかねます。予めご了承下さい。
雑誌では、こんなの一発で字下げできる。
AIとPSならば、テキストボックスの設定で、文章の全体を字下げし、テキストの先頭行のみ頭出しができる。
（やり方詳しくはご自分でググって下さい・・・。）
しかし、WEBのテキストでは中々できることではなく、やり方も思いつかないもんだ・・・。
だってーのに、雑誌感覚でWEBを見る人ってのはまぁ、無茶な要求をしてくるわけで、平気で字下げしてといってくるもんだ。
そして、なんでできないかを説明しても理解してくれないもんなんだ。
こうなりゃ、tableで、※と文章分けるか・・・？
いや、それでは、文章構造的にクールじゃない・・・・。
（現に、みやびは過去にこういった注文を受けた時、tableタグを使ったことがある）
・・・・・・・・・・・・・・と、泣き寝入りするのは早い。
字下げくらい、CSS一本でできる。
●HTMLソース
```html
<li>※みやびプリンの正しい食べ方に関しては、カップ下部の注意書きをご覧下さい。（本当の事が書いてあるとはかぎりません。）</li>
<li>※ペットにみやびプリンを与えないで下さい。爆○する恐れがあります。</li>
<li>※食べることによって、万が一健康を害するようなことがあっても、当社は一切責任を負いかねます。予めご了承下さい。</li>
</ul>
```
●CSSソース
```css
.sagesage li {
text-indent: -1em;
margin-bottom: 10px;
padding-left: 1em;
}
```
.sagesage li {
text-indent: -1em;
margin-bottom: 10px;
padding-left: 1em;
}
●実際の表示
※みやびプリンの正しい食べ方に関しては、カップ下部の注意書きをご覧下さい。（本当の事が書いてあるとはかぎりません。）
※ペットにみやびプリンを与えないで下さい。爆○する恐れがあります。
※食べることによって、万が一健康を害するようなことがあっても、当社は一切責任を負いかねます。予めご了承下さい。
あぁ、なんて地味な小技だろう！
しかし、見た目とソース的にはなんとクールか！
そう、これを考えるならば、WEBのテキストにも無限の可能性があり、雑誌風にいくらでもできるかも、なんと思えてくるだろう。
そう、探せば、知恵を絞ればいくらだって、クールな表示ができるもんだ。
長くなってしまったが（前置きが）とかく、いろいろやりようがあるんです。
今はCSS3も出てきてるし、かなり可能性が広がっています。
泣き寝入りせず、いろいろ探してみよう。
次回は、画像と文章の絡ませ方をやろうと思う。
次回はかなり雑誌ぽいことやります。乞うご期待？？
#### 著者
著者名: みやびプリン
職業: フロントエンドエンジニア
プロフィール: 基本はイラストレイター（自称）だが、
本職は札幌市のフロントエンドエンジニア。
フロントエンドだけではなく、各種プログラミング言語に精通していると自負している。
HTML、CSSはもちろんのこと、JavaScript、TypeScript、PHP、Perl、Python、C#、Kotlin、Swift、Objective-Cなど多くの多くの言語に精通している他、
Movable Type、WordPressなど各種CMS、React.js、Angularなどフロントエンドフレームワークも扱える。
最近はUnityによる3Dコンテンツにも手を出している。
---
### いちょうほのお
URL: https://highmoon-miyabi.net/blog/2012/08/21_000326.html
公開日時: 2012-08-21T14:43:39+09:00
更新日時: 2013-07-11T03:16:31+09:00
カテゴリ: 雑記
概要: と、書いて胃腸炎と読むんだ。 そう、胃腸...
本文: と、書いて胃腸炎と読むんだ。
そう、胃腸炎になりました。
今まで、吐き気が止まらなくなったりとか、腹激痛にはなったことがあるが、本格的にやばくなったのは初めてです。
日曜に、二回くらい吐いたｗ
そして、二回くらい救急車に呼ばれました。
久々に地獄を見た気がする。
今まだ、胃が張ってる感じがあり、あまり固いものは食べれなさそうです。
何が原因かってっと、お医者さんもはっきりしたことは言ってくれませんでしたが、その前の生活習慣が原因なのは、言うまでもない事実。
そういや、金無いからって、昼はずっとカップラーメンだった。
多分あれで、胃の消化力が少なくなってたのでしょう。
まして、徹夜続きだったてのもあり、いろいろ重なったからでしょう。
とかく、体は大事にせねば・・・！
僕が言えたことじゃないけど、会社の業務がとても心配です。
人手が足りない家の会社で、一人動けないってのは、かなりやばいと思う。
明日から絶対復帰したい、ということで、今日はゆっくり休みます！
ゲームとかしないで・・・。
というか、こういう時に限って、ジャーキーとか、アイスとか、消化に悪いもん食べたくなるんだろねｗ
#### 著者
著者名: みやびプリン
職業: フロントエンドエンジニア
プロフィール: 基本はイラストレイター（自称）だが、
本職は札幌市のフロントエンドエンジニア。
フロントエンドだけではなく、各種プログラミング言語に精通していると自負している。
HTML、CSSはもちろんのこと、JavaScript、TypeScript、PHP、Perl、Python、C#、Kotlin、Swift、Objective-Cなど多くの多くの言語に精通している他、
Movable Type、WordPressなど各種CMS、React.js、Angularなどフロントエンドフレームワークも扱える。
最近はUnityによる3Dコンテンツにも手を出している。
---
### table、行に一気にスタイルをきかせる方法
URL: https://highmoon-miyabi.net/blog/2012/08/03_000325.html
公開日時: 2012-08-03T20:58:41+09:00
更新日時: 2015-09-03T02:47:08+09:00
カテゴリ: CSS
概要: 暑くなってきましたね。 どうも、一ヶ月間...
本文: 暑くなってきましたね。
どうも、一ヶ月間でアイスに一万かけるみやびです。
ハライタイゼ
さて、今日は、廃れてると思ってはいけない、テーブルのテクニックを一つ。
テーブルでレイアウトする場面はもうないといいつつも、テーブルタグを使う機会は何かと多いものです。
例えば、会社概要とかね。
.ex-table { margin: 15px 0;}
.ex-table th,.ex-table td {
vertical-align: top;
border-bottom: #999999 1px dotted;
padding: 5px 10px;
}
.ex-table th {
text-align: right;
font-weight: normal;
border-right: #999999 1px dotted;
}
社名
みやびプリンと仲間達
住所
みやびの国
代表取締役
みやびプリン
設立
ん億年前
事業内容
みやびプリンの製造及び販売
みやびを護るの会の運営
なんつう会社概要だ。
さて、このテーブルで楽だったらいいのにな、と思うのは、セルに一気にスタイルをきかせたいだろう。
例えば以下の表組みとか。
項目名
内容
社名
みやびプリンと仲間達
住所
みやびの国
代表取締役
みやびプリン
設立
ん億年前
事業内容
みやびプリンの製造及び販売
みやびを護るの会の運営
上の、"項目名"と"内容"が入ってるセルには背景色を入れたいとかね。
しかし、それぞれのth要素とtd要素一個一個にclassを指定するのは非常にめんどうだし、時間がかかること・・・・。
そんな時は、TR要素自体にスタイルをきかせればいいじゃんと思う人がいるだろう。
かくゆう私も最初やってみたんだ。
しかし、"IEだとTR要素にはスタイルがきかない！"のである。
残念・・・・・・
と思うなかれ！
そのTR要素にスタイルをきかせるという考え方がヒントで以下の方法あるのだ。
.ex-table02 { margin: 15px 0;}
.ex-table02 th,.ex-table02 td {
vertical-align: top;
border-bottom: #999999 1px dotted;
padding: 5px 10px;
}
.ex-table02 th {
text-align: left;
font-weight: normal;
border-right: #999999 1px dotted;
}
.ex-table02 tr.cell-head th {
background-color: #000066;
color: #FFFFFF;
}
●HTMLソース
```html
<tr class="cell-head">
<th scope="col">項目名</th>
<th scope="col">内容</th>
</tr>
<tr>
<th width="100" scope="row">社名</th>
<td>みやびプリンと仲間達</td>
</tr>
<tr>
<th scope="row">住所</th>
<td>みやびの国</td>
</tr>
<tr>
<th scope="row">代表取締役</th>
<td>みやびプリン</td>
</tr>
<tr>
<th scope="row">設立</th>
<td>ん億年前</td>
</tr>
<tr>
<th scope="row">事業内容</th>
<td>みやびプリンの製造及び販売<br>
みやびを護るの会の運営</td>
</tr>
</table>
```
●CSSソース
```css
.ex-table02 tr.cell-head th {
background-color: #000066;
color: #FFFFFF;
}
```
↓実際の表示↓
項目名
内容
社名
みやびプリンと仲間達
住所
みやびの国
代表取締役
みやびプリン
設立
ん億年前
事業内容
みやびプリンの製造及び販売
みやびを護るの会の運営
こうしておけば、classに"cell-head"が指定されたTR要素の中に入っているTH要素にスタイルを適用させることができる。もちろん、セレクタを追加すれば、TDだってオーケーさ。
これで、テーブルタグのめんどくささも軽減される（ハズ）
ほらほらそこのあなたも試してみんしゃいよ。
#### 著者
著者名: みやびプリン
職業: フロントエンドエンジニア
プロフィール: 基本はイラストレイター（自称）だが、
本職は札幌市のフロントエンドエンジニア。
フロントエンドだけではなく、各種プログラミング言語に精通していると自負している。
HTML、CSSはもちろんのこと、JavaScript、TypeScript、PHP、Perl、Python、C#、Kotlin、Swift、Objective-Cなど多くの多くの言語に精通している他、
Movable Type、WordPressなど各種CMS、React.js、Angularなどフロントエンドフレームワークも扱える。
最近はUnityによる3Dコンテンツにも手を出している。
---
### 必殺、display: inline-block;
URL: https://highmoon-miyabi.net/blog/2012/07/31_000323.html
公開日時: 2012-07-31T02:01:30+09:00
更新日時: 2015-09-03T02:49:08+09:00
カテゴリ: CSS
概要: どうも、遅くにみやびです。 プリンに醤油...
本文: どうも、遅くにみやびです。
プリンに醤油をかけるとウニの味がしますが、みやびプリンはキノコの味がします。
まずそ。
さて、今日は、インラインレベルをブロックみたく扱いたい時の話をしよう。
けっこう、コーディングをする時に、Pタグの中にさらにブロック的な扱いをしたいテキストがあったりすもんだ。
だいたいの人が思いつくやりかたといえばこれだ。
.blockspan {
background: #CC0000;
color: #FFFFFF;
display: block;
padding: 5px;
}
.blockspan-in {
background: #CC0000;
color: #FFFFFF;
display: inline-block;
padding: 5px;
}
●HTMLソース
ここがブロックみたくなるじょそれ以外はインライン
●CSSソース
```css
.blockspan {
background: #CC0000;
color: #FFFFFF;
display: block;
padding: 5px;
}
```
↓実際の表示↓
ここがブロックみたくなるじょそれ以外はインライン
spanにdisplay: blockをきかせておけば、spanにパディングだろうが、背景画像だろうが、自由にブロックみたく扱うことができる。
しかし、display: blockだとちょっと不便なことがある。
それは、他のブロック要素と一緒で、強制改行されてしまうってこと。
そうさせないやり方は確かにいろいろある。
float: leftとかきかせるやりかた。
ただ、これだと、親ブロックにcleafixをきかせなきゃいけなかったりと、少々めんどうである。
そこで、便利なのが、display: inline-blockである！
●HTMLソース
```html
ここが半ブロックみたくなるじょ！</span>それ以外はインライン
```
●CSSソース
```css
.blockspan-in {
background: #CC0000;
color: #FFFFFF;
display: inline-block;
padding: 5px;
}
```
↓実際の表示↓
ここが半ブロックみたくなるじょ！それ以外はインライン
これは、なんと便利か！
ブロックと一緒で、あらゆるプロパティを使える上、並び的には、インラインと同じ動きをしてくれるのだ！
まぁ、一塊って扱いなので、きかせている部分が長かったりすると改行されてしまう。
だが、それを含め扱いやすい（というより、その一塊として改行されることが嬉しい）。
さらに嬉しいのは、IE6さんでもちゃんときいてくれるっていう代物！！！！
さぁ、あなたも明日からこの便利なプロパティを使ってみましょう。
CSSは、独学より本読んだほうがいいかもね・・・・。
#### 著者
著者名: みやびプリン
職業: フロントエンドエンジニア
プロフィール: 基本はイラストレイター（自称）だが、
本職は札幌市のフロントエンドエンジニア。
フロントエンドだけではなく、各種プログラミング言語に精通していると自負している。
HTML、CSSはもちろんのこと、JavaScript、TypeScript、PHP、Perl、Python、C#、Kotlin、Swift、Objective-Cなど多くの多くの言語に精通している他、
Movable Type、WordPressなど各種CMS、React.js、Angularなどフロントエンドフレームワークも扱える。
最近はUnityによる3Dコンテンツにも手を出している。
---
### モダンブラウザでCSSが効かない？
URL: https://highmoon-miyabi.net/blog/2012/07/05_000321.html
公開日時: 2012-07-05T20:01:30+09:00
更新日時: 2014-03-13T10:04:58+09:00
カテゴリ: CSS
概要: どうも、最近やっと社会人としての自覚が芽...
本文: どうも、最近やっと社会人としての自覚が芽生えてきたみやびです。
まぁいいやｗ
さて、今日も、少しでも迷えるWEBデザイナーを減らすべく、一言残しておこうと思う。
今日は、珍しくモダンブラウザ側の話である。
（モダンブラウザの対象としては、IE9、Google Chrome、Fire Fox、Safariとする）
ある案件のショップカートシステムを編集している時だった。
ローカルで先方に画面を見せるため、カートの管理画面から編集するCSSをそのままコピーペストしてCSSとして保存し、ブラウザチェックをしたところ、
・・・・・モダンブラウザでCSSがきかない。
これは私にとってはけっこう珍しい現象だったのだが、みなさんにとってはいかがだろうか。
たいていここで出てくるのは、IE6でCSSがきかない！だが、この時は違った。
原因として最初に思いたったのは、@charsetを設定していないことであった。
じつは、CSSにも文字コードの指定は大事で、できるなら、HTMLのコードに合わせるのがいいらしいが、別にHTMLのコードと一緒でなくても動く。
とかく、こいつがないと、CSS内の日本語が文字化けしてうまく動かなかったりする。
（だいたい、ショップカートの管理画面から操作するCSSになんか、@charsetなんてつけるわけもなく、これがひっかかっていた。）
ひとまず、CSSの先頭行に、
@charset "UTF-8";を記述した。
Fire Fox、Chrome、IE9OK、IE8もOK
・・・・今度はIEの7、6にきかない・・・。
ど、どどどうしろと？
charset、入れないとモダンブラウザだめ、いれなかったら、今度はIE6、7は大丈夫だがモダンブラウザはきかない・・・。
もう、お手上げである。スターハック使って、charsetを操作しようと思ったが、そんな珍技、できるわけもなく。
ちなみに、@charsetに別のコード、EUCやらShift-JISなりいれたが、いずれもダメ。
調べてみると、IE6は、UTF-8のCSSに対応していないとか・・・。
そんなこんなで、30分ほど、心で叫びながら方法を探していたら、ふと思い立った。
そうだ、文字自体のコードと、@charsetで指定した文字コードが違うからうまくいかないのでは・・・？
そう、根本的な問題だ。
さっそく、元のCSSに追加した分のCSSを、テキストエディタにコピペ、文字コードを指定して保存した。
（この時は、ショップカートシステムが、EUCを使っていたので、吐き出しているCSSもEUCだと見込んで、テキストエディタからの保存もEUCにした）
そのテキストを開き直し、元のCSSにコピペ・・・・。
・・・・・CSSきいた！！
IE6と7もきいた！！
そう、そもそもなんのために文字コードを指定するのか。
そのファイル内の文字コードを統一するためである。
しかし、そのテキスト文字自体のコードが違えばそりゃバッティングする。
つまりは、今回は、よく見てなかったこっちが悪かったってこった（泣）
CSSきかない時は、この記事のことを試すと、解決すると思うよ。
うーん、気を付けよう・・・。
#### 著者
著者名: みやびプリン
職業: フロントエンドエンジニア
プロフィール: 基本はイラストレイター（自称）だが、
本職は札幌市のフロントエンドエンジニア。
フロントエンドだけではなく、各種プログラミング言語に精通していると自負している。
HTML、CSSはもちろんのこと、JavaScript、TypeScript、PHP、Perl、Python、C#、Kotlin、Swift、Objective-Cなど多くの多くの言語に精通している他、
Movable Type、WordPressなど各種CMS、React.js、Angularなどフロントエンドフレームワークも扱える。
最近はUnityによる3Dコンテンツにも手を出している。
---
### colorboxとsmoothScroll
URL: https://highmoon-miyabi.net/blog/2012/06/28_000320.html
公開日時: 2012-06-28T05:16:56+09:00
更新日時: 2015-09-02T20:10:45+09:00
カテゴリ: jQuery
概要: 非常にクールなjQueryプラグインがあ...
本文: 非常にクールなjQueryプラグインがある。
ページ内リンクが、アニメーションでスイーっと動くようになるプラグインだ。
もちろん、有名どころで使ってるサイトも多いでしょう。
ページ内リンクをスマートにするsmoothScroll.js
http://blog.webcreativepark.net/2007/07/12-143406.html
だが、これとcolorboxとの整合性をとるのにえらく時間がかかった・・・。
colorbox
http://www.jacklmoore.com/colorbox/
このcolorboxも、超有名プラグインで、
LightBox調に画像を表示するプラグインなんだけど、
なんと、画像だけでなく、内部HTML、外部HTML、はたまたYouTubeからFlashから、なんでも表示できるというありえないくらい豪華なプラグインなのだ。
これを導入し、内部HTMLを表示しようとしたが・・・できない・・・。
元のソースと何度見比べても、全然わからない。
元のソースを、サーバーに上げてみたが、そっちはちゃんと表示される。
どうしてどうして？なんてやってる間に昨日は仕事遅刻しかけ、
本日は朝方まで奮闘してたわけです。
なんとか原因はつかめた。
どうやら、このsmoothScrollは、"#"がhref属性に入っている"a"タグに反応し、何かをしていることを突き止め、（colorboxはこのハッシュによって、内部HTMLを表示する。例えば、 のように）対処しようとしたが、うまくいかず・・・。
colorboxとsmoothScrollを同時に使うのはあきらめようと、思いかけていた最中、
上記smoothScrollのサイトをよく見てみると、以下の文章が書いているではないか。
■特定のリンクはスムーズさせない
smoothScroll.jsは#（ハッシュ）付きのリンクを全てスムーズスクリプトに変換します。他のライブラリなどで#付きのリンクを利用していて、そこに関してはスムーズスクリプトに変換したくない場合は次のように記述してください。
```html
スムーズなし
```
http://blog.webcreativepark.net/2007/07/12-143406.html
・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・。
アホか俺はーーーーーー！！！
早くこれ見とけよ！！！！！
この二日間はなんだったの！！？
というわけで速攻完成しました。
colorboxと、smothScrollでまさかこんなことになるとは思わなかった・・・。
#### 著者
著者名: みやびプリン
職業: フロントエンドエンジニア
プロフィール: 基本はイラストレイター（自称）だが、
本職は札幌市のフロントエンドエンジニア。
フロントエンドだけではなく、各種プログラミング言語に精通していると自負している。
HTML、CSSはもちろんのこと、JavaScript、TypeScript、PHP、Perl、Python、C#、Kotlin、Swift、Objective-Cなど多くの多くの言語に精通している他、
Movable Type、WordPressなど各種CMS、React.js、Angularなどフロントエンドフレームワークも扱える。
最近はUnityによる3Dコンテンツにも手を出している。
---
### 今日気付いたことと言えば
URL: https://highmoon-miyabi.net/blog/2012/06/27_000319.html
公開日時: 2012-06-27T00:24:52+09:00
更新日時: 2013-11-30T07:29:26+09:00
カテゴリ: 雑記
概要: 昨日は、仕事が失敗の連続でした。 久々に...
本文: 昨日は、仕事が失敗の連続でした。
久々にもうダメだ～！って思った。
上司にも怒られたし、仕事態度も注意されたりなど。
毎回、こうなるたんびに、自分は会社員やれないんだ！
と、心が逃げていました。
だけど、おかげで今日気付いたことがある。
緊張感持って仕事すれば充実する！
・・・え、あたりまえだって？
わかっているでしょう、僕はそんなあたりまえができない人間なんです。
だから、気付いたことがでかいのだよ。
とにかく、今日の緊張感は、今までの100倍くらいあった。
いろいろ理由はあれど。
昨日の出来事のおかげ。
そして・・・、どんだけ今まで緊張感なかったの自分！！？
いや、もう完全に独り言だからやめておきます。
明日から写真日記始めるぞ！！ｗｗｗ
#### 著者
著者名: みやびプリン
職業: フロントエンドエンジニア
プロフィール: 基本はイラストレイター（自称）だが、
本職は札幌市のフロントエンドエンジニア。
フロントエンドだけではなく、各種プログラミング言語に精通していると自負している。
HTML、CSSはもちろんのこと、JavaScript、TypeScript、PHP、Perl、Python、C#、Kotlin、Swift、Objective-Cなど多くの多くの言語に精通している他、
Movable Type、WordPressなど各種CMS、React.js、Angularなどフロントエンドフレームワークも扱える。
最近はUnityによる3Dコンテンツにも手を出している。
---
### IETesterの弱点
URL: https://highmoon-miyabi.net/blog/2012/06/24_000318.html
公開日時: 2012-06-24T18:37:37+09:00
更新日時: 2013-11-12T15:07:36+09:00
カテゴリ: IE
概要: どうもみやびです。 とても寒い日が続いて...
本文: どうもみやびです。
とても寒い日が続いていますが、今日は暖かいですね。
さて、今日も現場目線でのWEB制作を語っていきたいと思う。
今日はIETesterの事だ。
IETester
http://www.my-debugbar.com/wiki/IETester/HomePage
このアプリケーションは、IEというファックなブラウザに対応した、非常に便利なツールである。
WEBをやる人で、知らない人はいないでしょう。
IEの厄介な点というのは、IE6だけに留まらない。
IE6、7、8、全てのバージョンで表示が違う、という事態がおきることなのだ。
しかし、チェックをしようにも、IEは一つのOSに一つのバージョンしか入れることができない。
ゆえに、チェックには複数のコンピュータを必要とした・・・。
このIETesterが出るまでは！
このIETesterがあれば、IEの5.5～8までの表示のチェックが、これ一つでできちゃうっていう優れもの。
しかも、モダンブラウザ同様、タブ形式となっており、一つのウィンドウで、IEの全バージョンのチェック（IE9のチェックには、少し手間がかかる・・・。）ができるのである。
・・・・・・・・・というのが、巷での話。
この、IETesterにも実は、決定的な弱点がある。
それは、元から入っているIEのバージョンによって、表示が違うというものだ。
え、えぇ、なんだって！？
と思うだろうが、実際試してみるといい。
わずかに違うことが確認できる。
（証拠の画像は用意できてません、すみません・・・。）
特に顕著に現れるのが、IE6である。
OSに元から入っているIEが、バージョン8である場合、IETesterのIE6タブではfilterが使えないのだ。
これは、IE6対応をする時にはけっこう痛い話で、もの本のIE6で大丈夫だと思い、先方チェックに回すや否や、先方のIETesterのIE6のチェックで引っかかり、お互い、「なんでやねん」「なんでやねん」と繰り返すことになる。
僕が、あるサイト制作をしていた時、PNGを使いたくて、有名なJQueryプラグインである、DD_belatedPNGを導入しようとした。
万事OKと、IETesterのIE6で見てみると、PNGが透過されない・・・。
Javascriptのパスなどを見てみても、合っている・・・。
試しに、社内で唯一のXP＋IE6が入っているPCで見てみると・・・。
「透過されとるやん・・・」
となったわけだ。
どういうことなのか、詳しいメカニズムはわからないが、調べてわかったのは、入っている元のIEがバージョン8以上の時、filterがきかなくなるらしい・・・。
PNGをIE6でも透過させるプラグインは、内部的には、このfilterなどの、IE独自仕様のCSSを利用しているものがほとんどのため、元バージョンIE8のIETesterのIE6でのPNG透過は（もう、まどろっこしい・・・）ほぼ全滅というわけだ。
つまりは、Vistaと7においての、IETesterでのIE6の表示は、"ウソんこ"である可能性があるのである。
（Vistaと7には、IE6を入れることはできないからだ）
また、XPと、XP以降のOSではデフォルト、MSゴシック、明朝のフォントが少し違うため、フォントの仮想ボディも若干違う。（ようは文字間が違うってこと）
これは痛い・・・。
結局、IE6のチェックは、もの本で見るか、XPの生き残りで観るしかないのだ・・・。
とまぁ、長々書いたけど、結論は、IE6はどんなにやっても厄介だってことだ・・・。
IE6の対応には、別途でお金をとるべきである。
#### 著者
著者名: みやびプリン
職業: フロントエンドエンジニア
プロフィール: 基本はイラストレイター（自称）だが、
本職は札幌市のフロントエンドエンジニア。
フロントエンドだけではなく、各種プログラミング言語に精通していると自負している。
HTML、CSSはもちろんのこと、JavaScript、TypeScript、PHP、Perl、Python、C#、Kotlin、Swift、Objective-Cなど多くの多くの言語に精通している他、
Movable Type、WordPressなど各種CMS、React.js、Angularなどフロントエンドフレームワークも扱える。
最近はUnityによる3Dコンテンツにも手を出している。
---
### IE6の背景フルスクリーン
URL: https://highmoon-miyabi.net/blog/2012/06/20_000316.html
公開日時: 2012-06-20T21:07:52+09:00
更新日時: 2015-09-02T20:08:50+09:00
カテゴリ: IE
概要: 本当にIE6ほど厄介なブラウザはない。 ...
本文: 本当にIE6ほど厄介なブラウザはない。
だいたい、もうIE6を使ってる人は約1％ほどしかいない（らしい）ってのに、なんでそれに対応せなあかんねん。制作時間二倍はかかるんだよ！？
・・・さて本題に入ろう。
HTMLのコーディングの際、背景を画面いっぱいに表示してほしい、というのはよくある依頼である。
今であれば、JQueryを使ったプラグインがフリーで多数落ちているので、さほど苦労しなくても実装できる。
bgStretcher
http://www.ajaxblender.com/bgstretcher-2-jquery-stretch-background-plugin-updated.html
BACKSTRETCH
http://srobbin.com/jquery-plugins/backstretch/
maxImage Scaling Plugin
http://www.aaronvanderzwan.com/maximage/
参考記事：http://blog.daichifive.com/archives/748
Anystretch
https://github.com/danmillar/jquery-anystretch
参考記事：http://coliss.com/articles/build-websites/operation/javascript/jquery-plugin-jquery-anystretch.html
僕は今回の案件ではAnystretchってやつを使いました。DIVにも使えるから具合がいい。
また、モダンブラウザであれば、CSS3を使ってフルスクリーン背景を実装できる。
（ごめんなさい、いい記事見つからなかった・・・）
・・・しかし、実は上記のいずれのプラグインでも方法でも、IE6ではフルスクリーンは実装できない。
プラグインに関しては、一応は、IE6対応とうたっているプラグインも、実際に使ってみると、背景が途中で切れたりなど、そもそも動かなかったりなど、正直厳しい・・・。
それでは、IE6ではフルスクリーン背景はできないのか・・・？
Flashを使うしかないのか・・・？
そんな事はない！
まだ無理矢理やる方法がある！
そう、言わずと知れた、IEの独自仕様である、filterを使う方法である！
CSS3のみでフルスクリーンの背景画像を実装する方法まとめ3つ
あ、三つあるの・・・？
おほん、
僕も、今回の案件には、このfilterを使う方法を使わせていただきました。
```css
html {
...
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='画像のパス', sizingMethod='scale');
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='画像のパス', sizingMethod='scale')";
}
```
スターハックなどを使ってIE6のみ、このfilterを使って背景をフルスクリーンで表示できる。
ただし、ブラウザのサイズを変えると、縦横比が変わってしまう・・・。（泣）
だが、そこは、表示できるんだからマシだと、目をつぶっておこう（自分に言い聞かせ）
なんにせよ、ここまでくるのに、実に5、6時間かかった・・・。
（主にJavascriptきかねぇ～って叫んでた）
これを見たWEBデザイナーが、1時間以内でできちゃったりしたら、幸いなことこの上ない。
最後に、このfilterを使う時の注意点だが、画像のパスは、CSSを読み込んでいる"HTML"からのパスとなるので注意していただきたい。
これは、Javascriptからファイルを読む時や、PIEなどのetcファイルをCSSに読み込む時と同様である。
解決して嬉しかったからつい長くなっちまったｗ
#### 著者
著者名: みやびプリン
職業: フロントエンドエンジニア
プロフィール: 基本はイラストレイター（自称）だが、
本職は札幌市のフロントエンドエンジニア。
フロントエンドだけではなく、各種プログラミング言語に精通していると自負している。
HTML、CSSはもちろんのこと、JavaScript、TypeScript、PHP、Perl、Python、C#、Kotlin、Swift、Objective-Cなど多くの多くの言語に精通している他、
Movable Type、WordPressなど各種CMS、React.js、Angularなどフロントエンドフレームワークも扱える。
最近はUnityによる3Dコンテンツにも手を出している。
---
### MT的公開
URL: https://highmoon-miyabi.net/blog/2012/06/20_000315.html
公開日時: 2012-06-20T03:12:08+09:00
更新日時: 2013-11-12T15:03:57+09:00
カテゴリ: 雑記
概要: やっとこさ、MTで公開！！ 長かった・・...
本文: やっとこさ、MTで公開！！
長かった・・・・。
何度仕事寝坊しかけたことか（ヲイ）
ひとまず、これで、作品も、ブログも俄然公開しやすくなりました！
構築の苦労は大きいが、その分効果はでかい！
ちなみに、僕はWordPressよりMovableTypeの方が好きなんです。
ページが実際に生成されるのがなんかいい。
その分めんどいがｗ
（まぁ、本当の理由は、前の会社でしこたまやったから愛着があるからっていう）
まぁ、とにかく、新生月の高いところ第二段です！
乞うご期待？
#### 著者
著者名: みやびプリン
職業: フロントエンドエンジニア
プロフィール: 基本はイラストレイター（自称）だが、
本職は札幌市のフロントエンドエンジニア。
フロントエンドだけではなく、各種プログラミング言語に精通していると自負している。
HTML、CSSはもちろんのこと、JavaScript、TypeScript、PHP、Perl、Python、C#、Kotlin、Swift、Objective-Cなど多くの多くの言語に精通している他、
Movable Type、WordPressなど各種CMS、React.js、Angularなどフロントエンドフレームワークも扱える。
最近はUnityによる3Dコンテンツにも手を出している。