.htaccessにたった2行付け加えるだけで、PHPにディレクトリ形式でパラメータ渡しができるようになります。 RewriteEngine on　について 404エラーは「実在しないフォルダ名」を記述すると発生します。 これをOKにするための宣言になります。 .htaccessで記述するための文法と考えてOKです。 RewriteRule ^(.*)$ index.php [L]について 架空のフォルダ名をエラーにならないようにしているのがこの部分です。 見た感じ何が何だかさっぱりですが、次のような処理がされます。 「入力された記述をすべてindex.phpとして表記します。」 ^(.*)$は、入力されたURL全ての文字を意味します。 これをindex.phpに書き換えます。という意味です。 存在しないディレクトリ名でも.htaccessによって書き換えされるため、404エラーにならなく

iframe内への記述になります。 iframe内から親ウィンドウの要素にアクセスできるか実験のためのボタンを設置 Box1の背景色を変える iframe内にjavascriptを記述して、そこから親ウィンドウの要素を取得できるかどうかのコード。 今回は、直接htmlファイルに記述しましたが外部ファイル化してもいいです。 window.addEventListener("load",function(){ //iframe内のボタン var btn1=document.getElementById("btn"); //親ウィンドウにあるボタン! var btn2=window.parent.document.getElementById("btn2"); //親ウィンドウにあるbox1の要素 var box1=window.parent.document.getElementById("b

あまり使う場面はないと思うのですが、触る機会があったので豆知識的な感じで残しておきたいと思います。通常、iframeは外部のリソースを読み込むため、直接iframeのDOM要素にアクセスできません。そこでjavascriptを使ってifr…

フォームの中に無効な値が入力されている場合にスタイルを変更する方法について解説します。 この記事のポイント フォームの入力に問題があるときにCSSで分かりやすくする 入力が正常／エラーの状態によってCSSを切り替える 入力にエラーがあるときはすぐ分かるようにする フォームの入力フィールドは入力された値が正しい形式でない場合に、CSSで用意されている擬似クラスを使って特定のスタイルを適用することができます。 入力エラーがある項目だけにCSSを適用 コード例 /* 入力エラーのスタイル */ input[type=text]:required, input[type=email]:required, input[type=email]:invalid, textarea:required { color: #630015; border-color: #c20c33; background-c

ですが、PHPでは直接このように受け取る方法はありません。 strstrで指定文字以降の文字列を取得 strstrを使うと、指定文字列以降の文字を取得することが出来るので、これを利用してPHPでパラメータの『?』以降を取得したいと思います。 $param = strstr($_SERVER["REQUEST_URI"], '?');

Web Speech APIの実装 前編 Speech Synthesis API 指定テキストを音声再生させることができる、Speech Synthesis APIについて紹介します。音声ファイルなどを用意せずとも手軽に扱えるメリットを活かした利用が考えられます。 はじめに Web Speech APIは、W3C Community Final Specification Agreement（FSA）の元、Speech APIコミニュティグループにより公開されている仕様で、Speech Synthesis API（音声合成）とSpeech Recognition API（音声認識）の2つのAPI仕様から構成されています。これらの仕様はW3Cの正式なワーキンググループの作業として策定されてるわけでなく、コミュニティグループによるレポートという位置付けです。 今回は、音声ファイルを用意せずと

はじめに JavaScriptの配列内に、どんな要素が何個あるのか、重複している値の個数をカウント。 その結果をオブジェクト（連想配列）に格納します。 for・forEach・reduceの三種類の方法で書いてみます。 処理パターン for でカウント var arr = [0, 1, 1, 1, 1, 3, 3, 5, 0, 7]; var count = {}; for (var i = 0; i < arr.length; i++) { var elm = arr[i]; count[elm] = (count[elm] || 0) + 1; } console.log(count); // 出力結果 // {0: 2, 1: 4, 3: 2, 5: 1, 7: 1} // 0 -> 2個 // 1 -> 4個 // 3 -> 2個 // 5 -> 1個 // 7 -> 1個 カウン

パーティクルやラインアニメーションなど、ウェブページにちょっと見栄えのする表現を加えてみたくなることはありませんか？　ICS MEDIAのトップページや弊社採用サイトでもこうした表現を実装していますが、思った通りの演出をコードで表現するのはなかなか難しいものです。技術は分かっても「自分にはセンスがないから……」と諦めてしまっている人もいるかもしれません。 この記事では、簡単なパーティクル表現を題材に、効果的なアニメーション表現のためのテクニックを紹介します。サンプルコードはブラウザー標準のWeb Animations APIを使用して実装していますが、CSSアニメーションやGSAP等のライブラリを用いても同様の実装は可能です。 基本のパーティクル 例題とする基本のパーティクルを見てみましょう。クリックすると中央の星からパーティクルが放射状に広がるアニメーションが再生されます。 デモを別画面

画像出典: https://www.ipa.go.jp/files/000017316.pdf こんにちは。株式会社Flatt Security セキュリティエンジニアの奥山です。 本稿では、独立行政法人 情報処理推進機構(以下、IPA)が公開している資料「安全なウェブサイトの作り方」を紹介します。 「安全なウェブサイトの作り方」は、無料で公開されているにも関わらず、Webセキュリティを学ぶ上で非常に有用な資料です。これからWeb開発やセキュリティを勉強したいと考えている方はもちろん、まだ読んだことのない開発者の方々にも、ぜひ一度目を通していただけたらと思います。 一方、「安全なウェブサイトの作り方」では、一部にモダンなアプリケーションには最適化されていない情報や対象としていない範囲が存在します。それらについても本記事で一部、触れていきたいと考えていますので、資料を読む際の参考にしていただ

なんとなくGitHubにアクセスしたところ、HTTPレスポンスヘッダに謎の文字列が含まれていることに気が付きました。 permissions-policy: interest-cohort=() はい、これはFLoCを拒否するという主張です。 FLoCのRFCがGitHub上に存在するという現実がとても味わい深いものがありますね。 Permissions-Policy: interest-cohort=() Header added to all pages sites 非常に簡単にですが、GitHubブログで触れられていました。 github.io以下の全てのページに、Permissions-Policy: interest-cohort=()のHTTPレスポンスヘッダが出力されるようになりました。 カスタムドメインを使っているサイトは、この影響を受けません。 GitHubはMicros

CSS の小ネタです。 CSS で class 属性での指定が無い要素にのみスタイルを付ける方法についてです。 この方法はハックでも何でも無いのですが、個人的には目からウロコでした。 これを使うと、規模が大きめのサイトの CSS で起こりがちな「スタイルリセット地獄」を回避でき、 CSS のメンテナンス性を高めることができます。 やり方 CSS でクラス指定の無い要素にのみスタイルを適用したい場合は、セレクタに :not([class]) を使えば OK です。 メリット この方法のメリットを、サンプルを使いながら説明してみます（ CSS だと冗長なので、コードには SCSS を使用します）。 例として、リスト要素に次のようなスタイルを適用したい場合を考えましょう。 デフォルトのスタイル: 先頭のマークが赤色のドット。左マージンは小さめ。 item-list というクラスの付いたスタイル:

こんな感じで外部JSを読み込んで使うことは多いと思います。 この時に、このhogehoge.jsに引数として値を渡したいのですが、いくつか代表的なやり方がありますので、紹介しておきます。

嵌ったのでメモ。 例えば下記のような関数が定義されていたとする。 var noname = function(arg1, arg2, arg3){ console.log(arg1); console.log(arg2); console.log(arg3); } まずsetTimeoutで単純に関数を呼びたいだけの場合。 第1引数に関数名を指定する際、クオーテーションで括る方法と括らない方法があるので注意。 // 括る場合 setTimeout('noname()', 1000); // 括らない場合 setTimeout(noname, 1000); 第1引数をクオーテーションで括った場合、関数名の後に括弧「()」が無いと正常に動作しない。 逆に括らなかった場合は括弧をつけてしまうと意図しない動作になる。 下記に示す記述方法はいずれも正常に動作しない例。 // 第2引数のms指定は無視

2022年3月2日に確認した VALUE-DOMAIN でのサブドメインハイジャックが可能な脆弱性について経緯を説明します。 ついでに2016年の記事「VALUE-DOMAIN に存在していたアカウント乗っ取り可能な CSRF 脆弱性について」の続報も含めて、この記事で2022年現在の VALUE-DOMAIN の状況についてお伝えします。 脆弱性を2つ発見しました 第一：子ゾーン作成によるサブドメインハイジャック 第一の脆弱性の攻撃の原理 VALUE-DOMAIN のネームサーバについて 第一の脆弱性 発見後の経緯 サブドメインハイジャック攻撃を受けた場合の影響 第二：CSRF 攻撃によるドメインハイジャック ドメインハイジャック攻撃を受けた場合の影響 CSRF 攻撃によるドメインハイジャックの対策状況 VALUE-DOMAIN ユーザの方へ 脆弱性を2つ発見しました （第一）子ゾーン作

はてなブックマークでコメントされた内容を、プラグイン使わずにテーマファイル直接記述で表示させる方法をご紹介します。 何かいろいろ書いてますが、はてな公式で紹介してるブログパーツをWordPressで動作するように成形してるだけで特別なことは何もしません。 プラグインを使わず はてなブックマークウィジェットを呼び出す はてな公式ブックマークウィジェットをWordPress用に直す はてな公式サイトで、代表的なブログ向けのソースを配布しているので、細かな呼び出し部分をWordPressのテンプレートタグに書き換えます。出来あがったらヘッダ(header.php)等に書き込みましょう。 【HTML】 <!-- Hatena bookmark comment --> <script type="text/javascript" charset="utf-8" src="http://b.haten

本ドキュメントに関する注意事項​ 本ドキュメントははてなブックマークが提供するコメント表示用ブログパーツの実装を解説するものです。 コメント表示ブログパーツとは​ ご利用のブログサービスに、はてなブックマークでのコメントを表示するブログパーツです。 正しく設置されるとブログのコメント欄のように、はてなブックマークでのコメントが表示されます。 簡単な設置方法​ http://b.hatena.ne.jp/guide/blogparts.select?type=blogparts から、ブログサービスを選択すると下記のようなブログサービスごとに正しく設定されたJavaScriptが表示されます。 各サービスのブログパーツ設置方法に従って JavaScript をブログに設置してください。 ライブドアブログでの例​ <script type="text/javascript" charset="

概要 このグラデーションは、#ff0000 → #00ff00のグラデーションになります。 みなさんは、このクラデーションを見てどう思いますか？ 真ん中あたりの色が茶色っぽくなって あまり綺麗なグラデーションとは感じないですよね? この記事では、これが発生する原因と綺麗なグラデーションの作り方を 解説していきます。 この記事を読んで理解すれば、綺麗なグラデーションが簡単に作れるようになるでしょう。 原因 1. RGBについて理解する RGBは、赤（Red）、緑（Green）、青（Blue）の3つの色を それぞれ、0~255の値を指定することで、色が作られます。 例えば、 R: 255, G: 0, B: 0 → 赤 R: 255, G: 255, B: 0 → 黄色 このように色が指定されます。 では、RGB全てが同じ値の時はどんな色になるでしょうか？ 答えは、↑このようにグレースケールカ

JavaScriptでIdentifier '<変数名>' has already been declared が発生するJavaScript 現象 シンプルなHTML+JavaScriptの構成にて以下のエラーが発生。 Uncaught SyntaxError: Identifier '<変数名>' has already been declared エラー内容的には、「変数がすでに宣言されているよ！」らしいが、2重で宣言してしまっているような個所は見当たらない。 しかもこのエラーは常に先頭行にある変数に対してのみ発生していて、 先頭行の変数を削除すると、その次にある変数で同じエラーが発生する。 原因 HTMLでJavaScriptファイルを2回読み込んでしまっていた。 <!-- 省略 --> </div> </div> <script src="script.js"></script>