読者です 読者をやめる 読者になる 読者になる

not good but great

プログラミング、アート、映画・本の感想について書きます。

「○んこ」から連想する言葉を投稿するWebサービスをつくった

Webサービス Javascript CSS html

nko

nko
「○んこ」から連想する言葉をTwitterに投稿するWebサービスをつくった。

naoyashiga/nko · GitHub
GitHub Pagesに公開させた。コードはここに公開してある。

サービスを作る上でやったことを以下にメモしておく。

Tweetボタンの設定

Tweetボタンを作成

こちらのページからコードをコピペする。
Twitter buttons | About

好きなテキストにする

Tweet内容に、「○んこ」の結果を反映させようと思ったら、公式ページのコードをコピペしただけではできない。だから下のリンクに書かれたやり方で、リンクの内容を書き換える。
ツイートボタンのツイート内容を動的に変える - 馬鹿と天才は紙一重

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()を使って、リンクを再描画している。

テキスト変更を取得するタイミング

jQueryblur()を使う

$("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%にすればよいだけ。

・参考
ページ内容が少なくても height:100%; の高さの CSSレイアウト を作る - Eiji

背景をグラデーションにする

まずCSSのGradients対応ブラウザを「Can I use ...」で確認。7割くらいのブラウザが対応しているようだ。

Can I use... Support tables for HTML5, CSS3, etc

コードを書くのが面倒なのでジェネレーターを使った。
Ultimate CSS Gradient Generator - ColorZilla.com

影をつける

box-shadowジェネレーターを使った。
CSS3 box-shadowジェネレーター

Google Fontsの使用

@import url(http://fonts.googleapis.com/css?family=Shadows+Into+Light);

header h1{
    font-family: 'Shadows Into Light', cursive;
}

直感でフォントは選んだ。たくさんありすぎてどれがいいのかわからなくなる。

Google Fonts

inputの文字の大きさ

#nko{
	  font-size:13em;/*「んこ」の文字の大きさ*/
}

input[type="text"]{
	  text-align:center;
	  font-size:100%;
	  width:1em;
}

幅は1文字分にして、フォントの大きさはinputがあるdiv要素の文字の大きさに合わせておく。

・参考
C28: em単位を用いて、テキストコンテナのサイズを指定する|WCAG 2.0 実装方法集

説明文をどう書くか

最初は説明文を下のようにしていた。

連想する一文字を入れてね

これだと「一」という漢字が延ばし棒に見えてしまって、複数文字入れても良いと思う人もいるかもしれない。

連想する文字を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 Project Pages manually · GitHub Help

まずGithub上GUIリポジトリを作成する。

$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はクローンされないということなのか。