Chromeのアプリを追加してみた

Chromeのアプリケーションが表示されるページ( chrome://apps )を
私はWEBページショートカット置き場に使っている。

新しいMacBookAirに買い換えたときに以前まで使用していたアプリが
「作成者が削除したため使えません」と言われてしまってとても不便な思いをしていた。

あまりにも不便すぎたので自分でアプリを作れるか試したところ、
とてつもなく簡単に作れてしまったのでやってみた。


アプリ追加の流れ

1. manifest.json ファイルを作る
2. 128 x 128 の画像ファイルを用意する
3. 1と2で作ったファイルをChrome拡張機能パッケージ化
4. Chromeに追加する

手順

1. manifest.json ファイルを作る
{
  "manifest_version": 2,
  "name": " xxxxx ",
  "description": " xxxxx ",
  "version": "1.1",
  "icons": {
    "128": "xxxxx.png"
  },
  "app": {
    "urls": [
      " xxxxx "
    ],
    "launch": {
      "web_url": " xxxxx "
    }
  },
  "permissions": [
    "unlimitedStorage",
    "notifications"
  ]
}

^ 「 xxxxx 」のところを変更した

2. 128 x 128 の画像ファイルを用意する

用意したら任意の名前をつけたフォルダにmanifest.jsonと画像を入れる


3. 1と2で作ったファイルをChrome拡張機能パッケージ化

Chrome拡張機能ページ( chrome://extensions/ )に移動。
上部にある「拡張機能のパッケージ化」をクリックして、開いたダイアログの「拡張機能のルートディレクトリ」に
作ったフォルダを指定して、「拡張機能のパッケージ化」

フォルダと同じ階層に「フォルダ名.crx」と「フォルダ名.pem」の2のフォルダが生成される。

4. Chromeに追加する

Chrome拡張機能ページ( chrome://extensions/ )に
生成された「フォルダ名.crx」をドラッグあんどドロップして追加する。

これでアプリページ( chrome://apps )に表示されてるはず!
されてなかったら知らない。


作ったフォルダと生成されたファイルは削除してしまって問題ないらしい。
(私は一応残してる)



アプリの公開はしないからブログには書かないが、
もし必要があれば公式を見ればおk


support.google.com


これでpivotalを一発で開けるようになったぞ!

codemirror-rails を使おうとして苦戦したこと

http://codeshare.io/を久しぶりに使ってみて
似たようなWebアプリを作ってみたい欲に駆られたので、
ソースを見ていたらCodeMirrorというものを使ってるらしいということがわかった

CodeMirrorとは

JavaScriptライブラリで、シンタックスハイライトやオートインデント、
行番号表示などコードエディタとして必要な機能を一通り揃えており、対応言語も多数ある模様。
また、アドオンを導入することで括弧の補完やハイライト、Ctrl+Spaceでコードの自動補完などの機能を持たせることもできる。
あと他ライブラリに非依存なので導入しやすい。

Rails上でもcodemirrorは使えるらしいので、早速使ってみることに。
まさかここから戦うことになるとは思うまい…

github.com

Getting started通りに進めていく...もエラー発生
f:id:K396_109:20151128160652p:plain

( ・`ω・´) < CodeMirrorなんてねえです!!!

このエラーに丸1日悩まされました。

解決法

apprication.js

// = require codemirror

footer_javascript

# = require codemirror/modes/coffeescript

myTextArea = document.getElementById('code')
editor = CodeMirror(((elt) ->
  myTextArea.parentNode.replaceChild elt, myTextArea
  return
),
  value: myTextArea.innerHTML
  mode: 'coffeescript'
  styleActiveLine: true
  theme: 'monokai'
  lineNumbers: true
  tabSize: 2
)

(application.cssは変更なし)

header_javascript と footer_javascript で CodeMirror を呼び出してあげて、
valueをちゃんと指定してあげたらエラーなく動くことができました

以上。

Herokuで公開してます(CoffeeScript対応)
https://viewcode.herokuapp.com/tutorial/index

SCSSだけで棒グラフを生成する

仕事の関係で棒グラフを作成することになったので、
できるだけSCSSだけで書こうとしたらできちゃいました
※PDF用のSCSSを書いてるので単位がmmです

作成したグラフはこちら。

f:id:K396_109:20150726141645p:plain

数値もjavascript(coffeescript)を使わずに表示してみました

haml

.bar_graph
  .graph_title ここにグラフタイトル
  .graph_data.split_5
    .graph_data__item{:completion => 80}
    .graph_data__item{:completion => 65}
    .graph_data__item{:completion => 33}
    .graph_data__item{:completion => 48}
    .graph_data__item{:completion => 85}

completionの値を取得してきてheightを決めます

SCSS

まず全体をざくっと。

// .bar_graph //////////////////////////////////////
@for $i from 3 through 6{
  .split_#{$i}.graph_data > .graph_data__item{
    position: relative;
    width: 100% / $i; height: 45mm;  // heightは自分で決めてね☆
    border-right: solid 1mm #fff;
    float: left;
    &:last-of-type{
      border: none;
    }
  }
}

@for $i from 1 through 100{
  $completion: "'" + $i + "'";
  $parcent   : ""  + $i + "%";
  .graph_data__item[completion = #{$completion}]:before{
    position: absolute;
    width: 100%; height: 0% + $i;
    bottom: 0; left: 0;
    content: '';
  }
  .graph_data__item[completion = #{$completion}]:after{
    position: absolute;
    width: 100%;
    bottom: 3mm;
    text-align: center;
    content: $parcent;
    color: #fff;
  }
}

それでは説明。

.graph_data.split_5の.split_5の部分

for文を回して、hamlで指定した数で分割しています
(今回は3つから6つの間と限定してるよ!)

@for $i from 3 through 6{
  .split_#{$i}.graph_data > .graph_data__item{
    position: relative;
    width: 100% / $i; height: 45mm;  // heightは自分で決めてね☆
    border-right: solid 1mm #fff;
    float: left;
    &:last-of-type{
      border: none;
    }
  }
}

数値を表記・グラフの高さを指定する

最低値: 1 最高値: 100 でfor文を回す
completionの値になったときに勝手にプロバティを読み込んでいってくれます

@for $i from 1 through 100{
  $completion: "'" + $i + "'";
  $parcent   : ""  + $i + "%";
  .graph_data__item[completion = #{$completion}]:before{
    position: absolute;
    width: 100%; height: 0% + $i;
    bottom: 0; left: 0;
    content: '';
  }
  .graph_data__item[completion = #{$completion}]:after{
    position: absolute;
    width: 100%;
    bottom: 3mm;
    text-align: center;
    content: $parcent;
    color: #fff;
  }
}

$completonを指定しているのは文字列として数値を取得したいから
例えば:
 .graph_data__item[completion = #{$completion}]:before の
  #{$completion} を #{$i} とかにするとエラー吐かれる


height: 0% + $i は数値として指定したいので $i を使います

content: $parcent は文字列として指定したいので$parcentを使います
content: $i + '%'; や content: $completion + '%';
で指定しようとしたらエラーが出ます
(多分 『 + '%' 』が気に入らないんだろう…)



思いついたら誰でもできる簡単なコードでした
他になにか良い方法あればナレッジシェアお願いします!