@fugaco

JavaScriptや画像を使わずにカラムの高さを揃える方法(IE8~)

どうもー。明日は社内イベントでみなとみらいのナイトクルーズに乗ってきます。社員の家族も呼ぶので、楽しみです。

さてさて、Webサイトで横にカラムを並べるデザインってよくありますよね。JavaScriptや画像(data uriも)は一切使わずに間に線を引いたり背景色をつけるサンプルを紹介します。この記事の最後のサンプルは、退職した社員からこのサイトを教えてもらいました。


HTML例

<div class="wrap">
<div class="left">
左のカラム
</div>
<div class="center">
   中央のカラム(3カラムのときのみ)
</div>
<div class="right">
    右のカラム
</div>
</div>


■線を描くだけ


線を描くだけなら簡単です。


サンプル1

カラムの線を重ねる方法です。
左のカラムには右に線を引き、右のカラムには左に線を引き、marginでずらして重ねます。そうすると、長い方の線が下まで伸びるので、同じ色の線にしておけば、間に一本線が引かれたように見えます。

20140807_1.png


.wrap{
background: #eee;
overflow: hidden;
}
.wrap>div{
width: 50%;
float: left;

/* padding込みで幅指定できるようにする */
padding: 10px;
box-sizing: border-box;

/* 線の幅の分左にずらす */
margin-left: -1px;
/* 右のカラムには左に線を引く */
border-left: 1px solid #00f;
}
.wrap>div:first-child{
/* 左のカラムには右に線を引く */
border-left: 0;
border-right: 1px solid #f00;
}


メリット
  • 簡単
デメリット
  • 3カラム以上では使えない

サンプル2

カラムの線を描くためだけの別要素を用意する方法です。
別要素とはいっても、HTMLに余計な要素を追加したくないので、疑似要素(:before)を使います。カラムを囲っているラップ要素に position:relative をつけると、ラップ要素の高さに合う線が描けます。カラムに float がかかっているので、ラップ要素には overflow: hidden も必要です。

20140807_3.png


.wrap{
background: #eee;
overflow: hidden;

/* 線の高さを100%で描くため */
position: relative;
}
.wrap>div{
width: 33.3%;
float: left;

/* padding込みで幅指定できるようにする */
padding: 10px;
box-sizing: border-box;
}
.wrap>div:before{
content: '';
display: block;

/* 線の高さを100%で描く */
height: 100%;
border-left: 1px solid #f00;
position: absolute;
top: 0;
/* 一番左のカラムの線を隠す(paddingも考慮) */
margin-left: -11px;
}



■背景も塗る


サンプル3(失敗)

カラムのラップ要素に背景グラデーション(background-image)でストライプ模様を描く方法です。
IE8のfilterでは、途中で色を変えることができなかったので失敗です。ていうか激重たい filter を使ってまでやりたくないです。

20140807_2.png


.wrap{
background: #eee;
overflow: hidden;
/* IE8-9 */
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#f0b7a1', endColorstr='#bf6e4e', GradientType=0)";
/* IE10 Consumer Preview */
background-image: -ms-linear-gradient(left, #FFCCDD 0%, #FFCCDD 50%, #CCDDFF 50%, #CCDDFF 100%);
/* Mozilla Firefox */
background-image: -moz-linear-gradient(left, #FFCCDD 0%, #FFCCDD 50%, #CCDDFF 50%, #CCDDFF 100%);
/* Opera */
background-image: -o-linear-gradient(left, #FFCCDD 0%, #FFCCDD 50%, #CCDDFF 50%, #CCDDFF 100%);
/* Webkit (Safari/Chrome 10) */
background-image: -webkit-gradient(linear, left top, right top, color-stop(0, #FFCCDD), color-stop(0.5, #FFCCDD), color-stop(0.5, #CCDDFF), color-stop(50%, #CCDDFF));
/* Webkit (Chrome 11+) */
background-image: -webkit-linear-gradient(left, #FFCCDD 0%, #FFCCDD 50%, #CCDDFF 50%, #CCDDFF 100%);
/* W3C Markup, IE10 Release Preview */
background-image: linear-gradient(to right, #FFCCDD 0%, #FFCCDD 50%, #CCDDFF 50%, #CCDDFF 100%);

}
.wrap>div{
width: 50%;
float: left;

/* padding込みで幅指定できるようにする */
padding: 10px;
box-sizing: border-box;
}



メリット
  • あんまりない
デメリット
  • 古いIEで使えない
  • 処理負荷が高い
  • ブラウザごとに書き方が違って面倒

サンプル4

背景色を塗るためだけの別要素を用意する方法です。
別要素とはいっても、HTMLに余計な要素を追加したくないので、疑似要素(:before)を使います。サンプル2と考え方は同じですね。ただ、疑似要素の横位置を指定するために、全カラムの left を指定しないといけません。ま、JavaScriptや画像を使わないという制限があるので、そのくらいは仕方ないと妥協しましょう。

20140807_4.png


.wrap{
overflow: hidden;
position: relative;
}
.wrap>div{
width: 33.3%;
float: left;

/* padding込みで幅指定できるようにする */
padding: 10px;
box-sizing: border-box;
}
.wrap>div:before{
width: 33.3%;
content: '';
position: absolute;
top: 0;
bottom: 0;
z-index: -1;
}
.wrap>.left:before{
left: 0;
background: #fcd;
}
.wrap>.center:before{
left: 33.3%;
background: #cdf;
}
.wrap>.right:before{
left: 66.6%;
background: #ff9;
}


メリット
  • 他に方法がない…?
デメリット
  • 全カラムの位置指定が面倒くさい
  • 背景色のz-indexがマイナスになるので、他要素との関係によっては調整が必要



それではまた~。

検索した英単語を保存するChrome拡張を作りました

どうも。暑いですね。復職して気がついたらもう半年以上…子供も1歳7ヶ月になっていました。

ちょっと前のことですが、うちの会社の内定者向けサイトの自己紹介で、「趣味:水泳、編み物、アプリ開発」と書きました。以前は他にもいろいろな趣味があったんですが、子どもがいてもできる趣味って言うと限られてきますよね。アプリ開発は週末家にいるときだけ子どもの昼寝中にやっています。毎週できるわけでもなく、できても1~2時間がいいとこなので、亀の歩みです。

で、ちょっと作ってみたいブラウザの拡張機能があったので、その前に練習がてら軽めのアプリを作りました。Google Chromeの拡張機能です。自分用なので、Chromeだけ。

promo_s.png


アルクやその他のオンライン辞書サイトで単語を検索すると、勝手にブックマークしていくものです。

20140725_1.png

私は英単語の検索をすることが多いのですが、検索履歴がほしいとずっと思っていました。だって調べてもすぐ忘れてしまうんですもん。他にも使っている辞書サイトはあるんですが、動作確認をする時間が足りなかったのでとりあえずこれだけです。最初は全部OFFになってるので欲しいものだけONにしてください。
自分用に3時間くらいで作ったので適当なところがありますが、Chromeの拡張機能はすごく作りやすいということが分かりました。別にいらないのにポップアップも作っちゃいました。笑

20140725_2.png

Windows上でフォルダを作って、指定のファイルを作って、それをブラウザで読み込むだけで開発ができます。特別なソフトは何もいりません。そしてウェブストアにアップロードして最初の1回だけ約5ドル払えばいくつでもアプリを公開できます。何かアイディアがある人は作ってみるといいと思います。


Chrome公式サイト
Getting Started: Building a Chrome Extension
https://developer.chrome.com/extensions/getstarted

Selenium IDEとTinyMCE

Selenium IDEでリッチテキスト(TinyMCE)の入力を行う方法を調べたので書いておきます。


Selenium IDEとは?

FirefoxにSelenium IDEというプラグインがあります。ウェブページ上で行われたユーザーアクション(どこかをクリックしたり、何かを入力したり)を保存しておき、後から自動で再生できるものです。実際の操作を保存せずに、任意のコマンドを手入力することもできます。

使い道 その1

テストで何百個ものアイテムを登録しなくてはならないとき、インポート機能が実装されていなければ、Selenium IDEを使うことができます(ループやインクリメントもできます)。自動実行でもそれなりに時間はかかりますが、延々と手入力するよりは早く済みますし、実行している間に他のことができますよね。

使い道 その2

また、随所随所で試験項目(例:このHTML要素のテキストは○○であるかどうか)を入れることができるので、仕様に沿って一通りのテストケースを作っておけば、コードを修正した後などにもう一度テストしてみて、修正の影響がないことを確認できたりします。Selenium IDEのメインの機能はこちらです。


本題

そんなSelenium IDEですが、typeコマンドではTinyMCEへの入力ができなかったので調べました。リッチテキストのTinyMCEはテキストエリアにタイプしているように見せかけていますが、実際はインラインフレーム(iframe)とjavaScriptでごりごりやっているので、入力操作が保存できませんでした。

TinyMCEに入力する方法

コマンド:runScript
対象:tinyMCE.get('xxx').setContent('あえいうえおあお');

答えを知ってしまえば何てことはありませんね。runScriptは現在のページ内にscriptタグを埋め込んで実行するコマンドです。現在のページではすでにTinyMCEが読み込まれているので、TinyMCEの機能(setContent)が普通に使えるのでした。


ちなみに、getEvalというコマンドもあります。これはrunScriptとは違って、Seleniumオブジェクト内でスクリプトを実行し、返り値があります。getEvalからテスト中のページ内の要素にアクセスするには、this.page().getDocument().getElementById()などが使えます。

コマンド:runScript
対象:document.getElementById('xxx').innerHTML = 'あえいうえおあお';

コマンド:getEval
対象:this.page().getDocument().getElementById('xxx').innerHTML = 'あえいうえおあお';


おしまい!

英会話チャットアプリEigoooの使用感

英会話教室風のチャットアプリであるEigoooを使ってみました。

image.png

深夜以外の好きな時間に入室すると、すぐに先生の誰かとつながり、英語でチャットをすることができるアプリです。使い勝手はなかなか良さそうでした。会話が続かないときは、先生や恐竜さん(Wordのヘルプキャラクターみたいなもの)が会話のテーマを投げかけてくれるようです。こちらの会話に英語のミスがあったときは、恐竜さんが添削結果を教えてくれます。実際は先生が手入力しているようですが、会話を遮らないように第三者のアイコンを使っているのが上手くできていますよね。

上のキャプチャは、文法ミスを直してもらったところです。チャット(口語)なので、文頭の小文字や句読点の有無など細かいところは添削されないようですね。ていうか先生もピリオドを忘れているし。先生によるのかもしれませんが。

無料トライアルで60メッセージまで送れるので、このアプリについて先生にいろいろと聞いてみました。今回当たった先生はインドに住んでいるそうで、アイコンの写真から見るにインド人のようです。他にもたくさんの先生がいて、次回また同じ先生につながる可能性はあまりないそうです。先生も生徒もチャット相手を選べないと言っていました。チャットレディーと同じような仕組みを想像していたんですが、違うんですね。先生は自宅ではなく、どこか勤め先にいるようです。このアプリの会社は都内にあるようですが、先生はインドで雇用しているんですね。他のスカイプ英会話サービスでも会話相手にインド人がよく雇用されていますよね(私はあいにく使ったことがありませんが、使った人が言っていました)。海外のソフトウェアのサポートセンターに電話するとインド人につながることも多いし、インドは人材と人件費のバランスがいいのでしょうか。

さてさて、隙間時間や通勤中にできるチャットアプリは良さそうに思えたんですが、毎回違う先生に当たるとなると会話が続くか心配です。毎回自己紹介しているうちに時間が無くなってしまいそうな・・。それから相手の先生がインド人だったので、やっぱりどこかインド風の英語でした。Hinglishってありますよね(ちなみに日本人の英語はEngrish)。方言のように、インドでしか通じない英語や言い回しがあるのです。先生は共通英語を使うようにはしていると思いますが、あまり聞かない言い回しをしていました。あと、Eigoooの先生がどのような研修を受けているのかわかりませんが、英語がしゃべれるのと、英語を教えられるのはまた別の話ですよね。語源などを聞いても答えてくれないんじゃないかと思います。家庭教師と一緒で当たりはずれも大きいかもしれないですね。ただ、自分の書く力(チャットなので、話す力かな)を付けるためにはいいと思います。こういうのは習うより慣れろだと思うので、日常会話が目的ならばいいアプリだと思いました。月4000円かけるなら他にも選択肢はありそうですが。


lang-8と比較してみたので参考にしてください。

Eigooo lang-8
言語英語あらゆる言語
形態チャット日記
文体主に話し言葉主に書き言葉
添削相手Eigoooに雇用されている人(インド人以外いるのかな)lang-8に登録している人。いろいろな職業の人がいます(プログラマーも多いです)。
返事早い複数の人の意見が聞けますが、ピリオドの位置などまで粗探しされます(笑)
トピック当たり障りのない話が多そう。先生の知らない分野は盛り上がらなそう。日記なのでテーマが多岐にわたるし、前回書いたトピックの続きも書けます。
金額一番いいプランで月4000円無料
インターフェースよくできているかも。レビューによると辞書機能はイマイチみたいですが、チャット履歴やメッセージの保存ができます。添削回り以外はあまりよくできていません。

難解プログラミング言語

新入社員が技術研修をする時期になると、自分が勉強していた頃を思い出しますね(私は会社の研修ではなく大学で勉強しましたが)。先日「バブルソート」という言葉を久々に聞きました。隣同士くるくるするソートですよね。C言語の研修でソートプログラムを書いていたみたいです。

会社のメイン製品がC系でできているので、新入社員はC言語の取得が必須なんですが、私は中途採用なので実務でC言語を使ったことがありません。でもC言語のあの厳格な感じは割りと好きです。「図書館では静かにしなさい」と言われているような気分になります。笑

厳格(?)なプログラミング言語といえば、Brainf**k(**はuc)を思い出したのですが、知っていますか?8種類の文字しか使わない言語です。それぞれ、ポインターを動かしたり、加算減算、入出力、ループの命令になっています。

「Hello World」はこう書きます。

+++++++++[>++++++++>+++++++++++>+++++<<<-]>.>++.+++++++..+++.>-.
------------.<++++++++.--------.+++.------.--------.>+.


このような難解プログラミング言語にはまった時期があったんですよ。書いたりはしませんでしたが、発案者はよく考えるものですよね。以下は私が気に入っていたプログラミング言語です。


シェイクスピア

コードがシェークスピアの演劇のように見える言語です。登場人物に代入した値を、「Speak your mind」で出力します。めっちゃ冗長です。「Hello World」はこう書きます。

Romeo, a young man with a remarkable patience.
Juliet, a likewise young woman of remarkable grace.
Ophelia, a remarkable woman much in dispute with Hamlet.
Hamlet, the flatterer of Andersen Insulting A/S.

                   Act I: Hamlet's insults and flattery.
                   Scene I: The insulting of Romeo.
[Enter Hamlet and Romeo]
Hamlet:
You lying stupid fatherless big smelly half-witted coward! You are as
stupid as the difference between a handsome rich brave hero and thyself!
Speak your mind!
You are as brave as the sum of your fat little stuffed misused dusty
old rotten codpiece and a beautiful fair warm peaceful sunny summer's
day. You are as healthy as the difference between the sum of the
sweetest reddest rose and my father and yourself! Speak your mind!
You are as cowardly as the sum of yourself and the difference
between a big mighty proud kingdom and a horse. Speak your mind.
Speak your mind!
[Exit Romeo]
                   Scene II: The praising of Juliet.
[Enter Juliet]
Hamlet:
Thou art as sweet as the sum of the sum of Romeo and his horse and his
black cat! Speak thy mind!
[Exit Juliet]
                   Scene III: The praising of Ophelia.
[Enter Ophelia]
Hamlet:
Thou art as lovely as the product of a large rural town and my amazing
bottomless embroidered purse. Speak thy mind!
Thou art as loving as the product of the bluest clearest sweetest sky
and the sum of a squirrel and a white horse. Thou art as beautiful as
the difference between Juliet and thyself. Speak thy mind!
[Exeunt Ophelia and Hamlet]

                   Act II: Behind Hamlet's back.
                   Scene I: Romeo and Juliet's conversation.
[Enter Romeo and Juliet]
Romeo:
Speak your mind. You are as worried as the sum of yourself and the
difference between my small smooth hamster and my nose. Speak your
mind!
Juliet:
Speak YOUR mind! You are as bad as Hamlet! You are as small as the
difference between the square of the difference between my little pony
and your big hairy hound and the cube of your sorry little
codpiece. Speak your mind!
[Exit Romeo]
                   Scene II: Juliet and Ophelia's conversation.
[Enter Ophelia]
Juliet:
Thou art as good as the quotient between Romeo and the sum of a small
furry animal and a leech. Speak your mind!
Ophelia:
Thou art as disgusting as the quotient between Romeo and twice the
difference between a mistletoe and an oozing infected blister! Speak
your mind!
[Exeunt]


Piet

文字ではなく色を組み合わせて記述する言語(?)です。「Hello World」はこう書きます。



こっちのプログラムは「Piet」と出力するんですが、これを待ち受け画像にしていた時期もありました。





Whitespace

空白文字(スペース、タブ、改行)で記述する言語です。真っ白なメモのあぶり出し(みかんの汁で紙に書いた文字を、火であぶって浮き出させるやつ)みたいで、少年心をくすぐられる言語ですよね。





難解プログラミング言語は実用言語ではありませんが、少しでも触ってみると、また別の視点からプログラミングについて考えられるようになるかもしれませんよね。

1/36  | 次のページ »