投稿日:

youtubeの埋め込み

youtubeの埋め込みコードを適切な比率で埋め込む方法。

youtubeから埋め込みコードを取得


動画のページを表示、「共有」をクリックして、開いたダイアログの「埋め込み」をクリック


右下のコピーをクリックして埋め込みコードをコピーする。

HTMLを記述

<div class="iframe-wrapper">
<iframe width="560" height="315" src="https://www.youtube.com/embed/pjnKuhcfB6U" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>

埋め込みコードを<div class=”iframe-wrapper”>～</div>で囲む。

CSSを記述

.iframe-wrapper{
　position: relative;
　padding-bottom: 56.25%;
　height: 0;
　overflow: hidden;
}
.iframe-wrapper iframe {
　position: absolute;
　top: 0;
　left: 0;
　width: 100%;
　height: 100%;
}

動画の比率は16：9なのでその比率になるようにpadding-bottomの数値を設定する。
9÷16＝56.25%

親要素は幅100%なので、padding-bottom:56.28%; と設定する。
子要素を絶対位置で指定するため position: relative; を設定。
高さは0とする。

子要素iframeは絶対位置でtop, leftを0、幅高さを100%と設定する。

 

 

 

投稿日:

Gmailが突然送れなくなった

Gmailでさくらインターネットで設定したメールを運用して、特に設定を変えていないのに突然メールが送れなくなる事が起きているようです。
（2020年4月14日現在）

自分では起きていないのですが、周りで数人から同時期に聞かれたので対処方法を書いておきます。
このようなエラーが出るようです。
※何度かやっていると送れたりすることもあるようです

対応方法

GmailのSMTPサーバーを独自ドメインに設定していたら、初期ドメインに変更することでエラーが出なくなるようです。

手順

1．Gmail画面から設定（歯車アイコン）をクリックして「設定」をクリック

2．設定画面上部のアカウントとインポートをクリック

3．エラーが出ているメールアドレスの「情報を編集」をクリックすると設定画面「メールアドレスの編集」がポップアップで表示されます

4．メールアドレスを確認して「次のステップ」をクリック

5．SMTPサーバー欄にさくらインターネットの初期ドメイン「example.sakura.ne.jp（”example“のところは自分で設定した名称）」を入力する。
パスワードを入力して「変更を保存」をクリックして完了

設定手順は以上。

原因は不明なのは気持ち悪いですが、対処方法でした。

 

投稿日:

Windows10　スクリーンショットが撮れない

昨日まで出来ていたのに、今日は突然できなくなる。
コンピュータを使用していると或る或るですが。

Windows10でスクリーンショットが撮れなくなった
自分の事象が検索で出てこなかったので誰かの役に立つかもしれないので記しておきます。

 

まず検索して出てきた解決方法はコレ

キーボードの「Alt」キー＋「PrintScreen」キーを押しても画面をキャプチャできない場合は、キャプチャしたいウィンドウを選択したあと、以下のいずれかの操作を行ってください。
「Fn」キー＋「Alt」キー＋「Del」キーを同時に押します。
「Fn」キー＋「Alt」キー＋「Prt Sc」キーを同時に押します。

 

デキナイ。。。
再起動してもだめ。

exploreでフォルダー構成を見ていたらスクリーンショット画像が保存されるフォルダーは「スクリーンショット」。

これは実体はOneDrive下にある。
タスクバーを見るとOneDriveアイコンが見当たらない
OneDriveにログインし直すとスクリーンショットが撮れるようになった。

 

【結論】

各種キーの組み合わせを試してダメな時はOneDriveを確認してみましょう

 

投稿日:

ブラウザキャッシュが更新されない

HTML5でmetaタグで キャッシュに関する設定が廃止のようです。。。

HTML5における no-cache

 

サイト制作をしていると、クライアントに修正等の確認を依頼すると「直っていない」と言われることがよくあります。

概ねブラウザキャッシュが古いままで更新が反映していない事が多いのではないでしょうか。

手順を説明してスーパーリロードをお願いするのも手間だし、クライアントにスキルが無い場合もあるし、何かの手違いでそれが正常に実行されない事もあるのも悩ましい。

 

WordPressで作成したサイトを確認してもらう時にクライアントのCSSファイルの更新が上手く行かない事がありました。
WP Super Cacheなのでサーバー側キャッシュを削除してもブラウザ側は如何ともし難い。

あまりよくはないのですが、テンプレート（phpファイル）にCSSを記述して無理やり該当箇所のスタイルを上書きしました。
テンプレートファイルはCSSに比べてちゃんとリロードされるような印象です（具体的に調べた訳ではないですが）
本当にちょっとしたclassの定義だったのと、後で外すつもりで対処しました。

推奨はしませんが、一時的な対処療法としてメモしておきます。

投稿日:

XD トグルボタンの表現（修正版）

プレイボタンをクリック（タップ）すると、ポーズボタンに変わるトグルボタンの作り方です。

やり方

  1. トグルにしたいボタンを画面に配置して
  2. リンク先としてアートボードを用意（画面サイズはボタンと同じ） ※リンク先のアートボードの背景は透明状態
  3. アクションをオーバーレイにしてボタンからリンクさせると画面にグリーンの枠線でターゲットが表示されるのでドラッグして位置を合わせる。
  4. ポーズ状態でボタンをタップすると再生ボタンに戻ります

  ※注意 ポーズ状態の時に最初のプレイ画面に他のボタンが配置されている場合は、もう一回タップしないと、そのボタンは使えなくなってしまうので、実際の画面の挙動とは異なってしまうので、ややモヤモヤ。。 状況によっては使えるかも。

投稿日:

XD ドラッグドロップの表現

XDでドラッグ＆ドロップの表現。

例としてアートボード上に色違いの矩形オブジェクトを配置する。

そのアートボードをコピーして左右のオブジェクトを入れ替える。
その後「プロトタイプ」モードでリンクを設定する。

この場合はどちらも赤い矩形にお互いのページへのリンクをつける。
その際にトリガーの設定をドラッグにする。

これだけで動画のような動きが可能となる。

投稿日:

XD トグルボタンの表現

XDでトグルボタンの表現は簡単に作れそうだったが（結構必要な気がする）なさそうなので画面遷移の機能を使って実装した。
（其のうちできるようになりそうな気が。。　現在2019年7月です。）

何を勘違いしていたのか、ちゃんと出来たので別記事に改めました。
※こちらからどうぞ

 

プレイボタンをクリック（タップ）すると、ポーズボタンに変わるアレです。

やり方

  1. トグルにしたいボタンにリンクをはる。
  2. リンク先としてアートボードを用意（画面サイズは同じ）
    ※アートボードの背景と枠線はチェックを外しておく（透明状態）
  3. 同じサイズ、同じ位置にボタンを配置する。
  4. トリガー：タップ、アクション：オーバーレイに設定する
  5. ポーズボタンにもプレイに戻るようにリンクを同様にはる

※ボタンだけでボタンと同じサイズのアートボードを作って配置位置を指定できれば良さそうだけど、それはできないので、同じ画面のアートボードを作り、同じ位置に配置してます。

※注意

ポーズ状態の時に最初のプレイ画面の他の機能が使えなくなってしまうので、実際の画面の挙動とは異なってしまうので、ややモヤモヤ。。
状況によっては使えるかも。

投稿日:

XD　ペーストボード

XDで作業をしていたらレイヤーパネルにペーストボードという名称がいつの間にか出来ていた。

アートボード以外の領域にオブジェクトを配置すると自動的に出来る。
アートボードと同じようにオブジェクトをまとめておく機能。
マスターコンポーネントをペーストボード上に配置しておくと管理しやすい。

投稿日:

買った記憶がないもの

時々自分の持ち物で買った記憶がないものがある。

例えばこの電卓。
気が付けば大分長い事使用しているが自分で買った記憶がない。
そもそも電卓を買ったことが人生の中であったろうか？

思い出せない。

自分で買っていなければ貰ったか盗んだか誰かが忘れて行ったものをそのまま使っているか、という事になる。

Office DEPOTとあるので会社を畳むときにモノを整理してそれで持って帰ったのかもしれない。
（当時近所にあったので事務用品などはOffce DEPOTで調達していた）

出所を探すわけでも、持ち主を探すわけでもないので結論はないのだが、こんな些細なアイテムでも元を辿ると存在不明は点にやや不思議なものを感じて書いてみた次第。

Office Depot CYN-26 8-DIGIT

投稿日:

DreamWeaver SFTP接続

Dreamweaverがサポートしている鍵認証ファイルは OpenSSH形式のみです。もし通常の手順で接続が失敗するときはOpenSSH形式に変換してみて下さい。

windowsの場合はputtygenを使います。
自分の場合はWinSCPも使いますので、puttygenはWinSCPのインストールディレクトリに入っていたものを使いました。
puttyディレクトリ内に入っています。

puttygen.exeを起動

File > Load private key で変換したい秘密鍵を選択
鍵のパスワードが設定されている場合はパスワードを入力するダイアログがでますので、パスワードを入力

Conversions > Export OpenSSH key　でファイル名を指定して実施します

こちらを参考にしました。

https://bacchi.me/linux/putty-key/