お試しあれ！: 5月 2012

2012年5月29日火曜日

jQuery Mobileでページを書くときの雛形

雛形シリーズ第三弾「jQuery Mobile」

<!DOCTYPE html> 
<html> 
<head> 
<title>PageTitle</title> 
<meta name="viewport" content="width=device-width, initial-scale=1"> 
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script>
</head> 
<body> 

<div data-role="page">

<div data-role="header">
<h1>Title</h1>
</div>

<div data-role="content"> 
<p>Hello world</p>  
</div>
</div>

</body>
</html>

html5で書くときの雛形

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>HTML 5 complete</title>
<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<style>
  article, aside, dialog, figure, footer, header,
  hgroup, menu, nav, section { display: block; }
</style>
</head>
<body>
<p>Bodyだぜー</p>
</body>
</html>

JQueryを使ったページを書くときの雛形

よく使うのでメモ

<html>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<body>
<script>
$(document).ready(function() {
 $('#test a').click(function(){
  $(this).text('hello');
 });
});
</script>
<div id="test"><a href="#">クリックして！</a></div>
</body>

</html>

2012年5月28日月曜日

iPhoneの初期化

パスワードを忘れてどうしようもなくなったiPhoneの初期化手順をメモ

①　電源を切る
②　□ボタンを押しながら、USBケーブルでiTunesのインストールされているPCにつなぐ

以上、記事というにはおこがましいですね・・・

2012年5月27日日曜日

まずは必要なものの準備から

Flashtool
まずはこれがないと始まりません。
Installationタブからwindows版をダウンロードします。

Flashtoolの主な機能（HPを軽く訳しました）
1.　OSイメージを書き込む
2.　rootの取得
3.　ｘRecovery（イメージバックアップソフト）Busybox（シェル）、カスタムカーネルのインストール
4.　Romのクリーン
5.　davik cacheのクリア
6.　JITv2のインストール
7.　アプリのインストール
8.　クリーンアンインストール
9.　テキストファイルの編集
10.端末のRebrand

上記リンクからFlashtoolをダウンロードしてインストール後、Flashtool.exeを起動。
端末は「設定」→「アプリケーション」→「開発」→「USBデバッグ」をonにしておく。

■　ThGo2カスタムROMはベースバンドのバージョンが71でないといけないようなので、ここ(Xdeveloper)からGlobal GGL Generic 1232-9897 build 3.0.1.G.0.75
をダウンロードして解凍してできたETFファイルを、FlashToolをインストールしたディレクトリのfirmwaresにいれておきます。

6/5追記ベースバンド75のファイルへのリンクが切れているようですので、リンク削除しました。

コメントに書いていますが、別リンクから落としてもいけそうです（インストールまでは未検証です）

■　ROM書き換え後に起動しない場合があるのでここからX10_2.3.3_Th_kernel-n1.1-BootManager-v2.0をダウンロードしてFlashToolをインストールしたディレクトリのfirmwaresにいれておきます。

■　xdeveloperからダウンロードしたThGo2_v16.0.zipをマウントした端末のSDカードにコピーしておきます。

--------------------------
Root取得と準備（FlashTool）
--------------------------

■　Root取得
Advanced→Root→ForcePsneuterをクリックで自動的にRoot取得され再起動されます。
再起動後、端末に「superuser」というアイコンが登録されていれば、Root取得完了です。

■　busyboxインストール
Advanced→Install　Busybox

■　ｘRecovery ｖ0.3のインストール
ツールバーの「＋」マークをクリックするだけ
その後端末を再起動し、「戻る」キーをしばらくクリックし続けると、xRecoveryが起動します。
表示されたメニューからbackup and Restoreを選び、まずはbackup（元に戻すとき等に使います）

----------------
ROM入替準備
----------------
■　キャッシュの消去
xRecoveryで行います。
・　FactoryReset（Full Wipe）
・　Wipe Cache Partition
・　Advanced Optinos
→　Wipe Dalvik Cache
→　Wipe Battery Stat

■　ROMのインストール
先にコピーしておいたThGo2_v16.0.zipをxrecoveryの「Install custom zip」→「Choose custom zip from sdcard」から選択してインストール

下部log画面に「Install from sdcard complete」と出ればインストール完了
念のためもう一度キャッシュの消去を行います。

■　ベースバンドの変更

FlashToolsのツールバーの「雷マーク」をクリックしてFlashmodeを選択
「Select a Firmware」でFlashToolsのFirmwaresフォルダを開き、Version部のX10i_3.0.1.G.0.75を選択
「Firmware Content」でkernel.sinを選択してOKボタンを押します。
端末の電源を一旦切り（電池を抜いてもOK）ハードウェアキーの「←（戻る）」ボタンを押しながら、PCに接続します。

するとFlashToolsがベースバンドを書き換えてくれます。

あとは再起動して起動すればOK　（ワタシは起動画面の途中（四角い画像が飛び交っている画面）で固まってしまいましたので、イカのようにして回避しました。

■　bootloader（必要な方）

FlashToolsのツールバーの「雷マーク」をクリックしてFlashmodeを選択
「Select a Firmware」でFlashToolsのFirmwaresフォルダを開き、Version部のX10i_3.0.1.G.0.75を選択
「Firmware Content」でkernel.sinを選択してOKボタンを押します。
端末の電源を一旦切り（電池を抜いてもOK）ハードウェアキーの「←（戻る）」ボタンを押しながら、PCに接続します。

これで、再起動してみます。

ワタシの環境ではこれでうまくいきました。

------------------
まとめというか感想
------------------

注意することとして
・ベースバンドの変更が必要（このROMは71）
・私の環境だけかもしれませんが他のブログ等を参考にしてうまくいかなかったのでブートローダーだけ差し替えてみたところ。

このあたりが躓くところかなーと思います。

皆さんの体験報告などもコメントいただければうれしいです（＾＾

2012年5月25日金曜日

CentOS6用のepelリポジトリ

CentOS6用のepelリポジトリを追加

wget http://ftp.riken.jp/Linux/fedora/epel/RPM-GPG-KEY-EPEL-6 

rpm --import RPM-GPG-KEY-EPEL-6

repoファイルを新規作成

vi /etc/yum.repos.d/epel.repo　

[epel]
name=EPEL RPM Repository for Red Hat Enterprise Linux
baseurl=http://ftp.riken.jp/Linux/fedora/epel/6/$basearch/
gpgcheck=1
enabled=0

パッケージのインストール

yum --enablerepo=epel install ○○

centOSをネットワークインストール（6.2対応版）

OSインストール時にメンドウなのが、インストールCDやDVDを作成すること。
作ってもインストールが終わったら不要なものになってしまうので、できれば作りたくないものです。

そこで試してみたのが、ネットワークインストール

これを1枚作っておけば、違うバージョンをインストールしたくなってもカンタン♪

①　まずはネットワークインストール用のisoをダウンロード
下のリンクの6.2を他のバージョンに変えてもOKです。

http://ftp.riken.jp/Linux/centos/6.2/isos/i386/

から「CentOS-6.2-i386-netinstall.iso」とうisoイメージをダウンロード

②　CD等に焼くかマウント（私はVMware上での構築なので、新規仮想マシンにマウント）して起動

③　初期画面で[Enter]キーを押す

④　「Choose a Language」でJapaneseを選択
　※　「途中まで日本語が表示できないよ～」というような警告が出るので「OK」を押して継続

⑤　Keyboard Typeという画面でjp106を選択

⑥　Installation MethodでHTTPかFTPを選択

⑦　Configure TCP/IPでIPｖ４を設定（私はとりあえずDHCPにして、IPv6は無効にしました）

⑧　HTTP Setupではダウンロードするpathを入力しますが

ftp://ftp.riken.jp/Linux/centos/6.2/os/i386/

と入れればOK（たぶんバージョンを変えてもいけそうです）

とってもカンタン、是非お試しあれ！

2012年5月21日月曜日

ubuntuでナチュラルスクロール

ある日突然、マウスのホイールでスクロールする向きが逆になってしまった。
ナチュラルスクロールという機能のようで、appleが OS X Lionから標準採用したものらしい。（今更ですが）

iphoneなどの機器を操作する感覚と合わせたのだろうが、どうも気持ち悪いので、元に戻すことにしました。

設定場所を忘れないようにメモ

1.　Ubuntu Tweakのインストール（まぁみなさん入れていることでしょう）
2.　Ubuntu Tweakの【Tweak】→【Miscellaneous】→【Natural Scrolling】のオン・オフで切り替え可能です。

指とマウスじゃ違うと感じるのは私だけでしょうか・・・

2012年5月18日金曜日

androidアプリ開発日記(1)～やっぱりhelloworld

androidのアプリを作ってみたくて、開発環境は作れたものの、まずどうしていいかわからかったのでメモ。
情報サイトを見ていたものの、イマイチ難しい。

HelloWorldを改造しながらちょっとずつ覚えていこうと思う。

目標は、過去記事に関連して
「Xperia Acro　IS11SのMTU値を変更」するアプリを作ること。

まずは前提条件というか覚えておくこと

・　Activity＝画面と思っておく。
・　何かしようと思うと必要なクラスをimportする。
・　メインのプログラムは/src/namespace/○○.java
・　あらかじめ登録しておく文字列は/res/values/strings.xmlに記入
・　画像を表示するアプリの場合/res内にdrawableディレクトリを作りその中にファイルを入れる。

ぐらいでしょうか？（少なすぎｗ）

まずはデフォルトで出来上がるファイルから

package com.hiropop.setumtu;

import android.app.Activity;
import android.os.Bundle;

public class SetMTU extends Activity {
    /** Called when the activity is first created. */
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
    }
}

11行目にあるsetContentView(R.layout.main);で/res/layoutディレクトリ内の、main.xmlを呼び出している。
（main.xmlにはhello worldと書かれている）

ここで、「R」は何を指しているかというと、/genディレクトリ内にあるR.javaと言うファイルを指しています。
R.javaは、開発環境で自動的に作られるもので、様々なリソース（文字・画像・レイアウト）ファイルの場所を指し示しているファイルの様です。

まれに、R.javaが壊れてしまう事例が発生するようですが、プロジェクトをクリーンすると再構築されるらしいです。

できたてホヤホヤのR.javaはこんな感じ

/* AUTO-GENERATED FILE.  DO NOT MODIFY.
 *
 * This class was automatically generated by the
 * aapt tool from the resource data it found.  It
 * should not be modified by hand.
 */

package com.hiropop.setmtu;

public final class R {
    public static final class attr {
    }
    public static final class drawable {
        public static final int ic_launcher=0x7f020000;
    }
    public static final class layout {
        public static final int main=0x7f030000;
    }
    public static final class string {
        public static final int app_name=0x7f040001;
        public static final int hello=0x7f040000;
    }
}

13・16・19行目を見ると、drawable（画像）・layout（レイアウト）・string（文字列）がそれぞれresディレクトリ内を指していると言っていいでしょう。（テキトウですいませんw）

さて、何も加えずにビルドすると、Hello World,SetMTU!などと文字が表示されますが、味気ないので手を加えてみます。

1.まずは表示する文字を変えます。

/res/values/string.xmlを開いて「hello(String)」と「app_name(String」の２つのエレメントがありますので、helloをクリックします。
画面の右側に、「Name」と「Value」がありますので、好きに変えてみます。

「Value」は変更しても問題ありませんが、Nameを変更すると、参照されなくなりますので、Main.xmlを開き、
@string/helloのプロパティからTextプロパティを「@string/welcome」（welcomeはstring.xmlでつけた名前）に変更します。

あとは、プロパティに色（Text Color)やフォントサイズ(Text size)など様々な手を加えてみます。

とりあえず、こんなとこかな？

2012年5月16日水曜日

jQueryでcsvをjavascriptの配列に変換

前回の記事で紹介したcsvをjavascriptに変換するスクリプト「jQuery_csv.js」

こんな感じでファイルをgetで読み込んでcsv()に渡してあげるだけ（＾＾

$.get('data.csv', function (data) {
  var csv = $.csv()(data);
 });

持っておくと便利なライブラリですね＾＾

/* Usage:
 *  jQuery.csv()(csvtext)               returns an array of arrays representing the CSV text.
 *  jQuery.csv("\t")(tsvtext)           uses Tab as a delimiter (comma is the default)
 *  jQuery.csv("\t", "'")(tsvtext)      uses a single quote as the quote character instead of double quotes
 *  jQuery.csv("\t", "'\"")(tsvtext)    uses single & double quotes as the quote character
 */
;
jQuery.extend({
    csv: function(delim, quote, linedelim) {
        delim = typeof delim == "string" ? new RegExp( "[" + (delim || ","   ) + "]" ) : typeof delim == "undefined" ? ","    : delim;
        quote = typeof quote == "string" ? new RegExp("^[" + (quote || '"'   ) + "]" ) : typeof quote == "undefined" ? '"'    : quote;
        lined = typeof lined == "string" ? new RegExp( "[" + (lined || "\r\n") + "]+") : typeof lined == "undefined" ? "\r\n" : lined;

        function splitline (v) {
            // Split the line using the delimitor
            var arr  = v.split(delim),
                out = [], q;
            for (var i=0, l=arr.length; i<l; i++) {
                if (q = arr[i].match(quote)) {
                    for (j=i; j<l; j++) {
                        if (arr[j].charAt(arr[j].length-1) == q[0]) { break; }
                    }
                    var s = arr.slice(i,j+1).join(delim);
                    out.push(s.substr(1,s.length-2));
                    i = j;
                }
                else { out.push(arr[i]); }
            }

            return out;
        }

        return function(text) {
            var lines = text.split(lined);
            for (var i=0, l=lines.length; i<l; i++) {
                lines[i] = splitline(lines[i]);
            }
            return lines;
        };
    }
});

2012年5月15日火曜日

Highchartsを使ってcsvデータを読み込んでグラフ化するサンプル（前編）

webコンテンツの中で、キレイなグラフが使えないかと色々と探してみて見つけたのがコレ。キレイなグラフが簡単に作れるライブラリHighcharts。とりあえずサンプルを元に試してみた。

今回のメモは、サンプルソースを少し改良して、csvデータを読み込んでグラフ化することにします。
1.　まずは、jQueryをインポート
-googleでホストされているコードを読み込むのでこのままコピペ

2.　ダウンロードしたファイルからjsフォルダをアップロード
3.　jQuery_csv.jsをアップロード（別記事で掲載予定）
4.　index.htmlに以下のコードを貼り付ける
2～19行目　：　csvデータを読み込んで配列mydataへjavascriptの配列として代入
・　htmlファイルと同じフォルダの「data.csv」を読み込む
・　csv()関数（jquery_csv.js）を使いデータを変換
・　mydataに代入

21行目から　：　グラフ作成用のパラメータ設定
・　23行目：　グラフの種類をラインチャートに設定してidがcontainerのDIVタグに挿入
・　27行目：　グラフのタイトル
・　30行目：　サブタイトル
・　33行目：　x軸のラベル（1つめが日本語なのは、日本語表示用のテスト
・　36行目：　y軸のラベル（表示を見れば目盛りが自動的に振られているっ！）
・　41行目：　マウスオーバー時のツールチップ
・　48行目：　凡例部分かな（？）

56行目から　ここから、グラフのデータ

series：[
name:　ラベル名
data：　データ部
]

なのですが、ここでcsvから読み込んだ配列を63行目のように設定してあげるといいみたい。

※45行目は改行しないで44行目に続けて入力

$(function () {
 var mydata=[];
 $.get('data.csv', function (data) {
  var csv = $.csv()(data);
  $(csv).each(function () {
   mydata.push( [parseFloat( this[0] ),
    parseFloat( this[1] ),
    parseFloat( this[2] ),
    parseFloat( this[3] ),
    parseFloat( this[4] ),
    parseFloat( this[5] ),
    parseFloat( this[6] ),
    parseFloat( this[7] ),
    parseFloat( this[8] ),
    parseFloat( this[9] ),
    parseFloat( this[10] ),
    parseFloat( this[11] )
    ] );
  })

  var chart;
  chart = new Highcharts.Chart({
   chart: {
    renderTo: 'container',
    type: 'line'
   },
   title: {
    text: 'Monthly Average Temperature'
   },
   subtitle: {
    text: 'Source: WorldClimate.com'
   },
   xAxis: {
    categories: ['1月', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
   },
   yAxis: {
    title: {
     text: 'Temperature (°C)'
    }
   },
   tooltip: {
    enabled: false,
    formatter: function () {
     return '<b>' + this.series.name + '</b>
' + this.x + ': ' + this.y + '°C';
    }
   },
   plotOptions: {
    line: {
     dataLabels: {
      enabled: true
     },
     enableMouseTracking: false
    }
   },
   series: [{
    name: '東京',
    data: [7.0, 6.9, 9.5, 14.5, 18.4, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6]
   }, {
    name: '神戸',
    data: [3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8]
   },{
    data: mydata[0],
    name:'sample'
   }]
  });
 });

});

5.　body部にスクリプトの読み込みとDIVタグを設置


<script src="./js/highcharts.js">
</script>
  <script src="./js/modules/exporting.js">
</script>
  <div id="container" style="height: 400px; margin: 0 auto; min-width: 400px;">
</div>

とりあえず完成実は見よう見まねで作っているので、もっといい方法があるはずです。、わかる方教えてください（笑）

2012年5月13日日曜日

Raspberry Piはまだですか？

名刺サイズの超小型PC「Raspberry Pi PCBA Type B」にかなーり期待（＾＾なんと３５ドルという低価格のlinuxベースのPCで日本国内での販売が決定したようです。

発表直後から問い合わせが殺到したらしく、発売元のRSオンラインサイトも一時停止、復旧後はメアドを登録して、連絡待ちと言う状態。

私も3月に登録しましたが、順番待ちのよう・・・

5月8日に来たメールには４０００人オンラインストアへ招待があったとの旨がかかれたましたが、一体自分は何番なんでしょう？？？早く触ってみたいぜ～

（参考URL）

wikipedia - Raspberry Pi

RS online - Raspberry Pi

iPadアプリ　ひよっこカタログ(2)

今注目しているアプリ「ひよっこカタログ」

無料（！）で簡単な電子カタログが作れる注目のアプリなのですが、唯一難点なのが、「データの登録がiPad上でのみ」というところ。

なんとかならないか製作元のシステムアプローチ様に聞いてみました。

すると、どうやらデータ一括登録機能付きの新バージョンが近々（ほんとに近々らしい！）リリースされるとのこと！

楽しみにしてます～♪ ちなみにシステムアプローチ様では個別に登録も受け付けているようです。

2012年5月1日火曜日

au版Xperia Acro　IS11Sのテザリングについてメモ

au版Xperia Acro IS11SではAndroid標準のテザリング機能「テザリングとポータブルホットスポット」機能が殺されている。

Rootを取ることでこの機能を有効にすることはできるものの、実際に接続しようとすると、なぜかつながらない。
某掲示板にて原因について書かれたスレッドを発見した。
MTU値がその原因らしく、MTUを1500にすることで接続ができるらしい。

(参考サイト）

・　小さいものが好き

・　【ROM焼き】au Xperia acro IS11S Root5

iPadアプリ「ひよっこカタログ」

ちょっとした電子カタログを仕事で作りたいなーと思っていた中で見つけたのがこれ

ひよっこカタログ～育てるのはあなたです～

開発はSystem Approachという会社。なんともかわいらしいアイコンです（＾＾

商品情報を登録することでiPad上で商品カタログを作ることができるすぐれもの。しかも無料。

タイトル画面の画像に始まり、カタログ化したいジャンル、個別項目もすべて自分で設定できる。

画像は1アイテムにつきメイン画像＋3枚の計4枚が登録できるよう。

サンプルとして登録されているジュエリーカタログもしっかり作られていて、何ができるかがよくわかる。

現在のバージョンでは、情報の登録などはすべてiPad上で行わなければならず、作り上げたカタログの複製など、ひと手間かかるのが難点。

ただ「電子カタログを試してみたい」というお試しには最適なのではないだろうか。

(AooStore）
http://itunes.apple.com/jp/app/id477087563

登録: 投稿 (Atom)

お試しあれ！