著者:takahashi
WordPressの公式プラグイン”Jetpack”に画像遅延読み込み機能が追加！
本日、自分のメールアドレス宛に、jetpack.comからメールが来ました。
Jetpack 5.8ではスピードが改善された
Jetpack に大幅な改良を加えました。素晴らしいお知らせ: 画像の遅延読み込み機能を実装しました。この機能は、すべての方が使用できるもので、エンドユーザーがページを読み込む際の時間を短縮し、バウンスレートを減少させるのに役立ちます。
Jetpackとは、WordPressが公式で出しているインストール型WordPressの最適化プラグインです。
SaaS型のWordPressである”WordPress.com”で提供されている機能の一部を、手軽に自分のインストール型WordPressに導入することができます。
このJetpack、従来のバージョンでも、画像のキャッシュ機能を利用することはできていたのですが、今回新たに画像の遅延読み込み機能が追加されたとのこと。
早速自分のブログサイトのJetpackを更新してみました。
Jetpackの設定画面に、”Lazy load images” という項目が追加されているのでこれを有効化します。
その後、自分のブログ記事ページを開くと、ページの読み込みが終わった後にスクロールに合わせて非同期で画像が読み込まれていることがわかるかと思います。
ブログが重くなる原因の一つとして、画像などのメディアの表示が影響していることが多い、というのはよく言われる話ですが、この画像読み込みを遅延させることでブログサイトそのものの読み込み負荷を減らす、という手法を、プラグイン一つで簡単に試せるというのは非常にありがたいです。
Jetpackは便利な機能が豊富で、使いやすいので、入れておいて損はないかと思います。
是非お試しあれ！
著者:takahashi
”Chrome アプリ”がついにChromeウェブストアから姿を消す。
つい先日、Chromeウェブストアからネイティブアプリが入手できなくなりました。
“Chrome Appsが有効だった時のChromeウェブストアの画面”Qiitaから引用
現在のChromeウェブストアの画面。 再度バーからアプリの文字が消えている。
Chromeウェブストアから”アプリ”の文字が消え、拡張機能とテーマしか入手できなくなっており、検索しても、”Chrome Apps”がヒットしなくなりました。
これは以前からアナウンスされているChrome Appsの段階的な廃止によるもの。
Chrome Appsとは、Webと同じプログラミング言語で作ることができ、Chromeを通してOSネイティブのアプリとして利用できる仕組みです。
基本的にはChrome/Chromiumが動くOSであれば、どのOSでも手軽にインストールすることができました。
例としては、
Chromeリモートデスクトップ
TeamViewer Chrome版
Line Chrome版
グランブルファンタジー Chrome版
などがあります。
特にLinuxユーザーにとっては、LineなどのLinux対応の公式アプリが提供されていない中で、唯一公式のネイティブアプリが使える手段でした。
Googleは終了する理由として、実際にChrome Appsを利用しているユーザーは1%程であり、Chromeブラウザーをシンプルにするために終了させるとしています。
Google、Win/Mac/Linux向けChromeアプリを廃止へ。配布は来年後半まで、2018年前半で起動も不能に – engadget 日本語版
参照記事にもありますが、ウェブストアからはこの記事を書いている時点ですでに廃止。インストール済みのアプリについてはまだ利用が可能ですが、このChromeのChrome Apps実行機能そのものも、もう間もなくChromeから削除される予定となっています。
なお、Chrome OSでは引き続き実行可能とのことです。
簡単にクロスプラットフォームなアプリが構築・配信出来たChrome Apps、個人的にはかなり革新的だと感じていたのですが、なくなってしまうのは残念ですね。
著者:村上
【Webサイト】ローディングのGIFアイコンが手軽に作れる「Loader Generator」
読み込み中であることを表すローディング画像を使う場面は多々あるかと思いますが、今回はそのローディング画像を手軽に作ることのできるWebサイトのご紹介です。
「Loader Generator」というWebサイトで、7種類のローディング画像を自由な大きさと色で作成することができます。
それ以外にも、背景の色や回転の速度なども任意で変更できるため、サイトの色合いや雰囲気にあったローディング画像を作成することができます。
また、回転式のものだけでなく、Windowsでよく見るような、横棒のプログレスバーも生成できます。
ちょっと変わり種な、Wi-FiのGIFもあります。
こちらは「通信中」とか「接続中」の時に使えそうですね。
画像の作り方はとても簡単で、「Line」や「Circle」、「Arrow」など、お好みのデザインを選び、サイズや色などを調節するだけ。
サイズや回転のスピードはスライダーでの調節ですし、色もカラーピッカーが表示されるので、直感的に操作ができます。
左側にプレビューも表示されるので、こちらを見ながら、サイズや色の調整をしてください。
調整が終わったら、プレビュー下の「DOWNLOAD GIF」で画像をダウンロードします。
本当に簡単ですね！
ローディング画像って意外と青色が多いイメージで、時には「この色じゃない！」というときもあるので、色の指定が色コードでできると助かりますね。
また作成した画像は、ファイルサイズ2KBほどで小さめなので、扱いやすいです。
ローディング画像が必要な際は、こちらで作成してみてはいかがでしょうか。
著者:村上
【Webサイト】PDFファイルの回転・圧縮・分割・結合が簡単にできるサイト「Smallpdf」
最近、よくPDFファイルを扱うことがあるのですが、その際に便利なサイトが、こちらの「Smallpdf」。
タイトルにあるように、PDFを回転させたり、圧縮したり、複数枚のデータのPDFを1枚ずつに分割できたり、逆に複数のPDFを結合できるサイトです。
それ以外にも、PDFを画像ファイルに変換したり、PDFをエクセルやワードに変換したりもできます。
「Smallpdf」のサイトはこちらのようなレイアウト。
トップページにボタンがずらりと並んでおり、ここからやりたいことを選びます。
アイコンもシンプルだし、下に何ができる丘も簡潔に書いてあって分かりやすいですね。
そのうちの一つを選択してみるとこんな感じ。
画像は「PDFを回転」を選択した画面です。
中央に大きく、ファイルを選択するエリアがあります。
ローカルファイルだけではなく、Dropbox や Google Drive から選ぶこともできます。
ファイルを選択した後は、右回転・左回転のボタンが表示されるので、任意の回転をかけた後「変更を保存する」ボタンを押します。
すると下の画像のようなファイルダウンロードページに移動するので、ここから PDFのダウンロードをします。
また、ダウンロード以外にも、Dropbox や Google Drive へ保存したり、もしくはさらにここからワードに変換したり、作成したPDFをパスワードで保護することもできます。
さらに変換したい場合、一度トップページに戻らなくて済むのは楽ですね！
ということで、ブックマークしておくと何かと便利な「Smallpdf」でした。
これよりさらに上のサービスをご希望の方は、「Smallpdf Pro」という有料サービスもあるようなので、こちらも検討してみてはいかがでしょう？
でも、数ファイルをちょこっと使う分には、無料版で十分ですね。
著者:村上
【サイト】マストドンのclient_idとclient_secretを取得できる「Access Token Generator for Mastodon API」
マストドンのAPIを使う機会があり、既に他の方が作成してくださってあったコードを改変中していたのですが、その時にclient_id と client_secret が必要だったので、その取得方法について。
といっても取得は簡単で、こちらのサイトを利用しました。
Access Token Generator for Mastodon API
https://takahashim.github.io/mastodon-access-token/
使い方は、まずサイト左のFrom欄に、マストドンのURL、クライアント名を入力します。
クライアント名は、承認画面で表示させるアプリケーション名を入力します。
サイト名とか、アプリ名でOKです。
あとは、「Scopes」から、読み込みのみなのか、読み込み書き込みも許可するのか、と言った、マストドンAPIで行いたいことの範囲を設定します。
私は書き込みと、念のため読み込みもできるように、「read write」を選択しました。
必要事項を入力したら、あとは「Publish Access Token」のボタンをクリックするだけ！
マストドンサービスのログイン画面に切り替わるので、自分のアカウントでログイン後、連携を許可するかを訊ねられるので、連携を承認します。
その後、ページ右の Result に、access_token、client_id、client_secretが表示されます。
あとは、この取得できた client_id と client_secret を使って、利用したいマストドンAPIを実行します。
こういうID取得って案外面倒くさかったり、または大体のサービスで最初に一度くらいしか使わないので、すぐ忘れてしまうんですよね。
きっと私もすぐ忘れるだろうという事で、まとめました。
是非、ご参考にしていただければと思います。
著者:村上
【便利サイト】PNGやJPG画像を綺麗に圧縮してくれる「TinyPNG」
画像を圧縮したい、けど画質が粗くなるのはNG！というときにおすすめしたいサイトが、今回紹介する「TinyPNG」です。
Webサイトを作成する際、画像のサイズを小さくすることが重要になってきますが、このサイトを使えば、画像を圧縮しつつ、画質をほぼそのまま維持することができます。
ちなみに、私には圧縮前と圧縮後の写真の違いが全く分かりません。
TinyPNGへのリンクはこちら。
TinyPNG – Compress PNG images while preserving transparency
https://tinypng.com/
使い方はとっても簡単で、画面上部中央にある、「Drag your .png or .jpg file here!」と書かれた枠の中に、圧縮したい画像をドラッグするだけ！
もしくは、枠の中をクリックして、画像を選んでもOKです。
あとは、自動的に画像が圧縮されます。
圧縮後は画面が下記のように変わるため、「Download」をクリックして、圧縮した画像をダウンロードします。
今回の画像は、1.0MB から 246.2KB に圧縮できました。
実に 76% のサイズダウンです。
で、実際に圧縮した画像がこちら。
上がオリジナルで、下が圧縮後の写真です。
▼オリジナル
▼圧縮後
目が良い人にはわかるかもしれませんが、70% も圧縮したとは思えない画質です！
これならば、問題なくWebサイトにも利用できますね。
Webサイトの高速化にお悩みの方は、是非こちらのサイトで画像の圧縮をお試しになってはいかがでしょうか。
著者:takahashi
NginxでBASIC認証をプロキシするときの注意点
今回。hamamatsu-gnss.orgのサーバー切り替えを行ったのですが、移行先サーバでサービスの再起動後何故かBASIC認証が通らなくなる問題が発生。
80番ポートはWebページとポートを共有しているので、webサーバーとntripサーバーの前にNginxを置いて、ドメインで通信を振り分けています。
旧サーバーでは問題なく動いていたのですが、まったく同じ設定をコピーした新サーバーでは、RTKLIBからntripへ401ステータスで接続できなくなってしまいました。
ちなみに直で新サーバー側のntripへ接続すると、認証も問題なく通り、ログにも異常は見られなかったので、原因がNginxなのは間違いなさそうです。
認証の要らないsourcetableはNginx経由でも問題なく表示できたため、恐らくBASIC認証の際に必要なヘッダ情報が渡せていないのだろうと推測しました。
そこでいろいろ調べてみると、参考になりそうなサイトを発見。
Nginx を認証プロキシとして使う – Docker-docs-ja
正常にプロキシするには
proxy_pass http://example.com;
proxy_set_header Host \$http_host;
proxy_set_header X-Real-IP \$remote_addr;
proxy_set_header X-Forwarded-For \$proxy_add_x_forwarded_for;
proxy_set_header X-Forwarded-Proto \$scheme;
の記述が必要だったのですが、新サーバーの設定ファイルと見比べたところ
proxy_set_header X-Forwarded-Proto \$scheme;
の記述が抜けていることがわかりました。
この一行を追記し、Nginxをリロード、もう一度試してみると…
無事接続できました!
Nginxはプロキシする際、バックエンドへ渡すヘッダー情報を自由に指定・編集することができるので、抜けがあると今回のようなことが起きます。
Nginxでシステムを構築した際は、こういう部分も気を付けてチェックしたいですね。
いやーしかし、今回は症状がちょっと奇妙だったのでちょっとだけ焦りました…（笑
著者:takahashi
Twitterに新機能”スレッド”が追加！ 連投が公式にサポート
高橋です。
先日、Twitterに新機能が実装されました。
Twitterに新機能「スレッド」が追加される 同じテーマの連続投稿が見やすく – HUFFPOST
Twitter上では以前から140文字を超える情報をどうしてもTL上で伝えないと行けないとき、1回目のツイートに返信する形で連投する、ということがよく行われていました。
今回のアップデートで、Twitterがこの”連投”をシステムとして実装。公式WebとAndroid/iOS版公式クライアントで利用できるようになりました。
いままで、返信でつなげて登録した際、うまく返信にならずにやり直したり、見る人によっては連投ツイートを見落とされたりする可能性がありましたが、今回のアップデートでより見てもらいやすくなりそうですね。