「JavaScript」タグアーカイブ

html

.htaccessでのjavascriptキャッシュの有効期限が上手く設定できない時の対処

タイトル長いですね。

色々と高速化に向けてサイトを弄っていたのですが、ついに「.htaccess」に手を出そうと思います。サイトには色々なファイルがあり、それらのキャッシュ有効期限や圧縮設定などを記述できます。

普通ならばFTPでファイルをあげたり編集したりという作業が必要なのですが、wordpressは便利ですね。ブラウザ上から編集する事が出来ます。

私は「Yoast WordPress SEO」を利用して編集しました。SEOに関する細かい設定をする事ができるプラグインですよ。とってもお勧めです。

さて、「.htaccess」の記述についてですが、こちらを参考して設定させて頂きました。→WordPressサイト用の.htaccess例 | dogmap.jp

ほとんど同じ内容なので、早速本題に入りましょう。

ちゃんと設定したのに、javascriptのキャッシュが設定されない！

ご覧のように一秒になってます。なんでじゃ。なんでなんじゃ。１秒といったらほとんど意味無しですね。ファックです。

 

<ifModule mod_expires.c>
ExpiresActive On
ExpiresDefault "access plus 1 seconds"
ExpiresByType image/gif "access plus 2592000 seconds"
ExpiresByType image/jpeg "access plus 2592000 seconds"
ExpiresByType image/png "access plus 2592000 seconds"
ExpiresByType image/x-icon "access plus 2592000 seconds"
ExpiresByType text/css "access plus 604800 seconds"
ExpiresByType text/javascript "access plus 216000 seconds"
ExpiresByType application/x-javascript "access plus 216000 seconds"
ExpiresByType application/x-shockwave-flash "access plus 216000 seconds"
</ifModule>

キャッシュ設定はこんな感じです。上記サイトの物をそのまま頂きました。デフォルト設定である「1 seconds」が設定されてて「text/javascript」はスルーされているように見えますね。

解決方法ですが、こちらにありました→ExpiresByType が JavaScript に対して効かない？ | Web Design Leaves

探してみる物です。ありがとうございます。なるほど、こういう記述方法でいけるわけですね。

<ifModule mod_expires.c>
ExpiresActive On
ExpiresDefault "access plus 1 seconds"
ExpiresByType image/gif "access plus 2592000 seconds"
ExpiresByType image/jpeg "access plus 2592000 seconds"
ExpiresByType image/png "access plus 2592000 seconds"
ExpiresByType image/x-icon "access plus 2592000 seconds"
ExpiresByType text/css "access plus 604800 seconds"

ExpiresByType text/js "access plus 216000 seconds"
ExpiresByType text/javascript "access plus 216000 seconds"
ExpiresByType application/javascript "access plus 216000 seconds"

ExpiresByType application/x-javascript "access plus 216000 seconds"
ExpiresByType application/x-shockwave-flash "access plus 216000 seconds"
</ifModule>

修正したものがこちらです。javascriptの所を改行してあります。

設定できてます！！　良かった良かった。

スコアもかなり良い感じ。

 

html

ソーシャルボタンをJavaScriptではなく画像で読み込む

1秒台を目指せ！ソーシャルボタンを高速に読み込む方法を比較する » aoringo works

script.jsでgoogleアナリティクスを読み込む » aoringo works

散々迷っていたのに、結局ソーシャルボタンは画像で読み込むようにしました。

JavaScriptで公式から読み込むと時間がかかるんですよね・・・。数字が出るのは嬉しいのですが、私みたいな弱小ブログではどうせ0ばっかですよ。

JavaScriptで各種ソーシャルボタンを読み込むと3秒かかっていた

詳しくは前回の記事をご覧下さい→1秒台を目指せ！ソーシャルボタンを高速に読み込む方法を比較する » aoringo works

どれくらいの時間がかかるのか良く分かると思います。

ソーシャルボタンを読み込むだけで三秒。これはとても大きな数字です。ページを移動するたびにこれだけの時間がかかるのです。大変な事ですよ。

このストレスはページをみてくださる閲覧者に直接のしかかってきます。恐ろしい事ですね。

じゃあもう画像で読み込んじゃおうよ

というわけで本題です。それならもうJavaScriptを使用せずに、用意した画像で良いんじゃない？　ということです。

結果ですが、こうなりました。

トップページの表示速度です。わあ。ソーシャルボタンを画像で表示するだけでこんな速度出るんですね。実際、見てみるとビックリしますよ。

各種ソーシャルボタンを画像で読み込むのは簡単です。

<div class="socialset">
<!-- twitter -->
<a href="https://twitter.com/share?text=テキスト&url=アドレス" target="_blank" rel="nofollow">
<img src="画像アドレス" alt="twitter_share"/>
</a>
<!-- facebook -->
<a href="http://www.facebook.com/share.php?u=アドレス" target="_blank" rel="nofollow">
<img src="画像アドレス" alt="facebook_share"/>
</a>
<!-- google+ -->
<a href="https://plus.google.com/share?url=アドレス" target="_blank" rel="nofollow">
<img src="画像アドレス" alt="googleplus_share">
</a>
<!-- hatena -->
<a href="http://b.hatena.ne.jp/add?mode=confirm&url=アドレス&title=ページタイトル" target="_blank" rel="nofollow">
<img src="画像アドレス" alt="hatena_share">
</a>
</div>

これで読み込めます。その他のソーシャルボタンについては私は利用してないので調べてないです。もうしわけぬい。

また、ワールドプレスの場合は今表示しているページのアドレスを出力する関数がありません。なので、

<?php $url = is_single() ? get_permalink() : home_url();?>

とすると、「$url」変数に投稿ページでは現在のアドレスを。その他のページではトップページのアドレスを表示するようになります。

新規ウインドウでページを開くのと、nofollow属性は念のためつけてます。

JavaScriptでポップアップウインドウ内に投稿画面を開く

こんな奴です。小さなポップアップを出しましょう。新しいタブやウインドウよりは個人的にこっち派です。

jQuery(document).ready(function () {
jQuery(".socialset a").click(function () {
window.open(this.href, 'sosialwindow', 'width=550, height=450,personalbar=0,toolbar=0,scrollbars=1,resizable=1');
return false;
});
});

ちゃちゃっとjQueryで記述しちゃいます。socialsetクラスのリンクがクリックされたら小さなウインドウを表示するようにします。

これでソーシャルボタンの画像化終了になります。高速！　早い！

ちなみに、各種ソーシャルアイコンは→画像 – Arabiki – 上質なweb素材とソーシャルアイコン類 » aoringo works

ここで紹介している「Arabiki」様より頂きました。日本のソーシャルサービスの画像もあって素敵です。

プラグイン

要素をランダムにcss3グラデーションしてくれるjQueryプラグイン「SHARDS」が素敵オシャレ

CSS3による多層グラデーションを使った背景を作れるjQueryプラグイン・SHARDS – かちびと.net
ちょっと面白かったので備忘録。CSS3で多層グラデーションの背景を手軽に作れる、というスクリプト。jQueryに依存します。レイヤーはランダムに組まれるみたいですね。 …

katibito.netさんで取り上げられていて面白そうだったんで早速飛びつきました。

スクリプトが走ると自動で色づけしてくれるようです。

SHARDS – A jQuery plugin

公式のdemoはこちら。むっちゃオシャレんてぃです。

$('element').shards(col1,col2,highlight,levels,complexity,lightness,alpha,fullscreen);

これだけで要素をグラデーションかける事ができます。色つきクリスタルを割ったような鮮やかでシャープなグラデ。かっこいい！

要素はそれぞれ

colour 1/カラー１　　　　　　　　　　　: rgba array-> [255,255,55,.5]
colour 2/カラー2　　　　　　　　　　　　: rgba array-> [255,255,55,.5]
shade colour/グラデカラー　　　　　　　: rgba array-> [255,255,55,.5]
number of shards/重なる色の数　　　　　: integer-> 12 max:100
comlexity/複雑さ（色の変化の多さ的な）　: decimal-> .8 max:1
lightness/明るさ　　　　　　　　　　　　: integer-> 2 max:3
alpha/透明度　　　　　　　　　　　　　　: decimal-> .8 max:1
fullscreen/フルスクリーン　　　　　　　: boolean-> true

こんな感じですか。

色々いじってみたついでにdemoも用意してみました！

DEMO / test

グラデーション！ボタンで色々遊べます。動作チェックにでもどうぞ。うん、楽しかった。

コードスニペット

html – testhtml – demo用などの単発htmlファイルテンプレート

スニペット

<!DOCTYPE html>
<html>
 <head>
 <title>test</title>
 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
 <meta name="viewport" content="width=620px" />
 <style type="text/css">
 <!--
 #wrap{
 background-color: gray;
 -->
 </style>
 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
 <script type="text/javascript">
 /* jQuery v1.3.2が読み込まれているか確認 */
 $(function(){
 /* 例1 */
 if(jQuery){
 $("#res1").html("<p>jQueryは読込まれています。"+jQuery+"</p>");
 }

/* 例2 */
 if (typeof jQuery!="undefined"){
 $("#res2").html("<p>jQueryは読込まれています。typeof jQuery="+typeof jQuery+"</p>");
 }
 });
 </script>
 </head>
 <body>
 <div id="wrap">
 <div id="res1"></div>
 <div id="res2"></div>
 </div>
 </body>
 </html>

jqueryが動作してるかのチェックも同時に行う。cssもheadに直接ぶちこむ。

wordpress

スマフォでのブログ表示が崩れていたので見ている端末によって表示を変えるようにしました

はじめに

ぴゃああああー！！

実は今まで、このブログの見た目になってから主にappleのスマート端末にて表示が崩れている問題を抱えていました。解決がめんど時間を中々見つけられず今まで放置しておりましたが、今回手を加えることにしました。

閲覧している端末を識別して処理を変える

どうやら問題はスライダーにあるようでした。pcでの閲覧には特に問題ないのですが、スマートフォンなどで閲覧すると、スライダー部分の黒が下まで伸びちゃうんですね。JavaScriptの処理周りで不具合があるようです。

そもそもスライダー自体が画像を多用する関係上、野外で使用するであろうスマートフォンでの閲覧には負荷が高めです。スライダー、無くしちゃいましょ。

ユーザーエージェントによってPCとスマートフォン（iPhone / Android）を振り分ける方法いろいろ（PHP / JavaScript / .htaccess等） ｜ HTML5 – CSS3 mag

こちらのphpでの処理を参考に、「PC閲覧での表示の場合のみスライダーを表示」という形にしてみました。

  <?php
  if (is_front_page()) { //トップぺージだった場合
  $ua = $_SERVER['HTTP_USER_AGENT'];
  if ((strpos($ua, 'iPhone') === false) && (strpos($ua, 'iPod') === false) && (strpos($ua, 'Android') === false)) { //スマートフォンではなかった場合
  ?>

こういう感じです。

iphone、ipad、android、それぞれのユーザーエージェントでは無かった場合、PC用のスライダーを表示します。

お手軽ですね。

しっかりばっちり！！

コードスニペット

jQuery – slide_help – クリックで開閉する要素

単純なjqueryコードだが、頻繁に使うのでここにおいておく。

help要素などに最適。

ページを読み込むといったんhideで要素を消す。これはjavascriptが許可されてないユーザーへの配慮。

スニペット

$(function () {
    $('.subMenu').hide();
    $('#help').click(function (e) {
        $('.subMenu').slideToggle();
    });
});

.

例

↓


<input type="button" value=" 使い方 " id="help"/>
 <ol class="subMenu">
 <li>どどんとふのアドレス、部屋番号、設定されていればパスワードを入力してください。</li>
 <li>名前はどどんとふ上で結果を発言する者の名前です。</li>
 <li>お好みの表を選び、「を選択」ボタンをクリックしてください。</li>
・
・
・

.

WEB

IRCもしくはtwitter用？　webサイト紹介ブックマークレット

作業効率が加速する…無駄を省いてブログ執筆の時間を短縮しよう！私が現在使用している「ブックマークレット」6選！ | OZPAの表4
私が作業効率を上げるために、ブログ執筆の際に使用しているブックマークレットをさらしあげてみたいと思います。 …

ここで紹介されている『「開いているページのタイトル」のリンク作成』をよく使わせて頂いております。ありがとうございます。

ブックマークレットというのは、まあリンク形式で実行できるアプリケーション、といったものでして、これをお気に入りいれれば実行するだけで色々な作業が簡単になるけです。文章を灰色文字で引用してみたり、そのページのアドレスをHTMLタグで装飾したり、ですよ。

で、まあ、IRCやtwitterを利用しているとアドレスを貼り付ける機会がなかなか多い。アドレスだけ張るのはあまりにも不親切だし、わざわざページのタイトルをコピペするなんて何度手間だって話ですよね。なのでちょこっとだけ弄らせて貰いました。

続きを読む IRCもしくはtwitter用？　webサイト紹介ブックマークレット →