Googleマップのiframe埋め込みをAMP化する方法
GoogleマップのiframeのAMP化 Googleマップで「地図を共有また埋め込む」メニューを選択すると 以下のようなiframe埋込タグが表示されます。 ここで取得したタグ自体はこんな感じです。 <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3241.7144503548398!2d139.69826945132047!3d35.659406330102236!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x60188b57f03a6d3f%3A0x1d01d35eef4bf7a!2z44OP44OB5YWs5YmN5bqD5aC0!5e0!3m2!1sja!2sjp!4v1478138974491" width="600" height=
正規表現によるバリデーションでは ^ と $ ではなく \A と \z を使おう
正規表現によるバリデーション等で、完全一致を示す目的で ^ と $ を用いる方法が一般的ですが、正しくは \A と \z を用いる必要があります。Rubyの場合 ^ と $ を使って完全一致のバリデーションを行うと脆弱性が入りやすいワナとなります。PerlやPHPの場合は、Ruby程ではありませんが不具合が生じるので \A と \z を使うようにしましょう。 はじめに 大垣さんのブログエントリ「PHPer向け、Ruby/Railsの落とし穴」には、Rubyの落とし穴として、完全一致検索の指定として、正規表現の ^ と $ を指定する例が、Ruby on Rails Security Guideからの引用として紹介されています。以下の正規表現は、XSS対策として、httpスキームあるいはhttpsスキームのURLのみを許可する正規表現のつもりです。 /^https?:\/\/[^\n]+$/
「php_flag short_open_tag off」の意味
以前エントリーした「さくらインターネット＋DynamicMTMLで「Internal Server Error」になる場合の対処」の、.htaccessに記述する「php_flag short_open_tag off」の意味について紹介します。 １．はじめに Apache 設定ファイル（.htaccess）に下記のphp_flagディレクティブが記述されていると、特定の環境で「Internal Server Error」になるようです。 php_flag short_open_tag off が、そもそもこのディレクティブや「short_open_tag」の意味が分かりません。 ２．php_flagディレクティブの意味 まずphp_flagディレクティブの意味は、PHPの設定の変更を行うためのものです。 フォーマットは、 php_flag name on|off になります。 つぎにna
wordpressのget_postsは検索結果ページでposts_searchフィルターが掛かる |
結論はタイトルの通りですが、wordpressの検索をカスタマイズしていて引っ掛かったことがあったので書き留めます。 ＜wordpressの検索機能について＞ wordpressの検索機能の検索対象は、投稿・固定ページのタイトル・本文です。 ブログとしての利用であればそれで十分ですが、企業サイトや商品サイト等では、よく下記の様なニーズがあり、物足りません。 ・複数カテゴリで検索したい ・カスタムフィールドに限って検索したい ・カスタム投稿を検索に含めたい ・チェックボックスで検索したい ・OR検索したい 等々。 プラグインでも検索対象を広げたり、ある程度のカスタマイズが可能ですが、 wordpressのフィルターフックを利用すると、SQLをいじれるため、広範にわたるカスタマイズが可能です。 ※フィルターフックについてはこちら ＜カスタム投稿・カスタムフィールドをOR検索したい＞ 今回、下記
ブラウザのウィンドウサイズを取得する際のjQueryとJavaScriptとCSSメディアクエリの違い｜BLACKFLAG
レスポンシブサイトではウィンドウの幅（画面解像度）によって、レイアウトの調整や動作処理の制御を行います。 ウィンドウサイズ（画面幅／高さ）の取得方法に関しては、スクリプト制御ではjQueryの「.width()」メソッドのほか、JavaScriptの「.innerWidth」メソッドや「.matchMedia」メソッドを使用する方法などがあり、CSSメディアクエリでは「@media only screen and (max-width:○○px)」などといった手法でウィンドウサイズを取得することが可能になります。 それぞれの取得する方法によってすこし厄介なのは、ページ内にスクロールバーがある時とない時で取得する値が変わってくるというもの。 さまざまな場面でウィンドウサイズを取得する機会が増えてきているので、上記のそれぞれ取得方法について比較してみました。 まずは各スクリプト処理とCSSメデ
意外と盲点だったCSS3の役立つ小技まとめ - コムテブログ
TL;DR リニューアルを行った時に、CSS3 で気づいたことや次回もまた使いそうなものなどを備忘録として書いておきます。基本的なものから見慣れないものまで。 CSS3 オートフィルの背景色を解除 chrome にて、テキストボックスのオートコンプリートした際、背景色が黄色になります。これを消したかったので を追記。色指定の箇所に任意の色を指定できますが、とりあえず白色で。 無事消えました。 Coderwall | Change background color for autocompleted inputs in Google Chromeでinputがオートフィルされてると背景色が黄色になるのを回避 – CSS | ごろつきめも backface-visibility で Chrome のチラつきを解決 fadeIn などのアニメーションを取り入れると Chrome でヘッダーやサイ
PHP で $_GET $_POST で Notice: Undefined index: が出る : Serendip – Webデザイン・プログラミング
以下のような記述が .php 内にあった場合、Notice: Undefined index: id in /Users/foo/public_html/hoge.php on line n と表示される。 $id = $_GET['id']; これは、外部からの汚染された引数が渡されたことが原因なので、htmlspecialchars を使ってサニタイズすると警告が表示されなくなる。 $id = htmlspecialchars(@$_GET['id']); 上の方法では、@を使ってエラー出力を抑制しているだけ。 $_GET['id'] の値が初期化されていないためにエラーとなっているので、isset で初期化チェックをおこなう。 $id = isset($_GET['id']) ? htmlspecialchars($_GET['id']) : null; 修正：2011/6/1
Wordpressのショートコードが pタグ で囲まれてしまう | サイトスパイラル(Sitespiral) - 沖縄で ホームページ制作 / WordPressのことなら
WordPressのショートコードはfunctions.php等で自作のショートコードを追加して、とても便利なのですが、ショートコードが pタグ で囲まれてしまいます。 例えば、下記のようなショートコードがあった場合 function my_hogehoge($attr) { return '<div class="hogehoge">hogehoge</div>'; } add_shortcode('hogehoge', 'my_hogehoge'); [hogehoge] 実際、コンテンツが出力される際は <p><div class="hogehoge">hogehoge</div></p> となってしまいます。 pタグとdivの margin等 で、この pタグ が邪魔な場合があります。 pタグを補完しないようにする解決方法もあるのですが、文章や画像等にはpタグで囲まれてほしいので、
[CSS]Media Queriesで使う単位はpx, em, remのどれが適しているか検証 -px指定は注意が必要
レスポンシブ用のMedia Queriesを使う時に「@media (min-width: 400px) {}」のように「px」を単位に使用している人も多いと思います。しかし、px指定には注意が必要です。 Webページでよく使用される条件で検証を行い、Media Queriesでなぜpxを使ってはいけないのか、そして何が適しているのかが分かる検証記事を紹介します。 PX, EM or REM Media Queries? 以下、各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様に許可を得て翻訳しています。 はじめに pxとemとremの検証方法 検証1. html要素でfont-sizeを指定 検証2. ブラウザでズームが可能 検証3. ブラウザでフォント設定が変更可能 検証の結果 はじめに あなたはMedia Queriesで使う単位にpx, em, remのどれが一番
![[CSS]Media Queriesで使う単位はpx, em, remのどれが適しているか検証 -px指定は注意が必要](https://cdn-ak-scissors.b.st-hatena.com/image/square/ebb660a3174b5d3836e1ab0370b94c0ac1d1e64a/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201601%2F2016032901.png)
ワンランク上のコーダーは万が一の配慮も欠かさない、リンク切れの画像要素をスタイルするテクニック
通常はお目にかかれませんが、リンク切れの画像があるのはいただけませんね。 画像がリンク切れだと、こんな風に表示されてしまいます。 もちろんリンク切れがないのがベストですが、絶対に存在しない訳ではありません。 よりよいユーザエクスペリエンスを提供するために、リンク切れの画像要素にスタイルを定義しておくことができます。 Styling Broken Images 以下、各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様に許可を得て翻訳しています。 img要素の2つのポイント リンク切れの画像要素のスタイル ブラウザのサポート状況 img要素の2つのポイント リンク切れの画像要素をどのようにスタイルすることができるか理解するために、最初に理解しておくべきimg要素の2つのポイントがあります。 img要素に通常の文字関連のスタイルを定義できます。 定義したスタイルは代替テキスト(
PHPで「そのようなファイルやディレクトリはありません」というエラーになる場合の対処
PHPで「そのようなファイルやディレクトリはありません」というエラーになる場合の対処について紹介します。 このエントリーはビギナー向けの内容です。 １．問題点 次のPHP（test.php）を書いてみたのですが、「そのようなファイルやディレクトリはありません（または"No such file or directory"）」というエラーになります。 <?php echo 'input something: '; $string = trim(fgets(STDIN)); var_dump($string); ?> ２．原因 このPHPスクリプトをブラウザではなくコマンドラインから実行した場合、このようなエラーが発生します。 ３．対処 このスクリプトをコマンドラインからの実行で動作させるためには、1行目に下記を追加します。 #!/usr/bin/php または #!/usr/local/bin
チェックボックスを変更不可にする方法
フォームでチェックボックスを変更不可にする方法を紹介します。 １．はじめに ある案件で「フォームのチェックボックスをチェックしたままの状態（ユーザーが操作できない）にしたい」という要望がありました。 が、readonly属性ではチェックボックスは操作不可にできないようです。 <input type="checkbox" name="foo" value="1" checked="checked" readonly="readonly" /> また操作不可にするにはdisabled属性を追加するがありますが、disabledにするとそもそもフォームの送信対象から外れてしまいます。 <input type="checkbox" name="foo" value="1" checked="checked" disabled="disabled" /> ということで何かいい方法はないでしょうか。
PHPで「Cannot modify header information - headers already sent by」というエラーになる場合の対処
PHPで「Cannot modify header information - headers already sent by」というエラーになる場合の対処について紹介します。 １．問題点 次のようなPHPを作成しました。 <?php echo("test"); header('Content-Type: application/json; charset=utf-8'); …後略… ?> このPHPを実行したところ、「Cannot modify header information - headers already sent by (output started at /.../index.php:xx) in /.../index.php on line xx」というエラーが発生しました。 ２．原因 原因はheader()関数の前にecho文があるためです。 header()はHTT
ノードと要素は別物なので気を付けよう。（DOMおれおれAdvent Calendar 2015 – 12日目） | Ginpen.com
ここで el に上記 <ul> が格納されているものとすると、 el.firstElementChild は最初の <li> になります。想定通りと思います。一方 el.firstChild はというと、 <ul> と最初の <li> の間の「改行とインデント」から成る文字列ノードが格納されています。そう、文字列もノードです。 デモ 他にもこんな感じで「ノード全種から取得」するものと「要素ノードの中から取得」するものとがあります。 parentNode vs parentElementNode children vs childNodes firstChild vs firstElementChild lastChild vs lastElementChild ? previousSibling vs previousElementSibling ? nextSibling vs next
Chromeでfont-sizeを10px以下に設定する方法
Chromeブラウザでは、CSSでfont-sizeを10px以下に設定しても、 ブラウザの設定で最小フォントサイズが決まっているため、10px(Default)以下にはならないようになっています。 今回は、Chromeでfont-sizeを10px以下に設定する2つの方法について整理しました。 ブラウザの設定を変更する Chromeの設定 ⇒ 詳細設定 ⇒ フォントをカスタマイズの 「最小フォントサイズ」を変更すると設定したブラウザには問題なくフォントサイズが変更されます。 CSSにて変更する方法 webkit-transformのscale3dやscaleを利用して、既存の文字フォントサイズを0.x倍縮小することで、フォントをもっと小さく表示できます。 ・scale3dを利用した例： 12pxで設定すると6pxになります。 p{ width: 200%; line-height: 20
display:table-cellでwidth:100%に設定したいとき
2014年12月5日に作成されたページです。 情報が古かったり、僕が今以上のど素人だった頃の記事だったりする可能性があります。 全件リストはこちら。 どもです。 久々の連続更新(ﾟ∀ﾟ) 要素を手っ取り早く上下中央揃えにしたいとき、親要素のdisplayをtable-cellにするのが楽ちん。 でも、display:table-cellはwidth:xx%が効かない罠。 親要素のwidthが決まっている場合、width:inherit;（親の数値を引き継ぐ）でイケる。 まぁ、親要素が決まってるならそのpx書けば良いだけだけど、その変動も考えるとinheritのが堅実。 しかし親要素もパーセンテージ指定だったら…。 width:想定される最大pxより大きな数値;でイケた。ちょっと驚いた。 どうやらtable-cellには親要素を絶対にはみ出ないという原則があるようだ。
CSSのfloatに困った時に見直したい6つのポイント、floatがどのように機能しているか分かりやすく解説 | コリス
floatを使うと思った通りにならず、下に落ちてしまう、幅に収まらないなど、CSS初心者がつまづきやすい問題を解決するポイントを解説したチュートリアルを紹介します。 How Floating Works 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様に許可を得て翻訳しています。 floatのルール 1. フロート要素を親要素から見るとどうなるか 2. 左や右にフロートさせる 3. フロート要素が押し下げられてしまう原因 4. フロート要素の配置の順番 5. フロート要素の配置の優先順位 6. フロート要素で親要素を広げない フロートのクリア clearfix floatのルール floatプロパティには、4つの値があります。 .foo { float: left | right | inherit | none } この4つの値はそれぞれ、要素を親要素の中でどの
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
WordPressでfigure要素を使うための修正 - うつつのがれ
PHPのtrueは1でfalseは''の話 - Qiita
ツクメモ - ウェブやアプリをツクるヒトのメモ
