2014年10月30日木曜日

ナノブロック アンバサダーモニターで『まちと電車のある風景』を体験

9ヶ月ぶりにブログ書く。ここしばらくは、技術ネタをQiitaにポストしてて、ブログは放置でした。

で、今回はナノブロックアンバサダープログラムのモニター企画に当選して、ナノブロックで遊んだので感想等々を。

今回いただいたのは、以下の商品。

作ってく様子は、Twitterに随時ポストしてたので、そちらを紹介。
最初にN700系を作り始めたんだけど、これが今回の中では最も難易度が高くて1時間かかった。
次の日は、ビルセットにトライ。
これも、なんだかんだ1時間近くかかった。
最後にストラクチャーベース。
今回のモニター品全てを並べるとこんな感じ。
子供の頃から、レゴには慣れ親しんでて、ブロックで何か作るのは割りと好き。ナノブロック自体も、ディズニーランドに行った時に買ってみたりしてたので、触るのは初めてではなかった。

今回3品作ってみて、小さいブロックで良く構成が考えられているなぁ、と。反面、オリジナルで何かを作るのが難しそうな印象。

各商品で余りブロックが結構出るので、その気になったら何か作ってみたいな。あと、今回のN700系を走らせてみたい。
投稿者 mas 時刻: 20:39 0 コメント
ラベル: ,

2014年1月27日月曜日

SVGで画像内のデータをJavaScriptから操作する

最近、後輩の仕事に関する相談をプライベートで解決するようになってきた…。

今回相談受けたのは、Webサイトに回路図のような画像を載せて、かつ図の中のデータをサーバ内のデータに応じて可変にしたいというもの。 元々は、それをHTMLでやりたい！と言っていたんだけど、さすがにその解決策は思いつかなくて、持ち帰り宿題化。

結局、解決策として提示したのがタイトルにもあるSVGを使ったアプローチ。 別の解決策として、HTML 5のCanvasタグを使って、画像を描くってのもあったけど、 Canvasタグが良く分かってなかった＋SVGの方が目的には簡単だったので却下。

やったことは、InkscapeでSVGファイルを作って、それをJavaScriptで操作すること。 SVGファイルを作るのにInkscapeを使ったのは、SVGの規格標準なファイルが作れることと、 Illustratorとは違ってフリーで使えたから。

MacにInkscapeをインストール

InkscapeはX11アプリなので、単純にダウンロードしてインストールじゃ動かない。 まずは、X11のインストールが必要。と言っても、昔はMac OS XにX11も含まれてたと思うけど、 今は含まれていないのでXQuartzをインストール。

Xquartzは、XQuartzのWebサイトからダウンロードしてきて インストール。

続いてInkscapeのインストールだけど、手順は公式サイトが 詳しく書いているので割愛。

Inkscapeで画像を描く

画像のように、ごくごく簡単な画像をInkscapeで描く。今回は、「80w」の部分を可変にするイメージ。

で、可変にしたい部分は、プロパティでIDを付与する。これは自動的にも付与されるんだけど、自分で付けた方がわかりやすいと思う。

画像を描いたら、SVGファイルとして保存する。

JavaScriptから操作する

SVGファイルはXMLになっているので、テキストエディタで開いてHTMLへコピペする。

今回は、以下のようなHTMLを用意した。テキストボックスに値を入れて、「書き換え」ボタンを押すと画像が変わる。


  
  画像マッピングテスト
  


  

    
      
      
      
        
          
            image/svg+xml
            
            
          
        
      
      
        
        
        
        80w
      
    
  

  

    ワット数を書き換える：

JavaScriptでこれを操作するのは、こんなコード。jQuery使ってる。

$(document).on("click", "#wButton", function() {
  console.log($("#textW01").text());
  $("#textW01").text($("#textW01edit").val());
});

こんな感じで、結構簡単に画像とJavaScriptのコラボレーションができた。

と、感動して後輩に伝えたら、上司に良くわからないものを使うな、と言われたらしい。 自分が知らないものを「良くわからないもの」で片付けるのは老害というのでは…。

投稿者 mas 時刻: 21:29 0 コメント
ラベル: ,

2013年11月23日土曜日

Android SDKの場所を変えた時にCordovaプロジェクトで修正すべき所

結構なレアケースだと思うんだけど、少しハマったので記録。

こんな条件の時に出会う。

  • Cordova 3.xのプロジェクトでAndroidをプラットフォームとして追加している
  • Cordovaプロジェクト作成後にAndroid SDKの場所を移動した

上記条件が揃うと、cordova buildが失敗するはず。build.xmlでSDKのbuild.xmlをimportできないって下のようなエラー。

[Error: An error occurred while building the android project.Error executing "ant clean -f /path/to/project/platforms/android/build.xml":         │
BUILD FAILED

原因は、platforms/android/local.propertiesにSDKの場所が書かれてるから。このファイルにある「sdk.dir」を移動したSDKの場所に書き換えればコンパイルできるはず。

今回、Android Studioに同梱されてるSDKをやめて、SDKのみをインストールし直したことからこんなことに…。

投稿者 mas 時刻: 22:08 0 コメント
ラベル: , ,

2013年11月8日金曜日

Gradleでfile.encodingをセットする

続けて、超小ネタを投稿。

Gradleでビルドしたjarに日本語クラス名のクラスがある時、そのクラスが見えない現象が発生。結局、jarをビルドした時のfile.encodingがMS932だったのが原因。

解決方法であるこの方法が効かなかったので、別の方法を取ることにした。この解決方法が効かなかったのは、GVMで入れたGradleだからかな？

今回解決したのは、build.gradleに以下を入れる方法。

System.setProperty('file.encoding', 'UTF-8')
投稿者 mas 時刻: 22:47 0 コメント
ラベル: , ,

Proxy環境でJenkins回すために

久しぶりの投稿。最近は、JavaやらBRMSやらJavaScriptをよくやってます。

今回は、今のプロジェクトで作っているものをJenkinsでビルド→テストしておこうと設定したので小ネタとして投稿。 こういうのは、プロジェクトの初期にやらないと泥沼になると @hideoku に聞いたので、 その教訓を活かしてプロジェクト初期の今のうちに設定。

例によって、Proxy環境に若干苦しめられたけど、なんとか完了。 以下、やったこと。

Jenkinsをyumでインストール

  • /var/lib/jenkinsに入る
  • jenkinsユーザのホームディレクトリもここに
  • GradleプラグインもJenkinsのシステム設定からインストール

Apacheと連携

Jenkinsが標準で使うポートをを他で使ってて、かつURLをhttp://server/jenkinsにしたかったので、/etc/sysconfig/jenkinsを編集

JENKINS_PORT="8084"
JENKINS_AJP_PORT="8010"
JENKINS_ARGS="--prefix=/jenkins"

AntとGradleをインストール

BRMS系のパッケージ作りはAntでのビルド、それを使う周辺はGradleでのビルドなので、両方ともインストール。

Jenkinsのシステム設定を見ると、自動インストールできそうだったけど、JDK以外は自動インストールが上手く行かなかったので、手動でインストールすることに。

と言っても、両方ともバイナリー版をダウンロードして、/usr/localにantとgradleとして置いて、/etc/profileに設定追加しただけ。

  export GRADLE_HOME=/usr/local/gradle
  export ANT_HOME=/usr/local/ant
  export PATH=$PATH:$GRADLE_HOME/bin:$ANT_HOME/bin

GradleのProxy設定

Gradleのビルド途中でdependency解決でインターネットに接続するけどProxy環境なので、/var/lib/jenkins/.gradle/gradle.propertiesを作成。

systemProp.http.proxyHost=proxy.jp
systemProp.http.proxyPort=8080
systemProp.http.proxyUser=hoge
systemProp.http.proxyPassword=hogehoge
systemProp.http.nonProxyHosts=*.hoge.com|localhost
systemProp.https.proxyHost=proxy.jp
systemProp.https.proxyPort=8080
systemProp.https.proxyUser=hoge
systemProp.https.proxyPassword=hogehoge
systemProp.https.nonProxyHosts=*.hoge.com|localhost

と、まぁこんな感じでJenkins環境ができた。来週からジャンジャンJavaとルールとJUnitテスト書かねば。

投稿者 mas 時刻: 22:40 0 コメント
ラベル: , ,