2015年7月 – ページ 4 – Linux & Android Dialy

blender の操作の復習

blender でオブジェクト編集

オブジェクト編集するには
対象のものを右クリックしてtab を押す

もしくは
Object mode
から
Edit mode
を選択すればいい

編集モードのキャンセルには
a キーを押せばいい

そして編集モードで頂点を変更するには
アイコンを選択して変更する

通常は頂点モード

真ん中のアイコンで辺モード

右側で面モードになる

なお、頂点をクリックするときには右クリックで
行うけど
複数を指定するなら
shift キーを押しながら右クリックする

写真スペースの設置

お店紹介ページでおすすめメニューを
表示すると見やすくなると思うので
写真を表示するスペースを設置します

この部分は後々 wordpress プラグインで
スライドショーに変えるというのもありです

とはいっても最初から素材を用意するのは大変なので
無料写真素材サイト
FOODIE’S FEED

のものを使わせていただくことにします

写真をクリックして
DOWNLOAD ボタンをクリックすれば
ダウンロードできます

あとは、このファイルをサイトのHTMLファイルのあるところへコピーします

ちなみに、このときにwordpress で使うことも考え
imageフォルダをつくっておくと
後々楽になります

mkdir image

ちなみに、ファイル名が長いので
変更しました

cp foodiesfeed.com_chicken-breast-potatoes-ratatouille.jpg food.jpg

これで準備ができたので

<img src="image/food.jpg" alt="" width="300" height="300">

を

<div role="main" class="ui-content">

の下へ貼り付けます

これで写真が表示されます

なお width=”300″ は横幅
height=”300″ は縦幅になります

せっかくなので、ここで更に写真を追加して
ランチの説明文もつけます
また、写真をスライドに後々変えたいのでタイトルに
ギャラリーとつけてみました

  <h2>ティーセット</h2>
  <h3>午後の緩やかな時間を本とともに</h3>
  <p>忙しい喧騒を離れ、午後はゆっくりとお茶を飲みたいときにおすすめです</p>
  <img src="image/tee.jpg" alt="" width="300" height="300">

<h3>ギャラリー</h3>
<img src="image/food.jpg" alt="" width="300" height="300">

これで写真エリアができました

ページ全体のソースは以下のようになります

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>jQuery Mobile</title>
<link rel="stylesheet"
href="http://code.jquery.com/mobile/1.4.3/jquery.mobile-1.4.3.min.css" />
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>

<script src="http://code.jquery.com/mobile/1.4.3/jquery.mobile-1.4.3.min.js">
</script>
</head>
<body>
<div data-role="page" data-title="jQuery Mobile">
<div data-role="header" data-add-back-btn="thue" data-back-btn-text="戻る">
 <h1>お店情報</h1>
</div>
<div role="main" class="ui-content">

  <h2>ティーセット</h2>
  <h3>午後の緩やかな時間を本とともに</h3>
  <p>忙しい喧騒を離れ、午後はゆっくりとお茶を飲みたいときにおすすめです</p>
  <img src="image/tee.jpg" alt="" width="300" height="300">

<h3>ギャラリー</h3>
<img src="image/food.jpg" alt="" width="300" height="300">

  <h3>メニュー</h3>
  <div data-role="collapsible">
    <h3>私のおすすめメニュー</h3>
    <p>イカスミパスタ</p>
  </div>

<h3>店舗情報</h3>
  <table data-role="table" data-mode="reflow" class="ui-responsive">
    <thead>
      <tr>
        <th>店名</th>
        <th>定休日</th>
        <th>価格</th>
        <th>住所</th>
        <th>電話番号</th>
        <th>HP</th>
        <th>アクセス</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>○○のお店</td>
        <td>日曜日</td>
        <td>ランチ1000円</td>
        <td>東京都</td>
        <td>000-000-0000</td>
        <td>http://example.co.jp</td>
        <td>○○駅○版口から徒歩</td>
      </tr>
    </tbody>
  </table>
<h3>周辺地図</h3>
  <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3241.7481415393895!2d139.74543744402948!3d35.65857638920314!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x60188bbd9009ec09%3A0x481a93f0d2a409dd!2z5p2x5Lqs44K_44Ov44O8!5e0!3m2!1sja!2sjp!4v1436313888247" width="600" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>


</div>
<div data-role="footer" class="ui-bar">

 <div data-role="navbar">
        <ul>
          <li><a href="#" data-icon="phone">電話</a></li>
          <li><a href="#" data-icon="location">地図</a></li>
          <li><a href="#" data-icon="edit">tweet</a></li>
        </ul>
      </div>
</div>
</div>
</body>
</html>

開閉パネルと地図の設置

まず最初に地図を埋め込みたいので
google map を開いて
東京タワーで検索

本来はお店の場所をいれるけど
とりあえずはダミーで入力しておく

画面左下の歯車マークをクリックし
地図を共有または埋め込む
をクリック

地図を埋め込むをクリックして
表示されているソースコードをコピー

挿入する場所は
table タグの下へ入れる

わかりやすいように h3 タグで周辺地図と表示しておく


<h3>周辺地図</h3>
  <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3241.7481415393895!2d139.74543744402948!3d35.65857638920314!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x60188bbd9009ec09%3A0x481a93f0d2a409dd!2z5p2x5Lqs44K_44Ov44O8!5e0!3m2!1sja!2sjp!4v1436313888247" width="600" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>

これで google map で地図が表示される

GoogleMapの地図をレスポンシブサイトに埋め込む方法

によれば
レスポンシブ対応にはCSS設定が必要らしいけど
これは後々 wordpress のプラグインで表示する予定なのでとりあえずはそのまま

次に開閉パネルの設置

私としては、お店のメニューは後で見るタイプなので
最初は表示せず
モバイルの wikiみたいに表示したいときにクリックする形式にしたい

リンクでメニュー表示でもいいけど、リンクして
ページ遷移して、また戻るというのは面倒

開閉パネルを作るには

・タイトル領域は h1 ～h6 で表す
・タイトル領域の後方に本文領域を配置する
・タイトル、本文全体を

<div data-role="collapsible">
</div>

　で囲む

という条件がある

これを元に作成


  <h3>メニュー</h3>
  <div data-role="collapsible">
    <h3>私のおすすめメニュー</h3>
    <p>イカスミパスタ</p>
  </div>

これを table 要素の前に配置する

これで開閉パネルが設置される

デフォルトでは閉じたままの状態でクリックすると表示される

現在の全体のソースコードは

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>jQuery Mobile</title>
<link rel="stylesheet"
href="http://code.jquery.com/mobile/1.4.3/jquery.mobile-1.4.3.min.css" />
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>

<script src="http://code.jquery.com/mobile/1.4.3/jquery.mobile-1.4.3.min.js">
</script>
</head>
<body>
<div data-role="page" data-title="jQuery Mobile">
<div data-role="header" data-add-back-btn="thue" data-back-btn-text="戻る">
 <h1>お店情報</h1>
</div>
<div role="main" class="ui-content">

      <h3>メニュー</h3>
      <div data-role="collapsible">
        <h3>私のおすすめメニュー</h3>
        <p>イカスミパスタ</p>
      </div>

<h3>店舗情報</h3>
  <table data-role="table" data-mode="reflow" class="ui-responsive">
    <thead>
      <tr>
        <th>店名</th>
        <th>定休日</th>
        <th>価格</th>
        <th>住所</th>
        <th>電話番号</th>
        <th>HP</th>
        <th>アクセス</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>○○のお店</td>
        <td>日曜日</td>
        <td>ランチ1000円</td>
        <td>東京都</td>
        <td>000-000-0000</td>
        <td>http://example.co.jp</td>
        <td>○○駅○版口から徒歩</td>
      </tr>
    </tbody>
  </table>
<h3>周辺地図</h3>
  <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3241.7481415393895!2d139.74543744402948!3d35.65857638920314!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x60188bbd9009ec09%3A0x481a93f0d2a409dd!2z5p2x5Lqs44K_44Ov44O8!5e0!3m2!1sja!2sjp!4v1436313888247" width="600" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>


</div>
<div data-role="footer" class="ui-bar">

 <div data-role="navbar">
        <ul>
          <li><a href="#" data-icon="phone">電話</a></li>
          <li><a href="#" data-icon="location">地図</a></li>
          <li><a href="#" data-icon="edit">tweet</a></li>
        </ul>
      </div>
</div>
</div>
</body>
</html>

ディレクトリファイルの比較

まずは、ログのバックアップをつくる

mkdir log_bak

このディレクトリへ
/var/log/
のバックアップをとる

sudo cp -rp /var/log/* log_bak/

まずは tree コマンドでみようとしたけど
CentOS に tree コマンドが入っていない

sudo yum install tree

で tree コマンドをインストール

これで準備できたので
tree コマンドでバックアップしたディレクトリの
階層構造をみてみる

sudo tree log_bak/|head

すると結果は以下のようになる

log_bak/
├── VBoxGuestAdditions-uninstall.log
├── VBoxGuestAdditions.log
├── anaconda.ifcfg.log
├── anaconda.log
├── anaconda.program.log
├── anaconda.storage.log
├── anaconda.syslog
├── anaconda.yum.log
├── audit

ちなみに、元のディレクトリも同じように見れる

sudo tree /var/log/ | head

/var/log/
├── VBoxGuestAdditions-uninstall.log
├── VBoxGuestAdditions.log
├── anaconda.ifcfg.log
├── anaconda.log
├── anaconda.program.log
├── anaconda.storage.log
├── anaconda.syslog
├── anaconda.yum.log
├── audit

[/shell]

ほんとはもっと沢山でるけど多すぎるので
head コマンドをつかうことで
出力を１０個までにしている

diff コマンドについては
diff – 2つのファイルの差分を出力 – Linuxコマンド

を参考に

オプションで -r を使えば
サブディレクトリも比較できるので
これを使えばディレクトリごと差分を調べられる

log_bak/ と /var/log/
の内容を比較するのなら

sudo diff -r log_bak/ /var/log/

とすればok

たくさんでてくるのでless コマンドと
合わせるほうがいいかもしれない

less コマンドの詳細は
【 less 】テキスト・ファイルの内容を閲覧する

を参考に

簡単な使い方マニュアルとしては

スペースキーで次のページ
g で最初のページ
shift + g で最後のページ
qで less　終了となる

ちなみに、ファイルに違いがあるかを調べたいのなら
diff の -q オプションをつかうともっと楽に
調べられる

sudo diff -rq log_bak/ /var/log/| less

とすれば、結果だけ表示できる

これを実行すると

ファイルlog_bak/audit/audit.logと/var/log/audit/audit.logは違います
ファイルlog_bak/boot.logと/var/log/boot.logは違います
ファイルlog_bak/cronと/var/log/cronは違います
log_bak/だけに発見: cron-20150604
/var/log/だけに発見: cron-20150707
ファイルlog_bak/dmesgと/var/log/dmesgは違います
ファイルlog_bak/dmesg.oldと/var/log/dmesg.oldは違います
ファイルlog_bak/httpd/access_logと/var/log/httpd/access_logは違います
log_bak/httpdだけに発見: access_log-20150604
/var/log/httpdだけに発見: access_log-20150707
ファイルlog_bak/httpd/error_logと/var/log/httpd/error_logは違います
log_bak/httpdだけに発見: error_log-20150604
/var/log/httpdだけに発見: error_log-20150707
ファイルlog_bak/lastlogと/var/log/lastlogは違います
ファイルlog_bak/maillogと/var/log/maillogは違います
log_bak/だけに発見: maillog-20150604
/var/log/だけに発見: maillog-20150707
ファイルlog_bak/messagesと/var/log/messagesは違います
log_bak/だけに発見: messages-20150604
/var/log/だけに発見: messages-20150707
ファイルlog_bak/mysqld.logと/var/log/mysqld.logは違います
ファイルlog_bak/secureと/var/log/secureは違います
log_bak/だけに発見: secure-20150604
/var/log/だけに発見: secure-20150707
log_bak/だけに発見: spooler-20150604
/var/log/だけに発見: spooler-20150707
ファイルlog_bak/wtmpと/var/log/wtmpは違います
ファイルlog_bak/yum.logと/var/log/yum.logは違います

というように
違う部部だけ表示できる

apktool を ubuntu にインストール

インストール方法は
Installation for Apktool 2.x

を参考に

https://raw.githubusercontent.com/iBotPeaches/Apktool/master/scripts/linux/apktool
へアクセスしページ中で
右クリックして名前をつけて保存
ファイル名は apktool にして保存する

次に
apktool-2をダウンロードするため
https://bitbucket.org/iBotPeaches/apktool/downloads
から最新版をダウンロード

なお、このソフトを使うには
64bit マシンの場合
ia32-libs
が必要になるのでインストール

ただし

sudo apt-get install ia32-libs

ではエラーになってしまう

解決策は
Linux Host Support CCSv6

にあり

sudo apt-get install libc6:i386 libx11-6:i386 libasound2:i386 libatk1.0-0:i386 libcairo2:i386 libcups2:i386 libdbus-glib-1-2:i386 libgconf-2-4:i386 libgdk-pixbuf2.0-0:i386 libgtk-3-0:i386 libice6:i386 libncurses5:i386 libsm6:i386 liborbit2:i386 libudev1:i386 libusb-0.1-4:i386 libstdc++6:i386 libxt6:i386 libxtst6:i386 libgnomeui-0:i386 libusb-1.0-0-dev:i386 libcanberra-gtk-module:i386 gtk2-engines-murrine:i386

で対応できるみたい

これでライブラリは問題ないので
次にダウンロードしてきたふぁいるを
/usr/local/bin
に移動させる

移動させる前に

cp -p apktool_2.0.0.jar apktool.jar

としておかないと名前が違って
apktool を実行したときにエラーになるので注意

sudo mv apktool /usr/local/bin/
sudo mv ダウンロード/apktool.jar /usr/local/bin/

で移動して

chmod +x /usr/local/bin/apktool*

で実行権限を与えれば
あとは apktool コマンドが使えるようになります

使い方は
apktool d apkファイル
となります

例えば

apktool d sample.apk

というように実行します

Ubuntu 15.04 に MariaDB のインストール

Ubuntu 15.04 64bit に MariaDB をインストールします

当初は、すでにインストールしてあった ubuntu で行う予定でしたが
mysql と MariaDB は共存できないため
新たに VirtualBox でマシンを作成して実験します

まず
クリーンインストールの後なので

sudo apt-get update

でパッケージリストを最新にしてから
ssh をインストールします

sudo apt-get install ssh

次に MariaDB をインストールします

sudo apt-get install mariadb-server

MySQL とは異なり、途中で root パスワード設定がありません

MariaDBを操作するには

sudo mysql -u root

でログインして操作します

次に、日経Linux に載っていた郵便番号データを格納してみます

wget http://www.post.japanpost.jp/zipcode/dl/kogaki/zip/ken_all.zip

でデータを取得

unzip ken_all.zip

で解凍

文字コード変換が必要なので
nkf をインストール

sudo apt-get install nkf

これで nkf で文字コードを変換する

nkf -w KEN_ALL.CSV >test.csv

これで文字コードを UTF-8に変換したものを
新しく text.csv として保存
ちなみに、もともとの文字コードは JIS

これで取り込むデータはOK

次にデータベース作成
データベース名は yubin にするので

MariaDBを操作するため

sudo mysql -u root

でログインして
sql でデータベースを作成していきます

create database yubin character set utf8;

これでデータベース名 yubin
文字コードを utf8 に設定

データベースができたら、次にテーブルを作成

その前にまず使うデータベースを指定します

use yubin;

次にテーブルを作成します

 create table number( code char(5), oldzip char(5), newzip char(7), prefecture1 varchar(10), city1 varchar(100), town1 varchar(100), prefecture2 varchar(10), city2 varchar(200), town2 varchar(200), flag1 int(1), flag2 int(1), flag3 int(1) ,flag4 int(1), update1 int(1), update2 int(1));

これでデータベースができたので
郵便番号をここへいれます

load data infile '/home/snowpool/test.csv' ignore into table number fields terminated by ',' optionally enclosed by '"';

ちなみに
/home/snowpool/test.csv
は、test.csv のあるパスです
~/test,csv
だとダメでした

これでデータベースに取り込むことができたので
実際に検索をしてみます

港区の郵便番号と住所を表示するには

select newzip,prefecture2,city2,town2 from number where city2="港区";

とすれば表示されます

お店情報をテーブルで表示する

お店情報の入力

まずはテーブルで作成してみる

店舗情報として
店名
定休日
価格
住所
電話番号
HP
を追加したいので、これを
テーブルタグで作成

<table id="info" data-role="table" data-mode="reflow" class="ui-responsive">

</table>

としてレスポンシブ対応にします

次にテーブルのタイトルや値を設定していきます

jquery mobile でテーブルを作成するときのポイントとして

・table には id を明示する

・テーブルの先頭はタイトル行になっていること
つまり th でマークアップすること

・長いタイトルの場合abbr で定義する

・data-role=”table” を設定して jqeury mobile
のUIを反映させる

・class=”ui-responsive” をつけてレスポンシブ対応にする

というかんじです

まずはテーブルのタイトルを作ります
内容は

店名
定休日
価格
住所
電話番号
HP
となります

これを thead の中へ作ります


    <thead>
      <tr>
        <th>店名</th>
        <th>定休日</th>
        <th>価格</th>
        <th>住所</th>
        <th>電話番号</th>
        <th>HP</th>
      </tr>
    </thead>

次にテーブルの値ですが
とりあえずはダミーをいれておきます


    <tbody>
      <tr>
        <td>○○のお店</td>
        <td>日曜日</td>
        <td>ランチ1000円</td>
        <td>東京都</td>
        <td>000-000-0000</td>
        <td>http://example.co.jp</td>
      </tr>
    </tbody>

これでレスポンシブ対応テーブルの出来上がりです

ソースにすると

<div role="main" class="ui-content">

  <table data-role="table" data-mode="reflow" class="ui-responsive">
    <thead>
      <tr>
        <th>店名</th>
        <th>定休日</th>
        <th>価格</th>
        <th>住所</th>
        <th>電話番号</th>
        <th>HP</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>○○のお店</td>
        <td>日曜日</td>
        <td>ランチ1000円</td>
        <td>東京都</td>
        <td>000-000-0000</td>
        <td>http://example.co.jp</td>
      </tr>
    </tbody>
  </table>

</div>

となります

戻るボタンとタイトル変更

戻るボタンとタイトル変更

お店情報ページの作成

で
フッターにナビゲーションを設置したので
今回はまずは
タイトルの変更と
戻るボタンを設置します

ナビゲーションの設置には
Navbarウィジェットでナビゲーションバーを作成するには？

がとてもわかりやすいです

まずタイトル変更します

<div data-role="header">
 <h1>jQuery Mobile</h1>
</div>

の h1 で囲まれた部分がタイトルなので
jQuery Mobile
をお店情報に変えます

次に、戻るボタンを設定するのですが
これはリンクして表示しないと効果がでません

なので、base.html をコピーして
index.html を作ります
linux なら

cp base.html index.html

で作成可能です

ちなみに、お店情報ページは shop.html にしています

まず、リンクするボタンをつくるので

<a class="ui-btn" href="shop.html">お店情報</a>

を
index.html の

<div role="main" class="ui-content">
  本文だよ
</div>

へ追加します

class=”ui-btn” はボタンのレイアウトです
これでソースが

<div role="main" class="ui-content">
  本文だよ
  <a class="ui-btn" href="shop.html">お店情報</a>
</div>

となります

次に、戻るボタンを
お店情報のページになる
shop.html
へ追加します

これを追加するには

data-add-back-btn="true" data-back-btn-text="戻る"

を

<div data-role="header" >

に追加します

ソースにすると

<div data-role="page" data-title="jQuery Mobile">
<div data-role="header" data-add-back-btn="true" data-back-btn-text="戻る">
 <h1>お店情報</h1>
</div>

これで戻るボタンができます

なお戻るという文字ではなく back とか return とかに
したいのなら
data-back-btn-text=”戻る”
の部分を
data-back-btn-text=”back”
とか
data-back-btn-text=”return”
とすれば表示される文字が変わります

これで実行するには、まず index.html からアクセスします
直接 shop.html からのアクセスの場合
戻るボタンは表示されないので注意してください

お店情報ページの作成

JqueryMobile で作成して、
後々 wordpress のテンプレにしようと思います

まずは最初にベースとなるHTMLを作り
後からでも改造できるようにします

ファイル名は base.html

ソースは

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>jQuery Mobile</title>
<link rel="stylesheet"
href="http://code.jquery.com/mobile/1.4.3/jquery.mobile-1.4.3.min.css" />
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>

<script src="http://code.jquery.com/mobile/1.4.3/jquery.mobile-1.4.3.min.js">
</script>
</head>
<body>
<div data-role="page" data-title="jQuery Mobile">
<div data-role="header">
 <h1>jQuery Mobile</h1>
</div>
<div role="main" class="ui-content">
  本文だよ
</div>
<div data-role="footer">
 Copyright 1998-2015
</div>
</div>
</body>
</html>

このファイルは以下のようになります

このページを元にお店情報ページを作成します
なお、最初はHTMLと JavaScript でつくり
あとから wordpress のテンプレに変えていきます

ページ構成は
店舗情報
写真
メニュー
地図

店舗情報は
店名
定休日
価格
住所
電話番号
HP

使いやすくしたいので、
フッターにナビゲーションを配置する

お店関連なので
電話
地図
tweet ぐらいかな
tweet はメールとか line にしてもいいかもしれない

まずはこれだけでOK
カメラとかはお店の前でないと使わないし
現在地でカメラだすこともないと思う

まずは、フッター部分のソースを変えます

 <div data-role="navbar">
        <ul>
          <li><a href="#" data-icon="phone">電話</a></li>
          <li><a href="#" data-icon="location">地図</a></li>
          <li><a href="#" data-icon="edit">tweet</a></li>
        </ul>
      </div>
</div>

を

<div data-role="footer">

</div>

の中へ貼り付けます

これで以下のようになります

フッターの
見た目が微妙だったので
class=”ui-bar”
を

<div data-role="footer">

</div>

へつけることで余白がつくようにします

これでフッターのソースは

<div data-role="footer" class="ui-bar">

 <div data-role="navbar">
        <ul>
          <li><a href="#" data-icon="phone">電話</a></li>
          <li><a href="#" data-icon="location">地図</a></li>
          <li><a href="#" data-icon="edit">tweet</a></li>
        </ul>
      </div>
</div>
</div>

となります

月別: 2015年7月

blender の操作の復習

お店一覧ページ作成

写真スペースの設置

開閉パネルと地図の設置

ディレクトリファイルの比較

apktool を ubuntu にインストール

Ubuntu 15.04 に MariaDB のインストール

お店情報をテーブルで表示する

戻るボタンとタイトル変更

お店情報ページの作成