▼

2015年3月17日火曜日

Django と AngularJS を一緒に使う際に Django 側で {{ }} が展開されるのを防ぐ

Django も AngularJS もテンプレート中の {{ }} を変数・関数用のトークンとして利用するため、AngularJS の方で処理したい {{ }} は Django の方で解釈されるのを防ぐ必要があります。

AngularJS で処理したいタグの周りを verbatim ~ endverbatim タグで囲むことで Django が {{ }} を処理するのを防ぎます。

<body ng-app="TestApp">
<div ng-controller="TestController as tc">
    {% verbatim %}
    <p>{{ tc.message }}</p>
    {% endverbatim %}
</div>
時刻: 0 件のコメント:

2015年3月15日日曜日

Polymer : core-dropdown-menu のスタイルを設定する

core-dropdown-menu の中で使う core-dropdown は paper-dialog と同じく overlay の一種なので
「paper-dialog （paper-action-dialog）のスタイルを設定する」同様にカスタムエレメント内でスタイルを設定するには工夫が必要でした。

普通に <polymer-element> 内の <style> で /deep/ を使ってスタイルを定義しても上手く行きません。

とりあえずメモのみ。
時刻: 0 件のコメント:

JavaScript : input でカンマ区切りの数値配列入力をチェックする

pattern に "先頭 + 空白 + 数字 + 空白" というパターンと、"(カンマ + 空白 + 数字 + 空白)×N" というパターンを設定します。

※ 最後に , があるとエラーになります（ "10, 20, 30" は OK、"10, 20, 30, " は NG）

<input is="core-input" id="input_records" required type="text" min="1"
    pattern="/^[\s]*[0-9]+[\s]*(,[\s]*[0-9]+[\s]*)*$/">
時刻: 0 件のコメント:

JavaScript : input type=date の初期値の設定（Polymer の Data Binding を使用）

  • タグの中で属性 value に代入する場合、"YYYY-MM-DD" 形式（ISO準拠）の文字列である必要がある。
  • JavaScript のコード内で代入する場合は、valueAsDate = date型オブジェクト という形式が使える。

HTML部分（date に Data Binding） 
<input type="date" required id="input_date" name="date" value="{{ date }}">

Polymer 初期化部分。date を ISO 準拠文字列にしておくパターン。
Polymer({
    date: new Date().toISOString().substr(0, 10),
    ...

Polymer 初期化部分。valueAsDate を使うパターン。
Polymer({
    date: new Date(),
    ready: function() {
        this.$.input_date.valueAsDate = this.date;
    }
時刻: 0 件のコメント:

『ニコニコ哲学』 感想とレビュー



ニコニコ哲学-川上量生の胸のうち を読み終わりました。

ニコニコの在り方や、オープンな市場の問題、採用について、など、様々な内容について語られており、どれも面白かったです。インタビュー形式で読みやすく、短めなのもよいです。

以下、特に興味を引いた考えの一部。


IT業界も成熟して、うまいことやるのは難しくなった。そうなると、むしろ誰もやらない大変なことにビジネスチャンスがある可能性が高くなった。徒労に終わらないような大変なことを探す。これが、たぶんIT業界の次のステージの課題。

オープンになりクリエイターが増えるほど、人気がでるもの、売れるものの多様性は減る。みんな等しく成功のチャンスもクリエイターとしての価値も減る。

コンテンツ市場が成熟すると、コンテンツの中身よりもブランドが評価される。

才能＝希少性。能力のレベルが高くても、競争相手がたくさんいる業界で認められるのは大変で、1位と2位の差は小さくなる。希少性の高さと能力の高さは違う。

一人ひとりが「お山の大将」になれる世界の方が幸せ。それを許さず「全国的に見ればお前はこの程度」と突き付けるのがインターネット。お山（小さいコミュニティ）をどう作るかが次のネットのテーマ。

「これに賭ける」という思いで思考を停止するのは間違い。必要なのは勇気ではなく計算。

通年採用ではスキルのない人は就職できない。将来のポテンシャルなんて考慮されない。新卒採用で「強者」側の高学歴組の中で、通年採用でも「強者」でいられる人はほんの僅かであり、新卒採用の「弱者」も通年採用になればどうなるということはない。

オタクは「敵に回すとおそろしいが、見方にすると頼りない」

「夢」とは長い間満たされない欲求のこと。持っているから偉いということはない。

オタクの特徴は自分が正しいと思っていること。コミュニケーション能力が低くて、社会では居場所がないから、自分で自分を褒めるしか無い。

個性は非論理的な部分にしか残らない。論理を突き詰めていくと同じ帰結に達する。

時刻: 0 件のコメント:

2015年3月14日土曜日

Polymer : core-ajax post 用テンプレート（+ Django）

POST のパラメータの上手い渡し方がよくわからないので、しばらくはこれでいこうというメモ。

template 部分（入力部分とかは適当に。core-ajax は実際は djang-ajax を使う。）
 
<paper-input-decorator label="" error="入力必須" isInvalid="{{!$.input_name.validity.valid}}">
    <input is="core-input" id="input_name" required type="text" value="{{ name }}">
</paper-input-decorator>
<paper-button on-click="{{ post_data }}"></paper-button>
<core-ajax
    id="post"
    url="/someurl"
    method="post"
    handleAs="json"
    on-core-response="{{ response }}"
    on-core-error="{{ error }}">
</core-ajax>

script 部分
post_data: function() {
    if(!this.$.input_name.validity.valid){
        alert("名前を入力してください");
    } else {
        var data = {
            'name': this.name,
        };
        this.$.post.body = "data=" + JSON.stringify(data);
        this.$.post.go();
    }
},
response: function (event, response) {
    
},
error: function(event, response) {
    
}

受け取り側（Python Django）
class ActivityInfoListApi(View):
    def post(self, request, *args, **kwargs):
        data = request.POST.get("data", None)
        if data is None or len(data) == 0:
            return HttpResponseBadRequest()
        obj = json.loads(data)
        try:
            name = obj["name"]
            # 型チェック
            if (not isinstance(name, str) and not isinstance(name, unicode)):
                return HttpResponseBadRequest()
            # 受け取った値で何か処理…
            return HttpResponse("json形式文字列…")
        except KeyError:
            logging.error("Missing Parameter")
            return HttpResponseBadRequest()
時刻: 0 件のコメント:

2015年3月12日木曜日

Polymer : paper-dialog 関係のメモ

よく使いそうな設定のメモです。

Polymer : paper-dialog （paper-action-dialog）のスタイルを設定する
  • ダイアログ外をクリックされても閉じないようにする
    • autoCloseDisabled="true" にする
  • ボタンを押しても閉じないようにする
    • closeSelector を設定する。affirmative を押しても閉じないようにする場合は closeSelector="[dismissive]"
時刻: 0 件のコメント:

2015年3月11日水曜日

Polymer : paper-dialog （paper-action-dialog）のスタイルを設定する

paper-dialog 公式ドキュメント に従って /deep/ を使っても width や height が上手く設定できずに悩んでいたのですが、原因は以下のサイトの内容でした。

参考：Issue with upgrade to Polymer 0.5.1 and styling paper-dialog

ルート以外の要素で paper-dialog を使う場合、一工夫いるようです。

原因の要約

  • paper-dialog （paper-action-dialog など含む）がデフォルトで layered プロパティが true に設定されている
    • ダイアログを常に画面前面に表示するため
  • layered が true の要素は、 core-overlay-layer というグローバルな要素に親が変更される
    • Developer Console を開いて Element のタブを開くとそのことがわかります
  • paper-dialog を使用している要素のスコープから外れてしまうので、そこで定義した css の style が適用されない

対策


リンク先では以下の3通りが紹介されています。 ひとまず、汎用的に思える core-style を使うことにしました。
  • layered を false にする
  • core-style を使う
  • paper-dialog を継承したカスタムエレメントを作成する

サンプル

<link rel="import" href="/bower_components/polymer/polymer.html">
<link rel="import" href="/bower_components/paper-button/paper-button.html">
<link rel="import" href="/bower_components/paper-dialog/paper-action-dialog.html">
<link rel="import" href="/bower_components/core-style/core-style.html">

<core-style id="my-dialog-style">
    html /deep/ {
    width: 16px;
    height: 16px;
    }
    html /deep/ paper-action-dialog::shadow #scroller {
        width: 360px;
        height: 360px;
    }
</core-style>
<core-style ref="my-dialog-style"></core-style>
<polymer-element name="my-paper-action-dialog" attributes="toggle">
        <template>
        <style>
            :host {
                position: absolute;
                width: 100%;
                height: 100%;
            }
        </style>

        <paper-action-dialog id="dialog">
            <div>
                ...
            </div>
            <paper-button dismissive>CANCEL</paper-button>
            <paper-button affirmative>OK</paper-button>
        </paper-action-dialog>
    </template>

    <script>
        Polymer({
            toggle: function () {
                this.$.dialog.toggle();
            }
        });
    </script>
</polymer-element>
時刻: 0 件のコメント:

2015年3月5日木曜日

Chart.js : Radar チャートのフォントサイズ変更

Radar の外枠に表示されているラベルのフォントサイズや色の設定は defaults.global のオプションではなく defaults.Radar のオプションでした。

Chart.defaults.Radar.pointLabelFontSize = 16; // 少し大きく（デフォルトは 10）
Chart.defaults.Radar.pointLabelFontColor = 0x00FFFFFF; // 赤

Char.js | Documentation - Radar Chart
時刻: 0 件のコメント:

2015年3月1日日曜日

Django + Polymer : Ajax 時の CRFS 対策 （403 エラーへの対応）

ここ に書いたように url に View を登録するときに csrf_exempt を使うことで CSRF 対策を切って　403 エラーを回避していましたが、Polymer 使用時には Django-enabled Polymer core-ajax variant を使うことで簡単に対応できる事がわかりました。
  1. リンク先の django-ajax を django-ajax.html という名前で保存する
  2. Polymer 内で core-ajax を使っていた部分を django-ajax に置き換える
    1. インポートを忘れずに
  3. {% csrf_token %} を html に含めてレンダリングする
django-ajax は core-ajax を継承していて、ajax 時のヘッダに csrf トークンを追加してくれる、という寸法のようです。

先人の知恵というのはありがたいものですね。リンク先に感謝です。
時刻: 0 件のコメント: