ライブラリで操作するのがタグの中のアトリビュート値なので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.
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
hook設定しました。
ローカルのリポジトリからリモートへpushすると自動的に更新されるようになります。
なお、hookはシェルスクリプトをリポジトリ内のhooksフォルダ内に配置すれば実行できます。
権限は実行と読み取り可能、555であれば大丈夫 -r-xr-xr-x
post-receiveには、以下のようにシェルスクリプトを書きます。
#!/bin/sh cd /home/tomtomhouse/../../.. (※pullするフォルダの指定) git --git-dir=.git pull
これで、リモートへpushすれば、自動的に対象フォルダのデータがデプロイされます。
wordpressのGit管理をようやく始めました。
サーバ側
gitのリポジトリを作る
管理するファイル名に.gitをつけるとわかりやすい。
ローカル側
※私はサクラレンタルを使っているので。
あとは、リモートのリポジトリにpushして、公開しているwpのフォルダをpullで変更を更新。
ローカルでの変更の確認はMAMPなどを使うから、プレビューもすぐできるし、スムーズに開発できます。
まだ、hookの設定やssh接続の時のパスワードの設定なども入れてません。
次回はここら辺の設定もやって、もっと効率化してゆきたいと思います。
Xcodeでベクター（PDF）を使った開発方法
→http://www.bravesoft.co.jp/blog/archives/987
やってみました。思った以上にベクターデータが汚くて残念。
ちなみに、前知識としてXcodeでのレイアウトは320pxを基準にしています。
上から順番に・・・
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かもしれません。
iPhoneアプリの開発の時にベクターデーターを読み込むとき横幅320pxデザイン幅でpdfにして素材を渡すのですが、ベクターデーターはもともとイラストレーターで作成するので600dpi以上はあるので拡大縮小に問題なくきれいにネイティブアプリでレンダリングしてくれますが、ベクターデーターで素材を渡す事のできない写真素材とかしずる感たっぷりのpng画像等に関しては320pxのデザイン幅で素材を渡すととっても残念な事になります。
なので、ちょっと考えてみたのですが、@3のサイズでデザインしたpng画像をイラストレーター上で320px幅のおおきさに縮小して320pxデザイン幅のpdf素材として、提供したらどうだろうと。
iPhone上で展開されれば、他のベクターデータと同じような解像度で表示できるのではないのだろうか。
また、png画像の解像度を300dpiぐらいに設定してレンダリングさせたら作成したサイズで表示されるのだろうか？
もし、72dpiで表示されたら４〜５倍の大きさで表示されてしまわないのだろうか。
私はデザイナーなのですぐに検証する事が出来ない。
端末によって液晶の解像度が違うのでdpiの違うpng画像をそのまま表示させたら、表示サイズが変わる可能性が高いと思った。だから、pdfにするのが良いのではとも思った。両方試してみたい。
気になったのでメモ。
検証できたら、このブログでお知らせします。
とうとう、古い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
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 にかける半径に画像の拡大した数値の半分をたして、拡大後の座標の調節。
mHandler.postDelayed(インスタンス名, ミリ秒);
※例：mHandler.postDelayed(runLiveWallPaper, 400);
(int) System.currentTimeMillis();
※現在のミリ秒
開発環境がwindowsなので、今までmacで使っていたテキストエディタが無くなってしまい、いろいろな方に相談した所、最終的にvimとsublime text2 に着地しました。。。。
テキストエディタは作業内容によって使い分けれるように、１種類ではなく２種類以上は使いたいので、今まで使っていた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’
補完機能もばっちり。起動も速く申し分無いです！
調べ物をしておりまして、すばらしいブログを見つけました。
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>
