ITとデジタル系 – ところによりエンジニア https://www.shintoko.jp/engblog 海外駐在中（元しんとこ在住）の建築設備エンジニアの生活を日々徒然に綴ったブログ Sat, 03 Jan 2026 04:31:43 +0000 ja hourly 1 https://wordpress.org/?v=6.9.4 86214039 ２０２６年新年事始め～WordPressローカル環境再構築 https://www.shintoko.jp/engblog/2026/01/02/starting2026wordpresseditor/ https://www.shintoko.jp/engblog/2026/01/02/starting2026wordpresseditor/#respond Fri, 02 Jan 2026 22:55:20 +0000 https://www.shintoko.jp/engblog/?p=8485

久方振りに大晦日迄仕事をしていた昨年ではありますが、新年の本日から４日までの束の間の休日でしたので、これまた久方振りにサイトのウォーミングアップ兼ねて、ローカルホストサーバーのXAMPPやらコードエディターのAtomなどを立ち上げてみました。ここ２，３年はほとんどサイトのメンテもしていない状態でしたので、これらのソフトも久方振りに使う状況で、驚いたのはあっという間代替アプリが世に出て来ていたということでしょうか。XAMPPについては昨年の時点で既に代替アプリのLaragonというソフトに目を付けてはいたのですが、念のためコードエディターのAtomの方もサーフィンしてみると何と２０２２年にサポート終了ということで巷ではVS Codeが主流になっているとのこと。
　VS Codeは少し前にAI絡みでPhytonのコードを作らせて走らせるという別の目的でインストールしていたのですが、やはりMicrosoftが提供している無償コーディングツールということで、さすがに今のところ最も恒久的に使える可能性が高いと思いますので、こちらに切り替えることにしました。

　ローカルホストサーバーアプリのLaragonなのですが、巷の導入記事を参考にインストールして起動したまではよいのですが、例によってPHP多用している本サイトは上手く表示されません。おまけに次回以降の起動時にどうやら有料ライセンスが必要な旨のダイアログが表示されるようになり、無料だったのはついこの間までの話だったようです。

　結局、Laragonは近年有料化となってしまったということで、移り変わりは本当に早いということでXAMPPの最新版をインストールしなおすことにしました。といっても、一からWordPressの環境を入れ直すにも面倒だしエラーも出たらということで躊躇していましたが、下記の記事を参考にバックアップファイルをインストールし直した新しい？/xamppのフォルダに上書きコピーすることで何とかローカル環境でWordPressを起動することができました。

　ただ起動してみたWordPressに致命的なエラーが表示されており、これも何だか気持ちが悪いのでどうしたものかと思っていたところ、下記の記事を参考に簡単に解消することが出来ました。

　もう一つXAMPPのコントロールパネル終了時に何故か毎回エラーが出るようになってしまったのですが、こちらも下記サイトを参考に解消することができました。しかし、デフォルト状態で終了時にエラーが出たり、バージョンのリンクも変ですし何より8.2以降はバージョン更新されていないところを見ると、XAMPPも無料で安定して使えるのも時間の問題なのかも知れません。

　コードエディターのVS Codeについては、やはり色々な拡張機能も沢山あるようで、PHPを多用してしまっている本サイトのPHPファイルのデバッグ用には色々と便利なツールがあるようです。下記を始めとする幾つかのサイトを参考にさせてもらい、基本的な拡張機能はインストールしてみました。


　相も変わらずネット上の先人たちが残していてくれた備忘録で何とか凌いでいるといった状況ですが、これらのサイトの方々には本当に感謝です。ということで、私も簡単ですが年始早々、ローカル環境を再構築しましたので、どなたかの参考になればとメモしておきます。

 

]]> https://www.shintoko.jp/engblog/2026/01/02/starting2026wordpresseditor/feed/ 0 8485 WP備忘録ーブックマークレットでショートコード取得によるブログカードの出力 https://www.shintoko.jp/engblog/2023/03/29/wpreminderbookmarkletblogcard/ https://www.shintoko.jp/engblog/2023/03/29/wpreminderbookmarkletblogcard/#respond Wed, 29 Mar 2023 19:52:16 +0000 https://www.shintoko.jp/engblog/?p=7349

このブログカードの実装もつい２，３年前だったかと思うのですが、色々と見直している中で今回はPHP内のAPIで外部リンクを取得してというのを取りやめることにしました。実はここに辿り着く前に、随分と回り道をしたのですが（DOMを使った手法を見てみたり、今更ですがスクレイピングを確認してみたりと１，２週間ハマっていました。。。
　結局なのですが、どれも上手くいかず（動作が重すぎて将来性がない！など）、色々とみていたら、今時はこんなコードを記述しなくてもブログカードに必要な情報を取得できるブックマークレットによる方法があるということが、最終的に分かりました（世の中は既にこんな便利な機能がとっくにあるということを、初めて知りました…）。

はてなブログカードなどの情報

　一つはお馴染みなのですが、大変お世話になっている寝ログの下記サイトで勉強させてもらいましたが、はてなブログやその他ブラウザツールとして、一発で！ブログカードとしての情報が取得できるものが既にあるとのことです。

　つくづく自身の情報が周回遅れだと痛感してしまいます。ただ、はてなブログカードは機能としては必要十分で見た目も奇麗なのですが、iframeが使われている点、カスタマイズできない点、将来的にはてなに依存してしまうというリスクがあるとのことです。

ブックマークレットを利用した方法

あったので、どうしたものかと考えていたところ、下記のサイトで独自にブックマークレットを使用したOGP情報の取得スクリプトを公開されている方がいました。

　上記のサイトのカードはまさにiframeの懸念を解消してくれるものだったのですが、faviconが取得できない点と幾つかのサイトで動かないという事象がありました。推測するに下記サイトにあるようなCSPと呼ばれるセキュリティのためかと思われます（でも最終的にはコードを変更すると動いたので多分違うかも知れません）。

　せっかく見つけたiframeなしのブックマークレット用スクリプトでしたが、結構な頻度で稼働しないサイトが多いので、ちょっと実用的には難しいかなと思っていたところ、似たようにiframeを使わずに実装できるブックマークレットを公開されている方のサイトを見つけました。

　こちらの方のサイトのスクリプトは最初に見つけたサイトでは実装していなかったファビコン取得のコードも含まれており、本当に言うことない！内容で本当にありがとうございます。ただ、実際には上記サイトのままだと最初は稼働しなかったので、最初のサイトの方のコードと見比べてみて、下記の箇所だけ入れ替えると問題なく稼働しました！

s.src=“//j.mp/1bPoAXq”;

下記に変更

s.src = ‘//ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js’;

こちらのサイトのスクリプトですと、理由は待ったく不明なのですが、最初の方のスクリプトで稼働しなかったサイトも問題なく動くようで、こちらであれば実用的にも問題なさそうです。

ブックマークレットのタグ取得の問題点

　ただ、出力コードを生のタグで取得して記事に貼り付けると、下記サイトにあるようにWordPressの仕様としてタグが勝手に改変されるという現象が起きてしまいます。

　もちろん、上記事象に対する対策も巷に溢れているのですが、そうするとこの先のメンテも大変になるのと、タグをそのまま貼り付けると下書きの記事の表示がとんでもなくにぎやかになってしまう（下記の例）ということもあります。

ブックマークレットでショートコードを取得する方法

　そこで、タグで取得するのではなく、ショートコードで取得してショートコードをPHPで変換するということにしました。実際に記事に貼り付ける作業はタグかショートコードかの違いしかありませんので、記事編集の手間は変わりません。ショートコードとすることで、その時点で追記や修正ができるというメリットもあるかと思います。

ということで、下記のようなステップのブログカードに改変することができました！

 

ブックマークレットでショートコードを取得（JavaScript）※記事内にはこれをペースト

ショートコードから出力用のタグを取得（PHP）※従来通りfunction.phpにて出力

 

　従来の方法もショートコードを挿入してそこにURLをコピペでしたので、コピペ回数の手順としては変わらないと思います。（ブックマークレットのボタンを押す手間は、記事内へショートコードを挿入する手順と相殺ということで、結局同じでしょうか。）外部リンクと内部リンクで従来のカードと今回のカードの比較は、下記のような感じになります。

外部リンク（従来のカード）

外部リンク（今回のカード）

内部リンク（従来のカード）

内部リンク（今回のカード）

外見のデザインは下記サイトの方のcssが奇麗でしたので、全面的に参考にさせていただきました。ありがとうございます。

投稿IDをショートコードとしてJavaScriptで取り込む部分は、下記サイトの方のコードを参考にさせていただきました。ただ、最終的にはその先（ショートコードの投稿IDをPHPで変換するなど）が私の知識不足でうまく活用できず、最終的にはURLから投稿IDを取得する方法にしています。

今回作成したコード類

ほとんど上記の方々のサイトからの引用でしか作成されていませんが、一応参考までに最終的に実装したコード類を下記にメモしておきます。

ブックマークレット用JavaScript

  1. // ブックマークレット:ショートコード出力用
  2.   javascript: (function() {
  3.                 (function(d, f, s) {
  4.         s = d.createElement(“script”);
  5.         s.src = ‘//ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js’;
  6.         s.onload = function() {
  7.             f(jQuery.noConflict(!0))
  8.         };
  9.         d.body.appendChild(s)
  10.     })(document, function($) {
  11.       var obj = [];
  12.     // obj.title = $(‘title’).text(); //タイトル
  13.     obj.title = $(‘meta[property=”og:title”]’).attr(‘content’); //タイトル
  15.     obj.img = $(‘meta[property=”og:image”]’).attr(‘content’); //アイキャッチ画像
  16.     // 上記タグで取得できない場合
  17.     if(obj.img == undefined){
  18.   obj.img = ‘https://picsum.photos/160/120/?random’; //ランダム画像を表示
  19.   }
  20.     obj.desc = $(‘meta[name=”description”]’).attr(‘content’); //サイト概要
  21.     // 上記タグで取得できない場合
  22.     if(obj.desc == undefined){
  23.   obj.desc = $(‘meta[property=”og:description”]’).attr(‘content’); //サイト概要
  24.   }
  25.     obj.sitename = $(‘meta[property=”og:site_name”]’).attr(‘content’); //サイト名
  26.     // obj.key = $(‘meta[name=”keywords”]’).attr(‘content’); //キーワード
  27.     obj.url = document.URL; //URL
  28.     obj.dsurl = $(‘meta[property=”og:url”]’).attr(‘content’); //表示用URL
  29.     obj.domain = location.host; //ドメイン名
  30.     // —————————————————–
  31.     let strdesc; //obj.descを文字列型とする変数
  32.     strdesc = new String(obj.desc); //obj.descを文字列型に変換
  33.     var objdescSt = strdesc.substr( 0, 60 ); //文字数を制限して取得
  34.     // —————————————————–
  35.     const classArray = Array.from(document.body.classList); // WordPressの投稿IDとページIDを取得
  36.     const postId = classArray.filter((c) => c.startsWith(‘postid-‘)).toString().slice(7);
  37.     const pageId = classArray.filter((c) => c.startsWith(‘page-id-‘)).toString().slice(8);
  38.     // ショートコードの出力
  39.         var Stcard = ‘[sc_blogcardJS url="' + obj.url + '" title="' + obj.title + '" excerpt="' + objdescSt + '…' +
  40.                       '" sitename="' + obj.sitename + '" img="' + obj.img + '" domain="' + obj.domain + '" dsurl="' + obj.dsurl +
  41.                       '" postId="' + postId + '" pageId="' + pageId + '"]‘;
  42.         prompt(‘ブログカードのShortCodeを生成しました。’, Stcard);})})();

今回は、結構な工数（ほとんどサイトを探してトライ＆エラーしているだけですが）を使ってしまいましたが、結果的にはしばらくは使えそうなブログカードの手段を見つけることができました！

　ちなみに上記のJavaScriptのコードをブックマークレット化するのは、下記サイトで”ファイル先頭のコメントは残す”のチェックを外して成形するだけで、問題なくできました。

　ただ、下記のサイトのように自動でブックマークレット化のリンクまで生成してくれるサイトもあります。

　一応、コピペするだけの状態にしたコードのテキストを下記に記載しておきます。

  • javascript:(function(){(function(d,f,s){s=d.createElement(“script”);s.src=‘//ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js’;s.onload=function(){f(jQuery.noConflict(!0))};d.body.appendChild(s)})(document,function($){var obj=[];obj.title=$(‘meta[property=”og:title”]’).attr(‘content’);obj.img=$(‘meta[property=”og:image”]’).attr(‘content’);if(obj.img==undefined){obj.img=‘https://picsum.photos/160/120/?random’;}obj.desc=$(‘meta[name=”description”]’).attr(‘content’);if(obj.desc==undefined){obj.desc=$(‘meta[property=”og:description”]’).attr(‘content’);}obj.sitename=$(‘meta[property=”og:site_name”]’).attr(‘content’);obj.url=document.URL;obj.dsurl=$(‘meta[property=”og:url”]’).attr(‘content’);obj.domain=location.host;let strdesc;strdesc=new String(obj.desc);var objdescSt=strdesc.substr(0,60);const classArray=Array.from(document.body.classList);const postId=classArray.filter((c)=>c.startsWith(‘postid-‘)).toString().slice(7);const pageId=classArray.filter((c)=>c.startsWith(‘page-id-‘)).toString().slice(8);var Stcard=‘[sc_blogcardJS url="'+obj.url+'" title="'+obj.title+'" excerpt="'+objdescSt+'…'+'" sitename="'+obj.sitename+'" img="'+obj.img+'" domain="'+obj.domain+'" dsurl="'+obj.dsurl+'" postId="'+postId+'" pageId="'+pageId+'"]‘;prompt(‘ブログカードのShortCodeを生成しました。’,Stcard);})})();


ショートコードをブログカードに変換するPHP

　このショートコードを投稿記事内に貼り付ければOKという形にしたいため、ショートコードを読み込んでブログカードとして出力するコードをPHPでfunction.phpに記述します。これは既に前から作成していたブログカードを改造して作成してみました。実際に使っているコードは内部リンクの場合は、投稿IDを使って別コードから取得するView数などを入れ込んでいます（下記のサンプルではコメントアウトしています）。

  1. // ———————————————
  2.   // ブックマークレットで取得したショートコードからブログカードを作成
  3.   // ———————————————-
  4.   function show_blogcardJS($atts) {
  5.   extract(shortcode_atts(array(
  6.   ‘url’=>“”,
  7.   ‘title’=>“”,
  8.   ‘excerpt’=>“”,
  9.       ‘sitename’=>“”,
  10.       ‘img’=>“”,
  11.       ‘domain’=>“”,
  12.       ‘dsurl’=>“”
  13.       // ‘postId’=>””,
  14.       // ‘pageID’=>””
  15.   ),$atts));
  16.     // 内部リンクか外部リンクの判定
  17.     $homedmain = wp_parse_url( home_url(), PHP_URL_HOST );
  18.     // 内部リンクの場合
  19.     if($domain == $homedmain){
  20.       $cssjdge = “inblg”; //内部リンククラス追加
  21.       $dmbudge = “関連する記事”; //バッジ表示
  22.       $tempurl = get_template_directory_uri();
  23.       $favicon = $tempurl.‘/images/favicon.ico”‘; //ファビコン取得
  24.       $id = url_to_postid($url); // URLから投稿IDを取得
  25.       $siteinfo = get_bloginfo( ‘name’ ); // サイト情報
  26.       // $postcat = get_the_category($id); //カテゴリ取得
  27.       // $catname = $postcat[0]->name; //カテゴリ表示
  28.       // $sitename = get_bloginfo( ‘name’ ); // サイト名
  29.       // $postview = getPostViews($id); // アクセス数
  30.       // $postdate = get_the_date(‘Y年n月j日’, $id); // 投稿日
  31.       // $siteinfo = $sitename.'<span class=”article-date”><i class=”far fa-clock”></i><time>’. $postdate .'</time></span>
  32.       // <span class=”view-count”>’. $postview .'</span>’;
  33.     // 外部リンクの場合
  34.     } else {
  35.       $cssjdge = “ex”; //外部リンククラス追加
  36.       $dmbudge = $domain; //バッジ表示
  37.       $favicon = ‘https://www.google.com/s2/favicons?domain=’.$url; //ファビコン取得
  38.       $siteinfo = $dsurl .‘ | ‘. $sitename; // サイト情報
  39.     }
  40.     // var_dump($catname); // デバッグ用
  41.     // ブログカードタグ出力
  42.   $sc_Linkcard .=‘
  43.     <div id=”blogcard” class=”blogcard ‘. $cssjdge .‘”>
  44.       <a href=”‘. $url .‘” target=”_blank”>
  45.           <div class=”blogcard_thumbnail”><img src=”‘. $img .‘” alt=””><span class=”cat-data”>’. $catname .‘</span></div>
  46.           <div class=”blogcard_domain”>’. $dmbudge .‘</div>
  47.           <div class=”blogcard_content”>
  48.             <div class=”blogcard_title”>’. $title .‘</div><div class=”blogcard_excerpt”>’. $excerpt .‘…</div>
  49.             <div class=”blogcard_link”><img class=”favicon” src=”‘. $favicon .‘” alt=””>’. $siteinfo .‘</div>
  50.           </div>
  51.         <div class=”clear”></div>
  52.       </a>
  53.     </div>’;
  54.   return $sc_Linkcard;
  55.   }
  56.   //ショートコードに追加
  57.   add_shortcode(“sc_blogcardJS”, “show_blogcardJS”);

　こちらも特にオリジナルではなく、色々な方のサイトから参考にさせてもらって改造したものですので、念のため。こちらをfunction.phpにペーストすれば稼働するとは思いますが、すみませんが私自身では何もサポートはできません。

外観を整えるcssコード

　最後はcssです。以前から使っているブログカードのcssに追記する形で作っています。

  1. /* ========================================================================================= */
  2. /* ブログカード*/
  3. /* ========================================================================================= */
  4. /* ブログカード（内部リンク用）*/
  5. div#blogcard {
  6.   position: relative;
  7.   border-radius: 5px;
  8.   border: 1px solid #eeeeee;
  9.   word-wrap: break-word;
  10.   margin: 30px 40px;
  11.   box-shadow: 0 0 10px 6px rgba(0,0,0,.025);
  12.   display: block;
  13.   min-height: 8rem;
  14. }
  15. /* ブログカード（外部URL用）*/
  16. div#blogcard.ex {
  17.   background-color: #f7f7f7;
  18. }
  19. /* ブログカード（内部リンク用）*/
  20. div#blogcard.inblg {
  21.   background-color: #F4F9FD;
  22. }
  23. /* ブログカード（Booking.com-URL用）*/
  24. div#blogcard.bkg {
  25.   background-color: rgba(0,53,128,0.85);
  26. }
  27. /* ブログカード：概要説明 */
  28. div#blogcard > a > div.blogcard_content {
  29.   line-height: 0;
  30.   font-size:inherit;
  31.   letter-spacing: 0;
  32. }
  33. /* ブログカード背景色：内部リンク */
  34. div#blogcard div.blogcard.inblg {
  35.   background-color: #F4F9FD;
  36. }
  37. div#blogcard a,
  38. div#blogcard a a:visited {
  39.   color:inherit;
  40.   text-decoration: none;
  41.   opacity: 1;
  42.   transition: all 0.2s ease;
  43. }
  44. div#blogcard a:hover {
  45.   opacity: 0.6;
  46.   color: #0270BE;
  47. }
  48. /* サムネイル画像 */
  49. div#blogcard div.blogcard_thumbnail {
  50.   float: left;
  51.   padding: 15px;
  52. }
  53. /* タイトル */
  54. div#blogcard div.blogcard_title {
  55.   font-size: 1em;
  56.   font-weight: bold;
  57.   line-height: 1.4;
  58.   padding: 15px 20px 5px;
  59.   min-height: 3.5rem;
  60. }
  61. /* ブログカード（Booking.com-URL用）*/
  62. div#blogcard.bkg div.blogcard_title {
  63.   color: #fff;
  64.   padding: 17px 20px 5px 0;
  65.   min-height: 4.5rem;
  66. }
  67. /* 概要文 */
  68. div#blogcard div.blogcard_excerpt {
  69.   font-size: 0.75em;
  70.   line-height: 1.4;
  71.   padding: 0 17px 5px 20px;
  72.   min-height: 2.5rem;
  73. }
  74. /* ブログカード（Booking.com-URL用）*/
  75. div#blogcard.bkg div.blogcard_excerpt {
  76.     font-size: 0.8em;
  77.     line-height: 1.1;
  78.     padding: 0 17px 5px 20px;
  79.     color: #ccc;
  80.     min-height: 2.5rem;
  81. }
  82. div#blogcard div.blogcard_link {
  83.   font-size:0.65em;
  84.   padding:0 17px 15px 20px;
  85.   text-align: left;
  86.   height: auto;
  87. }
  88. /* ブログカード（Booking.com-URL用）*/
  89. div#blogcard.bkg div.blogcard_link {
  90.   background-color: #fff;
  91.   font-size: 1rem;
  92.   padding: 0 10px 0 0;
  93.   text-align: right;
  94.   min-height: 3rem;
  95. }
  96. div#blogcard.bkg div.blogcard_link > img {
  97.   padding: 10px 0 0 0;
  98. }
  99. div#blogcard div.blogcard_link .favicon {
  100.   margin-bottom: -4px;
  101.   margin-right: 5px;
  102. }
  103. div#blogcard div.blogcard_date {
  104.   margin-bottom: -4px;
  105. }
  106. /*サムネイル：外接トリミング*/
  107. div#blogcard div.blogcard_thumbnail img,
  108. div#blogcard div.blogcard_content img.thumbnail-in {
  109.   width: 170px;/*original 240px;*/
  110.   height:110px;/*original 160px*/
  111.   object-fit: cover;
  112. }
  113. /*サムネイル：外接トリミング*/
  114. div#blogcard div.blogcard_link > img.favicon-in,
  115. div#blogcard.inblg div.blogcard_link .favicon {
  116.   width: 18px;/*original 240px;*/
  117.   height: 18px;/*original 160px*/
  118.   object-fit: cover;
  119. }
  120. div#blogcard div.blogcard_link .icon-external-link-alt::before {
  121.   font-size:0.75em;
  122. }
  123. span.site_title-in {
  124.   font-size: 0.75rem;
  125.   font-weight: bold;
  126.   position: absolute;
  127.   color:#163957;
  128.   padding: 0 5px;
  129. }
  130. div#blogcard.inblg div.blogcard_link {
  131.   font-size: 0.75rem;
  132.   font-weight: bold;
  133.   /* position: absolute; */
  134.   color:#163957;
  135.   padding: 0 5px;
  136. }
  137. /* ========================================================================================= */
  138. /* ブログカード；ブックマークレット対応バージョンの追加*/
  139. /* ========================================================================================= */
  140. /*ブログカードのタイトル*/
  141. .blogcard .heading a{
  142. color:#524742;/*文字カラー*/
  143. font-size:20px;
  144. margin-left:10px;
  145. margin-right:10px;
  146. }
  147. /*ホバー時のエフェクト*/
  148. .blogcard:hover{
  149. transition-duration:0.2s;
  150. background:#F2F0E9;/*背景色*/
  151. -webkit-transform: translateY(-3px); /*浮かす*/
  152. -ms-transform: translateY(-3px); /*浮かす*/
  153. transform: translateY(-3px); /*浮かす*/
  154. box-shadow: 5px 5px 13px 2px rgb(0 0 0 / 10%);/*浮いた時の影*/
  155. }
  156. /*ドメインバッジ*/
  157. div#blogcard .blogcard_domain{
  158. position: absolute;
  159. font-size: 0.7rem;
  160. padding: 0 0.5em;
  161. background-color:#3e62ad;/*背景色*/
  162. transform: translateY(-50%) translateX(2.3em);
  163. color:#fff;/*文字カラー*/
  164. border-radius: 0px ;
  165. }
  166. div#blogcard.ex .blogcard_domain{
  167.   background-color:#464646;/*背景色*/
  168. }
  169. div#blogcard.inblg .blogcard_domain{
  170.   background-color:#3e62ad;/*背景色*/
  171. }
  172. /*ドメインバッジのアイコン：外部リンク用*/
  173. div#blogcard.ex .blogcard_domain::before{
  174.   font-family: ‘Font Awesome 5 Free’;
  175.   font-weight: 900;
  176.   content: ‘\f0c1’;
  177.   margin-right: 2px;
  178. }
  179. /*ドメインバッジのアイコン：内部リンク用*/
  180. div#blogcard.inblg .blogcard_domain::before{
  181.   font-family: ‘Font Awesome 5 Free’;
  182.   font-weight: 900;
  183.   content: ‘\f00c’;
  184.   margin-right: 2px;
  185. }
  186. /* 内部リンク：カテゴリ表示 */
  187. div#blogcard.inblg .cat-data {
  188.     font-size: .6rem;
  189.     position: absolute;
  190.     bottom: 1px;
  191.     left: 15px;
  192.     padding: 0.2rem 0.3rem;
  193.     color: #fff;
  194.     background-color: rgb(88,122,160,.6);
  195. }
  196. /* 内部リンク；投稿日表示 */
  197. #blogcard.inblg span.article-date {
  198.     font-size: .75rem;
  199.     color: #888888;
  200.     margin-left: 3px;
  201.     font-weight: normal;
  202. }
  203. /* 内部リンク：投稿日時表示 */
  204. #blogcard.inblg div.blogcard_link time {
  205.     margin-left: 2px;
  206. }
  207. /* ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ */
  208.     /* スマホ表示用：画面幅599pxには全て適用 */
  209. /* ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ */
  210. @media(max-width: 599px) {
  211.   html {
  212.     font-size: 15px;
  213.   }
  214.   .header-inner,
  215.   .container,
  216.   .footer-inner {
  217.     padding: .8rem;
  218.   }
  219. header#masthead hgroup{
  220.   height: 80px;
  221. }
  222.   .contents {
  223.     margin-bottom: 1rem;
  224.   }
  225. .article-list .datetime{
  226.   display: none;
  227. }
  228.   /* ——————————————————— */
  229.   /* ブログカード */
  230.   /* ——————————————————— */
  231.   div#blogcard {
  232.     margin: 10px 0;
  233.   }
  234.   div#blogcard .blogcard_thumbnail img,
  235.   div#blogcard .blogcard img.thumbnail-in {
  236.     width: 90px;
  237.     height: auto;
  238.   }
  239.   div#blogcard .blogcard_title {
  240.     font-size: 0.95em;
  241.     padding-bottom: 17px;
  242.   }
  243.   div#blogcard .blogcard_excerpt {
  244.     display: none;
  245.   }
  246.   div#blogcard div.blogcard_thumbnail img {
  247.     width: 105px;
  248.     height: 70px;
  249.   }
  250.   div#blogcard.inblg .cat-data {
  251.     bottom:auto;
  252.   }
  253.   div#blogcard div.blogcard_title {
  254.     font-size: 0.9em;
  255.   }
  256.   div#blogcard div.blogcard_link {
  257.     display: none;
  258.   }
  259. } /*＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝スマホ表示用終わり

最後に～今回のブログカードのコードの公開について

　ということで、ブログカードを改訂することができました。ただ、今回の改定はタグ出力のコード（の元になる内容をショートコード）を取得ものですので、従前の都度毎にAPIで読みにいくコードより描画等は早くなったものの、リンク先が更新された時などは内容が反映されないという仕様になります。
　ここら辺は下記の方のサイトに解説されています。ちなみにこちらの方のサイトの内容で、ショートコードで取得するブログカードは十分素晴らしいものが出来ると思われます（一点だけデメリットとして挙げられている”htmlが出て来るので編集画面が煩雑になる”ところだけが、改善されているとは言えますが）。

　今回に限らず過去のサイトの改造はほぼ色々な方のサイトを参考にさせてもらってものですので、あまりコード等は公開していなかったのですが、今回は自身でも苦労した点が参考になるかも知れないと思いましたので、公開させていただきました。コードについては素人ですので質問されても適切に回答できませんが、同じように苦労されている方の一助になれば幸いです。また、色々と参考にさせていただいたサイト様には改めてお礼申し上げます。

]]> https://www.shintoko.jp/engblog/2023/03/29/wpreminderbookmarkletblogcard/feed/ 0 7349 問い合わせフォームを”Contact Form 7″でアップデートしてみました https://www.shintoko.jp/engblog/2023/02/12/contactform7updated/ https://www.shintoko.jp/engblog/2023/02/12/contactform7updated/#respond Sun, 12 Feb 2023 16:44:56 +0000 https://www.shintoko.jp/engblog/?p=7061

先のサイトを大改造した際に「極力プラグインを使わない方針で」としていましたので、永らく問い合わせフォームもどこかの方のコピペフォームで運用していました。ただ、最近になって知ったのですが（それ自体が管理者として本当に素人な感じで情けないのですが）、問い合わせフォーム自体をスパムの踏み台にされる恐れがあるということで、もちろん最低限のプロテクトは掛けていますが、やはり万全とは言えませんので、セキュリティ上の観点から有名なプラグインである”Contact Form 7″に今更ですがアップデートしてみました。

Contact Form 7のカスタマイズ

例によって導入後の設定やカスタマイズはなかなか難しいものがありそうでしたので、下記のサイトを参考にさせていただき、基本的な設定を行っています。

 

せっかくですので、見た目をちょっとカッコよくしてみたかったので、下記のサイトのコードを参考にと眺めてみました。

 

ついでに下記のサイトも参考にさせていただき、必要なカスタマイズをしていきます。遅延の問題もあるかも知れませんので、下記サイトのプラグイン使用ページだけの読み込みコードも使わせていただきました。結局、全体のフォームとcssもこちらのサイトのコードを使わさせてもらいました。ありがとうございます。

 

reCAPTCHAによるスパム対策

その後、肝心のセキュリティ対策であるGoogleのreCAPTCHAを設定に進んだのですが、ここで結構ハマったというか悩んでしましました。このreCAPTCHA設定なのですが、１年ほど前に「技術士のツボ」のダウウンロード用（ダウウンロードマネージャー用）にv2で運用していました。ログを始めてみましたが、結構きちんと稼働したいたようです。

今回も実はインターフェース上はv2のチェックボックス形式にしたかったのですが、導入したContact Form 7の最新版はv2に対応していないなど、色々と世の潮流に抗えないところがありましたので、v3のキーを新たに作成して問い合わせフォーム用に実装しています。ここで方針としては、今回導入したContact Form 7はさておきなるべく不要なプラグインを増やしたくないのと、必要のないページにはreCAPTCHAを適用させたくないということで、下記の方針で導入しました。

  • reCAPTCHAコード自体は、Contact Form 7の機能にて実装
  • reCAPTCHAを必要なフォームだけ（今回は投稿ページにあるコメント欄と問い合わせフォームのみ）に適用
  • reCAPTCHAのバッジは基本は非表示とし、必要なページには文言を表記とする

 

ということで下記サイトを参考にさせていただきました。

 

 

さすがにまんまのコピーだけではないのですが、下記の条件分岐のページを参考にすると大体、やりたいことは出来ると思います。

 

またのバッジは一応残しつつも、消去しても対応できるように文言を表示する必要があります。下記のサイトを参考に、ヘッダーに記述してみました。

 

ヘッダーに記載があれば規約上は問題ないとのことですが、一応、ユーザーの方に明示的に理解してもらうために、reCAPTCHAを適用してみたページ（投稿ページと固定ページのコメント欄と問い合わせフォームなど）には、下記のようなバッジと文言を送信ボタンの下に表記しています。

Contact Form 7のプラグインもお問い合わせページ以外は読み込まないようにする処理も、下記サイトを参考に実装しています。

 

 

コメント欄のカスタマイズ

見ていたサイトでコメント欄のカスタマイズというものもあり、もののついてですので、下記サイトを参考にコメント欄（入力フォーム）もアップデートしてみました。

 

自分の備忘録として、ログインユーザーの場合に見慣れない２つのオプションチェックボックス表示されていました。

これはどうやらプラグインであるJetpackにある購読オプションのようで、プラグインの設定画面から下記のチェックを外すことで非表示にできます。

]]> https://www.shintoko.jp/engblog/2023/02/12/contactform7updated/feed/ 0 7061 上から出てくる固定メニューバーを実装してみました！ https://www.shintoko.jp/engblog/2023/02/08/menubarnew/ https://www.shintoko.jp/engblog/2023/02/08/menubarnew/#respond Wed, 08 Feb 2023 21:59:04 +0000 https://www.shintoko.jp/engblog/?p=6943

といっても、もちろん！？自身でこのような高度な技術は全くもって持っていないため、今回も数あるサイトの中から参考にさせていただいて実装いたしました。「固定メニューバー」と検索すると山のようにでもないとは思いますが、沢山の参考となるブログサイトが出てきます。ただし、私の場合はWordPressに実装し、かつ既に色々と構築した自己テーマを活かしつつ、かつプラグインなしで、といういつもながらの制約付きですので、条件にあうサイトを探すのにまずは苦労しました。
　基本的にはスクロールしてヘッダーメニューが上に消えた時に、上から代わりのメニューバーが表示されるという単純なものです。ただし、出てくるメニューバーにロゴを表示させたいのと、元から表示されているメニューバーとは違うコンパクトなメニューバーを表示させたかったので、単なるヘッダーメニューを固定する方式ではないコードを中心に参考にさせてもらっています。

そんな自身の知識もないのですが、我儘な要望に応えてくれるべく、ようやく見つけたサイトが下記になります。

こちらの方は配布されている？テーマに実装した内容を説明してくださっているようなので、私のようなケースには非常に参考になりました。実際のコードやファイルの場所は適宜、自分の自己テーマの構成に合わせて多少変更しましたが、ほとんど何も変更せずにそのまま実装することが出来ました！本当にありがとうございました。

今回も素人らしいミスで恥ずかしい限りですが、少々ハマったところを忘れないように備忘録として残しておきます。

追加する構成ファイルの文字コードが文字化けする（エディターのAtom上は問題ないのですが、実際にブラウザで見てみると文字化けしてました。。。）ため、新たに作成する追加ファイルは既存ファイルをコピペして使用する（文字コードの指定も未だによく分からない素人ということでしょうか。。。）

にゅるっと出てくるためのアニメーション部分

最後に上記サイトでは実装していなかった「にゅるっと出てくるためのアニメーション部分を実装」なのですが、そのままですが下記のサイトを参考にcssで実装してみました。

 

サブメニューの表示について

ここまでで、大体最初に自分が実装したかった機能とデザインが完了します。その後はサブメニューの表示なども下記のサイトを参考に整えていきます。

 

アイコンの追加など

その後は、こちらも久しぶりに使ってみたFont Awesomeで色々とアイコンを追加してみました。ただ、どうしてもいくつか欲しいアイコンがフリーのバージョン５系統では見つからなかったので、こちらも良く参考にさせてもらっているサイトなのですが、下記記事を参考に幾つかSVGアイコンを追加いたしました（こちらのサイトのfeedlyアイコンも使わさせていただいております。ありがとうございます。）

今回は上記のfeedlyに加えて、Push7というWeb通知サイトも導入してみました。その際に同じく寝ログさんからPush7のアイコンも使わせていいただいたのですが、feedlyのSVGアイコンファイルに追加するやり方は、下記サイトを参考にしています。

 

各国の国旗アイコン

後は各国駐在記などの国旗アイコンを使いたいと思い、下記サイトからflag-icon-cssというものを導入してみました。もちろん！コンパイルなどの高度な技は使えないため、CDNでのみの導入です。編集時に便利なアイコンを一覧表示してくれているサイトもあります。

 

 

一応念のためですが、上記サイトに紹介されているバージョンは少し前のようで、最新のver.6.6.6ですとcssの記述が短縮されているので注意が必要です（こちらの本家サイト？の下の方を読めば記載があるようですが）。

古いバージョンの記載

普通：<span class="flag-icon flag-icon-jp"></span>

四角：<span class="flag-icon flag-icon-jp flag-icon-squared"></span>

最新バージョンの記載

普通：<span class="fi fi-jp"></span>

四角：<span class="fi fi-jp fis"></span>

レスポンシブ対応の修正

それと今回はヘッダーメニューを改訂したのに合わせて、随分前にレスポンシブ対応したcssを今一度、見直してみました。

あまりきちんと確認したことはないのですが、一応、スマホ用とパッド用とPC用の３種類で対応させていますが、今回下記のサイトを参考にそれぞれの閾値（ブレイクポイント）を修正しています。結論としてはスマホ用は600px以下、パッド用は1024px以下でしょうか。

 

 

今回も例によって巷にある素晴らしいサイトを参考にさせてもらい、何とかメニューバーの実装をすることが出来ました！超初心者の備忘録ですが、すぐ忘れてしまう将来の自分のためと、もし誰かの参考になれば幸いです。

]]> https://www.shintoko.jp/engblog/2023/02/08/menubarnew/feed/ 0 6943 さくらサーバーからXサーバーへ移行しました https://www.shintoko.jp/engblog/2022/02/03/transfertoxserverfromsakura/ https://www.shintoko.jp/engblog/2022/02/03/transfertoxserverfromsakura/#respond Thu, 03 Feb 2022 22:39:25 +0000 https://www.shintoko.jp/engblog/?p=5986

この度、長らくお世話になった「さくらサーバー 」から、「Xサーバー 」へサーバーを移転しました。移転作業の細かい顛末は別途記事を立ち上げて備忘録として忘れないように残す予定ですが、結論から申しますと移転作業は予想以上にスムーズに（あくまで過去の悲惨な移転や更新作業と比べるとという意味ですが。。。）終わりました。誤解がないように記しますと、後述する「Xサーバー 」が提供している「WordPress簡単移行」というツールで驚くほど簡単に移行作業が完了してしまいます。ただ、私の場合はもう１０年間も続けているブログの特殊なパスの設定のせいで、このツールだけではどうしても完結できない作業と一瞬ハマったパス絡みの設定があり、本来であれば十数分で完了する移行が、実作業時間でいうと丸１日程度余計に掛かってしまったというところでしょうか。

　先述の通り私の場合は、当初は違うブログツールであるMovable TypeというCMツールでブログを作成しており、ブログ開設をした2005年からWordPressに切り替える2014年まで１０年間ほど違うブログツールでした（下記の記事を参照）。

 

　そのような理由から（本当にそれが理由なのかも今となっては定かではないのですが）、WordPressのデフォルトとは違うフォルダ構成とパーマネントリンクとなっており、唯一そこが移行の際の障害となってしまいました。こんな特殊な事情の方はまずいないかと思いますが、自分の備忘録も兼ねて移行の際の技術的な顛末は別途記事を投稿する予定です。

　ともかくも、１０年以上も特に不満もなくお世話になっていたさくらサーバーから移転するきっかけになったのは、要約すると下記の三点になりますでしょうか。

  • サーバーレスポンスの改善
  • 性能上のコストメリット（対費用効果）
  • サポートの素晴らしさ

サーバーレスポンスの改善

　一つ目の「サーバーレスポンスの改善」ですが、やはりWordPress特有の動的ページ生成に際してのサーバーレスポンスがどうにもネックとなっていると最近になって感じるようになったからです。特に2019年に欧州のポーランドに移ってからは、自宅が古いエリアのフラットということもあり、未だにADSL（一応、念のためにポーランドでも高速回線は普及していますが、自宅のエリアだけまだ対象範囲でないということです。。。）ということもあり、ネット回線の遅さはあるのですが、なおさら自宅から作業をしているとストレスを感じることが多くなりました。まあ、実際にそれが理由かどうかもはっきりと理解はしていないのですが、実際にアクセス改善の項目で、特にモバイル経由のサーバーパフォーマンスが遅いということでしょうか。
　ということで、結論から申しますと、実際にパフォーマンス診断の定番サイトのPageSpeed Insightsで移転直前のさくらサーバーと移転直後のXサーバーで比較した結果です。

移転直前のさくらサーバーでの計測結果

移転直後のXサーバーでの計測結果

　正直なところ体感的にはもっと劇的に向上したと感じていたのですが、客観的な数値上は思った程の変化はありませんでした（特にモバイル）。ただ、あくまで一つの指標に過ぎませんし、実際に早くなっているのを体感できているので、レスポンスの改善はできた！ということにしたいと思います。

性能上のコストメリット（対費用効果）

　こちらについては、１０年間お世話になっているさくらサーバーの良心的かつ全く値上げがなかったことを思うと本当に感謝しかありません。この１０年間のサーバー費用は年間で5,238円/年（437円/月）でしたので、格安の部類ではないでしょうか。対して、Xサーバーは３年間契約のプランにしましたが、年間で11,880円/年（990円/月）ということで、金額的には倍です。ただし、容量や基本的な性能を考えるとコストパフォーマンス上はXサーバーの方が上と言えますし（詳しくは下記のサイトに詳しく解説されていますので、参照ください）、どちらも月に1,000円かからない低コストという意味では、対費用効果を考えるとXサーバーはむしろお得とも言えると思います。

 

サポートの素晴らしさ

　今回、Xサーバーへの移転にあたって、当然スムーズに移転できない可能性もあったため10日間の無料お試し期間を利用して移転をしてみました（正常に移転できたのを確認して、正式に申し込んだ次第です）。その間、契約上の簡単な問い合わせを一件と先述した移転上の技術的な質問を一つメールでXサーバーのサポートにさせてもらいました。すぐに見つかるサポートのメールの問い合わせ先も良心的だと思いますが、一応、２４時間以内に返答するとは受付メールにかかれていたものの、試用期間中ですし全く返信を期待していなかったのですが、一つ目の契約上の問い合わせはもちろんですが、２つめの技術的な問い合わせについてもきちんと２４時間以内に丁寧なメールをいただくことができました。更に素晴らしいと思ったのが、最初の返信で一応、調査してみるとはあったものの、順番も後回しになるだろうし時間も忘れたころに来るだろうと期待していなかったのですが、２日と待たずにきちんと再現調査してみた旨の追加報告のメールをいただきました。

 

　もちろん、公平に申しますとさくらサーバーではサポートへの問い合わせ自体をしたことが無かったので、比較するのはフェアではないかも知れないのですが、今回移転に際して色々とWebサイトを検索している最中でもXサーバーのサポートの良さは記事で見かけていたので、実際に自分でも経験してみて納得がいったというところでしょうか。

　そもそもですが、サポートが素晴らしいのはメールでの問い合わせ対応もさることながら、Xサーバーのサポートページ（マニュアル）が充実し過ぎ！ていて、大抵の技術的な内容は第三者のブログ記事ではなく、オフィシャルページのマニュアルで必要かつ十分な説明が見つかります。

 

　とまあ、自分が移行した先のサーバーなので贔屓目に書いているのだろうとは思われてしまうでしょうし、検索すればXサーバーのサポートでも真逆の評価をされている記事やサイトも沢山見つかります。こればかりは、自分で体験してみるしかないとは思いますが、少なくても充実しているマニュアルページは会員以外でも参照できるようなので、確認することは出来るかと思います。

　ということで、長い記事になり恐縮ですが、今回のサーバー移転の経緯を簡単にまとめてみました。肝心の技術的な移転内容の顛末は、自身の備忘録も兼ねて早めにアップしたいと思います。ともかくも、少なくても向こう三年間はＸサーバーさんにお世話になりますのでよろしくお願いいたします。また１０年間もの長い間、大きな不具合もなかったさくらサーバーさんにも感謝の気持ちをお伝えしたいと思います。本当にありがとうございました！

]]> https://www.shintoko.jp/engblog/2022/02/03/transfertoxserverfromsakura/feed/ 0 5986 来年もお世話になります！アラクネカレンダー https://www.shintoko.jp/engblog/2021/12/20/arachnecalendar/ https://www.shintoko.jp/engblog/2021/12/20/arachnecalendar/#respond Mon, 20 Dec 2021 18:12:10 +0000 https://www.shintoko.jp/engblog/?p=4819

毎年の年末の恒例行事と化していますが、今年もとうとう年の瀬となり来年のカレンダーが必要になったので、例年通りですがアラクネカレンダーをダウンロードさせていただきました！今年からホームページが大分変更されたような印象がありますが、ほぼ毎年とはいえ年に一回しかアクセスしていないので、ちょっと記憶が定かではありません。このサイトのカレンダーですが、自分のパソコンのフォルダーを見てみると恐らくは2012年ごろには使わせ始めていただいたので、かれこれ10年以上も活用させてもらっているということでしょうか。もちろん！無料でダウンロードできるのですが、非常にクオリティが高くて何だか申し訳ない位の感覚で、毎年使わせてもらっています。特に駐在生活を始めて、日本のカレンダーがコンスタントに入手できない海外生活なので、なおさら重宝させていただいています。

　

　このアラクネカレンダーの素晴らしいところは、提供されている種類の豊富さは言うことがないのですが、PDFファイル上でカレンダー上の細かい情報の表示・非表示（大きさなども）をPDFレイヤーでカスタマイズできる点です。

　

　私はもっぱらA4横の月曜始まりのフォーマットスタイルのものを数字を大きくしたりして、使わさせていただいております。これを自分の部屋の机の前のマグネットボードに貼ったり、昨年からは食卓の壁に両面テープで貼り付けて活用しています。レーザープリンターで出力する手間だけですし、見やすいのでこれでカレンダー機能としては何の不自由もありません。

　このお世話になっているアラクネカレンダー以外に何かよいものはないかとたまに探すのですが、なかなか使い勝手やシンプルさからこれを超えるものが見つかりません。それでも、幾つか用途によっては良いかなーと思えたのが下記のサイトでしょうか。

・こちらは非常にデザインが可愛らしくて、お客さん用のトイレとか使ってみても良いかなーという気がしてます。

　

・ここはアラクネカレンダーの次にシンプルで、機能も遜色なさそうな感じです。もちろん、無料でダウンロードできるようです。

 

　他にはカレンダーの記事を書いていて想い出したのが、アジアに駐在していた頃は日本にも年に一度は戻れていましたし、アジアの大手都市には無印良品の店舗がある場合があったので、こんな家族用カレンダーを使っていた時期もありました。当時はA2サイズもあって、家族それぞれの予定と共通の予定を書き込めるので、これはこれで便利でした。

 

　昔はカレンダーと言えば年末年始に貰ってきたものを使っていたものですが、今は手軽にしかも無料でダウンロードできるので、本当に便利な世の中になったものです。コロナもあってなかなか日本に戻れる状況でもないため、カレンダーもコンスタントに入手できません。海外駐在が続く以上は、しばらくはまだまだお世話になりそうです。今後ともよろしくお願いいたします！

 

]]> https://www.shintoko.jp/engblog/2021/12/20/arachnecalendar/feed/ 0 4819 新Dell Note XPS13(9300) 2020年モデル！ https://www.shintoko.jp/engblog/2020/04/21/dellxps139300/ https://www.shintoko.jp/engblog/2020/04/21/dellxps139300/#respond Tue, 21 Apr 2020 21:29:46 +0000 https://www.shintoko.jp/engblog/?p=3840

コロナのお陰でオランダから出れずにポーランドに戻れる日も検討がつかないため、ノートパソコンを新規に購入することにしました。というのもコロナで休校が決まった二人の子供のインタースクールも間髪入れずに翌週からオンライン授業が開始されており、ポーランドに戻れてもパソコンが子供たちに占拠されているという事情もあります。しかも上の子の方はせっかく専用に使わせてあげているiPad Airだと授業に不便だということで、仕方なく新しいMac Airを発注したばかりです。そんなこともあり、私個人のパソコンも新調してみるということにしてみました。ポーランドの自宅でディスプレイに接続されてもはやノートPCとしての出番はほとんどないDell XPS13も既に2015年の7月に日本で購入したもので（当時の型番はNew XPS13 (9343)でした）、既に5年使っているのでよいだろうというのもあります。ちなみに自宅のXPS13は未だに現役十分ですし、本当にコンパクトで気に入っているのは言うまでもありません。ということで、今回もほぼ同じXPS13を中心に決めかけていたのですが、数年ぶりにPCを購入しようと色々とWebで情報を探ると何と今はWindows PCもタッチ式が多く、2-in-1と呼ばれる180度折り返してiPadのようにして使える機種が主流？という感じです。特に最後まで迷ったのが、HPの13インチノートPCのフラッグシップであるHP Spectre X360(2-in-1)です。こちらはデザインも奇抜で、HP自体が日本ではノートPCのシェアトップにもなっているとのことで、非常に悩みました。
　ただ、やはりDellは使い慣れていて安心感があるのと（ちなみに会社の仕事用ノートもDellの薄型業務用です）冷静に考えるとiPad Proを既に使っている身には今更一回り大きいタッチパネルを導入しても使う場面がないということもあり、旧来の普通のタッチパネルでないPC（折り返せる2-in-1と区別する意味で、クラムシェルタイプというらしいです）であるDellのフラッグシップであるXPS13(9300)にすることにしました。

今回、最後まで迷った2-in-1タイプのHP Spectre X360は、同じくフラッグシップ同士で大きさも似ているしライバル会社同士の比較機種として、色々な動画で詳細に比較情報が入手できます。ただ、個人的には同じ2-in-1同士の比較であれば理解できますが、私のように敢えてタッチパネルである2-in-1を選ばないという趣旨ではあまり比較する機種ではないようにも思えます（ちなみにXPS13の2-in-1版は別にあります）

　このXPS13(9300)ですが、ちょうどタイミングよく2020年タイプということで、ベゼルが極薄になり画面のインチが16:10と大きくなるなどのモデルチェンジ後ということもありましたので、馴染みのXPS13にしました。唯一気になったのが、USBコネクタが電源も兼ねたUSB-Cがたったの２つだけというところで、Mac Airなみなのですが、子供用に発注しているMac AIrと同じようなものだと思えばということとあくまでプライベート使用なので仕事のように外部接続する機会も少ないだろうということで割り切りました。そして、今回はいつもなら黒やシルバー系の色を選んでいたカラーをあえて白系のフロスト＆アークティックホワイトにしてみました。YouTube動画と共に色々とネット上の記事も参考にさせていただきました。

　ということで発注したのが4月最初で約２週間かけて中国から船便で到着しました。実はオランダのDellだと肝心のフロスト＆アークティックホワイトが選択できなかったので、隣国のドイツのDellへ発注して、ドイツ在住でオランダに通勤している知人にわざわざ届けてもらいました。最初は結局中国工場から出荷するのであればヨーロッパ中の国で同じラインナップにすればよいのにと、不思議に思いましたが、何か事情があるのでしょうか。

　５年前のXPS13も同様だったのですが、今回もパッケージから凝っていていわゆるApple製品と同じノリで、コンパクトでシンプルかつプレミア感満載のパッケージで開封する瞬間からわくわくさせてくれます。ここら辺はDellもセンス良く（まあフラッグシップモデルというのもあるのかと思いますが）昔の廉価版パソコンを多売していたイメージは既にありません。実際のパソコン本体も見とれるような美しいアルミ削り出しで、十分にMac Airと対抗できるのではないでしょうか（というか子供用に購入したMac Airより倍近い価格なので当然なのかも知れませんが）。早くポーランドの自宅に戻って、実機同士て比較してみたいものです。

　電源はUSB-Cで非常にコンパクトで、アダプターも小さく何よりこれらアクセサリーも高級感のあるホワイトでカラーが統一されています。そしてなによりやはり、キーボードとアームパットのグラスファイバー調のきれいなホワイトは、汚れにくそうですし英語キーボードということもあり、すっきりした印象です。極薄のベゼルもかっこよいですし、縦に視野が大きくとれる16:10のディスプレイも使い易いです。

　今回はしばらくはオランダの滞在先で使っていくことになるかと思います。久しぶりに購入したノートPCでしかも頑張ってホワイトにしてみたということもあり、今後の使い勝手なども機会を見てレポートできればと思います。

]]> https://www.shintoko.jp/engblog/2020/04/21/dellxps139300/feed/ 0 3840 ようやくブログサイトの常時SSL(https)化！ https://www.shintoko.jp/engblog/2019/10/22/blogsitehttpsssl/ https://www.shintoko.jp/engblog/2019/10/22/blogsitehttpsssl/#respond Tue, 22 Oct 2019 15:20:14 +0000 https://www.shintoko.jp/engblog/?p=3619

ヨーロッパに駐在先が変わった契機というわけではないのですが、永らく手を入れていなかったサイトのメンテナンスをしてみることにしてみました。今更、大幅なデザイン変更は荷が重いので相変わらずのデフォルトテンプレートのTwentyTwelveをアップデートし続けて使う方針は変わらないのですが、以前から気になっていたサイトのセキュリティ対策の基本でもあるSSL化（https化）を思い切って断行してみました。本来はhttps化（要はSSL化）は既に基本的な仕様とも言え、世の中のサイトを見回すと個人のブログレベルでも相当数が対応済みです。基本的にこのSSLに対応していないと通信の暗号化がなされていないと言うことなので、閲覧に来てくれている貴重な読者の方にご迷惑をかけると言うことです。完全に個人ベースの趣味とは言え、例の別ページで発信している「技術士衛生工学部門のツボ」みたいにささやかな貢献を目指して発信しているページもあるので、やはりまず先にこのSSL化を実施してみることにしました。
　本サイトのように個人レベルでドメインを取ってみてレンタルサーバーで運営しているサイトですと、SSL化で真っ先にハードルになりそうなのが、証明書の発行になるかと思います。大昔に自宅でサーバーを立ち上げていた時も何かと苦労した証明書なのですが、たまたまブログをクラウドホスティングに移してからずっと使っているレンタルサーバーのさくらが、こんな個人ブログのニーズに対応しているので、この証明書はあっさりと取得＆発行することができました。

下記がさくらの「無料SSL(Let’s Encrypt)」のリンクページです

下記はさくらのレンタルサーバーでSSL化（https化）を実施するためのプラグイン

実際にはさくらのページからだけですと、Word Pressに特化した導入手順などややこしい箇所が分かりません。そこら辺はさすがのネット社会で、検索すると山のように既にWord PressでさくらレンタルサーバーにSSL化を実施した方々の詳細な解説サイトが閲覧できます。私の場合は下記のサイトを参考に実施させていただきました（ありがとうございます！）。

Tekito Style : 【初心者向け】SSL化(HTTPからHTTPS)に切り替える方法まとめ | WordPress/さくらサーバー

ここまでは何も難しい更新は必要なく、きちんと導入手順通りに実施していけばWPのアップデート並みに簡単に終わってしまいます。問題はここからで、証明書を発行してせっかくサイトがSSL化したにも関わらず実際にはエラーが連発で、なかなかhttpsとしての保護状態に（ブラウザのアドレスの横の鍵マークが点灯しない）なってくれません。これは１０年以上も経つのに、ブログを開設して以来、セキュリティやHTML文法に無知のままで、今までいかにサイトとしての問題を放置していたかの裏返しだったともい言えますので、反省の限りです。
　そんな状態からでしたので、ブラウザの分析ツールを睨みながら一つづつ問題点を洗い出して、数日がかりでようやくブラウザの鍵マークがアクティブになる状態に持っていくことができました。その過程でいつもながらありとあらゆるサイト、特に個人ブログのメモ書きのような記事が、本当に参考になりましたので、全部ではないのですが、可能な限り参考にさせてもらったサイトをピックアップさせていただきます！

SAKURA internet : 【WordPress】常時SSL化プラグイン トラブルシューティング

Web担当屋 ブログ : 【WordPress】カスタムHTML ウィジットでエラーが出て保存できない場合の解決方法

WordPress.Org 日本語 : wp-emoji-release.min.jsによるhttpsエラー

塩焼きブログ :  WordPressの http://gmpg.org/xfn/11 は削除して良い

これらの問題点解消の過程で、ほぼブログ解説以来、永らくお世話になったきたプラグインや個人ブログサイト支援の草分けとも言えるblogpepoleなどとは、（削除する以外に問題点解消が見つからなかったので）一旦お別れの感じとなりました。もちろんこれらのプラグインやサイト側に問題があるというよりかは、私の知識不足でこれらのブログパーツやプラグインを外すことでしかエラーを解決できなかったのが原因と言えます。特にblogpeopleはブログを始めた時文よりお世話になっていたので、一時的とは言えブログパーツを全て外すのは寂しい感じです。何とか最終的には解決してまた復活させたいとは思っています。
　そんな感じで何とか二大ブラウザ？である常用しているChromeとMS Edgeについては鍵マークが点灯する状態になりましたので、一安心です。もともとはHTMLの勉強から始まって、自宅サーバー（今はクラウドに移行済み）設置、ITスキルの向上と勉強兼ねてのブログなので、今後も最新のセキュリティ対策などは頑張って勉強していきたいと思っています！

]]> https://www.shintoko.jp/engblog/2019/10/22/blogsitehttpsssl/feed/ 0 3619 建設現場に絶対に欲しい！両端レーザー測定器VH-80 https://www.shintoko.jp/engblog/2019/07/10/bilaterallaserdistancemeasurer/ https://www.shintoko.jp/engblog/2019/07/10/bilaterallaserdistancemeasurer/#respond Wed, 10 Jul 2019 15:57:52 +0000 https://www.shintoko.jp/engblog/?p=3643 Magpie VH-80 VH80 レーザー距離計 両端 距離計測器 80m 電子メジャー 角度 面積 体積 軽量 コンパクト オリジナル日本語説明書付き

以前に既に購入済みのBOSCH(ボッシュ) レーザー距離計 GLM40 【正規品】ですが、実際に建築現場で使おうとすると結構な難題にぶつかります。それは高所や離れた目標点に正確にレーザーを当てることです。建屋内の壁や天井程度であれば特に問題がないレーザーの照射も、柱や梁になった途端に結構な確率で上手く狙えないことが、ほとんどです。それを更に床に置きながらポインタを当てるというのは至難の技で、結局使い慣れた巻尺で測ったりということが多々ありました。更に私の専門である設備となると、目標点である対象物は梁や柱より更に小さくて、天井付近にある配管だったりそこにあるバルブだったりと、それらを床に測定器を置きながら狙いを定めるというのは非常に難しい技です。それでも何とかレーザー測定器を使える方法として、手を水平に伸ばして狙いを定めると可能となり、床上から手までの高さを覚えておけば大体の高さは測れると言う、レーザー測定器でありながらアナログでアバウトな測定方法をしていました。そんな時にふと思ったのは手を水平に出した測定器の下側からもレーザーが照射されて、上下両方をいっぺんに測定してくれれば、狙いを定めるのも容易ですし、正確に測れると思い、早速両端からレーザー照射が出るタイプを探してみました。
　実際に両側からレーザーが照射されて測定器の位置に拘らずに測定できれば、測定場所や測定方法が飛躍的に高まります。実際に完成後であればいざ知らず、施行中の床面などスラブが打設してあってもなかなか水平にはなっておらず、数センチの小さいレーザー測定器を水平に置いてみると言うのが至難なことであるのは、現場を経験した方であればすぐに分かるかと思います。

　きっと私程度でもそう思うのだから、世界中の大手各社から両端からレーザーが出るタイプは沢山出ているだろうとAmazonを検索してみましたが、なんと大手からは両端からレーザーが出る測定器と言うのは皆無でした。そんな中で唯一（というかこれのみ！？）Amazonでヒットした商品がこの「Magpie VH-80 VH80 レーザー距離計 両端 距離計測器」です。しかも開発？発売しているのはMagpieというベンチャー（韓国系の企業？のようです）のようで、そもそもこの商品自体がほんの1、2年前にクラウドファンディングで開発されたばかりとのことです。何だか自分の発想もちょっと惜しい？感じだったのかと思わなくもありませんでしたが、恐らくは開発されたこのMagpieという会社も、クラウドファンディングに出資した人々も私と同じように、両方からレーザーが照射されれば便利この上なく、使用の幅が広がると合点したに違いありません。

　ちなみにクラウドファンドのサイトであるMakuakeのVH-80のサイトにある説明のイラストがまさに自分が先述したように建築現場でこんな感じにあれば便利で「そうそう」という感じでしたので、拝借して下に再掲させてもらいました。

ということで、この 「VH-80」ですが、クラウドファンディングでベンチャーが開発したと言うことで、値段はちょっと高めの日本円で3万円を超えてしまいます。もう少し早く気付いていれば、私も間違いなく出資したのでしょうが残念ながら目標金額を十分に上回る金額を集めてとっくに締め切られており、商品自体が既にAmazonで手に入るぐらいですので、一歩遅かったと言う感じでしょうか。

　いづれにしても欲しいと思っていたこの両端からレーザー測定器を既に開発して発売しているのが大手ではなくネット上のクラウドファンディングと言うのが、何とも今の世の中のようで凄いやら感心するやら複雑な感じです。私でも思いつくような発想なので、大手で既に開発しているような気もしますが、意外に思いつかないことなのでしょうか！？

　もちろん！？ハイテクベンチャーらしくスマホアプリとの連携も考えられていて、スマホにログやピタゴラス計算などが出来る様になっているとのことで、それだけでも喉から手が出るほど欲しくなってしまいます！

ともかくもこの「VH-80」ですが、ちょっと高いのですがこれがあることで、現場での測定が飛躍的に便利になるのは間違いありません。まだ悩み中ですが、夏の帰省時に多分買ってしまうのかなーと思っています。買ってみたらまたレビューしたいと思います！

]]> https://www.shintoko.jp/engblog/2019/07/10/bilaterallaserdistancemeasurer/feed/ 0 3643 iPad Proをマレーシアで購入！ https://www.shintoko.jp/engblog/2019/04/10/ipadpro11inchmalaysia/ https://www.shintoko.jp/engblog/2019/04/10/ipadpro11inchmalaysia/#respond Wed, 10 Apr 2019 21:12:46 +0000 https://www.shintoko.jp/engblog/?p=3748

このiPad Proは既に昨年から販売されており最新機種でもないのですが、今までのiPad Proシリーズとは異なり、それまでの丸みを帯びたデザインから角ばった硬派なビジネスっぽい外観からまさにこれこそがProという感じのデザインです。そして何より、新型のApple Pencil第二世代が使用可能ということで、これこそが今回の最大の購入動機となりました！このApple Pencilですが、今までの旧型と異なり角ばったiPad Proの側面に磁石でピタッとくっつく仕様になっています。充電もワイヤレスでiPad本体から給電可能ということで、まさにペーパーレスのために登場した真打のiPadともいえます。という理由はともかく、今回購入に至った本当の理由は、ぼちぼち仕事のノートを本格的にデジタルに移行したいという切実な理由もありました。
　ペーパーレスというのは利便性もさることながら、継続的な記録保持という面でも大きく、実は紙のノートというのは便利で一覧性などの優位点がある反面、自分のように駐在国が変更するたびに仕事のノートを整理する身に取っては、紙の媒体だと昔のノートを持って歩くのが億劫な反面、貴重な仕事のノートを捨てることもできず、かと言って紙のノートを読み返すかというとそうでもなくという本当に悩ましい状態になってしまいます。手書きのノートもPDFにして取っておくというのもあるのですが、そんなことをしている時間も取れませんし、結局は貴重な仕事のノートもある期間を経て処分するというのが今までのパターンでした。かと言って、PCなどでテキストで打ち込むのは一見真のデジタル化のようでやはり、紙で取るノートの速さには敵いませんし、何といっても自由に赤線や蛍光ペンでハイライトするような利便性には勝てず、紙のノートから脱却できないというジレンマに陥っていました。

　そんなまっとうな理由もあり、購入を決意するに至ったのはそのペーパーレスを実現するに今までのiPad+Apple Pencilでは今一つ利便性が感じられず（特にApple Pencilの充電の手間など）躊躇していたのですが、それらをあっさり克服してくれた上に、いかにもビジネス用途といったデザイン変更に購入を決意した次第です。しかも今回からはホームボタンレスとなり、ベゼルが最小の本当のノートのような画面イメージというのも魅力的でした！と、何とも単なるデジタルガジェットの一つに過ぎないパッドで大げさなと思うでしょうが、今回のiPad Proですが、本体だけでRM 5,649.00(Cellular 512GB)もします（日本円で約15万円！）ので、ノートパソコン以上のお値段です。今回はマレーシアのApple Storeから通販で購入してみました。前回に購入したiPad Air2と同様に、通販で無料で刻印できるサービスを使って本体には前回と同じ座右の銘！である”Today is the first day of the rest of my life.”と名前を、Apple Pencilには名前を入れることが出来ました！本体はともかくもApple Pencilに名前を刻印できるのは、落とし物の時とか今後、普及してきた時の間違え防止にも便利そうです。

　実物を開封してみて感じたのは相変わらずの本体の軽さと薄さに加えて、カラーであるSpace Grayという色の単なるBlackとは違う渋みと味わいがありなかかな良いカラーというところです。専用のスマートキーボードもちょっと重くなるという欠点はありますが、こちらも充電不要で本体とはマグネットでくっつくあたりがスマートで良い感じです。ともあれ、今回購入してみたiPad Proにはまず仕事のノートをペーパーレス化するというメインのタスクを実現してみたいと思っています。今回で都合3台目のiPad購入となりましたが、今のところ初代のiPadもまだまだ現役（子供のゲーム専用機にはなっていますが。。。）ですので、我が家は３台体制で活用していきたいと思います！

]]> https://www.shintoko.jp/engblog/2019/04/10/ipadpro11inchmalaysia/feed/ 0 3748