これからじわじわやっていきたいこと

めざせ 脱スマホ!

 

 

2代目iphoneからのスマホ歴ですが、不可欠かっていうとなんかそうでもないことに気づいてきました。本当に携帯中だけ必要なものってあんまないなぁと思ったわけです。電話と、textと、メールと、マップくらいかなって。それ以外ってwifiがある時まで待てるんですよ。

電話だったら基本的に時間通りに待ち合わせ場所に行ければok

textもメールも家でやればok

マップは...迷う楽しみを取り戻したと思えばok。大体は数字の番地だし。っていうか運動不足だし。

 

 

すると、にわかにスマホいらないんじゃないか説が浮上してきたのです。ポケットに入るようなタブレットさえ持っていればビジネスでも十分いけるんですよね。誰かと話したかったら、wifiがあるとこにいけばいくらでも通話アプリはあるんですよ。

そのかわり、いままでアプリで使っていた機能を自分用のウェブサービスにしてしまおうと画策中。ニュースフィードや、SNSや家計簿は自分用ダッシュボードを作って管理したらいいよね。そうしたら自分にあったアプリを探すよりも、自分で必要な機能をつけていけるし、OSがアップデートしても無問題。

 

 

まわりのみんなが、ほとんどの世代でスマホをいじるような時代になってふと気付いたのです。あぁ、自分も使い始めた時はたぶん気づかずに結構失礼なこともしちゃってたんだろうなぁ、ってこと。

それと、ここのエントリがダメオシ。

 

 

シンプルな生活がしたいよ、僕は今。

Yeoman Angular Generatorでgrunt buildするとtemplatesフォルダがdistに行かない件

自前でdirectiveなんかを作って、テンプレートHTMLのファイルをtempleteURLを指定したがよいものの、いざgrunt buildをしてみると、テンプレートを保存したフォルダtemplatesがdistに流れていかない!という現象にぶつかったので。

色々方法はあるんでしょうが、一つの方法は grunt-angular-templates をつかう方法です。今回これをやってみました。(ちなみにこのサイトに大変お世話になりました。記事はもう1年前のもの。先取りすごい!grunt-angular-templatesを使ってみたygoto3's caught up)

ようはテンプレートHTMLをJavascriptの一部にして、結合してしまおうというアイディアですね。grunt buildの際にひとまとめにされるjavascriptのなかに入れちゃえば、ファイルをわざわざコピーしなくてもいいじゃん、てことかな。

具体的には、templateCacheで準備させて、呼び出しの際はキャッシュにある内容が読み込まれるようにしておくというカラクリみたいです。

もちろんインストールは

$ npm install grunt-angular-templates --save-dev

そして、Gruntfile.jsに

grunt.loadNpmTasks('grunt-angular-templates');

を追加します。ぼくは grunt.initConfig がおわったすぐ後あたりに書きました。

そしてタスクの内容を設定しますが、それは grunt.initConfig内の最後の方にこんな感じで書きました。

ngtemplates:  {
      app: {
        cwd:      'app', 
        src:      'templates/**.html',
        dest:     'app/scripts/app.templates.js',
        options: {
          module: '<%= yeoman.appname %>',
            htmlmin: {
              collapseBooleanAttributes:      true,
              collapseWhitespace:             true,
              removeAttributeQuotes:          true,
              removeComments:                 true,
              removeEmptyAttributes:          true,
              removeRedundantAttributes:      true,
              removeScriptTypeAttributes:     true,
              removeStyleLinkTypeAttributes:  true
            }
        }
      }

それぞれ何がどの設定なのかは公式ページの説明を見ていただきたいのですが、「srcに指定されたテンプレートHTMLたちを、destに指定されたjsファイルに格納して、その際にはhtmlminで圧縮してね。その際にangular.module(ほにゃらら)にはmoduleで指定した名前をいれておいてね」といった具合です。Yeoman Angular GeneratorではGruntfile.jsと同じ階層にappフォルダあるので、作業はそのフォルダでやってもらうためにcwdも指定しています。

こうすればdistをサーバーにアップしてもテンプレートはきちんと読めてるし、しかもXHRも抑えられる。一挙両得ですな。

YeomanにてBower Componentを自動インジェクトするには

Yoemanを使ってて、もしBowerでコンポーネントをインストールする必要があるなら、--saveオプションが必須のようですね。

> bower install [コンポーネント名] --save

こうすると、コンポーネントがインポートされて、同時にbower.jsonにインストールされた旨が書き込まれます。

で、続けて

> grunt serve

もしくは

> grunt wiredep

ってすると、index.htmlのスクリプトタグが更新されて、インストールしたコンポーネントも使えるようになるようです。Gruntすげぇ。

Node+Angularでファイルアップロードアプリ作ってみた

ここ見て作ってみました。

Christophe Geers' Blog - AngularJS File Upload

まとめのところだけ引用すると、

To recapitulate, we have 3 components that make up our Angular application:

FileUploadCtrl: Our controller which is tied to a DIV which contains the file upload widget

uploadManager Service: This service manages the files we want to upload. It sends out a couple of events to which our controller listens and acts to accordingly.

upload Directive: This directive transforms the file input into a bonafide upload widget. It uses the widget’s callbacks to notify the uploadManager service.
— http://cgeers.com/2013/05/03/angularjs-file-upload/#summary

雰囲気的には

  • FileUploadCtrlはファイルアップロードウィジェットのあるDIVとつながるコントローラ
  • uploadManager Serviceはアップロードするファイルの管理をしてて、必要に応じてコントローラにイベントを送信
  • upload Directiveはファイルを実際のアップロード処理でアップロードするところ。おわったらコールバックでuploadManager Serviceに通知

という感じですかね。

YEOMANである程度組み立てて、それから自分のロジックを組み込んでいくっていうのもいいね!

次はMongoDBをくっつけてみよう。

NPMでこんなエラーが出たら

npmコマンドを使うときにこんなエラーが出てきたら。

npm ERR! Error: EACCES, ...
...
中略
...
npm ERR! Please try running this command again as root/Administrator.

chownを二つの場所に当てればいいそうです。

chown -R `whoami` ~/.npm
chown -R `whoami` /usr/local/lib/node_modules

それにしてもYEOMANすげぇ。