tomo.mobi

Representation design of material


D3 [Data-Driven Documents]

https://d3js.org/

ライブラリで操作するのがタグの中のアトリビュート値なのでsvgの記述方法を基礎知識として先に学んでおいたので、わかりやすかったです。とくにsvgアニメーションを少しやっておいたのが良かった。

なお、codepenのサンプルの線グラフのようなものは、polylineの記述の上にcircleの記述。

https://developer.mozilla.org/ja/docs/Web/SVG/Element

See the Pen D3 [Data-Driven Documents] by tomo (@tomoka) on CodePen.

Published by tomoka , on 3月 12th, 2017 at 10:51 am. Filled under: 未分類,調べものNo Comments
この記事を読む

GitHubでwordpress管理

blogのデータをGitHubで管理できるように設定しました。
クライアント側の設定はいつも通りのGitHubとのremote設定。GitHub側のデプロイするリポジトリのSettingのWebhookの設定で外部サーバへデプロイする仕組みを用意します。

設定を埋めてゆきます。
受け取りのファイルを作ります。
https://git-scm.com/book/ja/v2/GitHub-%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%97%E3%83%88%E3%81%AB%E3%82%88%E3%82%8B-GitHub-%E3%81%AE%E6%93%8D%E4%BD%9C
https://developer.github.com/webhooks/

<?php
$SECRET_KEY = 'Secretに入れた文字列';
$LOG_FILE = dirname(__FILE__).'/hook.log'; #ログを取る場所

if (! isset($_SERVER['HTTP_X_HUB_SIGNATURE'])) die();
if (! $_SERVER['HTTP_X_HUB_SIGNATURE'] === sha1($SECRET_KEY)) die();
$json_string = file_get_contents('php://input');
$payload = json_decode($json_string, true);
if (! $payload['ref']) die();

if ($payload['repository']['full_name'] === 'アカウント名/リポジトリ名' && $payload['ref'] === 'refs/heads/更新該当のブランチ') {
  shell_exec("sh deploy.sh");
  file_put_contents($LOG_FILE, date("[Y-m-d H:i:s]")." ".$_SERVER['REMOTE_ADDR']." git pulled: ".$payload['head_commit']['message']."\n", FILE_APPEND|LOCK_EX);
}else{
	file_put_contents($LOG_FILE, date("[Y-m-d H:i:s]")." invalid access:認証通っていません ".$_SERVER['REMOTE_ADDR']."----\n", FILE_APPEND|LOCK_EX);
}
?>

上記スクリプトは、http://takemikami.com/2016/01/11/GitHubWebhookgit-pushdeploy.htmlを参考にさせていただいております。ありがとうございます。
受け取って、リクエストが指定したリポジトリからで、イベントとキーが一致したら、
gitコマンドをシェルスクリプトで実行します。

#!/bin/sh
cd /home/tomtomhouse/www/www.tomo.mobi/wordpress
git --git-dir=.git pull origin master

受け取りのプログラムファイルもgitコマンドを打つシェルスクリプトもファイルの権限は「実行」に設定します。
この時、SSH通信でRSA暗号のパスフレーズが必要のときは、ssh-keygenでキーを生成するときにパスフレーズの設定を無しで作ると良いです。

備考
.gitignoreはGitHubのものを使うのが良いと思います。
https://github.com/github/gitignore/blob/master/WordPress.gitignore

Published by tomoka , on 3月 12th, 2017 at 12:16 am. Filled under: github,調べものNo Comments
この記事を読む

wordpress Git 管理 hooks編

hook設定しました。
ローカルのリポジトリからリモートへpushすると自動的に更新されるようになります。
なお、hookはシェルスクリプトをリポジトリ内のhooksフォルダ内に配置すれば実行できます。

  1. cd git/リポジトリ名.git
  2. vi .git/hooks/post-receive(.gitフォルダではないときはgit内のhooksフォルダに作成)
  3. chmod +x .git/hooks/post-receive

権限は実行と読み取り可能、555であれば大丈夫 -r-xr-xr-x
post-receiveには、以下のようにシェルスクリプトを書きます。

#!/bin/sh

cd /home/tomtomhouse/../../.. (※pullするフォルダの指定)
git --git-dir=.git pull

これで、リモートへpushすれば、自動的に対象フォルダのデータがデプロイされます。

Published by tomoka , on 2月 6th, 2017 at 12:33 am. Filled under: 未分類,調べものNo Comments
この記事を読む

wordpress Git 管理

wordpressのGit管理をようやく始めました。

サーバ側
gitのリポジトリを作る

  1. cd /home/アカウント名
  2. mkdir git(自分のhomeにgitフォルダを作って、そこで管理しようと思う)
  3. cd git
  4. mkdir tomo_mobi.git

管理するファイル名に.gitをつけるとわかりやすい。

ローカル側

  1. git init
  2. git remote remote add origin ssh://アカウント名@アカウント名.sakura.ne.jp/home/アカウント名/../../../git_test.git

※私はサクラレンタルを使っているので。

あとは、リモートのリポジトリにpushして、公開しているwpのフォルダをpullで変更を更新。
ローカルでの変更の確認はMAMPなどを使うから、プレビューもすぐできるし、スムーズに開発できます。

まだ、hookの設定やssh接続の時のパスワードの設定なども入れてません。
次回はここら辺の設定もやって、もっと効率化してゆきたいと思います。

Published by tomoka , on 2月 5th, 2017 at 3:30 pm. Filled under: git,wordpress,調べものNo Comments
この記事を読む

iPhoneアプリの素材、pngやpdfの読み込みに関してやってみた!

Xcodeでベクター(PDF)を使った開発方法
http://www.bravesoft.co.jp/blog/archives/987

やってみました。思った以上にベクターデータが汚くて残念。
ちなみに、前知識としてXcodeでのレイアウトは320pxを基準にしています。
スクリーンショット 2015-05-07 0.06.10

上から順番に・・・

1)アートワーク50px*50pxのベクターデータ(pdf)
2)キャンバス50px*50px 72dpiのpng
3)アートワーク50px*50pxにキャンバス50px*50px300dpiのpngを貼付けたpdf

それぞれを180*180のImage Viewに貼り込んでみました。
ベクターデータが一番きれいかなと思ったのですが、違った・・・!

でも、このやり方で素材を渡せば、@3で作った素材のクォリティーそのままで想像以上に汚くならず、しかも、素材の配置に手計算とかしなくても良いし、余計な手間がかからなくてすむかも。
※ちなみに、50px*50pxサイズの解像度違い300dpiと72dpiの画像貼り分けはほぼ変わりませんでした。
(やった後、そりゃそうだと思ったw)

pdfよりも300dpi相当の解像度の画像をpdfで圧縮した方がキレイになる事が分かりました。
300dpiだから@4相当です。

ちなみに、@3相当で作成するとベクターと同じ見栄えになります。
キャプチャ→サンプル画像はこちら

これから@3以上の@4、@5が出てきた時のことを考えるとベクターで素材を作るのがbestかもしれません。


Published by tomoka , on 5月 7th, 2015 at 12:22 am. Filled under: app,smartphone,未分類,調べものNo Comments
この記事を読む

iPhoneアプリの素材、pngやpdfの読み込みに関してやってみたい事

iPhoneアプリの開発の時にベクターデーターを読み込むとき横幅320pxデザイン幅でpdfにして素材を渡すのですが、ベクターデーターはもともとイラストレーターで作成するので600dpi以上はあるので拡大縮小に問題なくきれいにネイティブアプリでレンダリングしてくれますが、ベクターデーターで素材を渡す事のできない写真素材とかしずる感たっぷりのpng画像等に関しては320pxのデザイン幅で素材を渡すととっても残念な事になります。
なので、ちょっと考えてみたのですが、@3のサイズでデザインしたpng画像をイラストレーター上で320px幅のおおきさに縮小して320pxデザイン幅のpdf素材として、提供したらどうだろうと。
iPhone上で展開されれば、他のベクターデータと同じような解像度で表示できるのではないのだろうか。

また、png画像の解像度を300dpiぐらいに設定してレンダリングさせたら作成したサイズで表示されるのだろうか?
もし、72dpiで表示されたら4〜5倍の大きさで表示されてしまわないのだろうか。

私はデザイナーなのですぐに検証する事が出来ない。
端末によって液晶の解像度が違うのでdpiの違うpng画像をそのまま表示させたら、表示サイズが変わる可能性が高いと思った。だから、pdfにするのが良いのではとも思った。両方試してみたい。

気になったのでメモ。
検証できたら、このブログでお知らせします。

Published by tomoka , on 5月 2nd, 2015 at 9:41 am. Filled under: app,iPhone,smartphone,調べものNo Comments
この記事を読む

Twitterのapi

とうとう、古いapiが削除されてしまいました。。。。。
こうなる前に、改修しなくてはならなかったのですが、ここまで来てしまい今になって改修。

で、今回改修でとても便利なプラグインととても解りやすく、
親切な記事を見つけましたので、今後の事をふまえ、メモを残します。

twitter api1.1対応に関して(アプリ登録〜実装まで)
http://www.webopixel.net/php/666.html
※本当に親切に書いてあって、本当に助かりました!すばらしい @_@

記事に書いてあったオース認証のソース(GitHub)
https://github.com/abraham/twitteroauth

そして、改修したサイト。。。。。
http://tirol-bag.shop-pro.jp/
ほんとうに、すみません。いつも、お世話になっています。

そうそう、今回は久しぶりにphpを使ったのですが、自動リンクの記述を調べたので、今後の為にメモ。。。。

$str = "テキストテキストhttp://www.sample.com/sample";
$str = preg_replace("|http://\w+(?:-\w+)*(?:\.\w+(?:-\w+)*)+(?::\d+)?(?:/[\w\-~/%&=+#\.\?;]*)?|", '$0', $str);

結果
テキストテキストhttp://www.sample.com/sample

Published by tomoka , on 6月 30th, 2013 at 2:14 am. Filled under: app,twitter,いまさら,調べものNo Comments
この記事を読む

拡大して広がる星の座標

class Star{
int x;
int y;
}

star[i].x = (int) ((starX) + (Math.cos(degree[i])*(radius+itemTouch.getWidth()*ScaleSize*2)));
star[i].y = (int) ((starY) + (Math.sin(degree[i])*(radius+itemTouch.getHeight()*ScaleSize*2)));

sin cos にかける半径に画像の拡大した数値の半分をたして、拡大後の座標の調節。

Published by tomoka , on 6月 9th, 2013 at 11:23 pm. Filled under: Android,app,smartphone,調べものNo Comments
この記事を読む

時間遷移もろもろ

mHandler.postDelayed(インスタンス名, ミリ秒);
※例:mHandler.postDelayed(runLiveWallPaper, 400);

(int) System.currentTimeMillis();
※現在のミリ秒

Published by tomoka , on 1月 4th, 2013 at 1:53 am. Filled under: Android,調べものNo Comments
この記事を読む

テキストエディタ

開発環境がwindowsなので、今までmacで使っていたテキストエディタが無くなってしまい、いろいろな方に相談した所、最終的にvimとsublime text2 に着地しました。。。。

テキストエディタは作業内容によって使い分けれるように、1種類ではなく2種類以上は使いたいので、今まで使っていたmi(windows版)とvim か sublime text2にたどり着きました。

で、sublime text2パッケージコントロールツールのインストール方法。。。。。

【sublime text2】

ctrl+` または メニューバー View → Show Console でコンソールを表示して下のコードをペーストします。

import urllib2,os; pf=’Package Control.sublime-package’; ipp=sublime.installed_packages_path(); os.makedirs(ipp) if not os.path.exists(ipp) else None; urllib2.install_opener(urllib2.build_opener(urllib2.ProxyHandler())); open(os.path.join(ipp,pf),’wb’).write(urllib2.urlopen(‘http://sublime.wbond.net/’+pf.replace(‘ ‘,’%20’)).read()); print ‘Please restart Sublime Text to finish installation’

補完機能もばっちり。起動も速く申し分無いです!

Published by tomoka , on 10月 26th, 2012 at 10:34 am. Filled under: 未分類,調べものNo Comments
この記事を読む

レートAPI

調べ物をしておりまして、すばらしいブログを見つけました。
http://frozenstream.blog6.fc2.com/blog-entry-888.html 
恐縮致しますが、参考にさせて頂きます。


//APIの使用。1はバージョン
google.load(“feeds”, “1”);

//下記google.setOnLoadCallbackで読み込まれる関数
function initialize() {

//読み込むRSSFeed
var feed = new google.feeds.Feed(“http://xurrency.com/1.49/usd/to/jpy/feed”);

//XMLフォーマットで使用する
feed.setResultFormat(google.feeds.Feed.XML_FORMAT);

feed.load(function(result) {
if (result.error) return;

//ID「convert」に内容を書き出し
var container = document.getElementById(“convert”);

//RSSの中から<item>を探す
var items = result.xmlDocument.getElementsByTagName(“item”);

//itemの中からdc(http://purl.org/dc/elements/1.1/)のvalueの値を取り出す
var element = google.feeds.getElementsByTagNameNS(items[0], “http://purl.org/dc/elements/1.1/”, “value”)[0];

//データにクレジットカード手数料をかけて四捨五入で取り出す
data[0] = Math.round((element.firstChild.nodeValue)*100*1.0163)/100;
});

//データの表示を指定
container.innerHTML +=

//起動時にinitializeを読み出す
google.setOnLoadCallback(initialize);

<body>
<div id=”convert”></div>

Published by tomoka , on 10月 14th, 2012 at 10:04 am. Filled under: 調べものNo Comments
この記事を読む