カテゴリー
やってみた

ブログテーマをstinger5にしてみた

Stingerとはアフィリエイターに大人気?なwordpress用のブログテーマらしい。個人で作ってるようでバージョンも少しずつ上がってて最新版がStinger5とのこと。
ソーシャル系のツールが最初から適切に配置されていたり、SEO対策に強い構造になっていたりするらしい。

インストールは、公式サイトからダウンロードしてきたzipをテーマの追加でインポートするだけ。

インストール後に「外観」の「カスタマイズ」から色を変えたり、ロゴ画像を消したり、といった感じでUI上で大体形が整う。

それ以外で気になったところはstyle.cssを書き換えた。
・ブログタイトルの文字サイズ
・ナビゲーションメニューのデザイン
とか

phpコードを触ったのは、ブログトップでサイドバーの「NEW POST」を非表示にしたぐらい。
(トップページでは最初から新着記事が並んでいるのでサイドバーのNEW POSTは要らない)
<!-- 最近のエントリ -->
<?php if( !is_front_page() ) : ?>
<h4 class="menu_underh2"> NEW POST</h4>
<?php get_template_part('newpost');?>
<?php endif; ?>
<!-- /最近のエントリ -->

カテゴリー
メモ

require.jsを使ってみた備忘録

当初はcommonJSを導入しようと思った

commonJSのModuleの部分(以下が私の認識)をぜひ使ってみたかったのだが、、、

  • 機能毎にファイルで分けてそれぞれを1モジュール化
  • モジュール内ではグローバルなexportに関数なりprototypeなりを格納
  • requireで呼び出して使用

てっきりrequireとexportの仕組みをWebアプリで実現するライブラリが用意されているのだと思い込んでいたが、そういったものは見つからず。。。(あればぜひ教えてください!)

なのでcommonJSは忘れてrequire.jsの導入に方針転換した。
いちおう方針転換の判断の理由は以下の通り

  • node.jsの開発者の方が”commonJSはもう古いよー”的な発言をしたらしい
  • commonJSの策定が思いのほか進んでない
  • なによりcommonJSを取り入れたくても入り口が分からない!
  • require.jsの具体的な情報やドキュメントが豊富

とりあえずrequire.jsを入れてみる

公式ページのドキュメント通りにmain.jsを作成して読込むモジュールの設定などをコーティング

ディレクトリ構成
js/
require.js # ダウンロードしてきたrequire.js
main.js
modules/
myMod.js
myUtil.js

'use strict'
requirejs.config({
    baseUrl: 'js/modules',
    urlArgs: 'rev=20150123a',
    paths: {
        jquery : 'jquery-1.11.1.min',
        myMod  : 'myMod',
        myUtil : 'myUtil',       
    },
    shim: {
        'myUtil': {
            deps: ['jquery']
        },
        'myMod' : {
            deps: ['jquery', 'myUtil']
        }
    }
});

//jQuery読込みと実行
requirejs(['jquery'], function($){
    if($('.TARGET').length){
        require(['myMod'], function(MyMod){
            new MyMod().init();
        });
    }
});

myMod.jsは以下のような感じ

'use strict'
define(function(){
    var myMod = function(){};
    myMod.prototype = {
        init: function() {
        }
    };
    return myMod;
});

これらを呼び出すときはhtml内で以下のようにする

  <script data-main="js/main" src="js/require.js"></script>

require.jsを使ってみて気付いた点など

1)
require.jsはモジュールを非同期で読込むということだったので、どのように動くのか気になっていた。
chromeのデバッグツールで観察すると、
require.jsを読込んだ後にmain.jsを、
main.jsないでrequireで呼ばれたモジュールを順番に一つずつ読込んでいるのを確認できた。

2)
main.jsや各モジュールを編集中にブラウザのキャッシュが聞いてなかなか変更が反映されなくなることがあった。
その解消のためにもconfigの設定でurlArgsは付けておくのが良い。ただし編集したりキャッシュが邪魔するたびにurlArgsを書き直す必要があり、なんか腑に落ちない。というか、もっと根本的な解決策があると思う。。。

3)
グローバル変数のrequirerequirejsはどういった使い分けなのだろうか?現時点では同義と理解

4)
webアプリにデプロイする際には、ロード時間の短縮や負荷削減のために全モジュールをビルドして1ファイルにしておきたい。r.jsを使えば出来るらしい?が、うまく行かなかったので要調査。

java -classpath compiler.jar:js.jar org.mozilla.javascript.tools.shell.Main r.js js/main.js
js: Couldn't read source file "js/modules/jquery-1.11.1.min.js?rev=20150123e: 
  js/modules/jquery-1.11.1.min.js?rev=20150123e (No such file or directory)".
js: uncaught JavaScript runtime exception: TypeError: $ is not a function, it is undefined.

5)
とりあえずソース全体の見通しが格段に良くなったのがよい。しばらく使いまくると思う。

カテゴリー
メモ

rbenvの備忘録

linux(debian)にrbenvを入れて使っているのだが、
毎日使うわけではないのでコマンドや設定を忘れてしまう。。

カテゴリー
やってみた

エフェクターを作ってみた (opto compulator)

demeter opto compulator clone
demeter opto compulator clone

回路図は以下の記事から頂きました

http://revolutiondeux.blogspot.jp/2012/01/demeter-compulator.html

自作エフェクター2作目ということでケースへの収納および配線はわりかしうまく行ったのではと個人的には満足しています。

14096901622892
14096901416941
14096901153250

ベースで実際弾いてみたレビュー

音の立ち上がりやサスティンの持ち上げ方は以前使っていたaphexのpunch factoryを彷彿とさせて好きですが、若干音が歪むのが気になります。
とくにアタックのプックリ感は非常に気持ちが良いだけにちょっと残念。
これってどこかの抵抗値を変更すれば解決するのかしら。
時間がある時に調べてみよう

カテゴリー
やってみた

wordpressにいいね!ボタンを付けてみた

wordpressのプラグインを利用してFacebookのいいね!ボタンなどソーシャルボタンを付けてみた。

試したのは二つ

  • Tweet, Like, Google +1 and Share
  • WP Social Bookmarking Light

個人的に出したかったボタンはFBのいいね!、tweeterのツイート、google+のプラス1、mixiのcheck!。
試したプラグインは2つともこれらを網羅している。

前者はおしいことにFBとgoogle+のボタンを押すと投稿ダイアログのデザインが崩れるバグがあった

なので、後者のプラグインを採用することに。