ホーム ブログ ページ 61

QRコード【読取】

0

この記事はアピリッツの技術ブログ「DoRuby」から移行した記事です。情報が古い可能性がありますのでご注意ください。

こんにちは。みわです。ぽつぽつと、書いていきます。

今回は、「QRコードの読み取り~余白の重要性」についてです。

QRコードを携帯電話の画面に表示させ、それを読み取らせる・・・というサービスってありますよね。 最近増えてきたんじゃないかと思います。

QRコードにはいろいろとお約束があるのですが、読み取りに関するお約束を1つ紹介します。

QRコードは、あの正方形のコードの周りに「余白」があります。

これは、QRコード生成時に指定します (フリーのツールですと、デフォルトで設定されていて変更できない場合があるかもしれませんね) 。

この余白が「最低4px」必要です。 たま~に0pxでも大丈夫なときがありますけど・・・(^^;

4px以上の余白がないと、読み取りできません。

ですから、印刷されているQRコードも周りに若干余白がありますよね。

ということで、「QRコードには余白が必要だ」というお話でした。

rubyでのhttpリクエスト

0

この記事はアピリッツの技術ブログ「DoRuby」から移行した記事です。情報が古い可能性がありますのでご注意ください。

Rubyのnet/httpライブラリとuriライブラリを用いてヘッダーカスタマイズ、読み込み時間制限を設定できるhttpリクエスト関数を作成してみたいと思います。

今回作成するもの

rubyでヘッダーカスタマイズ、読み込み時間制限を設定できるhttpリクエスト関数を作成する

今回使用するrubyライブラリ一覧

uri は rubyでURI を表す文字列から URI オブジェクトを生成することができるライブラリ

 net/httpはrubyでHTTP リクエストすることができるライブラリ

rubyライブラリuriの使用例

irb(main):001:0> require ‘uri’

=> true

irb(main):006:0> uri = URI.parse(‘http://doruby.kbmj.com/ruby_on_rails/’)

=> #<uri::http:0xb7f655b0 url:http://doruby.kbmj.com/ruby_on_rails/>

irb(main):007:0> uri.host

=> “doruby.kbmj.com”

irb(main):008:0> uri.path

=> “/ruby_on_rails/”

irb(main):009:0> uri.port

=> 80

作成したrubyのヘッダーカスタマイズ、読み込み時間制限を設定できるhttpリクエスト関数

require ‘uri’

require ‘net/http’

module Net

 class HTTP

  def HTTP.get_with_options(uri,open_timeout=nil,read_timeout=nil,headers=nil,options=nil)

   uri = URI.parse(uri) if uri.respond_to? :to_str

   begin

    start(uri.host,uri.port) do |http|

     http.open_timeout= open_timeout if open_timeout

     http.read_timeout= read_timeout if read_timeout

     path_query = uri.path + (uri.query ? ( ‘?’ + uri.query) : ”)

     res = http.get(uri.path,headers)

     return res

    end

   rescue Exception => e

    puts e

    return false

   end

  end

 end

end

作成関数使用例

http://doruby.kbmj.com/yy_on_railsに5秒で読み込みが完了しなければERRORにしたいとき

res = Net::HTTP.get_with_options(‘http://doruby.kbmj.com/yy_on_rails’,nil,5,{‘Accept-Language’ => ‘jp’})

性能・負荷テストツール「JMeter」 導入編

0

この記事はアピリッツの技術ブログ「DoRuby」から移行した記事です。情報が古い可能性がありますのでご注意ください。

はじめまして!

そろそろ2年目エンジニアのDaokaです。

今回は、私が性能・負荷テストを行うときによく使うJMeterというツールを紹介したいと思います。

JMeterとは?

jakartaプロジェクトで作られている、Webアプリ向けの性能・負荷テストツールです。無償でありながら、かなり高性能で複雑なテストシナリオを作成・実行することができます。

また、Javaの実行環境があればどのWindows/Mac/LinuxなどOSを問わず導入することができます。

JMeterでできること

無償で使える性能測定ツールとしてApache Benchというツールもありますが、JMeterはApache Benchより複雑なテストを行うことが可能です。そのほんの一例を挙げてみます。

・ Basic認証が必要なページにアクセスできる

・ スレッドごとに違うcookieを保持することができる。

・ リクエストのレスポンスを取り出して次のページのリクエストに使うことができる。

・ ヘッダーを変えることができる。(User Agentを変えて、モバイル用のページでテストを行う時などに便利)

・ 外部ファイルから値を読み込むことができる。

・ 複数台のマシーンでテストシナリオを共有することができる。

他にもたくさんできることがありますが、ここであげたのは自分が性能テストのシナリオを作成するときによく使う機能です。

これによって、複数のユーザが同時にアクセスする、書き込みなどでトークンが必要になる状況のテストを実行することができます。

JMeterのインストール

Java1.4以上実行環境があれば、インストールはとても簡単に行えます。

公式サイトのダウンロードページから、バイナリのtgzまたはzipファイルをダウンロードし、適当なディレクトリに展開すればインストール完了です。

JMeterの起動

JMeterをインストールしたディレクトリのbinに移動し、以下のコマンドを実行すればJMeterが起動します。

$ ./jmeter

Windowsの場合、jmeter.batをダブルクリックすれば起動します。

起動するとこんな感じにJMeterが立ち上がります。

http://doruby.kbmj.com/daoka_tips/files/jmeter-start.jpg

シンプルなテストシナリオを作ってみる

JMeterがインストールできたら早速テストシナリオを作成しましょう!

JMeterのテストシナリオはテスト計画に要素を追加して作っていきます。

まずは、テスト計画を選択してそこで右クリックしてみましょう。

すると下の画面のように、追加でいろいろなものを追加できるようになります。

http://doruby.kbmj.com/daoka_tips/files/jm01.jpg

まずはテスト計画の下にスレッドグループを追加してください。

スレッドグループはいくつスレッドを立ち上げるか、何秒間ですべてのスレッドを立ち上げるか、何回繰り返すかなどテスト実行の基本部分となります。これによってどのくらいのアクセスをサーバに送るかの制御を行います。*1

スレッドグループを追加、設定したらスレッドグループで右クリックして追加->サンプラー->HTTPリクエストを選択し、追加してください。

このHTTPリクエストサンプラーでHTTPリクエストの送信を行います。これによってWebページのアクセスをモデリングします。

HTTPリクエストサンプラーでは主に以下の項目を設定します。

・ Webサーバ (ホスト名またはIPアドレスを設定)

・ ポート番号 (リクエストを送る先のポートを設定)

・ プロトコール (HTTP、HTTPSなどを記述)

・ メソッド (GET/POSTを選択)

・ パス (アクセスする先のパスを記述)

・ リクエストで送るパラメータ (リクエストするときに送信するパラメータ(フォームやログインID・パスワードなど)がある場合はここに記述)

・ リクエストと一緒に送信されるファイル (ファイルアップロードなどリクエスト送信時に送るファイルがあればここに記述)

今回は下の画面のように、単純に自宅のサーバにリクエストを送るようにしてみました。

(Apacheをインストールした直後のIt Worksが出てくるだけのページですがw)*2

http://doruby.kbmj.com/daoka_tips/files/jm02.jpg

これでもテストを実行することもができますが、レスポンスの状況がどうか確認するためにリスナーを追加します。

リスナーにはいくつか種類がありますが、ここでは「結果をツリーで表示」を追加しましょう。同じくスレッドグループで右クリックし、追加->リスナー->結果をツリーで表示で追加してください。

この結果をツリーで表示は、スレッドごとに送信リクエストの内容、レスポンスの結果、レスポンスの内容が詳細に表示されます。テスト作成段階でよく使用されます。

これでテストシナリオが完成したので、保存して実行しましょう。

実行->開始でテストが実行されます。

すべてのスレッドが、指定した繰り返し回数実行すると自動的に実行終了します。

スレッドの繰り返しを無限にした場合、または何らかの事情で停止したい場合は、実行->停止を押してください。

実行するとリスナーに随時実行結果が表示されます。

結果をツリーで表示の場合は、成功したリクエストには緑色のアイコンが表示されリクエストを選択すると、リクエストごとのレスポンス時間などの詳細なデータを見ることができます。

http://doruby.kbmj.com/daoka_tips/files/jm03.jpg

今回は単純なページアクセスでJMeterのシナリオ作成の基本を紹介しました。今回くらいのテストだとApache Benchのほうが楽に作れますが、次回以降より複雑なシナリオ作成に挑戦していきたいと思います。

*1: スレッド数はあまり多すぎると実行するマシーン、負荷をかけるサーバともに大きな負担となります。また正確な結果を得られない場合もあります。スレッド数を増やすときは最初は小さい数で初め、様子をみて増やすようにしてください。また多くのスレッド数を立てる必要がある場合は、複数のマシーンで行うことも検討してください。

*2: リクエストを送るwebサーバは自分が責任取れるサーバのみにしてください

subversionのリポジトリルートの変更方法

0

この記事はアピリッツの技術ブログ「DoRuby」から移行した記事です。情報が古い可能性がありますのでご注意ください。

subversionを置いているサーバーのIPアドレスが変わった事でsubversionのリポジトリルートを変更しなければならなくなりました。

その時に行ったsubversionのリポジトリルートの変更方法を紹介します。

svnのリポジトリルートをリポジトリルートAからリポジトリルートBに変更する方法

※svnリポジトリルートパスは下記を参照

リポジトリルートA http://192.168.1.100/svn/trunk

リポジトリルートB http://192.168.1.101/svn/trunk

svnリポジトリルート変更するにはsvn switch –relocateコマンドを利用すればできます。

svn switch –relocate http://192.168.1.100/svn/trunk http://192.168.1.101/svn/trunk

[Python]遺伝的プログラミングでFizzBuzz

0

この記事はアピリッツの技術ブログ「DoRuby」から移行した記事です。情報が古い可能性がありますのでご注意ください。

社内勉強会用に遺伝的プログラミングでFizzBuzzを(作るプログラムを)つくってみました。

勉強会には間に合わなかったのでこちらで公開します。

遺伝的プログラミングの解説と例はこちらの本に載っています。

http://www.amazon.co.jp/%E9%9B%86%E5%90%88%E7%9F%A5%E3%83%97%E3%83%AD%E3%82%B0%E3%83%A9%E3%83%9F%E3%83%B3%E3%82%B0-Toby-Segaran/dp/4873113644 (redirection forbidden: http://www.amazon.co.jp/%E9%9B%86%E5%90%88%E7%9F%A5%E3%83%97%E3%83%AD%E3%82%B0%E3%83%A9%E3%83%9F%E3%83%B3%E3%82%B0-Toby-Segaran/dp/4873113644 -> https://www.amazon.co.jp/%E9%9B%86%E5%90%88%E7%9F%A5%E3%83%97%E3%83%AD%E3%82%B0%E3%83%A9%E3%83%9F%E3%83%B3%E3%82%B0-Toby-Segaran/dp/4873113644/354-1245016-3905348?ie=UTF8&*Version*=1&*entries*=0)

今回作ったスクリプトは上記の本に載っていたものをFizzBuzz用に修正したものです。Pythonで書いてあります。元々のスクリプトの機能は整数の加算、減算、乗算、if、>を組み合わせて目的にあった挙動をするプログラムを組み立てるというものでした。

今回修正した点は

  • 文字列を扱えるよう変数の型の概念を導入した。
  • 結果の出力を画像化した。

の2点です。

ソースコードはこちらから。実行にはPython2.6以降とpyDotが必要です。

genetic_fizzbuzz.py

以下、修正した主な部分の解説です。

class fWrapper:
    def __init__(self,function,child_count,name,params,type):
        self.function = function
        self.child_count = child_count
        self.name = name
        self.params = params
        self.type = type

paramsとtypeを指定して、パラメタ、戻り値の型を指定できるように修正。

def make_random_tree(pc,max_depth=4,fpr=0.5,ppr=0.6,type='object'):
    if random() < fpr and max_depth > 0:
        f = choice(flist[type])
        children = [make_random_tree(pc,max_depth-1,fpr,ppr,type=t) for t in f.params]
        return node(f,children)
    elif random() < ppr and type == 'int':
        return paramNode(randint(0,pc-1))
    elif type == 'object':
        return constNode(choice(['','fizz','buzz','fizzbuzz',randint(0,100)]));
    elif type == 'string':
        return constNode(choice(['','fizz','buzz','fizzbuzz']))
    else:
        return constNode(randint(0,100))

こちらもchildrenを作成するときに戻り値の型を指定するように修正。

mutateとcrossoverも同様の修正をしています。

定数ノードではfizz,buzz,fizzbuzzの文字を発生させる様に修正してます。

本当は文字列もランダムで発生させたかったのですが、進化にかかる時間が増えるので少し手抜きしました。

def write_jpeg(tree):
    stack = [tree]
    g = pydot.Dot()
    root = True
    while len(stack) > 0:
        node = stack.pop()
        parent_node = pydot.Node(node.name+"_"+str(id(node)))
        parent_node.set_label(node.name)
        if root:
            g.add_node(parent_node)
            root = False
        if hasattr(node,"children"):
            for child in node.children:
                stack.append(child)
                child_node = pydot.Node(child.name+"_"+str(id(child)))
                child_node.set_label(child.name)
                g.add_node(child_node)
                g.add_edge(pydot.Edge(parent_node,child_node))
    g.write_jpeg('tree.jpg',prog='dot')

新しく追加したメソッド。

ツリーを受け取って、jpeg画像を出力します。

画像の出力にはgraphvizを使っています。

一世代の個体群の数=100、最大世代交代数=5000で実行した結果が以下の画像です。

図中のif,mod,div,fizz,buzzは関数、p0はパラメータ(fizzbuzzが取る1~100の整数)、それ以外は、定数を表しています。たとえば一番左下のdivから61,11に矢印が伸びている部分はdiv(61,11)=61/11=5を表しています。

図のプログラムを、結果が定数になるような冗長な計算をはぶいてPythonで書くと以下の様になります。

if p0 % 5 > 1:
    if p0 % 3 > 1:
        return ""
    else:
        return "fizz"
else:
    return "buzz"

3、5の公倍数のときの出力ができてないのが残念ですが、おおむねfizzbuzzの動作をしています。個体群数や世代数、突然変異の発生率などを色々変えて試してみましたが、いまのところこれが最善の結果でした。

というわけで、完全な結果が得られなくて残念でしたが、変数型を導入できたので、いろいろ応用ができそうです。また何か作ったらここで公開したいと思います。

ストアドプロシージャを使ってみましょう@MySQL

0

この記事はアピリッツの技術ブログ「DoRuby」から移行した記事です。情報が古い可能性がありますのでご注意ください。

こんばんわ。ご無沙汰してます。トマトです。 今回はMySQLでストアドプロシージャを使ってみました。

■ ストアドプロシージャとは?

 一言で表すと複数のSQLを1つの要求だけで実行できる、

 ステキな機能です。

 そんなステキ機能にもメリットデメリットが有ります。

 メリット

・1つの要求だけで複数のSQLを実行できるため、ネットワークに対する負荷を軽減できる

・ 前もってサーバ上で構文解析や機械語に変換するため、処理時間を軽減できる

デメリット 

 ・ データベースごとに記述する構文に規約が有り、互換性が低い

 ・ アプリケーションとのインターフェースが変更になる場合、

   ストアドプロシージャも変更する必要が有り、メンテナンス性が悪くなる

それでは、早速使ってみる事にしましょう。

1. ストアドプロシージャを作ってみる

 とにかく作ってみる事にしましょう。今回使ってみるテーブルはこちら。

 mysql> select * from member_lists;
+------+-------+-------+
| id | name | money |
+------+-------+-------+
| 1 | hoge | 1000 |
| 2 | hoge2 | 2840 |
| 3 | hoge3 | 4789 |
| 5 | hoge5 | 1960 |
| 4 | hoge4 | 6840 |
| 6 | hoge6 | 840 |
| 7 | hoge7 | 784 |
| 8 | hoge8 | 1504 |
| 9 | hoge9 | 777 |
+------+-------+-------+

 まずは単純に

「全レコードを表示させその後 money が 1000 以上のレコードを表示する」

というストアドプロシージャを作ってみましょう。

単純に SQL を書くと

 select * from member_lists; 
select * from member_lists where money>1000;

ここまでは特に問題ないですね。

では、以上の内容のストアドプロシージャを作成し呼び出してみましょう。

 mysql> delimiter //
mysql> create procedure select_money01()
-> begin
-> select * from member_lists;
-> select * from member_lists where money>1000;
-> end
-> //
Query OK, 0 rows affected (0.49 sec)
mysql> delimiter ;

まずはデリミタを変更します。

変更しないとストアドプロシージャを作成中に ‘;’ でSQL 文を中断されてしまいます。

ストアドプロシージャの本体は begin から end までの間に記述をします。

中身は使い慣れているSQL文ですね。

そして無事ストアドプロシージャを作り終わったら

最後にデリミタを元に戻しておきましょう。

では、せっかく作ったのだから呼び出してみないとですよね。

mysql> call select_money01();
+------+-------+-------+
| id | name | money |
+------+-------+-------+
| 1 | hoge | 1000 |
| 2 | hoge2 | 2840 |
| 3 | hoge3 | 4789 |
| 5 | hoge5 | 1960 |
| 4 | hoge4 | 6840 |
| 6 | hoge6 | 840 |
| 7 | hoge7 | 784 |
| 8 | hoge8 | 1504 |
| 9 | hoge9 | 777 |
+------+-------+-------+
9 rows in set (0.00 sec)

+------+-------+-------+
| id | name | money |
+------+-------+-------+
| 2 | hoge2 | 2840 |
| 3 | hoge3 | 4789 |
| 5 | hoge5 | 1960 |
| 4 | hoge4 | 6840 |
| 8 | hoge8 | 1504 |
+------+-------+-------+
5 rows in set (0.00 sec)

Query OK, 0 rows affected (0.00 sec)

呼び出しをするときには call を使います。

ばっちり動作しますね!

しかし、今のままでは汎用性のないストアドプロシージャになってしまいますよね。

それでは少し手を加えてみましょう。

  mysql> delimiter //
mysql> create procedure select_money02(m int)
-> begin
-> select * from member_lists;
-> select * from member_lists where money>m;
-> end
-> //
Query OK, 0 rows affected (0.00 sec)
mysql> delimiter ;

money の値を引数で指定できるようにしてみました。

では早速実行。

 mysql> call select_money02(2000);
# 全レコード表示結果は省略

+------+-------+-------+
| id | name | money |
+------+-------+-------+
| 2 | hoge2 | 2840 |
| 3 | hoge3 | 4789 |
| 4 | hoge4 | 6840 |
+------+-------+-------+
3 rows in set (0.00 sec)

Query OK, 0 rows affected (0.00 sec)

今回は 2000 で指定してみました。

PHP PEAR::Net_UserAgent_Mobileで携帯端末判別

0

この記事はアピリッツの技術ブログ「DoRuby」から移行した記事です。情報が古い可能性がありますのでご注意ください。

こんにちは。cloverです。

PHPで利用する事ができるライブラリ(パッケージ)を提供しているサービスで「PEARライブラリ」というサービスがあります。

そのPEARライブラリの中で、「これ、ちょっといいなぁ」というものを見つけました。

 『Net_UserAgent_Mobile』というPEARライブラリです。

 『Net_UserAgent_Mobile』は、携帯端末の情報(キャリア・機種・識別番号)を取得し、判別することのできるライブラリです。

私の環境はPHP5なのですが、PHP4でも使えるライブラリです。(もちろんPEARがインストールされていないと使えないのですが…)

まずは、インストール

# pear install -f Net_UserAgent_Mobile

※「-f」が必要な理由は、このライブラリがまだbeta版だからです。

※もしかしたら、この時点でWarningが出ることもあります。私の場合は、PEARライブラリのチャネルが古いと言われたので、

 # pear channel-update pear.php.net

を実行しました。(本当は先にやらなきゃいけないらしいですw)

 とりあえず、これでインストール完了!

使い方は、まずライブラリを使いたいとこに

require_once(‘Net/UserAgent/Mobile.php’);

どんなメソッドが使えるかは、ソースを見てもらった方が早いのですが、例えば携帯でのアクセスか、PCからのアクセスかを判断するisMobileを使うとこんな感じで書きます。

// インスタンス作成

$agent = Net_UserAgent_Mobile::isMobile();

$test = ”;

 if($agent){ echo (“モバイルテスト”);

 } else { echo (“PCテスト”);

}

他にも、各キャリアの判別を行うisDoCoMo()、isVodafone()、isEZweb()などもあります。 PEARの公式サイトを見るとまだbetaですが、いろいろ使ってみても面白いかなって思います!

Ruby on Railsでruby-debugを使ってデバッグしよう

0

この記事はアピリッツの技術ブログ「DoRuby」から移行した記事です。情報が古い可能性がありますのでご注意ください。

こんにちは、KBMJの中平@railsエンジニアです。

今回はruby on railsのデバッグ方法を紹介しようと思います。

以前、aptanaでrailsをデバッグ実行するという記事を書いたのですが、そもそもコンソール上でのデバッグ方法を書いてないなと思ったので書きたいと思います。

いろいろなruby on rails のデバッグ方法はあると思いますが、今回は個人的に便利なデバッグな方法だと思ってる

 ruby-debugというライブラリを利用してのruby on railsのデバッグ方法を説明いたします。

ruby on rails のバージョンによって導入・利用方法が若干違いますので、分けて説明いたします。

まずRails1系の場合を書きます。

debuggerを利用するデバッグ方法


1.gem install ruby-debug

2.development.rbに

 『require ‘ruby-debug’ 

  Debugger.start 

 の2行を記述

3.デバッグしたいソースコードの場所に

  『debugger』、viewの場合は『 <% debugger %> 』

 と記述する。

4.webrickを起動(ruby script/server)して、アプリ実行


5.debuggerと書いたところでアプリが勝手に止まる(一時停止)ので


6.webrickを動かしているコンソールでデバッグ用コマンドをたたく

  • デバッグのコマンド一例
  • l[ist] ソースの表示。
  • var l[ocal] ローカル変数一覧表示。
  • pp 変数名 変数の表示。
  • f[rame] コールスタック表示
  • s[tep] ステップイン実行
  • n[ext] ステップオーバー実行
  • c[ont] 実行再開

コマンドをたたくことにより変数の一覧や実際の値を見れたり、ステップ実行してプログラムの動きを確認することができます。

その他にもデバッグ用コマンドはありますので、以下のサイト(ruby リファレンス)を参考にしてください。

http://www.ruby-lang.org/ja/man/html/debug.html

webrickじゃなくてmongrel使ってるよという人のために

mongrelをそのまま起動しても、デバッグできないので、mongrelを使ったデバッグ方法も記述します。

1.config/debug.rb とか適当なファイルを新しく作る

2.新しく作ったファイルに

  『require ‘ruby-debug’
  Debugger.start

  の2行を記述

3.mongrelを起動させる時に

以下のコマンドでmongrelを起動させると、mongrelでもdebuggerを使ってruby on railsのデバッグができるようになります。

mongrel_rails start -S config/debug.rb

4.debuggerと書いたところでアプリが勝手に止まる(一時停止)ので


5.アプリを動かしているコンソールでデバッグ用コマンドをたたく

この方法が便利なのは、デバッグを動かすスクリプトを別ファイルにしているのでデバッグをうごかしたくないときは、

monbrel_rails start 

で実行すればデバッグをしないので、ruby script/serverで動かす方法よりデバッグする・しないの切り替えが楽です。

(注意:デバッグコードは後でちゃんと消したほうがいいと思う)

Rails2.0以上の場合

rails2系は ruby-debugが正式にサポートされていますので、簡単にデバッグすることができます。

1.gem install ruby-debug 2.デバッグしたいソースコードの場所に

  『debugger』、viewの場合は『 <% debugger %> 』

 と記述する。

3.アプリをデバッグモードで起動(ruby script/server -u)して、アプリ実行

4.debuggerと書いたところでアプリが勝手に止まる(一時停止)ので


5.アプリを動かしているコンソールでデバッグ用コマンドをたたく

rails2系だとデバッグ起動オプションがあるので、rails1系を使うよりかなり楽にデバッグできますね。

ちなみにruby script/server したときにmongrelをいれてたらmongrelで起動します。 

ruby-debugを利用してデバッグ作業を行うと、ruby on railsのデバッグが簡単になると思いますので、ぜひ皆さんも試してみてはいかがでしょうか?

Firefox + Greasemonkey + AutoPagerize でページ閲覧時のストレスを軽減しよう

0

この記事はアピリッツの技術ブログ「DoRuby」から移行した記事です。情報が古い可能性がありますのでご注意ください。

みなさま、はじめましてえーきち。。です。

このブログではprogramに特化した話題より

有益なtipsや各種ツールの話題をつらつら書いていこうと思います。

そんな内容ですので

みなさま気楽に目を通していただければと思います。

今日紹介するのは「firefox」+「Greasemonkey」+「AutoPagerize」を使った

ページ閲覧時のストレス軽減tipsです。

googleなど何らかのページを検索+表示した際には

通常、ページ下部まで移動したあと”次へ”や”2ページ目”を押下し遷移する必要がありますが

これを使うとページ下部に、先に読み込んだ次の候補のページ、を表示してくれるものです。

では詳細を

firefox:http://mozilla.jp/firefox/
firefoxはブラウザソフトですね。
カスタマイズが非常に強力なブラウザですが詳しい説明は省きます。

greasemonkey:https://addons.mozilla.org/ja/firefox/addon/748
greasemonkeyはfirefoxのアドオン。
各種javascriptなどと組み合わせてwebページを体裁をととのえたりできます。
 firefoxで上記のURLにアクセス、
 ページ内のインストールボタンを押すと
 インストールの許可を求めてきますので許可(インストール)します。
 その後firefoxの再起動。
greasemonkey"だけ"では特に何ら変化はありません。


AutoPagerize:http://userscripts.org/scripts/show/8551
AutoPagerizeはgreasemonkey用のスクリプトで
今回の紹介した機能を実現するメインのものです。
 上記のURLにアクセス、
 右側のinstallをクリックしてインストールします。

これでgoogleやyahoo、ニコニコ動画などでスクロールボタン一つで
快適にページを閲覧することができます。

AutoPagerizeを見るとわかるように

http://wedata.net/databases/AutoPagerize/items.json

のファイルに書かれたsiteinfoを読み込んでいるのですが

何らかの原因で上記サイトが落ちてるとも限りません。

ですのでミラーサーバを用意してくれる親切な方々もいてますので

そこも登録しておきましょう。

firefox:[ツール]-[Greasemonkey]-[ユーザスクリプトの管理]
AutoPagerizeを"編集"、テキストエディタは任意で、、、

31行目あたりに
var SITEINFO_IMPORT_URLS = [
    'http://wedata.net/databases/AutoPagerize/items.json',
]
とあるのでこれを

var SITEINFO_IMPORT_URLS = [
    'http://wedata.net/databases/AutoPagerize/items.json',
---*ここから
    'http://ss-o.net/databases/AutoPagerize/items.json',
---*ここまで追加
]

もしくは

var SITEINFO_IMPORT_URLS = [
    'http://wedata.net/databases/AutoPagerize/items.json',
---*ここから
    'http://utatane.appjet.net/databases/AutoPagerize/items.json', 
---*ここまで追加
]

としましょう。

さらに、ここに登録されてないがよく見るサイトや

自社関連のサイトも使えるようにしたくなりますし

またすべてのミラーサーバが使えない場合も考え

ローカルに記載する方法が以下となります。

これも先ほどと同じく
firefox:[ツール]-[Greasemonkey]-[ユーザスクリプトの管理]
AutoPagerizeを"編集"、テキストエディタは任意で、、、

※例としてgoogleを登録
var SITEINFO = [
---*ここから
    {
        url:          'http://.*google.+/',
        nextLink:     'id("nav")//td[last()]/a',
        pageElement:  'id("res")/div',
        exampleUrl:   'http://www.google.com/search?q=nsIObserver',
    },
---*ここまで追記
]

以上、長くなりましたが紹介となります。

エンジニアに限らずみなさまに使っていただけるtipsですので

みなさまぜひ試してください。

アクセス解析で見るユーザビリティ -目的のコンテンツへの道筋を整えよう!-

0

この記事はアピリッツの技術ブログ「DoRuby」から移行した記事です。情報が古い可能性がありますのでご注意ください。

こんにちは。アクセス解析チームの大山です。

アクセス解析を行うことで、ユーザの様々行動履歴を追うことができます。

ユーザにはそれぞれの目的があります。

制作側はそれぞれの目的までの道筋を用意していると思いますが、

思惑通りの動きをしてくれるユーザはそういません。

結果、多くのユーザは目的ページにもたどり着かず離脱しているのではないでしょうか。

【?】なぜ制作側が用意した道筋を辿ってくれないの・・・?

【!】道中にユーザビリティへの配慮が足りていないページの存在が考えられます。

【?】そこはどこ・・・?

【!】アクセス解析を使った問題ページ発見方法と改善案をお教えします!

 ※ ユーザの行動履歴を追うことの重要性はコチラ

   「アクセス解析の重要性 時代はAIDMAからAISCEASへ」

目的のコンテンツへの道筋を整えよう!

■問題ページ発見方法

「滞在時間が長いページの離脱率を調べよう!」

①まずはアクセス解析ツールで滞在時間の長いページをピックアップ。

 ※ユーザの目的となるページやコンバージョンの発生するページは

  じっくり見てもらう必要があるので除外。

②ピックアップしたページの離脱率を調べましょう。
③ピックアップしたページを実際に数人で閲覧し目的達成までの
 各ページの時間を計ってみます。
④製作者が必要とした滞在時間とユーザの滞在時間を比較し、
 問題ページを洗い出しましょう。

「滞在時間が長いページ=人気ページ」と思いがちですが、

本当は迷子になって立ち止まっているだけかもしれません。

立ち止まっても、目的への道筋を見つけられるのであれば問題視することはありません。

けれど立ち止まって、元の位置に戻ることもできず帰ってしまうユーザが多いページがあれば、

そこが問題ページです。

■GoogleAnalyticsでの見方

図)「コンテンツ」にある「上位のコンテンツ」をクリック。デフォルトではページビューの多い順に

  並んでいます。ページビューが多く平均ページ滞在時間に注意するべし。

  離脱率も同時に見れます。

図)滞在時間の長いページを確認するには「平均ページの滞在時間」をクリックすると、

  滞在時間でソートされます。

■道筋を整えるための改善案

問題ページである理由と合わせて、改善策を考えてみましょう。

・ユーザが立ち止まる理由

①トップページに戻れない

②今どこにいるのかわからない

③カテゴリ名称が分かり辛い

①トップページに戻れない

トップページはリンク数が多いのが一般的であることから、ほとんどのユーザは

戻れば何とかなると思う傾向があります。

トップページにすら戻ることができないとわかった瞬間、ユーザはどれほどガッカリするでしょうか。

場合によっては離脱の原因にもなりかねません。

すぐにトップページに戻れる手段があることを、どのようなユーザにも分かりやすくする

伝える必要があります。

経験が少ないユーザほど次のような行動特性があるといわれています。

・検索エンジンの表示結果と同様にページの上部に必要な情報があると思っている

・スクロール行為になれていない

また通常は左上から下に向かって移動し、気になるものがあると右方向へ移動することが

多いと言われています。

よく、左上にトップページリンクがありますよね。これは上記理由に当てはまることから

正しい手段であり、また一般化していることから、有効な方法であると考えられます。

トップページに戻れない→左上にトップページリンクを置くべし!

 図)多くのユーザに見られる視線。左上から下に向かって移動し、

  気になるものがあると右方向へ移動する

②今どこにいるのかわからない

今どこにいるのかわからず、とりあえず離脱を考えるユーザも少なくありません。

サイトの階層と現在いるページの位置がすぐにわかる「パンくずリスト」が有効です。

また、パンくずリストは関連商品などに誘導するためのナビゲーションとしても利用できます。

最近の消費者行動に見られる比較検討に大きく貢献できる方法であることが考えられます。

※消費者行動の移り変わりについてはコチラ

  「アクセス解析の重要性 時代はAIDMAからAISCEASへ」

 図)パンくずリストはサイトの階層と現在いるページの位置がすぐにわかる

③カテゴリ名称が分かり辛い

リンクの存在に気づいてもリンク先の想像が付かず次の行動移せないケースもあります。

単にカテゴリ名だけではで理解しにくいことが理由として挙げられます。

例えば「生活雑貨」であればその下に「キッチン用品」「バス用品」等のサブカテゴリと

説明を沿えたテキストリンクを付けると有効であると考えられます。

また機能別・ブランド別など複数のカテゴリ分類を併用すると目的のものが探しやすくなります。

どうでしょうか。

自身のサイトと当てはまる部分があれば幸いです。

<ひとりごと>

最近、甥が生まれました。

おばちゃんになってしまいました。

でも甥は超スーパーミラクル可愛いので

「おばちゃん」と呼ばれても許します。

■アクセス解析担当者の記事

+—————————————————————————–+

+—————————————————————————–+

Ruby on Railsの部分テンプレートを使ってみよう

0

この記事はアピリッツの技術ブログ「DoRuby」から移行した記事です。情報が古い可能性がありますのでご注意ください。

はじめまして、kaoriです。

WEBサイトの主な機能は、登録・編集・削除・表示・検索などが挙げられますが、

今回は登録・編集を例に部分テンプレート機能をオススメしたいと思います。

掲示板を例えに出すと、記事の投稿が登録にあたります。

そして記事の編集。

基本的にこの2つ(登録・編集)に必要な入力内容は一致していて、

ざっくり言うと ・名前 ・メールアドレス ・件名(スレッド名) ・本文 などが挙げられます。

それぞれのビューファイルにそれぞれ入力フォームを記述してもいいのですが、

部分テンプレート機能を使用すると、同じ構成の記述をしなくても済むようになります。

(いくつかの案件をやってきましたが、登録画面と編集画面はHTML上は同一の構成が多いのです)

Railsの「render :partial」を使用し、入力フォームを外出ししてみます。

(やり方は本などでよく紹介されているため、省略させて頂きます。。)

登録画面・編集画面・入力フォームの3ファイルほどが完成すると思います。

実際にやってみると実感するかと思いますが、書く量がかなり減ります。

さらに!!

実際の案件でよくあるのが仕様変更!!!

「セキュリティーの関係上、メールアドレスの項目を無しにして欲しい」

「その代わりに、投稿時間を指定できるようにしたい」

などなど。お客様からの改善希望は堪えません。

 投稿・編集画面それぞれに入力内容を書いていたら、

忙しさのあまり投稿画面には追加したけど編集画面は……なんてことにもなりかねません。

皆様もぜひ、利用してみてください。…

DRBD+Heartbeat+NFS

0

この記事はアピリッツの技術ブログ「DoRuby」から移行した記事です。情報が古い可能性がありますのでご注意ください。

こんにちは、たろちゃんです。

今回、DRBDとHeartbeatとNFSを組み合わせた仕組みを作成しました。

DRBDとHeartbeatの構築自体については、tacchiさんのDRBDのインストール及びHeartBeatの設定を参照してください。

なお、今回作成した環境はXenの準仮想化環境上の CentOS 5.2 64bit です。そのため、前述のDRBDの記事とはインストール方法が異なり、yumを使ってCentOSのレポジトリからDRBDの導入をしました。

# yum install kmod-drbd82-xen.x86_64
# yum install drbd82.x86_64

DRBDのバージョンは8.2.6ですが、設定については8.0系とほとんど変更はございません。

では、構築作業を見ていきましょう。

今回構築するサーバは以下のような構成になっているとします。

IPアドレスホスト名用途
192.168.99.1testserver1DRBD, Heartbeat, nfsサーバ
192.168.99.2testserver2DRBD, Heartbeat, nfsサーバ
192.168.99.3testserver_virtualHeartbeatが管理する仮想IP
192.168.99.4testclientnfsでマウントするクライアント

まず、DRBDとHeartbeatの構築をしておきます。こちらは省略します。

続いて、Heartbeatの /etc/ha.d/haresoureces の設定を行ないます。

# vim /etc/ha.d/haresources
testserver1 drbddisk::drbd0 Filesystem::/dev/drbd0::/var/drbd::ext3 IPaddr::192.168.99.3/24/eth0

こちらの設定で DRBD の復帰と、 /dev/drbd0 を /var/drbd へのマウント、仮想IPの割りあてが行なえます。もちろん、testserver1とtestserver2で /var/drbd を作成しておく必要があります。

# mkdir /var/drbd

この段階で一度 heartbeat のテストをします。testserver1でheartbeatを停止してtestserver2で/var/drbdがマウントされるのを確認し、testserver1でheartbeatを再起動してtestserver1で/var/drbdがマウントされるのを確認すれば良いかと思います。

さて、肝心のnfsmountをするための設定を行います。

まずはnfs関係のサービスなどを停止します。testserver1とtestserver2の両方で行います。

# /etc/init.d/nfs stop
# /etc/init.d/nfslock stop
# /etc/init.d/rpcidmapd stop
# umount sunrpc

次にtestserver1でnfsのサービスが使用するファイルの移動と元の場所へのシンボリックリンクの作成を行います。

# mkdir -p /var/drbd/nfs/var/lib
# mv /var/lib/nfs /var/drbd/nfs/var/lib/
# ln -s /var/drbd/nfs/var/lib/nfs /var/lib/nfs

次にtestserver2で不必要になるファイルの移動とtestserver1と同様にシンボリックリンクの作成を行います。

# mv /var/lib/nfs /var/lib/_nfs
# ln -s /var/drbd/nfs/var/lib/nfs /var/lib/nfs

これでtestserver1からtestserver2に切り変わってもnfsのサービスを動かせるようになりました。

次にtestserver1でnfsmountする領域を作成します。

# mkdir /var/drbd/nfs/userdata

次にtestserver1とtestserver2の両方で、 /etc/exports を編集します。

# vim /etc/exports
/var/drbd/nfs/userdata  testclient(rw,sync)

次に、testserver1とtestserver2でOS起動時にnfsのサービスが起動しないように設定します。

# chkconfig nfs off
# chkconfig nfslock off
# chkconfig rpcgssd off
# chkconfig rpcidmapd off

以上でnfsの基本設定は終わりです。次に、heartbeatがnfsのサービスを起動、停止を行なうためのスクリプトを作成します。こちらはtestserver1とtestserver2の両方に設置します。

# vim /etc/ha.d/resource.d/nfsmount
#!/bin/bash
#
# nfsmount
#
PATH=/bin:/usr/bin:/sbin:/usr/sbin
export PATH

start() {
        mount -t rpc_pipefs sunrpc /var/lib/nfs/rpc_pipefs
        service rpcidmapd start
        service nfslock start
        service nfs start
        exit 0
}

stop() {
        service nfs stop
        service nfslock stop
        service rpcidmapd stop
        umount sunrpc
        STATUS=`LANG=C service nfs status|grep "running"`
        if [ -n "${STATUS}" ];
        then
                killall -HUP nfsd
        fi
}

case "$1" in
        start)
                start
                ;;
        stop)
                stop
                ;;
        *)
                echo $"Usage: $0 {start|stop}"
                exit 1
esac

exit 0

ここで注意する点は、停止時(stop)にnfsのサービスが終了していない場合はnfsdをkillする必要がある点です。この処理が無いと、nfsdが終了しなかった際にheartbeatが正常に動作せず、予期せぬトラブルを招く恐れがあります。(実際には、heartbeatがOSの再起動プロセスを走らせてしまい、サーバがシャットダウンもできないという状態になった事があります)

最後に先程作成したnfsmountスクリプトに実行権限を与えて、 /etc/ha.d/haresources を修正します。

# chmod 755 /etc/ha.d/resource.d/nfsmount
# vim /etc/ha.d/haresources
testserver1 drbddisk::drbd0 Filesystem::/dev/drbd0::/var/drbd::ext3 IPaddr::192.168.99.3/24/eth0 nfsmount

以上で設定は完了です。heartbeatの停止、起動をしてみてnfsがちゃんと切り替わる事、nfsmountが継続される事を確認しましょう。

# mount -t nfs testserver_virtual:/var/drbd/nfs/userdata /mnt/nfstest

問題がなければ、testclientのfstabに通常のnfsと同様に追加をしてあげれば良いです。

Flash(ActionScript)でLoadVars.sendAndLoadを使ってRuby on Railsと連携しよう

0

この記事はアピリッツの技術ブログ「DoRuby」から移行した記事です。情報が古い可能性がありますのでご注意ください。

ご無沙汰しております。エンジニアの はる です。

前回は「Ruby on RailsとFlash(ActionScript)のXML連携」について、記事を掲載させていただきましたが、今回は、Ruby on RailsとFlash(ActionScript)の”LoadVars.sendAndLoadメソッド”を使用した連携について書いてみたいと思います。

Rails側とFlash側の作業は、

	[Rails]テキスト形式の結果を返す。
[Flash]loadVars.sendAndLoadメソッドを使用して、データの送信・受信を行う。

	

となります。

[Flash(ActionScript)]

#onClick時、Railsアプリに「test=1」「test=2」「test=3」を送信。

#Rails側で処理を行った後、result_lvでレスポンスを受け取ります。

	on(release){
  var send_lv = new LoadVars();
  var result_lv = new LoadVars();
  send_lv.sendAndLoad('http://localhost/test/reply?test1=1&test2=2&test3=3',result_lv,"POST");
  result_lv.onLoad = function(success:Boolean) {
    if (success) {
      trace("success");
      _root.test1.text=result_lv.test1;
      _root.test2.text=result_lv.test2;
      _root.test3.text=result_lv.test3;
    } else {
	  trace("error");
    }
  }
}

	

[Rails]

#パラメータを受け取り、処理を行った後、レスポンスを返します。

	def reply
  array = ["one","two","three"]
  response.headers["Content-Type"] = 'text/plain; charset=UTF-8'
  render :text => "&test1=#{array[params[:test1].to_i]}&test2=#{array[params[:test2].to_i]}&test3=#{array[params[:test3].to_i]}"
end

#viewで返り値を管理したい場合は、以下のように記述します。
def reply2
  @array = ["one","two","three"]
  response.headers["Content-Type"] = 'text/plain; charset=UTF-8'
  render(:text => render_to_string(:partial => 'reply').strip)
end

	

#_reply.rhtml

	&test1=<%=@array[params[:test1].to_i]%>&test2=<%=@array[params[:test2].to_i]%>&test3=<%=@array[params[:test3].to_i]%>

	

#結果

	_root.test1.text => "one"
_root.test1.text => "two"
_root.test1.text => "three"

	

以上のように、LoadVars.sendAndLoadメソッドを使用することで、前回ご紹介したXML連携よりもだいぶスマートに連携することができます。

大量のデータを読込む場合は、XML連携のほうが便利ですが、解析データ送信したり、クライアントで処理するには重い計算を一度サーバーで行ってからレスポンスだけを返す場合等に有効かと思います。

Ruby on Railsでrakeコマンドを使って様々なタスクを実行しよう

0

この記事はアピリッツの技術ブログ「DoRuby」から移行した記事です。情報が古い可能性がありますのでご注意ください。

はじめまして!KBMJでエンジニアをやっているT氏です。

初投稿の今回は、rakeコマンドについてご紹介したいと思います。

*rakeとは・・・ビルドツール(AntやMake等)のruby版の事

まず初めに、rakeのバージョンを調べてみましょう。

rake –version

ちなみに私は0.8.3でした。

次にrakeにどのようなオプションがあるか見てみましょう

rake –task (rake -TでもOK)

恐らく大量のオプション一覧が出てくるかと思います。。。

その中から、便利なコマンドをつまんでご紹介します。

rake db:…

rake db:migrate

→migrateを実行して最新のバージョンになります(一番使う事が多いかと思います)

rake db:migrate:up VERSION=xxx

rake db:migrate:down VERSION=xxx

→バージョンを指定してmigrateを実行します

rake db:rollback

→1つ前のバージョンに戻してくれます。結構便利です。

rake db:version

→現在のバージョンを確認できます

rake test:…

rake test

→ 全てのテストを実行します

rake test:functionals

rake test:integration

rake test:units

→units,functional,integrationそれぞれのテストを実行します

*実行前にtest/にテストコードを書く必要があります

rake rails:…

rake rails:freeze:gems

→使用するrailsのバージョンを固定してくれます

*gemのrailsを vender/plugin コピー(unpack)しているようです

rake rails:unfreeze

→固定したrailsのバージョンを解除します

* vender/plugin のrailsを削除するようです

その他

rake routes

→routes.rbで定義したルートを表示します

rake stats

→対象アプリケーションの統計情報(MVCやメソッド、テストの数)を表示します

rake _x.x.x_ db…

→_x.x.x_にrakeのバージョンを入れる事で、指定したバージョンでrakeを実行できます。

rake –help

→rakeのヘルプを表示します

以上です。

他にも紹介しきれなかったものが数多くありますが、皆さんも是非ご活用下さい。

最後までご覧頂き、ありがとうございました!

RubyのStringクラスのインスタンスメソッドについて

0

この記事はアピリッツの技術ブログ「DoRuby」から移行した記事です。情報が古い可能性がありますのでご注意ください。

どうもメガネです。14回目です。

今回は、とても便利なので、RubyのStringクラスのインスタンスメソッドについて説明します。文字列の長さを調べるメソッド

 test = “abcdefg”

 test.size => 7

連結した文字列を返すメソッド

  test = “abcdefg”

 test + “hij” => “abcdefghij”

  p test => “abcdefg”

自分自身へ文字列を追加するメソッド 

 test = “abcdefg”

  test << “hij” => “abcdefghij”

  p test =>  “abcdefghij”

与えられた正規表現にマッチするかどうかを返すメソッド

  test = “abcdefg”

   test =~ /ab/ => 0

   test =~ /zx/ => nil

 指定された区切りによって分割して配列に返すメソッド

   test = “abc|efg|hij”

    test.split “|” => [“abc”, “efg”, “hij”]

 小文字化した文字列を返すメソッド

   test = “ABC”

     test.downcase => “abc”

 大文字化した文字列を返すメソッド

   test = “abc”

     test.upcase => “ABC”

 指定された文字列置換を一度だけするメソッド

     test = “abcxefgxhij”

     test.sub “x”,”X” => “abcXefgxhij”

 指定された文字列置換するメソッド

     test = “abcxefgxhij”

     test.gsub “x”,”X” => “abcXefgXhij”

以上

PowerPointで作るボタン 2/2

0

この記事はアピリッツの技術ブログ「DoRuby」から移行した記事です。情報が古い可能性がありますのでご注意ください。

PowerPointで作るweb2.0風ボタンの続きです。

その1はこちら

それでは、ここに文字を乗せましょう。
挿入メニューよりテキストボックス(横書き)を選択。
作成した図形をクリックして文字を入れます。 入力した文字を全選択すると、
文字設定が出てくるので 好きなフォント、色、サイズにしましょう。
例では白に設定しました。

文字に効果をつけて読みやすくします。
文字が選択された状態で、メニューの書式よりワードオートスタイルの
文字の効果より 光彩を選択します。(例ではアクセント1.5ptを選択)

目的の色がサンプルにない場合は、その他の光彩の色で色を指定します。
これでボタンが完成しました。

 図形を選択した状態で右クリックし、図として保存をクリック。
pngファイルとして書き出します。 これで終わりといきたいのですが、最後の調整です。


スタートメニューよりOffice→Officeツール→PictureManagerを起動します。
左側の「画像へのショートカット」より、保存先を選択します。
無い場合は一番上の画像のショートカットの追加をクリックし、追加します。
真ん中のリストから、先ほど保存した画像をダブルクリック。 編集画面になります。
実は画像の上部に謎の余白がついてしまうので、それを取ります。
右側のメニューから画像の編集を選択。トリミングをクリックします。
画像の周りに枠が出るので、上部の─を下にドラッグして、 ぴったりサイズに囲います。

右メニューのOKをクリックすると、トリミングされます。

次に画像サイズの調整をします。
上部メニューより、画像の編集をクリック。 右側に出たメニューより、サイズ変更を選びます。
縦横比を維持したまま縮小したいので、拡大または縮小率にチェックを入れ、
パーセンテージを指定します。下部に表示される新しいサイズを見ながら 調整して下さい。

適当なサイズになったらOKを押して、名前をつけて保存したら完成です。
(jpgやgifでも保存できるのですが、すごく汚くなるのでおすすめしません。
リサイズと他形式への書き出しは他のフリーソフトの方がいいかも知れません)


以上、長くなりましたが、いかがでしたでしょうか?
ちょっとしたボタン1つで、全体のクオリティーアップに貢献できると思います。
是非試してみて下さい。

PowerPointで作るボタン 1/2

0

この記事はアピリッツの技術ブログ「DoRuby」から移行した記事です。情報が古い可能性がありますのでご注意ください。

はじめまして、デザイナー(多分)のみゃです。
Dorubyのデザイン担当しておきながら、記事の投稿は初めてです。
ここではエンジニアの方向けのデザインについて書きたいと思います。

こんなボタンが作れます。

※画像が多いので数回に分けます。

私が普段使っているのはPhotoshopなのですが、
社内のPCならとりあえず入っていそうなPowerPointで ボタン素材を作る方法を解説していきます。
ここで使うPowerPointのバージョンは2007です。
以前のバージョンには無い機能があったり、画面などが違うかも知れません。 ご了承下さいませ。

PowerPointを起動し、ファイルを新規作成したら、 メニューのホームからレイアウトをクリック。
「白紙」のテーマを選択。 メニューから挿入→図形より 角丸四角形を選択し、
作りたいサイズくらいの四角形を描きます。

(本当はサイズ指定して作ることができればいいのですが…)
角丸四角形が描けたら、角の丸みの調整をします。
黄色い◆を左右に動かすと、角の丸みが変化します。
(角の丸が大きいほど子供っぽく優しい印象になります)

角丸の調整ができたら、図形の上で右クリック。図形の書式設定を選択します。

左メニューの線の色を選択し、濃い目のグレーに設定します。
(同系の濃い色か濃いグレーが無難ですが、好きな色に設定して下さい)
次に塗りつぶしを選択し、リストよりグラデーションを選択。
グラデーションの分岐点にそれぞれ色を指定します。

リスト内の分岐点1~3に以下の指定します。

【分岐点1】分岐点-0%、色-薄い色 例:R237.G242.B249
【分岐点2】分岐点-50%、色-分岐点1の色より少し濃い色 例:R142.G180.B227
【分岐点3】分岐点-54%、色-分岐点2の色よりはっきりわかる濃い色 例:R85.G142.B213

最後に分岐点の追加をクリックし、分岐点4に以下の指定をします。

【分岐点4】分岐点-100%、色-分岐点3の色より少し明るく、鮮やかな色 例:R82.G184.B216

これでキモとなるグラデーションの完成です。
文字だと色の表現が伝わりにくいですが、分岐点1~2で明るい色のグラデーション、
分岐点3~4で暗い色から鮮やかな色へのグラデーションになっていて、
分岐点2と3の色の差がはっきりしているのがポイントです。

 その2へ続く→ 

Ruby on Railsプロジェクトのversion変更方法

0

この記事はアピリッツの技術ブログ「DoRuby」から移行した記事です。情報が古い可能性がありますのでご注意ください。

初めまして。新人のrickです。
今回は、railsのプロジェクトを作ってからversionupしたくなったときの方法を紹介します。
今回は、[rails 1.2.3]から[rails.1.2.6]へ変更します。
まずは、
gem list rails
でinstallされているversionを確認します。
もちろん入っていなかったら
gem install rails –version=1.2.6
とかでinstallしてください。

次に、projectのversionの確認です。
プロジェクト内で
ruby script/about
とうってみてください。
About your application’s environment
Ruby version 1.8.6 (universal-darwin9.0)
RubyGems version 1.0.1
Rails version 1.2.3
Active Record version 1.15.3
Action Pack version 1.13.3
Action Web Service version 1.2.3
Action Mailer version 1.3.3
Active Support version 1.4.2
Application root /Users/enomoto/etc/123
Environment development
Database adapter sqlite3
こんな感じでrailsなどのversionがわかります。

次に、[config/enviroment.rb]の10行目のRAILS_GEM_VERSION = ‘1.2.3’をRAILS_GEM_VERSION = ‘1.2.6’へ変更します。

つづいて
rake rails:update:configs
をたたくだけで終了です。

もういちど
ruby script/about
をたたいてみてください。
Ruby version 1.8.6 (universal-darwin9.0)
RubyGems version 1.0.1
Rails version 1.2.6
Active Record version 1.15.6
Action Pack version 1.13.6
Action Web Service version 1.2.6
Action Mailer version 1.3.6
Active Support version 1.4.4
Application root /Users/enomoto/etc/123
Environment development
Database adapter sqlite3

こんな感じにかわっているはずです。

以上、プロジェクトのversion変更でした〜。
ちなみに、1.0系から2.0系はやめておいた方がいいですよ。
でわでわ。

Yahoo! Web Analytics とは? ~レポート機能を解説(日本語)~

0

この記事はアピリッツの技術ブログ「DoRuby」から移行した記事です。情報が古い可能性がありますのでご注意ください。

こんにちは。KBMJアクセス解析担当の長谷です。

2008年10月8日に米Yahoo!がアクセス解析ツール 「Yahoo! Web Analytics(ヤフー!ウェブアナリティクス)」を公開していることはご存知でしょうか。

Google、Microsoftに続きYahoo!も遂にアクセス解析ツールの提供を開始したことで、 今後のアクセス解析ツールのシェアがますます気になります。

今回は、Yahoo! Web Analyticsについて現在公式英語サイトでレポート機能が簡単に紹介されておりますので、日本語表記で概要とレポート機能の説明をしていきます。

Yahoo! Web Analyticsとは?

※GoogleAnalyticsのレポート機能との違いも比較しながら解説しますのでご参考までに。

■Yahoo! Web Analyticsとは?

Yahoo! Web Analytics は Yahoo! が2008年4月に買収した IndexTools の解析ツールをベースに開発した、ウェブマスター向けのアクセス解析ツール(タグ埋め込み型)となります。

現在の利用範囲は一部の Yahoo! の広告主がメインで Yahoo! の顧客、パートナー、ディベロッパーの順番に提供していくようです。エンドユーザーへの提供は 2010 年くらいでしょうか。待ち遠しいですね…

■Yahoo! Web AnalyticsとGoogle Analyticsの機能の違いは?

Google 提供の Google Analytics と比較した上での主な特徴は以下の3点が挙げられます。


——————————————————————————

◆リアルタイムでのデータ反映

ユーザーがサイトに来訪してから、その行動履歴がYahoo! Web Analyticsのレポート管理画面に数分以内に集計されデータが反映されます。ほぼリアルタイムです驚きです。

⇒Google Analyticsでは4時間~24時間程の反映時間がかかります。

——————————————————————————

◆生データによるレポート集計

Yahoo! Web Analyticsから提供されるデータは、サーバ側で統計処理がかかった制限があるデータではなく統計処理をかけていない生データでの提供となり、より柔軟で詳細な解析をすることができます。

⇒GoogleAnalyticsでは目標ページのプロセス設定をした場合、過去のデータにフィルターはかけられず、設定内容のデータをその設定日より取得し始めます。

Yahoo! Web Analyticsではデータが残っているので過去データにも設定が反映されるようです。

非常に便利な機能です。レポートデータの管理が楽になります。

——————————————————————————

◆カスタム性の高いレポート管理画面

ドラッグ&ドロップで操作できるインターフェイスにより直観的に設定を行うことができます。Yahoo! Web Analyticsで取得できるデータから必要なデータだけ表示させるカスタムレポート機能や顧客の行動履歴に基づいたフィルタリング、セグメント分けなどが簡単にできます。

⇒GoogleAnalyticsにも同様の機能(カスタムレポート・アドバンスセグメント)があります。

Yahoo! Web Analyticsには加えて、サイトのデータの増減に連動したアラート機能や、レポート項目について情報のやり取りを行うメモ機能が実装されているようです。


—————————————————————————–

Google Analytics と比較すると大分機能がアップしている印象を受けますが、重要なのは機能の豊富さではなく、解析したデータを使っていかにネットマーケティングに活用することですので、その分ですと Google Analytics と大きな差はないといえます。

生データによるレポート項目数の豊富さが Yahoo! Web Analytics の売りのひとつだと思いますので、今後の情報開示が待ち遠しいところではあります。

■Yahoo! Web Analyticsのレポート画面と機能説明

公式英語サイトにてレポート機能について簡単に表記されているので下記に要約をまとめておきます。
※注意:実際の機能と若干の違いがあるかもしれませんが、私の個人的な要約となりますのであらかじめご了承ください。

⇒公式英語サイトはこちらYahoo! Web Analyticsのホームページ

Yahoo! Web Analyticsのレポート画面

■Executive Analytic Dashboards  (レポートのダッシュボード機能)

Web担当者に合わせて解析レポート項目を選びダッシュボードで一括して閲覧することができます。

・解析要望に応じたレポート項目、ベンチマーク指標、グラフをダッシュボード上で表示

・経営者や広告担当者、SEO担当者といった、見るべき指標が違う担当者毎にダッシュボードを設定可能。

 ■ Comparative Reporting 解析データの比較レポート機能

Yahoo! Web Analyticsではデータを並べサイトの成長をわかりやすく比較することができます。

・サイトの成長性を並んだデータから読み取り、施策の効果測定や、季節による数値の増減を把握

・レポートをブックマークすることで成功事例のデータを残していつでも表示・活用ができるようです。

Yahoo! Web Analyticsのレポート画面

 ■Advanced Path Analysis ページ経路分析(サイト導線のチェック)

サイトに来訪したユーザーがどのページを見て最終的にゴールページに至っているのかを把握できます。

・ページの1つ1つをサイトの階層毎に地図として閲覧することができるようです。

 ユーザーの送客率が高い導線を把握することができるのは非常に便利ですね。

※GoogleAnalyticsでは基準ページから「次に表示されたページ」「閲覧終了ページ」までしか追うことができないので、Yahoo! Web Analyticsで深い階層まで可能であれば注目の機能となります。

 ■Visitor Tracking 訪問者プロセス分析

訪問者の離脱率をあらかじめ設定した経路に対して、総客率・離脱率で把握することができます。

・訪問客の動きを追跡し、チェックポイント毎での送客率・離脱率を把握することができます。

・Yahoo! Web Analyticsは生データのため、設定プロセスが過去のデータにも適用されるようです。

※GoogleAnalyticsでは、目標までのプロセス設定は、過去データに反映されず、設定日以降から適用なのでこの仕様は非常に便利ですね。

Yahoo! Web Analyticsのレポート画面

 ■Custom Analytics Reports カスタムレポート機能

Custom Report Wizardを使うことにより、 Yahoo! Web Analyticsのレポート上で表示される、ディメンション(新規ユーザーなど)と解析指標(セッション数、直帰率など)を自由にカスタマイズできる機能です。

※Google Analyticsでは08年10月3日の機能拡張で追加された「カスタムレポート機能」に当たります。Yahoo! Web Analyticsにおいても実装されているようなので安心ですね。

 ■Marketing Workflow Management ワークフロー上での管理機能

Web担当者がビジネスの上でサイトを運用する際のサイト監視・情報共有機能になります。

・ウェブサイトデータの条件を設定し、適合する場合に電子メールで知らせるアラート機能があるようです。サイト指標の変化、休みまたはシステム停止期間に影響を及ぼすイベントを把握するために活用するのがよいでしょう。   

・レポート項目とダッシュボード上でのメモを担当者同士で共有することによってビジネス上での情報交換・活用体制の改善に利用することができるようです。

※GoogleAnalyticsにはない機能ですので、Yahoo! Web Analyticsの特徴ともいえ増ます。

■終わりに

今後はますますYahoo! Web Analyticsの情報が開示され多くのユーザーに注目されていくツールになることは間違いありません。実は紹介しきれていない機能がまだまだありますが、情報が明確ではないので今回の記事ではここまでです。

エンドユーザー向けに公開された時にはDo Rubyでも細かな記事を上げていきますので楽しみにしていて下さい。本日は休日でしたのでスーパー銭湯でサウナ⇒ビールで幸せでした。それでは。

 ——————————————————————————-

■バックナンバー

【第1回】優良顧客で売上げ増加!キーワード選びから考えるアクセス解析活用術

【第2回】優良顧客で売上げ増加!キーワード選びから考えるアクセス解析活用術

■その他アクセス解析担当の記事 【最新記事】

・アクセス解析用語はこちら

・アクセス解析でよく使うIT用語 その2

・アクセス解析でよく使うIT用語 その1

・無料かつ高性能のアクセス解析ツール「Google Analytics」について

・GoogleAnalyticsトラッキングコードの設置方法

・Googleアカウント・Google Analyticsアカウントの取得方法

・Google Analyticsとは? ・サイトユーザビリティ

・アクセス解析の重要性 時代はAIDMAからAISCEAS

・ユーザビリティ・デザインとは?

アクセス解析でよく使うIT用語 その2

0

この記事はアピリッツの技術ブログ「DoRuby」から移行した記事です。情報が古い可能性がありますのでご注意ください。

Google Analyticsなどでよく使うアクセス解析用語解説

KBMJ アクセス解析チームコンサルティンググループの中林です。

本日は用語解説2回目でGoogle Analyticsよくでてくる用語等紹介します。

本日の用語はコチラ↓

■ SEO とは

Search Engine Optimizationの略で、直訳では「検索エンジン最適化」となります。Yahoo,Google,MSNといった検索エンジンで、キーワード検索を行った場合に、
webサイトが検索結果の上位に表示されるようにホームページを改善することです。

消費者の行動が
AIDMAからAISASに代わっているといわれています。
詳しくは「アクセス解析の重要性 時代はAIDMAからAISCEASへ」をご参照ください。

つまり『なにか買いたいな』という思いを持っている消費者は
「検索」という行動をとりやすいため、検索エンジンで上位に表示されることは、
非常にコンバージョン率の高いユーザーを集客することが可能になります。  

■ 新規ユーザー とは

GoogleAnalyticsを使って、新規ユーザーとリピーターにセグメントして
データを取り出すことが可能ですが、ここでの新規ユーザーとは新規セッションを指します。

Google analyticsの場合はgoogle analyticsがサイトを訪れた時、ユーザーにクッキー情報を持たせます。
クッキー情報をもってないユーザーが訪れたらGoogleAanalyticsではそれが新規ユーザーとカウントされます。  

■ リピーター とは

では、リピーターとはGoogle Analyticsでは
上記のクッキー情報をもったユーザーがリピーターとされます。

もしGoogleAanalyticsで、2月1日から2月28日の期間を絞って分析する場合
2月1日以前にクッキー情報を付与されたユーザーが
2月1日~2月28日の間に訪れた場合はリピーターとされます。
1月31日に一度、訪れたユーザーが2月1日に訪れた場合この場合リピーターとなります。

ここで、GoogleAnalyticsのデータ期間を1月31~2月28日にした場合
1月31日に一度訪れたユーザーが2月1日に再度訪れた場合

1月31日に初めてGoogle Analyticsからクッキー情報を付与されるので、
1月31日に新規セッションで1カウント、2月1日にリピーターで1カウントされます。  

■ 入口ページ(閲覧開始ページ) とは

アクセス解析を行っていくうえで重要な解析項目の一つに、
入口ページ(閲覧開始ページ)があります。

入口ページとは、ユーザーがなんらかの流入元(検索エンジン、ブックマーク、外部リンク…etc)から
サイトに訪れた際に、一番最初に開いたページで、セッションの開始ページとなります。
セッション数の合計分だけ、入り口ページはあります。  

■ ランディングページ とは

バナー、リスティング等、インターネット広告などのマーケティングの施策や、
検索エンジンの検索結果をクリックしたときに開かれるページのことです。

入り口ページとランディングページの違い

入り口ページはセッションの始まりのことで、ランディングページはセッションにかかわらず広告や、検索エンジンからサイト内に着地したページとなります。  

■ 出口ページ(離脱ページ)とは

入り口ページがサイトを訪れた時のものだとすると、
ユーザーがサイトから離脱したときのページを出口ページ(離脱ページ)と言います。  

■ 閲覧時間 とは

訪問者がサイト内の各ページをどれだけの時間をかけて読んだのかを表すものです。

ブログなど読ませることが目的のページである場合は
閲覧時間が長いということは、ページの内容をじっくり読んでもらえている。ということになりますので、
内容が優れているということもいえると思います。

また、目次や商品一覧などのページは、読ませることが目的でないページになります。
このようなページは、ユーザーをつぎのページにナビゲーションするためのページであるため、
ページの閲覧時間が短い方が、ユーザーが求めている目的ページにたどり着きやすいことがわかります。
ページの閲覧時間が長くなってくると、ユーザーが次のページを探しにくかったりするなど、
ナビゲーションに問題が有る可能性があります。
閲覧時間が長くなっていて、離脱率が高い場合などはユーザーを迷わせてしまっている可能性があるので要注意です。  

■ リファラー(referer)とは

webページにアクセスする時(ブラウザで表示する)直前に閲覧していたページのURLの情報です。
リファラー情報をたどることで、ユーザーが利用している検索サイトや、外部リンクなど
ユーザーのどういった経緯でサイトを訪れたのかを調べることが可能です。
検索エンジンからの流入である場合、URLのパラメーター部分を調べることで、
どんな言葉で検索してきたかを調査することもできますし、
また、サイト内のユーザーの動きも知ることが可能です。  

■ ノーリファラー とは

上記のようなリファラー情報を持たないアクセスのことをノーリファラーと呼びます。
リファラー情報を持たないアクセスには下記のものが考えられます。

リファラーがない場合
リファラーが取得できないアクセスも有ります。
(1)URLを直接ブラウザに入力する
(2)ブックマークからのアクセス
(3)メール(webメールを除く)からのアクセス
(4)ワード、エクセルからのリンク
(5)ショートカット
(6)RSSリーダー(web上のものを除く)からのアクセス
※ウイルスソフトによっては、リファラーを送らなくするものもあります。 

■バックナンバー

・アクセス解析用語について ⇒ アクセス解析でよく使うIT用語 その1 

■その他アクセス解析担当の記事 【最新の3記事】

【第2回】優良顧客で売上げ増加!キーワード選びから考えるアクセス解析活用術 ・無料かつ高性能のアクセス解析ツール ⇒ Googleアカウント・Google Analyticsアカウントの取得方法・サイトユーザビリティ ⇒ ユーザビリティ・デザインとは?

MySQLのストレージエンジン変更

0

この記事はアピリッツの技術ブログ「DoRuby」から移行した記事です。情報が古い可能性がありますのでご注意ください。

君は知っているか? MySQLに、ストレージエンジンというものがある事を。

 【知っている】 → え?知ってる?じゃあもう読まなくてもいいかもね。(次回にご期待ください)

 【知らない】 → そうか・・・・あんた、オレと同じだな。(続きをお読みください)

ストレージエンジンていうのは、SQLの実データがどのような形式で、
どのように格納されているかを管理している部分で、それらのデータ
にアクセスする処理を行うとの事。

で、以下の二つが代表的なものだそうです。

【MyISAM(マイアイサム)】
・テーブル単位のファイルによるデータ構造を持つ。
・トランザクション機能がない分、軽快に動作する。
・ロックはテーブル単位でかかる。
・参照系クエリが大部分を占める場合に有効。

【InnoDB(イノディービィー)】
・テーブルスペース内に複数のテーブルやインデックスを格納するデータ構造を持つ。
・トランザクション機能をサポートしている。
・ロックは行(レコード)単位でかかる。
・更新系クエリが多い場合に有効。

さて、自分が扱っているサーバは複数のバッチ処理を同時に行っていたり
するので、今回、MyISAM(デフォルト)からInnoDBに変更してみようと
いう話になりました。
今回は、その手順について説明します。(ちなみに次回はない)

まず、既にInnoDBになってたら意味ないので、
現在の設定を確認します。
mysql> show engines;

| Engine   | Support   | Comment |
+———+———-+———————————————–+
| MyISAM  | DEFAULT | Default engine as of MySQL 3.23 ….|
| MEMORY | YES        | Hash based, stored in memory, useful for ….|
| InnoDB   | DISABLED | Supports transactions, row-level locking, ….|
(以下略)

OH!NO!
「InnoDB」は「DISABLED」になってんじゃん!?
というわけで、/etc/my.cnfを修正します。以下の部分を変更してください。
# vi /etc/my.cnf

default_table_type=MYISAM
 ↓
default_table_type=InnoDB

では、mysqlを止めます。
# /etc/init.d/mysqld stop

さて、この後、mysqlを起動すれば設定は反映されるんだけど、
ここにちょっとした罠があるんですわ。
/var/lib/mysql に移動してくだされ。
# cd /var/lib/mysql # ls

この中に ib_logfile0 ib_logfile1 ibdata1 といったファイルがある場合
は削除しておくがよろし。(心配だったら移動させてもよろし)
こいつらがいると、InnoDBの設定後にMySQLを起動した場合、
MySQLが立ち上がらないんですよ。

さて、上の作業が終わったら、いよいよmysqlの起動です。
# /etc/init.d/mysqld start

どう?立ち上がった?
ま、いいや。

設定が反映されたか確認します。
> show engines;

これで新しく作られたテーブルのストレージエンジンは、
特に明示しない限りInnoDBになります。

だが、ちょっと待て。
既存のテーブルに関してはどうすんだよ?と。

そう。ストレージエンジンはテーブル単位で指定するので、
既存のテーブルは頑張って一つずつ設定していかなければ
ならんのです。
alter table テーブル名 engine=innodb;

こいつをひたすら繰り返せ!
面倒だったらシェルでバッチ作って回してもいいかもね。
君ならできるはずだ!

以上、大した内容じゃないのにいっぱい書いてしまった。
お粗末さまでした。

最近人気な記事