読者です 読者をやめる 読者になる 読者になる

IMUZA.com

Joomla!によるウェブ制作, PHP, Javascript, CSS

はてなブログ

はてなブログ テーマ制作
・とことこ with Menubar
・Simple Responsive with Menubar
・Mobile-First Responsive
・Hyperspace

Joomla!

Joomla! によるウェブ制作
・テンプレート自作
・モジュール自作
・Joomla!でサイト構築

Web Tips

ウェブサイトづくりに役立つかも
・Javascript
・CSS

Windows, Linux

Windows10
Plamo Linux

【はてなブログ高速化】シェアボタン(ソーシャルボタン)を改良して読み込みを速くする

はてなブログ

はてなブログの読み込みが重い(遅い)のは、ソーシャルボタン群やブログカードに iframe を使っているからです。

ソーシャルボタンについては、「はてなブログ爆速計画=ソーシャルボタンをスクロールタイミングで遅延ロードする - IMUZA.com」などで遅延ロードを試みたのですが、もっと根本的に iframe をやめてダイレクトリンクを利用してみようと思います。

まず、考え方を整理しますと、

  1. 記事ごとのソーシャルパーツを外す
  2. ソーシャルボタンの html を入れる方法は、
    • カスタマイズ > 記事 > 記事下(上)ではトップページに表示しないので
    • html の定型を カスタマイズ > フッタ に書いておき
    • javascript で動的に各記事に書き込む
  3. 各ソーシャルボタンのシェア数を jQuery を使わず Native(素の javascript)で書く

こんな感じでやってみます。

はてなブックマーク

まず、「はてなブックマークボタンの作成・設置について - はてなブックマーク」で公式のコードを取得します。

ブックマーク数も非同期の独自コードを使いますので 非表示 とし、ボタンも最もシンプルなものにします。

<a href="http://b.hatena.ne.jp/entry/アドレス" 
  class="hatena-bookmark-button" 
  data-hatena-bookmark-title="タイトル" 
  data-hatena-bookmark-layout="simple" 
  title="このエントリーをはてなブックマークに追加">
  <img src="https://b.st-hatena.com/images/entry-button/button-only@2x.png" alt="このエントリーをはてなブックマークに追加" width="20" height="20" style="border: none;" />
</a>

<script type="text/javascript" src="https://b.st-hatena.com/js/bookmark_button.js" charset="utf-8" async="async"></script>


この内、javascript はデフォルトで読み込まれていますので削除し、記事のアドレスとタイトルは各記事から取り出し動的に書き込みます。また、アイコンも image ではなく WEBフォントのアイコンを使います。<span> はブックマークのカウント数を入れる要素です。

で、こうなります。

<div id="myShareButtons">
  <a href="" 
    class="hatena-bookmark-button" 
    data-hatena-bookmark-title="" 
    data-hatena-bookmark-layout="simple" 
    title="このエントリーをはてなブックマークに追加">
    <i class="blogicon-bookmark lg"></i>
    <span class="hatena-bookmark-count"></span>
  </a>
</div>


この html を カスタマイズ > フッタ に入れておき、javascript で各記事に挿入します。

(function(){
  var hatena_bm_get = function(url, count, callback) {
    var script = document.createElement('script');
    var callbackName = 'ExternalCallback_' + count;
    window[callbackName] = function (data){
      if(script.parentNode){
        script.parentNode.removeChild(script);
      }
      try{
        delete window[callbackName];
      }catch(e){
        window[callbackName] = null;
      }
      callback(data);
    };
    script.src = url + '&callback=' + callbackName;
    document.body.appendChild(script);
  }

  var count = 0;
  var myshareButtons = document.getElementById('myShareButtons');
  var articles = document.querySelectorAll('article');
  Array.prototype.forEach.call(articles, function(article) {
    var bm = article.querySelector('.bookmark');
    var permalink = bm.getAttribute('href');
    var title = bm.innerHTML;
    var shareButtons = myshareButtons.cloneNode(true);
    
    var hatenaButton = shareButtons.querySelector('a.hatena-bookmark-button');
    hatenaButton.setAttribute('href', 'http://b.hatena.ne.jp/entry/' + permalink);
    hatenaButton.setAttribute('data-hatena-bookmark-title', title);    
    var url = 'http://api.b.st-hatena.com/entry.count?url=' + encodeURIComponent(permalink);
    hatena_bm_get(url, count, function(data) {
      hatenaButton.querySelector('.hatena-bookmark-count').innerHTML = data;
    });
    count++;
    article.querySelector('.social-buttons').appendChild(shareButtons);
  });
  myshareButtons.parentNode.removeChild(myshareButtons);
})();


これで、はてなブックマーク数付きのシェアボタンが各記事下に挿入されます。後は、css でボタンの装飾をするだけです。

上のコードの内、ブックマーク数を読む際、クロスドメインで苦労しましたので、次回はそのあたりを書こうと思います。

その後、Facebook, Twitter, Google+ を加えれば、なんとか【はてなブログ高速化】ができそうです。

【Plamo6.1】やっと、無線lanの設定 /etc/rc.d/rc.inet1 の意味がわかりました

Windows, Linux

Plamo5.2 の時に、無線lan 接続方法が分からず、結局、/etc/rc.d/rc.inet1 の if文をコメントアウトして接続していたのですが、あらためて調べてやっと理解できました。

Plamo5.2 の記事はこちらです。

ausnichts.hatenablog.com

上の記事中の rc.inet1 の設定の流れの

  1. /proc/cmdline に<wlan>があれば設定開始、なければ有線でつなぐ

ここが間違っています。スクリプトはこうなっています。

if [ -n "`cat /proc/cmdline | grep "\<wlan\>"`" ] ; then  
  ifconfig wlan0 up  
  get_iwlist ""  
  echo "[Access Points]"  
  echo "$iwlist" | nkf -e  
  (略)

このスクリプトの \<\> をエスケープだと思い、/boot/grub/grub.cfg<wlan> と追加していたのですが、grep の manページをよく読んでみますと、

バックスラッシュ付きの特別な表現
シンボル \< とシンボル \> は、それぞれ単語の先頭と末尾の空文字列にマッチするメタ文字です。

とあります。

つまり、前後に文字のない wlan があれば無線lan の接続を開始するということになりますので、/boot/grub/grub.cfg の起動パラメータの末尾に wlan を追記しておけばいいことになります。

linux   /boot/vmlinuz-4.3.5-plamo64 root=/dev/sda2 ro  vga16 unicon=eucjp vt.default_utf8=0 panic_output=7 wlan


これで rc.inet1 の条件式の中に入ることができ、続いて、

  1. アクセスポイントをスキャンして表示
  2. /etc/wpa_supplicant.conf にプリセットされた ssid があれば表示して入力を10秒待つ
  3. ssid が入力されたら、パスフレーズ入力を待つ
  4. ssid の保存を確認、Yes なら /etc/wpa_supplicant.conf に保存
  5. wpa_supplicant -B -c /etc/wpa_supplicant.conf -i wlan0 でアクセスポイントに接続
  6. dhclient wlan0

となリ、無線lan での接続完了です。

DirectWrite を無効にできない Chrome52 で Mactype を使う

Web Tips Windows, Linux

MacType を入れているのに Chrome の文字が汚くなってしまった!


MacType を調べても問題がありませんのでどうしたのかと思いましたら、Chrome のバージョンが 52 になり、DirectWrite を無効にできなくなってしまったようです。

どうしたものかとググってみましたら、「MacTypeでDirectWriteの設定を変えるパッチ」というものを配布していらっしゃる方がみえましたので、試しに入れてみました。

silight.hatenablog.jp

MacType が効かない場合

f:id:ausnichts:20160813195916j:plain

「MacTypeでDirectWriteの設定を変えるパッチ」を入れた場合

Chrome で DirectWrite を無効にできないので、上記パッチを入れてみますと、

f:id:ausnichts:20160813200441j:plain

ユーザスタイルシートで text-stroke を追加する

もう少し太めのほうがいい場合は、ユーザスタイルシートを変更できるアドオンを入れて、

*{-webkit-text-stroke-width:0.2px;}

などと変更します。

f:id:ausnichts:20160813201340j:plain

で、再びきれいになりました。

パッチを公開されている方にほんとうに感謝ですね。

【Joomla!】 3.6.1 Update がリリースされています

Joomla!

セキュリティ・アップデートのようですので、早めにアップデートした方がいいでしょう。

www.joomla.org

と、テストサイトでアップデートしてみましたら、「接続がタイムアウトしました」とエラーが出ますね。

f:id:ausnichts:20160804173440p:plain


何度やっても同じです。

ただ、バージョンの表示は 3.6.1 と出ています。

んー、困りました。何でしょう?

とりあえずパッチファイルをダウンロードして、ftp で上書きしておくことにします。