さとやn Blog

試合はRuby,勝負はC#!

AngularJS - Google検索するディレクティブを作る

AngularJS100日業の1つとして(実際に1日1つはできていなけど)今日はGoole検索のディレクティブを作った。 cssはBootstrapとか使用。

JavaScript

function GoogleSearchCtrl($http, $window) {                                                                                                                              
  var vm = this;                                                                                                                                                         
  vm.onSubmit = function(){                                                                                                                                              
    var apikey = 'YOUR API KEY';      
    var cx = 'YOUR CX';                                                                                                        
    var url = 'https://www.googleapis.com/customsearch/v1?key=' + apikey + '&cx=' + cx + '&q=' + vm.keyword + '&callback=JSON_CALLBACK';
    $http.jsonp(url)                                                                                                                                                     
    .success(function(res){                                                                                                                                              
      vm.result = res;                                                                                                                                                   
    })                                                                                                                                                                   
    .error(function(res){                                                                                                                                                
      console.log(res);                                                                                                                                                  
      $window.alert('error');                                                                                                                                            
    });                                                                                                                                                                  
  };                                                                                                                                                                     
}                                                                                                                                                                        
                                                                                                                                                                         
function googleSearchDiretive() {                                                                                                                                        
  return {                                                                                                                                                               
    restrict: 'EA',                                                                                                                                                      
    templateUrl: 'views/directives/google_search.html',                                                                                                                  
    controllerAs: 'gs',                                                                                                                                                  
    controller: ['$http', '$window', GoogleSearchCtrl],                                                                                                                  
  };                                                                                                                                                                     
}                                                                                                                                                                        

view

 <div class="panel panel-default">                
   <div class="panel-heading">                    
     <div class="panel-title">Google Search</div> 
   </div>                                         
   <div class="panel-body">                       
     <google-search />                            
   </div>                                         
 </div>             

template

<div>                                                                                                                                                                           
  <form name="gsForm" role="form form-horizontal" ng-submit="gs.onSubmit()" novalidate>                                                                                         
    <div class="form-group">                                                                                                                                                    
      <label for="" class="col-sm-2 control-label">Google</label>                                                                                                               
      <div class="col-sm-8 relative">                                                                                                                                           
        <input type="text" class="form-control" id="" placeholder="Input Search Word" required="input any words" ng-model="gs.keyword">                                         
        <a class="glyphicon glyphicon-remove-circle clearTextButton btn text-danger" ng-click="gs.keyword=null; gs.result = null;" ng-show="gsForm.$valid && gsForm.$dirty"></a>
      </div>                                                                                                                                                                    
      <div class="col-sm-2">                                                                                                                                                    
        <fieldset ng-disabled="gsForm.$invalid">                                                                                                                                
          <button type="submit" class="btn btn-default">Search</button>                                                                                                         
        </fieldset>                                                                                                                                                             
      </div>                                                                                                                                                                    
    </div>                                                                                                                                                                      
  </form>                                                                                                                                                                       
                                                                                                                                                                                
  <table class="table talbe-striped" ng-show="gs.result.items">                                                                                                                 
    <caption>Search Result</caption>                                                                                                                                            
    <thead>                                                                                                                                                                     
      <tr>                                                                                                                                                                      
        <th>TITLE</th>                                                                                                                                                          
        <th>LINK</th>                                                                                                                                                           
      </tr>                                                                                                                                                                     
    </thead>                                                                                                                                                                    
    <tbody>                                                                                                                                                                     
      <tr ng-repeat="item in gs.result.items">                                                                                                                                  
        <td class="text-info">                                                                                                                                                  
          <img class="img-rounded" src="{{item.pagemap.cse_thumbnail[0].src}}" alt="" style="width: 48px" ng-if="item.pagemap.cse_thumbnail">                                   
          {{item.title}}                                                                                                                                                        
        </td>                                                                                                                                                                   
        <td class="">                                                                                                                                                           
          <a href="" ng-href="{{item.link}}" target="_blank">{{item.displayLink}}</a>                                                                                           
        </td>                                                                                                                                                                   
      </tr>                                                                                                                                                                     
    </tbody>                                                                                                                                                                    
  </table>                                                                                                                                                                      
</div>                                                                                                                                                                          
                              
Screenshot from 2015-02-05 09:02:10

AngularJS - angular-translate で多言語対応

Railsではおなじみの I18n.translate("hoge") みたいなことをAngularJSでもやる場合は、なんかいくつかあるみたいだけど、
angular-translate というのが一番情報が多そうなので試してみた。
  とりあえず
bower intall angular-translate
でインストール。
  
angular.module("myApp", ["pascalprecht.translate"])
.config(function($translateProvider){
  $translateProvider.translation("ja",
    {
       NAME: "名前",
       AGE: "年齢",
    })});
viewで使う場合は
  <div  translate="NAME"></div> 
とやると
 
 <div>名前</div>
な感じになる。

JavaScriptで直接呼び出す場合は$filterから呼び出す

  var nameLabel = $filter("translate")("NAME"); // 名前

Railsと同様にネストしてても同じように使える

var label = $filter("translate")("MEMBER.NAME");
大文字にしているのはサンプルがそうなっていたからで特にそうしなければならないわけではないらしい。

AngularJS - ページが変更時に定期実行を停止する

AngularJSで $interval とか使ってデータを定期的に取得したりする場合、別のページに遷移しても明示的に処理を停止させないと全く関係ないページのデータの取得がバックグラウンドで継続してしまう。
そういう場合は $locationChangeStart イベントでタスクをキャンセルさせれば良い。

var intervalTaskId = $interval(
  function(){ console.log("hoge"); },
  1000
);

$rootScope.$on(
  "$locationChangeStart", 
  function(){ $interval.cancel( intervalTaskId ); }
);

grunt serve で外部からアクセス

docker コンテナでgrunt serve してブラウザでアクセスしても接続ができない。
ポート9000公開してるのに変だなー。Railsとか普通に見れるのになー。妙に変だなーと思って調べたら、Grunt.jsファイルの下記の部分を変更してあげる必要があるようです。

hostnameをlocalhostから0.0.0.0にすれば無事見れる。

    // The actual grunt server settings
    connect: {
      options: {
        port: 9000,
        // Change this to '0.0.0.0' to access the server from outside.
        // hostname: 'localhost',
        hostname: '0.0.0.0',
        livereload: 35729
      },

Mono3.4 のBuildでエラー

Ubuntuで Mono3.4をソースから入れようとしたところ、こんなエラーになった。

 cannot stat `targets/Microsoft.Portable.Common.targets': No such file or directory

Mono3.4ではこのファイルが欠けているらしい。
ということなので自分でファイルを作ってもう一回 sudo make install してやればいい。
中身は

  <Project xmlns="http://schemas.microsoft.com/developer/msbuild/2003">
   <Import Project="..\Microsoft.Portable.Core.props" />
   <Import Project="..\Microsoft.Portable.Core.targets" />
 </Project>

元記事は、
http://stackoverflow.com/questions/22844569/build-error-mono-3-4-0-centos 

Windows boot volumeを間違えて設定 元に戻す

Vmware上のWindowsXPでディスク容量を追加したくでDiskPartコマンで色々やっていたらBoot Volumeを間違ったものに設定したまま再起動をかけてしまった。
当然Operating system not found となりWindowsは起動できない。
かなり焦ったのだけれども、OSのインストールメディアがあれば回復モードみたいので起動できた記憶があったので、とりあえずすぐ用意出来たWindws8のISOイメージをマシンにセットして起動してみた。
Window8のインストール画面がでてきて、最初に言語とかキーボード配列とかを選択する画面が出るので次に進めると、修復するみたいなリンクが出てくるので、そちらからコマンドプロンプトに遷移できて、Diskpartコマンドで元のVolumeをBootVolumeに選択し直して再起動かけたら無事起動できた。
よかった〜。 

svnをGitに変換 memo

結構古いアプリの修正をする必要が出ててきたのだけれども、ソース管理にSVN使っていた時代のもので、そもそももうSVNとか立ててないし、Gitにしたいなー、ってことで作業しました。
またどこかでやることもあるかも知れないので作業メモ。

  1. バックアップしておいたSVNのダンプからSVNリポジトリを復活
  2. svnadmin load hoge_repos < svn_backup.dump
  3. git svn clone file:///xxxx/xxxxx/hoge_repos
 

WindowsのショートカットキーをOSXライクにする

GoogleIMEのOn/Offのショートカットキーを変更したくて色々調べていたらAutohotkeyというフリーのオープンソースのアプリを使えばかなり自由にショートカットキーをカスタマイズできることが判明。
メインマシンはOSXなのでIME以外のショートカットキーもOSXライクにしたい、ということで早速やってみた。
Autohotkeyは
http://www.autohotkey.com/
からダウンロード。

このツールは独自のスクリプトでバインドしたいキーの組み合わせを記述したファイルを作成してそいつを起動するとWindowsネイティブバイナリにコンパイル&実行&タスク常駐してWindowsメッセージをフックして押されたキーを監視してると思われる。 

で、下記のようなスクリプトを書いて実行するとだいぶいい感じになりました。
!q::Send !{F4}
!w::Send ^w
!space::Send !{sc029}
#space::Run C:\Users\Satoshi\AppData\Roaming\Microsoft\Windows\Start Menu\Programs\Launchy\Launchy
!c::Send ^c
!v::Send ^v
!t::Send ^t
!l::Send ^l
 
Alt+qでWindowClose(と言うかアプリ終了)
Alt+wでWindowとかTabをClose(Chromeとか対応していれば)
Alt+SpaceでIME切り替え
Win+SpaceでLanchy(ランチャーアプリ)起動。マックのAlfredみたいなやつ
Alt+Cでコピー
Alt+Vで貼付け
Alt+tで新規TAB(アプリが対応していれば)
Alt+lでアドレスバーにフォーカス

まだ使い始めたばかりなので、もっと便利になるかも、、、。 

Google日本語のOn/Offのショートカットキーを変更する

WindowsのIMEの切り替えはAlt+Tilda(全角半角)なのですが、私が普段使用しているキーボード(HHKB英語配列)のTildaの位置が通常の配置とは左右反対になっていまして、仕事でノートPCのキーボード使ったり自宅でHHKB使ったりで押し間違いが多発するので、Crtl+Spaceあたりに置き換えたいなーと思ってやり方を探してみました。結論としてはGoogleIMEのオプション設定画面でGUIで操作できます。以下今後の自分のためにもメモ。

コントロールパネルからこの画面を開いてOptionを開く。
 ime01
Google日本語のオプションを開く
ime02

KeymapStyleのCustomizeを開く
ime03

EditをクリックしてOn/Offに自分Ctrl+Spaceの組み合わせを追加(下の2つがそれ)。
ime04


これでOKにしても、以降に起動したアプリケーションに対して以下有効にならないので、手っ取り早くWindowsを再起動してしまったほうがいいです。

Windowsで認識しない空き領域をなんとかする

LinuxのExt4かなんかでフォーマットしたUSBメモリをWindows使おうとマシンに差し込んでフォーマットしようとしたらどうも認識していない。AdminToolのストレージ管理で見てみたら認識できない領域がある。いや、認識できないというより右クリックしても該当領域に対してできるアクションが無い(メニューが非活性状態)。どうしたものかなーと思ってぐぐってみたら、DiskPartとなるコマンド(管理者権限でコマンドプロンプトを起動しないと使えない)があり、それで色々できるとのこと。
詳しくは
http://geekswithblogs.net/ilich/archive/2013/04/26/recovering-unallocated-space-of-a-usb-flash-drive.aspx
を参照。

 
livedoor プロフィール
QRコード
QRコード
  • ライブドアブログ