画像の縦横比を維持したままレスポンシブ化するように、div のようなブロック要素の縦横比を維持するCSSをFLOCSS で書く

何ができるか?

div のようなブロック要素の縦横比を維持するCSSをFLOCSS で書ける。

普通にCSS を書くなら、参考にしたこちらの記事の方がわかりやすい。ありがとうございます。
CSSだけでアスペクト比を固定するテク
https://qiita.com/ryounagaoka/items/a98f59347ed758743b8d

背景

レスポンシブデザインで、複数カラムの一部を画像ではなくテキストの入るブロック要素にして、PC サイズのみカラムの縦横比を維持しようとした。

縦横比を維持したテキストボックスのイメージ

ソース

あとは、維持したい縦横比を計算して、.p-boxratio__XX のクラスを作成し、HTML を作る。

WordPress 更新画面が真っ白になる

WordPress のサイトを複数管理していて、1つのサイトだけ管理画面の更新ページが真っ白になる症状が出た。コードを読む人なら“/wp-admin/update-core.php” に問題があることに気づくだろうが、わたしは解決に結構な時間をかけてしまった。類似した症状は出ないと思うが、一応記録して残す。

時間のない方に、手元で起こった症状と解決策を前述する。

症状

FTP アプリ”Filezilla” で、ローカルからサーバーの特定のディレクトリに”/wp-admin/update-core.php” をアップロードすると、エラーが発生してファイルが破損する。公開サーバーではエラーが出ないので、真っ白になる。

対処方法

  • Filezilla で、[ファイル] → [サイトマネージャ] でサイトマネージャを開き、該当サイトの [転送設定] タブを選択。
  • 表示された画面右側にある [転送モード(T)] の [アクティブ] にチェックを入れて [了解] をクリック。
  • 該当ファイルをアップロードする
  • 「Windows セキュリティの重要な警告」ウインドウが出て、「このアプリの機能のいくつかがWindows Defender ファイアーウォールでブロックされています。」と表示される。「プライベートネットワーク」にチェックを入れて、「アクセスを許可する」ボタンを押す。
  • ファイルが正しく転送されるのを確認する。

次に、経緯の記録を後述する。

WordPress 更新画面が真っ白になる

現状

WordPress を利用している

問題点

WordPress の管理画面から、左メニュー「更新」ボタンを押すと真っ白になる

調査

  • 最新のWordPress をクリーンインストールする
    →同じ症状が出た
  • サーバーのWordPress インストールサービスを使ってインストールする
    →症状が出ない
  • 正しくインストールされたデータをローカルで復元し、ローカルで編集したデータを再度サーバーに復元する
    →同じ症状が出た
  • サーバーで症状が出たWordPress をローカルに復元
    →エラーが表示された。
    C:\xampp\htdocs\site\wp-admin\update-core.php
    プログラム90行目以降のデータが欠損していた
    正常なWordPress の”/wp-admin/update-core.php” を、Filezilla でアップロードすると、転送エラーが表示される。

    エラー: 接続タイムアウト
    エラー: ファイル転送に失敗しました

  • Filezilla の転送タイムアウト時間を200秒に変更
    →同じエラーが発生
  • Filezilla で、[ファイル] → [サイトマネージャ] でサイトマネージャを開き、該当サイトの [転送設定] タブを選択。
  • 表示された画面右側にある [転送モード(T)] の [アクティブ] にチェックを入れて [了解] をクリック。
  • 該当ファイルをアップロードする
  • 「Windows セキュリティの重要な警告」ウインドウが出て、「このアプリの機能のいくつかがWindows Defender ファイアーウォールでブロックされています。」と表示される。「プライベートネットワーク」にチェックを入れて、「アクセスを許可する」ボタンを押す。
  • 正しく転送された

複数の外部WordPress の最新記事を取得し、更新日でソートして降順に並べる

何ができるか

複数の外部ブログの最新記事を取得し、更新日でソートして降順に並べられる

背景

カテゴリが異なるサイトの更新情報を、それぞれのWordPress 記事として投稿している。大本のサイトでは、全情報を表示できるようにしたい。なおかつ、時系列でソートしたい。

技術情報

  • jQuery の$.getJSON(url, function(results){…}) で各店のWordPress ブログ記事を取得
    • getJSON()は非同期通信なので、データ取得後にHTML の描写を行うようにする
  • 取得したJSON データで必要なものをallArticles.push() で格納
    • 配列”allArticles” にオブジェクトを追加している
  • 全データ取得後、underscore.js を使い、allArticles をsortBy() で時系列降順にソート
    • 各店のJSON 読み込みにばらつきがあるので、setTimeout() で2秒の待機時間を付けている
    • allArticles をHTML として書き出す

配列を指定した項目でソートする

事前準備

jquery および、underscore.js を事前に読み込んでおく

underscore.js のsortBy() を使って、数字を降順に並べる

出力結果

year を比較して、降順に並び変わった

JavaScript で、複数の外部WordPress の最新記事を取得し、更新日でソートして降順に並べる

HTML

JavaScript

解説

  • getBlogInfo() で指定されたWordPress のJSON を取得して、ブログ最新記事を変数に格納
  • showBlogInfo() で記事をHTML に書きだす
  • 取得した記事をソートするとき、配列”allArticles”が空だった時が一番作業が煮詰まった。
    jQuery.getJSON() が非同期通信するため、読み込みが終わっていないタイミングで配列を参照していたのが原因だった。
  • 取得した記事のソートはこの部分。”-item.datenum” のマイナスを記載すると、降順になる。

参考

sortBy()
http://www.elder-flower.com/blog/2015/04/sortby.html
sortBy() の使い方

新社会人を翻訳者に育てる

外国人観光客を集客するために、英語の翻訳者が社内で必要になった。本件は、当人の努力によるものが大きいが、方針はこちらが考えた。なお、ヒアリングとスピーキング能力は除外している。

結論から言えば、中学生ぐらいの英語力だったAさんは、現在業務で日英翻訳を担当している。実施した対策は英語力を上げるのではなく、英語力の鍛え方を体験したのだと考えている。

現状把握

  • Aさんは、高校卒業の英語教育を履修
  • 英語は日常使わない

計画立案

英検3級(中学生卒業)向け英語学習30週

着眼点

  • よい参考書、英文を写本する
  • 生徒の力量を見極めて、直近の目標を高くしない

学習の管理

  • 勤務時間中、1日30分の学習
  • 英検3級テスト(筆記のみ)

頻度

30週間毎日(緊急の業務以外)

教材

  • CD付き英語 221P 11P/30分
  • 英文法 239P 12P/30分
  • 英単語 212P 11P/30分

方針

  • 上記の3書籍を1日おきに交互に読み込む
  • 30分を1コマとして、全60コマ
  • 黙読を6週間(ノルマページを2倍の速さで読む、目次だけでも良い)、精読を12週間、写本を12週間、合計30週かけて中学英語を納める
  • 写本は英語部分、重要な部分のみに絞る

効果測定

英検3級のテストを使って6割の正答率を越えられるか確認する
3級の過去問
http://www.eiken.or.jp/eiken/exam/grade_3/solutions.html

30週後の成績

Aさんは、英検3級筆記合格ならず

その後

    • VOA Learning English の写本 不定期
      • 写本にはリアルタイム校閲できるMicrosoft Word を使う
      • 社内の従業員ブログに入力結果を投稿
    • Chrome 拡張機能「Weblioポップアップ英和辞典」の導入、英文記事を読むとき英和辞書が引けるようにする
    • 翻訳時に、Excel 校閲ツールの使用を標準化
    • 翻訳後、わたしが英文校正
      • 日本特有の商品、地名に関する注釈を説明
      • 翻訳元の「主語抜け」、「修飾語多すぎ」などの処理方法を説明

英文記事の写本について

  • 1記事約2千字ぐらいなら、約13分で写せる(わたし調べ)
  • 写本にはWord のリアルタイム校閲を使う
  • 内容が難解な時は、固有名詞を調べたり、Google 翻訳を使う
  • 集中するためにホワイトノイズを聞いたり、森永ラムネをかじるのは有効(わたし調べ)

ビジネスアカウント宛てのスパムメールを楽に迎撃する

ビジネスで使うメールアカウント宛てにスパムメールが届くことがある。届くこと自体で、スパムメールを全く受け取っていない人より仕事の処理能力が低下する。それに、セキュリティリスクにもつながる。スパムメールを迎撃する方法を探った。

メールアカウント名を変える

アカウント名の変更は、名刺に書いてあるから現実的ではないと考える方もいるだろう。
しかし、ダークウェブで販売されている個人情報リストから逃れられる。

手順

  • 新アカウントを作成してメーラーに設定
  • 取引相手にBCC でメールアカウント変更を通知、ウェブサービスで同メールを利用している場合は新しいものに変更する
  • 通知後、1か月間は古いメールアカウントを新しいメールアカウントに転送
  • 1か月経過したら古いメールアカウントの転送を停止、自動返信で利用停止した旨を伝えて、企業サイトの問い合わせフォームに誘導する

メールアカウントの変更許可が下りない場合

G-Suite を使う

Google が提供するGmail のビジネス版。スパムメールフィルタが強力。

Outlook を使って2秒でスパムメールを通報するショートカットを作る

「クイック操作」で、スパムメールを通報して削除するショートカットを使う
対象:Outlook 2013

設定方法

リボンにデフォルトで設定されている「クイック操作」右下「クイック操作の管理」
>新規作成>転送>名前に「迷惑メールを通報」、転送先に「meiwaku@dekyo.or.jp」を記載
「オプション」をクリック>「アクションの追加」で「メッセージを削除」を選択
ショートカット キーで「Ctrl+Shift+1」を選択(使いやすいものを選ぶ
「保存」をクリック>「OK」をクリック

動作の確認

  • メールを1つ選び、設定したショートカットキーを押す
  • 転送メールが作成され、画像が削除されるのを確認する

スパムメール通報のテンプレートを作る

スパムメールを通報するメールを作成し、Outlook テンプレート(*.oft)として保存。

作成方法

「新しい電子メール」をクリック>宛先に「meiwaku@dekyo.or.jp」を入力、件名に「迷惑メールを転送」、本文に「よろしくお願いします。」を記載する
>ファイル>名前を付けて保存>ファイルの種類で「Outlook テンプレート(*.oft)」を選択

テンプレートファイルが次のフォルダに入っているので、ファイルを選択してランチャーに追加する
C:\Users\{パソコンのアカウント名}\AppData\Roaming\Microsoft\Templates

使い方

ランチャーから「迷惑メールを転送」を開き、スパムメールをすべてドラッグして添付すして送信する

ランチャーとは:アプリを呼び出すソフトウェア。わたしはOrchis を使っている

SNS 集客記事を書く

SNS 集客記事の書き方を、店頭POP の要素を取り入れてまとめた。

背景

今、我々の組織がSNS を使った自社の商品を売ったり予約を取る広告活動で、どうすればいいか迷っている。わたしは「お客様がより良い体験をできる商品を作ったので買ってください!この商売を続けさせてください。」と素直に話すのがいいと思っている。これが「宣伝がきつすぎると、フォロワーが増えない。」というSNS の主流意見と対立しているからだ。

わたしがSNS 記事投稿を担当していた時は、店の売り上げがゆるい右肩上がりになっていたが、写真撮影の腕利きが担当になってからは2か月間、前年度割れした。ただし、SNS のフォロワー数10倍、1記事の平均いいね!6倍、平均インプレッション10倍という好成績をたたき出している。

このちぐはぐの原因は単純に、「記事に宣伝がない」ことだろうと仮説を立てた。そこで、以前わたしが使っていた記事テンプレに改良を加えたものを後述する。

SNS 集客記事テンプレ

あいさつ:こんにちは。

自己紹介:

1)キャッチフレーズ

2)リードコピー

3)商品名

4)価格:

5)優待・キャンペーン:

来店導線:

とどめ:
お早めのご予約が安心です。

6)ハッシュタグ

数字部分は記事によって変える。それ以外は定型文でよい。

テンプレ利用例

こんにちは。

ちょっといいものをちょっと売る、桜の道商店です。
(営業日時:月~土 10:00~18:00)

春が旬の山菜、「わらび」の通販が始まりました。

当店のわらびは、身が太くて柔らかいのが特徴です。
煮物やてんぷらもいいですが、おすすめは
鰹節をかけた醤油和えです。
シャキシャキとした食感に、ほんのりとしたほろ苦さを楽しめます。
難しいあく抜きも心配無用。
こちらであく抜きしたものを
水と一緒に要冷蔵で発送します。

ただいま、春の山菜応援キャンペーン中です。
この記事を読んだお客様限定で
こごみを一束、プレゼントいたします。
ご希望の方は、通販のコメント欄に
「こごみプレゼント2019」とご記載ください。

通販のリンクはこちら。
{URL}

山菜の販売は期間限定、先着順となっております。
お早めにご利用ください。

#桜の道 #山菜 #通販 #わらび #こごみ

AutoHotKey で、アクティブなタブブラウザの今のタブでURLを開く

 

何ができるか?

AutoHotKey で、アクティブなタブブラウザの今のタブでURLを開ける

概要

ブラウザ操作のショートカット「アドレスバーにフォーカスする[Alt+d]」を使って、URLを開く

利用するアプリ

AutoHotKey
利用については「AutoHotKey Wiki」を参照

AutoHotKey は何ができるか?

Windows の操作を自動化できる

本件では何を行うか

アクティブなタブブラウザの今のタブで、URLを開く

スクリプト

備考

タブブラウザのショートカットはだいたい同じなので、Chrome などで使える。わたしはFirefox でこの操作を行っている。

AutoHotKey で、ウェブサービスに自動ログインする


何ができるか?

ウェブサービスを使うとき、そのログイン作業を自動化できる

なぜログイン状態をブラウザで維持しないのか?

重要なウェブサービスはパスワード管理ソフトで管理しており、ブラウザにログインデータを残さないようにしているため。

注意事項

個人情報を含むようなウェブサービスは、パスワード管理ソフトを使う。AutoHotKey のスクリプトは、テキストデータを平文で保存しているので記述したログイン情報の漏えいリスクが残る。

利用するアプリ

AutoHotKey
利用については「AutoHotKey Wiki」を参照

AutoHotKey は何ができるか?

Windows の操作を自動化できる

本件では何を行うか

Firefox で特定のウェブサービスを開き、ID とパスワードを入力してログインする

事例

任意のアカウント情報を使ってログインする

  • ログインするウェブサービスのURL
  • ログインID
  • ログインパスワード

login_at_Firefox.ahk

 

使い方

login_at_Firefox.ahk をダブルクリックして起動する

備考

Q:なぜわざわざIME をオフにしているのか?
A:AutoHotKey の”send” は、IMEを利用できるが、オンになっているとログイン時にただしく情報を入力できないから、オフ にする。
参考:(AutoHotkey)(IMEの制御をする 編)

フォームのバリデーションテスト用入力を自動化

何ができるか?

フォームのバリデーションチェックのための記入を、スクリプトを使って自動化できる

なぜテストを書いて対応しないの?

スクリプトでのバリデーションと、JavaScript を使ったリアルタイムバリデーションを2重に行っているから、それぞれのテストを書くよりフォーム自動入力を使って作業コストを省いている

利用するアプリ

UWSC

UWSC は何ができるか?

Windows の操作を自動化できる

本件では何を行うか

文字入力、ラジオボタンやセレクトボックスを選択して、それぞれに合ったフォームを埋める

事例

次のようにならんだ項目を埋める

  • 名前
  • 名前カタカナ
  • メールアドレス
  • 電話番号
  • ラジオボタン
  • セレクトボックス
  • チェックボックス

form_insert.UWS

 

使い方

UWSC で上記のファイルを開き、入力を埋めたいフォームの最初を選択、[CTRL + F1]、またはUWSC の「再生」ボタンを押して、フォームを埋める

WordPress で運用している複数のサイトの記事を、別のサイトに読み込んで表示する方法

何ができるか?

WordPress で運用している複数のサイトの記事を、別のサイトに読み込んで表示できる。

WordPress のテンプレートタグは使えないのか?

「複数サイト」という条件があると、使えない。

PHP でこれを付けると、同じドメインに限り記事を読み込めるが、「複数サイト」で読み込む方法が見つからなかった。

方法

jQuery で、WordPress のJSON を読み込む

“http://www.hogehoge.com/wp1/” にWordPress がインストールされている場合、次のURL でアクセスすると、JSON が取得できる。

“posts”以降の記述は、”_embed”で写真データを要求、”per_page=3” で記事を3つ取得

HTML の表示部分

JavaScript コード

複数ブログを読み込む

HTML の表示部分

JavaScript コード