nko
nko
「○んこ」から連想する言葉をTwitterに投稿するWebサービスをつくった。
GitHub - naoyashiga/nko at gh-pages
GitHub Pagesに公開させた。コードはここに公開してある。
サービスを作る上でやったことを以下にメモしておく。
Tweetボタンの設定
Tweetボタンを作成
こちらのページからコードをコピペする。
Twitter Publish
好きなテキストにする
Tweet内容に、「○んこ」の結果を反映させようと思ったら、公式ページのコードをコピペしただけではできない。だから下のリンクに書かれたやり方で、リンクの内容を書き換える。
ツイートボタンのツイート内容を動的に変える - tumblr
Tweet内容を動的に変更する
$("#social a").attr("data-text",tweetText); twttr.widgets.load();
「a」タグの「data-text」の内容だけを変更すれば良いと思ったので、attr()を使ったが、なぜか変更されなかった。
$("#social").html('<a href="https://twitter.com/share" class="twitter-share-button" data-text="'+ tweetText + '" data-lang="ja">ツイート</a>'); twttr.widgets.load();
しょうがないのでhtml()を使って、リンクを再描画している。
テキスト変更を取得するタイミング
jQueryのblur()を使う
$("input").blur(function(){ //テキスト変更処理 });
テキストエリアのフォーカスが外れたら、動的にtweetするテキストを変更できるようにした。
メリット
テキストの編集が完了し終わったら、初めてテキストの変更を取得するので、Tweetボタンの再描画の回数が少ない。
デメリット
フォーカスがそのままで、すぐにTweetボタンを押したときに反映されないということだ。
jQueryのhover()を使う
<div id="social"> <div id="social"> <!-- ツイートボタン --> </div> </div>
divでツイートボタンを囲っておく。
$("#social").(function(){ //テキスト変更処理 });
Tweetボタンを囲うdivにマウスポインタが乗ったら、テキストを変えるということにした。
メリット
すんなりとエリアに入って、そのままボタンを押せばテキストの再描画の回数が1回で済む。
デメリット
なぜかツイートボタンの上では反応しなかった。大抵はボタンの周りを通過するから、テキストは変更されたが、確実ではなかった。またdivエリアを出たり入ったりすると再描画される。
jQueryのkeyup()を使う
$("input").keyup(function(){ //テキスト変更処理 });
inputフォームでキーが離されたらテキストを取得するようにした。
メリット
確実にテキストの変更を取得できる。
デメリット
テキストが変更されるたびにツイートボタンが再描画される。
結局keyupを採用した。
デザイン
要素が少なくても縦100%にする
<body> <div id="wrapper"> <div id="content"> </div> </div> </body>
上のようなhtmlの構造があったとする。
html{ height:100%;/*忘れずに*/ } body { height:100%; } #wrapper{ width:100%; height:100%; min-height:100%; } #content{ width:80%; margin:0 auto; }
真ん中に幅80%のdivがあって、それが下まで伸びているレイアウトになっている。
htmlタグに高さ"hegiht:100%"にすることを忘れていて、結構悩んだw
難しく考えることはなく、単純に"min-height"で最低高さ100%にして、それを囲うdib,body,htmlをheight:100%にすればよいだけ。
・参考
サービス終了のお知らせ
背景をグラデーションにする
まずCSSのGradients対応ブラウザを「Can I use ...」で確認。7割くらいのブラウザが対応しているようだ。
Can I use... Support tables for HTML5, CSS3, etc
コードを書くのが面倒なのでジェネレーターを使った。
Ultimate CSS Gradient Generator - ColorZilla.com
影をつける
box-shadowジェネレーターを使った。
http://www.bad-company.jp/demos/box-shadow/
Google Fontsの使用
@import url(http://fonts.googleapis.com/css?family=Shadows+Into+Light); header h1{ font-family: 'Shadows Into Light', cursive; }
直感でフォントは選んだ。たくさんありすぎてどれがいいのかわからなくなる。
inputの文字の大きさ
#nko{ font-size:13em;/*「んこ」の文字の大きさ*/ } input[type="text"]{ text-align:center; font-size:100%; width:1em; }
幅は1文字分にして、フォントの大きさはinputがあるdiv要素の文字の大きさに合わせておく。
説明文をどう書くか
最初は説明文を下のようにしていた。
連想する一文字を入れてね
これだと「一」という漢字が延ばし棒に見えてしまって、複数文字入れても良いと思う人もいるかもしれない。
連想する文字を1つ入れてね
よって上のように誤解されないように説明文を設定した。
Transition
#author a{ color:#545454; text-decoration:none; -webkit-transition: all 0.3s ease-out; /* Chrome 1-25, Safari 3.2+ */ -moz-transition: all 0.3s ease-out; /* Firefox 4-15 */ -o-transition: all 0.3s ease-out; /* Opera 10.50–12.00 */ transition: all 0.3s ease-out; /* Chrome 26, Firefox 16+, IE 10+, Opera 12.10+ */ } #author a:hover{ color:#a1a1a1; }
制作者名のリンクにホバーするとふわっと色が変わるようにしている。CSSのTransitionを使っている。これもジェネレーターに頼った。
CSS3 Please! The Cross-Browser CSS3 Rule Generator
Github Pagesに公開
・参考
Creating a GitHub Pages site - GitHub Docs
$git clone https://github.com/user/repository.git
リポジトリをクローンする。
$cd repository
$git checkout --orphan gh-pages
# Creates our branch, without any parents (it's an orphan!)
# Switched to a new branch 'gh-pages'$git rm -rf .
親とは独立した子のページを作っている??このあたりはよくわからない。
$cp 作業ディレクトリ/* ./
git add .
git commit -a -m "First pages commit"
git push origin gh-pages
これでbranchが作成できた。
http://tokkono.cute.coocan.jp/blog/slow/index.php/programming/github-pages-workflow/:titile
これを読んでみると、branchがmasterから独立した状態だから、親がクローンされても、branchはクローンされないということなのか。