iframeを横幅100%で埋め込みたいけど、高さを設定するには?

iframe の横幅(width)を指定して読み込むことはできますが、これだと スマートフォン で表示したときに、ページから iframe がはみ出てしまいます。 width に 100% を設定してみますが、これだと縦長になってしまいます。 横幅100% で 縦は横幅に対して 66.66% になるように、以下の方法で対応します。①position:relateive で 横幅100% と 縦のパディングトップ66.66% の枠を作ります。②中身の position:absolute は、width100% と height100% で relateive の枠(横幅100% と 縦のパディングトップの枠)まで引き伸ばします。 更に、横幅を最大 500px に抑えるには、max-width で囲みます。

iframeを横幅100%で埋め込みたいけど、高さを設定するには? Read More »

グーグルマップ iframe版 をホームページに表示するには?APIキー無し。

↓こちらが グーグルマップ の「地図を埋め込む」からHTMLをコピーしたものです。属性で改行してあります。 ↑この src にある pdパラメーター とは、いったい何なのでしょうか?このパラメーターのせいで、一瞬、「グーグルマップはお金を払わないと使えないな」と勘違いしてしまいました。結局、↓こちらの iframeタグを HTML に埋め込めば グーグルマップ を表示できることがわかりました。 それでは、src の URLパラメーター の変えて、地図を確認してみようと思います。 outputパラメーター は embed 固定です。 hlパラメーター は 言語。ja 固定にします。 tパラメーター は 地図表示タイプ。 地図(m)を指定する。 航空写真(k)を指定する。 qパラメーター で 緯度経度 を指定する。 qパラメーター で 住所 を指定する。 qパラメーター で 場所 を指定する。 パラメーター で ズーム を指定する。z=14 から z=18 のサンプルを用意しました。

グーグルマップ iframe版 をホームページに表示するには?APIキー無し。 Read More »

グーグルマップ iframe版 をホームページに表示するには?APIキー有り。

↓こちらが グーグルマップ の「地図を埋め込む」からHTMLをコピーしたものです。属性で改行してあります。 ↑この src にある pdパラメーター とは、いったい何なのでしょうか?このパラメーターのせいで、一瞬、「グーグルマップはお金を払わないと使えないな」と勘違いしてしまいました。結局、↓こちらの iframeタグを HTML に埋め込めば グーグルマップ を表示できることがわかりました。 keyパラメーター には グーグルクラウド で発行した APIキー を指定します。answorz.com 固有のもので他のサイトでは使用できません。 それでは、5つあるマップモードを確認してみようと思います。 マップモード毎に、指定できる URLパラメーター も変わります。 ①PLACEモード qパラメーター で マップマーカー の位置を指定して地図を表示します。 maptypeパラメーター に satellite を指定して地図を表示します。 ②VIEWモード VIEWモード は PLACEモード と比べて、地図中央に マップマーカー が表示されません。qパラメーター もありません。 ③DIRECTIONSモード 2点間の経路を表示できます。東京駅 から お台場 まで 電車 を使った経路を表示します。 ④STREETVIEWモード ストリートビュー が表示できます。 ⑤SEARCHモード 地図で検索することができます。キーワード「くら寿司」で検索してみます。

グーグルマップ iframe版 をホームページに表示するには?APIキー有り。 Read More »

Git 間違ってコミットしてプッシュまでしまった。取り消すには?

ある時点のコミットに戻る手順。それ以降のコミットを消す。 Gitログ でコミットID を確認します。 Gitリセット で取り消します。 リセットしたコミットを、強制プッシュしてオリジンを書き換えます。 間違って作成してしまった(新しい)コミットが全て消えます。 間違ってコミットしてしまった。さらにプッシュまでしてしまった。リバート(コミットを打ち消す操作)はしたくない。間違って作成してしまった(新しい)コミットを全て消したい。

Git 間違ってコミットしてプッシュまでしまった。取り消すには? Read More »

ConoHa の VPS(OracleLinux8)でプライベートネットワークを設定するには?

ConoHa の VPS(OracleLinux8)でプライベートネットワークを設定する手順。 ローカルIP を設定するサーバーを停止しておきます。 ConoHa管理画面の左メニューから「プライベートネットワーク」を選択し、「接続状況」に「接続する」を選択して保存します。サーバーを起動します。 ipconfigコマンドで、IPアドレスを割り当てることができます。 設定ファイルを作成して IPアドレスを割り当てます。 再起動して、IPアドレスが設定されていることを確認します。

ConoHa の VPS(OracleLinux8)でプライベートネットワークを設定するには? Read More »

ユーザーエージェントの仕様がいつの間にか変わっていた。

注目は「sec-ch-uaなんとか」と「sec-fetchなんとか」こちらを調査しました。 sec-ch-ua は ブラウザーのブランドとバージョンです。 sec-ch-ua-mobile は モバイルなら ?1 。PCなら ?0 を指定します。 sec-ch-ua-platform は OS を指定します。 sec-fetchなんとか は フェッチメタデータリクエストヘッダーというもので、サーバーにリクエストがどこから来たという情報を提供し、CSRF等の悪意のあるリクエストを防ぐことができるようにするもの。 こちらは今までのユーザーエージェントです。 PHP で リクエストヘッダーを付けてアクセスする例。 久しぶりにクローラーを作ろうしたところ、グーグルクロームのリクエストヘッダーに見慣れないヘッダーがあった。

ユーザーエージェントの仕様がいつの間にか変わっていた。 Read More »

SQLite3 操作のまとめ

データベースに接続する。 データベースから出る。 ヘルプを表示する。 設定情報を確認する。 テーブルの一覧を表示する。 全テーブルの定義を確認する。 テーブルの定義を確認する。 トランザクションを開始する。 コミットする。 現在時刻を取得する。 現在時刻を取得する。CURRENT_TIMESTAMP だと UTC(日本より9時間前) になっている。 テーブルにカラムを追加する。 ファイルに出力する。 テーブルをダンプする。 「CREATE TABLE」と「INSERT」文が出力されます。 標準出力に出力する。(ファイルに出力したものを戻す) CSVファイルをテーブルにインポートする。 関数 検索文字位置の取得する。ようするに PostgreSQL の strpos。 見つかった文字の位置を返す。1文字目が1。見つからなければ0。 文字列の一部分を取得する。 開始位置はスタートが1。 文字列を置換する。

SQLite3 操作のまとめ Read More »

Nginx if文で AND、OR 等の論理演算子を使うには?

「192.168.0.1 且つ 192.168.0.2 以外ならメンテナンス中を表示する。」としたいのですが、これはうまくいきません。まず、nginx が起動しません。 nginx の if文は1つしか判定できないみたいです。また、以下のように入れ子にすることもできません。 この問題は、以下のように変数を用いることで対応することができます。 因みに①比較は == ではなく = です。↑見た目が代入っぽく見えて少し怖いですね。②「false = $chk」のように逆にすることはできません。③「service nginx reload」では設定ファイルがエラーしていても、前回の起動した状態に戻ってしまうのでエラーに気がつけませんでした。「service nginx stop」から 「service nginx start」するようにします。 Nginxで2拠点以外からのアクセスでメンテナンス中画面を表示させたい場合に、AND演算子を使って条件を書いたところ上手く動かなかった。

Nginx if文で AND、OR 等の論理演算子を使うには? Read More »

Laravel クラスのインスタンス化方法まとめ

①App::makeでインスタンス化する手順 Controllersディレクトリに HelloWorldクラスを作成します。 App::make でインスタンス化して sayメソッドを実行します。 storage/logs/laravel.log を確認するとインスタンスは2つあります。 ②bind を使ってインスタンス化する手順 Controllersディレクトリに HelloWorldクラスを作成します。 サービスコンテナに bind でクラスを登録します。 これで HelloWorld でインスタンス化できるようになります。 App::make でインスタンス化して sayメソッドを実行します。 storage/logs/laravel.log を確認するとインスタンスは2つあります。 ③singleton を使ってインスタンス化する手順 Controllersディレクトリに HelloWorldクラスを作成します。 サービスコンテナに singleton でクラスを登録します。 これで HelloWorld でインスタンス化できるようになります。 App::make でインスタンス化して sayメソッドを実行します。 storage/logs/laravel.log を確認するとインスタンスは1つです。 ④ファサードでインスタンスを取得する手順 Controllersディレクトリに HelloWorldクラスを作成します。 サービスコンテナに bind でクラスを登録します。 ファサードはシングルトンのように使えます。たとえ↑のサービスコンテナに singleton ではなく bind で登録してもです。ここでの singleton、bind は App::make でインスタンス化するときに使う感じですね。 ファサードクラスを作成します。 ↑の「return

Laravel クラスのインスタンス化方法まとめ Read More »

Scroll to Top