ラピッドSSLから無料SSLへ乗り換える

昨年秋に申し込んだラピッドSSLの証明書の期限が近づいてきたため、このタイミングで無料SSLへ乗り換えることにした。備忘録として乗り換え手順を記載。

1.Wordpressにログインし、プラグイン「SAKURA RS WP SSL」を停止する。

有効化したまま作業しても問題ないのかもしれないが、乗り換え作業の過程でhttps接続できない状態が生じることを考慮し、念のため停止しておいた。

2.使用中のラピッドSSL秘密鍵と証明書のバックアップをとる

「やっぱり元の証明書に戻したい!」という事態が発生した場合に備え、使用中のラピッドSSLのバックアップをとっておく。

さくらのサーバコントロールパネルへログインし、「ドメイン/SSL設定」から証明書の「更新」ボタンをクリック。

使用中のラピッドSSLの情報が表示されるので右下にある「証明書をダウンロード」をクリック。

証明書と秘密鍵の二つをセットでダウンロードしておく。

3.ラピッドSSLを削除する

バックアップをとったら、現在使用している証明書を削除する。上記「2」の画面の一番下にある「SSL設定の全削除」ボタンをクリック。

削除に関する確認画面が出るので「確認しました」にチェックを入れて削除ボタンをクリック。これでラピッドSSLの設定は解除され、サイトはSSL化していない状態に戻る。

4.無料SSLを設定する

「ドメイン/SSL設定」から証明書の「登録」ボタンをクリック。

申し込み可能なSSLの一覧が表示されるので、その中から「無料SSL設定へ進む」をクリックする。

無料SSL「Let’s Encrypt」の利用規約が表示されるので、それを確認したら「無料SSLを設定する」ボタンをクリックする。

無料SSLが設定されたことを確認する。

5.プラグインを有効化する

https接続で、サイトとWordpressのログイン画面がきちんと表示されることを確認したら、一番最初に停止した「SAKURA RS WP SSL」を再び有効化し、httpからhttpsへのリダイレクトを設定する。

これでラピッドSSLから無料SSLへ乗り換えは無事完了。

鹿展Vol.3特設サイト公開

来月4日からスタートする、神宮前ギャラリー「鹿展 vol.3」の作家さんを紹介する特設サイト鹿展 Creators List Vol.3を公開!

今回も作品提供ができない分、サイトの方で応援させてもらう。CodyHouseの2-blocks-templateをベースに、上下にスライドする、2カラムの日めくりカレンダー的なサイト(SP版は1カラムのブロックメニューとなる。)を作ってみた。

2-blocks-templateは、左ブロック下部にあるナビゲーションボタンを押すとコンテンツが左右にスライドしていく設定になっている。これをボタンクリックで左ブロック下方向に、右のブロックは上方向にスライドしていくように変更した。

まず左ブロックに配置されているナビゲーションボタンを中央に縦並びで表示する(形状も丸にした)ようにスタイル設定を変更。

次に右ブロックの背景も、左ブロックと同じようにコンテンツごとに切り替わるように、list要素にスタイルシートを追加。


.cd-content-list > li{
  background: rgba(28,28,28,0.5);
}
.cd-content-list > li:nth-of-type(2) {
  background:url(../img/img-2.svg) no-repeat center center;
  background-size:70%;
}
   〜 以下省略 〜

そして、左右のブロックにtranslateYを使って上下方向への動きを設定する。

左ブロックの設定


   /* image block(left block) */
  .cd-image-block > ul > li {
   〜 途中省略 〜
    -webkit-transform: translateY(-100%);
    -moz-transform: translateY(-100%);
    -ms-transform: translateY(-100%);
    -o-transform: translateY(-100%);
    transform: translateY(-100%);
    -webkit-transition: -webkit-transform 0.5s;
    -moz-transition: -moz-transform 0.5s;
    transition: transform 0.5s;
  }  

  .cd-image-block > ul > li.is-selected{
    /* this is the visible item */
    position: absolute;
    -webkit-transform: translateY(0);
    -moz-transform: translateY(0);
    -ms-transform: translateY(0);
    -o-transform: translateY(0);
    transform: translateY(0);
  }

  .cd-image-block > ul > li.move-turn{
    /* this is the item hidden on the avobe */
    -webkit-transform: translateY(100%);
    -moz-transform: translateY(100%);
    -ms-transform: translateY(100%);
    -o-transform: translateY(100%);
    transform: translateY(100%);
  }

右ブロックの設定


    /* content block(right block) */
  .cd-content-block > ul > li {
   〜 途中省略 〜
    -webkit-transform: translateY(100%);
    -moz-transform: translateY(100%);
    -ms-transform: translateY(100%);
    -o-transform: translateY(100%);
    transform: translateY(100%);
    -webkit-transition: -webkit-transform 0.5s;
    -moz-transition: -moz-transform 0.5s;
    transition: transform 0.5s;
  }

  .cd-content-block > ul > li.is-selected {
    /* this is the visible item */
    position: absolute;
    -webkit-transform: translateY(0);
    -moz-transform: translateY(0);
    -ms-transform: translateY(0);
    -o-transform: translateY(0);
    transform: translateY(0);
  }

  .cd-content-block > ul > li.move-turn {
    /* this is the item hidden on the bottom */
    -webkit-transform: translateY(-100%);
    -moz-transform: translateY(-100%);
    -ms-transform: translateY(-100%);
    -o-transform: translateY(-100%);
    transform: translateY(-100%);
  }

スライドの方向を変えるだけで、サイトの印象は大きく変わる。それがスタイル設定だけでできるのだから、CSS3は便利だし面白いなと思う。
ちなみにトップページのもみじの落ちるアニメーションもスクリプトは使わず、CSS3のみ。

鹿展 Creators List Vol.3

808Monsmareサイトリニューアル

以前サイトを作成した小田原のイタリアンが箱根湯本駅前に移転・リニューアルしたのに伴い、サイトをリニューアル。今回のお店にはピザ窯があり、本場仕込みの焼きたてピザが楽しめます。

808Monsmare

写真のクオリティがとても高く、それ自体に十分訴求力があるので余計な装飾はつけず、白いお皿をイメージしたシンプルなデザインにした。

でも、ちょっと遊び心もほしいかなと、ひっそりとCSSアニメーションなんかも使ってみたり。

ワコムのペンタブレット

お誕生日のプレゼントに前々から欲しいと思っていたお絵かき用のペンタブレットを買ってもらった。本命はiPad Proだったが、それを買うならもうちょっと上乗せしてMacBook新しくしたいし、お絵かきブームのきているななちにも気軽に使わせられるものがいいし…と悩んだ結果、お気軽かつ定番のワコム ペンタブレットに決めた。

私の購入したワイヤレス(Mサイズ)には、3つのソフトウェアのダウンロードがついている。

・CLIP STUDIO PAINT PRO 2年ライセンス (イラスト&マンガ用ソフトウェア)
・Painter Essentials 6 (スケッチソフトウェア)
・AfterShot 3 (写真加工ソフトフェア)

いずれのソフトウェアもWindows、Macのどちらにも対応しているが、ダウンロードできるのは一つのOSのバージョンのみ。CLIP STUDIOをMac版で、Painter EssentialsをWindows版でダウンロードする、というようなことはできないので注意が必要だ。

私はIllustratorで使うことを前提にしていたので、3つのソフトウェアはななちにプレゼント…ということでWindows版をダウンロード。

CLIP STUDIO PAINT PROは、値段の割には性能が高いと評判が良いイラスト制作ソフトだ。自然なタッチのペンツール、多彩なペイントツール、効率的に綺麗に着色できるツールなど、入門用としては十分すぎるくらい機能が充実している。操作性も良く、小学生のななちでも十分に使いこなしている。(そして、まだ小学生のくせに中二病っぽい絵を描いている…。)

とても楽しいらしく、ななちが学校から帰ってくるとタブレットを占有されてしまう状態が続いている。

このままではななちの方がタブレットを使いこなしてしまいそうなので、私もかねてからの課題であるLINEスタンプ制作を始めることにした。

とりあえず紙にスケッチを描き、

それをワコム ペンタブレットにのせ、上からペンで線をなぞるように描く。

この時、Illustratorのツールは「ペン」ではなく「ブラシ」にしておく。そうすると描いた線が、そのままの形でパスになる。

ざっくりと輪郭を描いて色をつけ、

あとはペンツールに持ち替えて、必要に応じてアンカーポイントを追加&削除しながら形を整え、

背景とテキストを追加すれば完成。

下絵を見ながらペンツールとパスファインダーで描くよりもずっと簡単につくることができた。
でも40個の壁は高い…。(12個作った段階でもうすでに飽きている…。)

今年中には販売できるように頑張るつもり。(だいぶ低い目標。)

まとめサイトが湧いてきた

先日ブログの開設を手伝ったイモ子氏のまとめサイトが乱立してげんなりしている。激レアさんを連れて来た。に「バムン王国のエースディレクター」として出演することを告知した前日の夜あたりから、まとめサイトが現れ始め、当日の時点で5件、現在は10件以上のまとめサイトが立ち上がっている。ちょっと人気のある深夜枠のテレビに出演した、ただそれだけで、一般人なのにこんなにたくさんのまとめサイトができてしまうという事にとても驚いたし、社会におけるテレビの影響力の大きさを実感した。

情報を収集してまとめるキュレーションサイト自体は悪いものだとは思わない。私もWeb系の情報・技術についてのキュレーションサイトには日々お世話になっている。キーワードごとに情報がまとめられたキュレーションサイトを利用すれば、短時間・簡単に必要な情報にたどりつくことができるからだ。

しかし、今回湧いて出たイモ子氏のまとめサイトには大きな問題がある。それは掲載している情報がテキトーなものであるという点だ。まとめサイトの多くが、イモ子氏のブログや過去に寄稿した記事、FacebookやTwitterなどのSNSで配信された情報などを参考にして作成されているようだが、いずれのサイトもその情報の真偽を本人に確認したり、掲載の可否を問い合わせたりはしていない。そのため、まとめサイトに掲載されている情報は古いものであったり、ブロガーの予想にすぎないものだったりしている。

そんなテキトーな情報のまとめサイトを参考に、更に新しいまとめサイトが作成されることにより、ネット上には真偽不明のテキトーな情報があたかも事実であるかのように流れてしまう。これはとても恐ろしいことだ。このようなまとめサイトがもたらす弊害について、イモ子氏もブログで今回の実体験をとりあげながらわかりやすく解説しているので読んでみてほしい。

【検証】激レアさん・小野洋文(バムン王国ディレクター)経歴・家族・年収は?(by とほカメラ)

わらわらと湧いて出たまとめサイトは、キャッチーなタイトルでアクセスを集め、検索結果の上位を占めていく。その結果、一番正しい情報が掲載されている本人のブログの検索順位はどんどん下がってしまった。なんてこった…と落ち込んでいたところ、その道に強い人にGoogleに違反報告するという手段があることを教えてもらった。Search Consoleを使えば、丸パクリのまとめサイトやコピーサイトを検索結果に表示しないようにGoogleに申請することができる。Googleがそのサイトをスパムサイトだと認定してくれれば、検索順位を下げてくれるそうだ。

また、写真などを勝手に抜かれて掲載されてしまった場合などは、著作権侵害の報告フォームから、検索結果から除外してもらうよう申請することができる。ただし、この申請の際に記載した名前や内容は、全て公開(誰がどんな削除依頼したかが表示される。)されてしまうので注意が必要だ。写真一枚のために自分の個人情報を公開したくない…と、きっと多くの人が泣き寝入りしているに違いない。一度ネットに載せた写真は無断で利用される可能性があることを前提に、写真の方に予め透かしでクレジットを入れるなど事前に対策しておく方が賢い方法かもしれない。

今回の一件で感じたのは「学歴、年収、嫁」というキーワードの力だ。これらのキーワードを含むサイトが検索上位にくるということは、世間の関心は、バムン王国におけるイモ子氏の活動ではなく、年収や家族構成といった個人情報に向いているということを表している。そんなプライベートな情報、大して面白くもないし知ってどうするのだろうかと思うが、何か事件があった時に週刊誌やワイドショーがこぞって配信するのはそうしたプライベートな情報だったりする。なんともくだらないし…残念な気持ちになった。

鹿展vol.2特設サイト公開

来月3日からスタートする、神宮前ギャラリー「鹿展 vol.2」の出展作家さんを紹介する特設サイト鹿展 Creators List 2018を公開!作品提供ができない分、サイトの方で応援しようと、前から気になっていたjQueryプラグイン[Fullscreen Slit Slider]を使用し、鹿成分多めで作ってみた。

[Fullscreen Slit Slider]は、コンテンツをナビゲーションで切り替えていくスライドショーだが、画面中央にスリットが入りそこからパクッと割れて次のコンテンツに切り替わるというアニメーションがダイナミックで印象的だ。

公式ドキュメントのダウンロードはこちら。フォルダの中にはHTMLファイル2点(index.html、index2.html)、スタイルシート4点、そしてJSファイル3点が入っている。index.html(demo1)はフルスクリーンのスライダー、index2.html(demo2)はヘッダーなどに適したタイプのスライダーだ。

スリットは、縦方向と横方向の二種類あり、divタグのカスタムデータ属性(HTML5から実装)で、スリットの方向・角度・サイズなどをカスタマイズすることができる。さらに細かくスピードなどを設定したい場合はjquery.slitslider.jpのコードを編集する必要がある。

同梱されているcusttom.cssでは、アイコンやタイトルのアニメーション、切り替え時のフェードイン&フェードアウトなどを設定することができる。今回は鹿のアイコンの向きに合わせて右からのロールイン、左からのロールイン、そして中央からのズームインのアニメーションを作成してみた。(タブレットやスマホの時は幅が狭くなる分、転がり方が忙しくなってしまうので、全てズームインに設定した。)

今年の鹿展は作家さん同士のコラボ作品などもあるとのこと。お近くにお越しの際はぜひ。

鹿展 Creators List 2018

Cyberduckがつながらない

午前中までなんの問題もなく使えていたCyberduckが急に接続できなくなった。特にOSのバージョンアップをした訳でもなく、セキュリティ設定やサーバのパスワードを変えた訳でもないのに突然だ。何度接続しても「接続できません」のエラーが出てタイムアウトしてしまう。

ちなみに環境は

OS:macOS High Sierra
Cyberduck:バージョン6.4.1(APPストアで購入)

さくらもロリポップもつながらないのでサーバ側の設定ではないだろう。(ユーザページのファイルマネージャーも問題なく使えた。)最近Cyberduckの動きが重たかったので、その辺りに問題があるのかもしれない…とネットの情報を頼りに対応してみた。

1.とりあえずCyberduckを再起動
→接続できず

2.Macを再起動したのち、Cyberduckを再起動
→接続できず

3.「接続モード」を「パッシブモード」に切り替えて接続
→接続できず

4.Cyberduckの接続履歴を全て削除し、Cyberduckを再起動
接続履歴はデフォルトの状態だとどんどん溜まっていき、アプリの動きを重くする原因となる。マメに消すか、残さない設定にしておくのがよいらしい。
→アプリの動きは軽くなったが(虹色くるくる時間が短くなった)やっぱり接続できず

5.Cyberduckのブックマーク&キーチェーンで設定してあるパスワードなどを全て削除し、Cyberduckを再起動
接続設定を全部入力し直さなければならなくなるのであまりやりたくなかったのだが、昔の設定が残っているせいかもしれないと思い、泣く泣く削除してみた。
→やっぱり接続できなかった…。

6.一旦Cyberduckのアプリを削除し、Appストアから再インストールしてCyberduckを再起動
→それでもやっぱり接続できず。

このあたりでアヒルくんに見切りをつけて他のFTPクライアントに切り替えようかと本気で考え始める。APPストアでFTPアプリを探したところ、なんとYummy FTP PROが無料キャンペーンをしていた。早速入れてみてFTP接続を試したところサクサクと繋がった。こちらの使用感の詳細はまた後日。

Yummyでは問題なく接続できることから、原因はCyberduckにあることがほぼ確定となった。

もうアヒルくんに別れを告げる時なのかもしれない…と思いつつも最後にダメ元で

7.本家のダウンロードページからCyberduckをダウンロードしてアプリを起動
→何事もなかったかのように復活…。(なんだよ!)

APPストアにあるのも公式サイトにあるのも同じバージョン6.4.1のはずなのだが…。
アプリのインストール時になんらかの問題があったのだろうか。でも突然使えなくなった理由は不明のままだ。

アヒルくんには長年お世話になっているし…と、感謝の気持ちをこめてAPPストアで購入したのにこの仕打ちとは…。ちなみに、一度APPストアで買っているせいか、公式ページの無料ダウンロード版を入れても、寄付をくださいメッセージは表示されない。

インプット

今年に入ってななちはおかし作り、夫はフルーツカービングと二人とも新しいことにチャレンジしている。そんな二人に刺激され、私も何か新しいことを…と思ったものの、基本的に勤勉ではないし、好奇心も旺盛とは言い難い。なんだかんだと毎日忙しくてそういう気分にならないというのもあると思う。

しかし、このままではどんどん世界が閉じていくような気がする…という危機感的なものを感じないでもなかったので、ちょっとだけやる気スイッチを入れて自分のサイトをリニューアルしてみた。

気がつけば5年ぶりのリニューアル。Webの世界は変化のスピードが早いので、ちょっとぼーっとしているとあっという間に取り残されてしまう。「子育て中」を理由に勉強を怠っていた私は、気がつけば浦島太郎状態…ということを確か5年前にもやって大いに反省したはずなのだが…。また同じようなことをやっている。

現状に満足しているとインプットを怠りがちになる。その状態でアウトプットだけを続けていると、どんどん自分が枯渇してしまう。これは仕事でも私生活でもあてはまることだと思う。私の場合だと、仕事の場合は同じようなデザインのサイトしか作れなくなるし、私生活だと同じような献立しか思いつかなくなる。

日々マメに勉強し、インプットを怠らないようにするのが理想的であるのだろうが(夫はこのタイプ)、残念ながら私は性格的にその方法はあわないようだ。それを踏まえた上で、自分の気まぐれやる気スイッチをうまく御しながら、意識的にインプットの時間を取るようにしなくては。(…と書いておくことで自戒してみる。)

ぽぽミュージックピアノ教室リニューアル

生徒募集の再開に伴い、ぽぽミュージックピアノ教室のサイトをリニューアル。

アクセスしてくる端末がPCよりもスマホが中心になってきたので、SPサイトのデザインを修正。Bootstrapを使って作成していたのでレスポンシブにはなっていたのだが、メニューや料金表をもう少し見やすくしたいなと思っていた。この機会に少しリデザインしようとスタイル設定をいじり始めたら、Bootstrapがあるせいで思うようなスタイルにできず…。ええい、もうBootstrapをやめてしまおう!と、スタイルシートを書き直すことに。

想定より大きな工事になってしまったが、先生に見やすくなったと喜んでいただけたので満足。

https://popo-music.net/

RYO-Cateringサイト公開

先日公開した小田原駅前の海鮮料理店SAKANA CUISINE RYOの姉妹サイトRYO-Cateringを公開!

こちらはSAKANA CUISINE RYOのケータリング事業の専用サイト。基本的なデザインは本体サイトと揃える形で制作した。

お店と変わらない美味しさを届けたい…と、細かなところにまで手をかけたこだわりのお弁当が注文できる。今のところ、お品書きは魚がメインの「さかな箱」と肉がメインの「おにく箱」の二種類のみ。

追記:こちらのサイトは2018年4月27日に閉鎖しました。