React で国際電話番号からどこの国か調べる Web アプリを作った

Posted on: November 19th, 2014 by kyokutyo

国際電話番号とは? 国際電話番号がどこの国か調べるための Web アプリを作った。 国際電話番号とは、 +81(0)3-9999-9999 などと書かれた電話番号の 81 の部分。 国外から電話するときに使う。 日本なら 81 、アメリカだと 1 、イギリスだと 44 など、国際電気通信連合 (ITU) という機関が決めてるらしい。 どんなアプリ? Facebook の React を使って何か作ってみたかった & ちょっとだけ需要があった。 A JavaScript library for building user interfaces | React 薄緑のところをタップして数字を入力すると マッチする国が表示される。 React 学んだこと チュートリアルは少し前にやってた。 kyokutyo/react-tutorial render メソッドで複数の要素を返すことはできない これはダメ。 var App = React.createClass({ render: function() { return ( <h1>{this.props.name}</h1> <div className=”code”>{this.props.code}</div> ); } }); これなら OK 。 var App = React.createClass({ render: function() { return ( <div className=”country”> <h1>{this.props.name}</h1> <div className=”code”>{this.props.code}</div> </div> ); } }); Component Specs and Lifecycle | React input に value=”" は書いちゃダメ var App = React.createClass({ render: function() { return ( <div className=”app”> <input type=”number” pattern=”[0-9]*” value=”" name=”code” /> </div> ); } […]

Categories:JavaScriptReact

View details »


ディレクトリを作成して移動する

Posted on: November 7th, 2014 by kyokutyo

普通にやるとこんな。 $ mkdir hoge $ cd hoge 1 発でやるならこんな。 $ mkdir hoge; cd hoge 2 個目の hoge は $_ に置き換え可能。 $_ には直前のコマンドの最後の引数が格納されてる。 $ mkdir hoge; cd $_ p オプション付きの mkdir でも OK 。 $ mkdir -p hoge/fuga; cd $_ あと、 ; の代わりに && でもいける。 $ mkdir hoge && cd $_ ; と && の違いはこの記事が参考になる。 (Linux)コマンドを連結して行う「;」「&」「&&」「||」の違い : 3流プログラマのメモ書き ; は 1 つめのコマンド実行後、 2 つめを実行する。 && は 1 つめのコマンドを実行してうまくいった場合に 2 つめを実行する。

Categories:shell

View details »


MySQL である文字列を含むテーブルを探す

Posted on: October 29th, 2014 by kyokutyo

例えばテーブル名に product を含むもの。 mysql> SHOW TABLES LIKE ‘%product%’; 参考: テーブルに関する情報の取得(SHOW TABLES文, SHOW CREATE TABLE, SHOW TABLE STATUS文) – テーブルの作成 – MySQLの使い方

Categories:MySQL

View details »


iPhone (Mobile Safari) で textarea, input[type=text] の文字列を全選択する方法

Posted on: August 6th, 2014 by kyokutyo

textarea や input[type=text] に入ってる文字列を全選択する方法。 あんまりやったことないんだけど、PC ブラウザでは $target.select(); でいけるらしい。 そしてこの辺を読むと、Mobile Safari では select() 使えないから selectionSatrt, selectEnd を使えと書かれてた。 iPhoneのSafari(Mobile Safari)のselect()は、代わりにselectionStart, selectEndを使わなければいけない – yohtn でも実際やってみると動かない。理由は不明。。(シンプルなページで試してみたら動いた) さらに調べてみると setSelectionRange() というものがあるらしい。 Input.select – Web API Interfaces | MDN HTMLInputElement.setSelectionRange() – Web API Interfaces | MDN   $target.on(‘click’, function() { this.setSelectionRange(0, 9999); }); これでうまく全選択できた。今回は 9999 文字もないけど、、ちょっと改善。 $target.on(‘click’, function() { this.setSelectionRange(0, this.value.length); }); さらに文字列を変更されたくない場合は readonly 属性をつける。 $target.on(‘click’, function() { this.setSelectionRange(0, this.value.length); $(this).attr(‘readonly’, ‘readonly’); }) .on(‘blur’, function() { $(this).removeAttr(‘readonly’); }); ちなみに click ではなく focus 使いたくなるけど、 focus では動かない。 今回、確認用に作ったファイル select-test.html

Categories:JavaScript

View details »


RDS に接続許可する IP の追加方法

Posted on: August 6th, 2014 by kyokutyo

AWS Console で RDS を開く。 Security Groups を開く。 適当な Security Group を選び、 Connection Type を選択する。 CIDR/IP を選択すると IP が表示されるので それを下のフォームにコピペして [Authorize]。 おわり。

Categories:AWS

View details »


DjangoでDBにSQL実行する方法

Posted on: October 31st, 2013 by kyokutyo

DjangoでDBに対してSQL実行する方法。settings/xxxxx/xxxxx.pyにDBの接続情報などが書かれてる。 $ python ./manage.py dbshell –settings=settings.xxxxx.xxxxx < fugahoge.sql すぐ忘れる。 この辺見ればいろいろ書いてあるぽい。 django-admin.py と manage.py — Django 1.4 documentation

Categories:Django

View details »


プロダクトオーナーの言うことそのままコードに落とし込むのよくない

Posted on: October 29th, 2013 by kyokutyo

こんな話。 「商品ページに商品の色名を表示したいんだよねー」 「商品コードには2パターンあって、11桁と13桁」 「11桁の場合は後ろから2文字がカラーコード」 「13桁の場合は後ろから3文字目と4文字目がカラーコード」 カラーコードを取得するためにはじめ書いてたコードは以下 if (strlen($product_code) === 11) { $color_code = substr($product_code, -2); } else if (strlen($product_code) === 13) { $color_code = substr($product_code, -4, 2); } だけど 「11桁の場合は後ろから2文字がカラーコード」 「13桁の場合は後ろから3文字目と4文字目がカラーコード」 これよくよく考えると・・・ 「桁数に関係なく頭から10文字目、11文字目がカラーコード」 012345678** 012345678**12 ということで $color_code = substr($product_code, 9, 2); 分岐不要。 プロダクトオーナーの言葉をそのままにコードにして余計なことやってるケースけっこうありそうだなー。。

Categories:dev

View details »


Middlemanで作ったサイトをS3でホスティング

Posted on: October 26th, 2013 by kyokutyo

「これまでに夫婦で泊まった都道府県」というものを作った。 自分たち夫婦がこれまで行ったところの記録です。 Middlemanで作って、S3でホスティング。 Middlemanまわりのあれこれ LiveRoad機能 便利。デフォルトでactivateされててもいい気がする。 HTMLファイルでもCSSファイルでもJSファイルでも保存するとブラウザがリロードされる。 仕事のDjangoなサイトでもこの機能欲しい。 テンプレートエンジン テンプレートエンジンはSlim。最近hamlより人気ぽいので採用。 HTMLの閉じ忘れがないのはいい。記述量減る。まだあんまりわかってない。 Middlemanで使う場合はmiddleman-slimを使う。 Slimにも継承とかあるのかしら。Jinja2の方が柔軟に書けそうな気はする。 CSSプリプロセッサー SCSS。Sassより慣れてるという理由で。 Sassだとついついお尻に;つけて怒られるの頻発するので。。 MiddlemanでSCSS使いたい場合、設定は何もしなくていい。Middleman賢い。 source/stylesheets配下にhoge.scss作るとhoge.cssとして読める。 Compassもところどころ使った。 出力設定をcompressedにしておくとCSSがminifyされるのでbuild時にだけ適用。 config.rbで以下のように設定した。 configure :build do … compass_config do |config| config.output_style = :compressed end … end 色は_colors.scssで$white, $blueを決めて、あとは background: transparentize($white, 0.7); color: darken($blue, 20%); な感じでバリエーションつけた。 mix関数というものがあることを知ったので初めて使った。 color: mix($white, $blue, 50%); ホントは2色使おうと思ってたけどやめた。 色の管理しっかりやっておくとその辺楽ぽい。 CSSフレームワーク Yahoo!のPure使ってみたけどほとんど使いこなせてない。 Middlemanで使う場合はMiddleman::Pureを使う。 その他 Google Analytics使う場合は、Middleman Google Analyticsを使うと開発中はトラッキングコードがHTMLに吐かれないのでよい。 configure :build do … activate :google_analytics do |ga| ga.tracking_id = ‘UA-xxxxxx-1′ end … end configure :development do … activate :google_analytics do |ga| ga.tracking_id = false end … end その他もろもろGitHubに書いてます。これからのことなども。 S3まわりのあれこれ デプロイ方法 MiddlemanなサイトをS3でホスティングする場合はMiddleman Syncを使うといい。 activate :sync do |sync| … sync.after_build = true // or false … end とafter_buildをtrueにしとくと $ middleman build で静的ファイルの書き出しした際に、ついでにS3へのdeployまでやってくれる。 FTPとかいうレガシーデプロイしなくていい。 […]

Categories:AWSdevMiddlemanSCSSSlim

View details »


Slimでlink_toを使ってaタグを生成する時のtarget指定方法

Posted on: October 20th, 2013 by kyokutyo

RubyのテンプレートエンジンSlimでtarget=”_blank”属性付きのリンクを生成する方法。 Slimとは → Slim – A Fast, Lightweight Template Engine for Ruby 最近のRuby界隈ではhamlよりSlimの方が流行ってるぽいです。 Slim Templates – The McDev Blog ここにそれっぽいこと書いてありました。 == link_to “blog”, “http://blog.kyokutyo.com/” これは以下のようなHTMLが生成されます。 <a href=”http://blog.kyokutyo.com/”>blog</a> target属性を指定する場合は以下のように書きます。 == link_to “blog”, “http://blog.kyokutyo.com/”, :target => ‘_blank’ 生成されるHTMLは以下↓。 <a target=”_blank” href=”http://blog.kyokutyo.com/”>blog</a> ちなみに、 a href=”http://blog.kyokutyo.com/” target=”_blank” blog と書いても同じようなHTMLを得ることができます。(属性の記述順が変わるようです)

Categories:Slim

View details »


Amazon S3 for WordPressを導入

Posted on: October 12th, 2013 by kyokutyo

このブログに Amazon S3 for WordPressを導入したのでテスト。 画像のURLはhttp://blog-kyokutyo-com.s3.amazonaws.com/wp-content/2013-09-29-11.05.521.jpgとなってます。 AWSのコンソール画面でS3のbucketのアクセスマネジメントあたりで何度かこけました。 「Authenticated Users」にUpload/Delete権限を渡す必要があるもよう。 これまでにアップロードした画像はS3にコピーされるわけではないみたい。。 移行ツールとかないかしら。 これからやりたいこと 画像すべてS3に移動 WordPressをどこかのPaaSで メールをGoogle Appsに レンタルサーバ解約 結果、以下が利用サービスになる ムームードメイン Amazon Route53 PaaS(選定中) Pagoda Box or GAE or dotCloud or Heroku or AppFog … Amazon S3 Google Apps

Categories:WordPress

View details »