最近はレスポンシブコーディングも多くなり、コーディングする度にデザインに合わせて
毎度ちまちまコードを書いていくのも面倒なので、コピペして使えるパーツを載せていこうと思います。
bootstrapなど便利なフレームワークも沢山ありますが、100％使用するとカスタマイズが面倒なので、
その辺は、使えそうな部分のみ抜粋して組み込んであります。
まずは、よく使うボタン。
レスポンシブのブレイクポイントは、Bootstrap のグリッドシステムに倣っています。
0 ～ [xs] ～ 768 ～ [sm] ～ 992 ～ [md] ～ 1200 ～ [lg]
inlineボタン（.button）
画面幅768px 以下でブロックボタン（.xs-block）
画面幅992px 以下でブロックボタン（.sm-block）
画面幅1200px 以下でブロックボタン（.md-block）
画面幅1200px 以上でブロックボタン（.lg-block）
どうも、にしおかです。
最近雨が増えて本格的な梅雨入りだなーと感じ、
通勤に傘が邪魔なんで早く梅雨明けしてほしいと思っている今日この頃です。
さて、日付的には1ヶ月ほど前のことですが
5月9日(土)にEC-CUBE3 勉強会＆コードリーディングに参加してきました。
6月に正式版リリース予定とのことで、β版を使っての勉強会でした。
http://www.ec-cube.net/product/info_3.php
によると、2系から3系への主な変更点は
内部機構の刷新、UIの刷新、全機能API対応とのことですが、
勉強会では内部機構の刷新に対する説明・コードリーディングが中心でした。
実際、コードを確認してみると、フレームワークの使用、
カスタマイズ・プラグインの作り方変更、テンプレートエンジンの変更など
2系から大幅に変わっていました。
自社プラグインのバージョンアップやらで避けては通れませんが
2系から3系へのバージョンアップはなかなか大変そうです。
ただ、3系では2系で発生していた同一処理を
カスタマイズする複数のプラグインがインストールされた場合、
後にインストールしたプラグインの処理が有効になってしまう
プラグインのバッティングの問題が大幅に改善されるようです。
また、個人的に面白そうだなーと思っているのは全機能API対応です。
6月の正式版リリース時にはどこまで対応するかは未定のようですが、
「商品ページまではEC-CUBEを使わずカート以降のみEC-CUBEにする」
というような使い方がこれまでより簡単になるかと思われます。
もうすぐ正式版のリリースとなりますが
β版で未確定の箇所も確定しているはずですので
次回勉強会があればまた参加できればと思います。
ではまた。
はじめまして
7月に入社しました、すずきと申します。
よろしくお願いいたします。
いわゆる中途採用で、わりといい歳なのですが、なんと、くさかべさんと同じ学年。
それを知ったときは、ちょっとほっとしました。
年齢が上のひとに教えるのはやりづらそうだし、上のほうも上のほうで教えられづらいものだと思うので。
そうそう、教えられることの多いこと多いこと……。
立場が低いほうが気楽でいられるので、教えられることが多いのは助かります。
とは言え…やることが多い！
最初の一か月で、さっそくキャパオーバーを起こしてしまいました。
やることが多いのは、会社としてはすばらしいことなのに、残念です。
豆腐メンタルなのが悔やまれます。
前の会社とは違って、phpやperlをさわることが多く、しかも他のひとが書いたコードを読むことが多いので、毎日のように「こんなふうに書くひとがいるんだー！」と感動しています。
前の前の前くらいの会社でもそうでしたが、他のひとが書いたコードを読むのは、たいてい勉強になるので、好きです。
あ、今思い出しましたが、これまでほぼ独学でやってきたので、教えてもらえる環境なのはありがたいです。
ほんとうのほんとうに困ったときに相談できるのは、わたしにとっては稀有なことでした。
ほんとうにありがたい。
では最後に、くさかべさんにほめられたタイピングのおはなしを。
まず、わたしはCapsキーとCtrlキーを入れ替える派です。
そうでないと、まったくもってダメなひとになります。
手首をひねらずに小指でCtrlが押せるのは、とっても便利です。
LinuxでもWindowsでも実現できます。ご興味を持たれた方はぜひ一度ご検索を。
さて。Ctrlが楽に押せると、キーボードショートカットがずいぶん楽になります。
プログラムを書くときのホームポジションは、左手の小指がCapsキー（Ctrlと入れ替わっている）になります。
Ctrl+C → Ctrl+V(コピペ) → Ctrl+S(保存) →
Alt+Tab(前のウィンドウ＝ブラウザに切り替え) → Ctrl+R(ブラウザ更新)
なんていう操作が、小指の移動がなくなるために、流れるように打てます。
SSHでLinuxなんかをさわる時だと、Ctrl+AやCtrl+E、Ctrl+Wが打ちやすくなるのも地味にありがたいです。
デメリットは、イラストレーターなどで、Ctrl+Alt+Space+右クリック（縮小表示）の操作がしづらくなることでしょうか…。
わたしは慣れてしまいましたが。
最初ということで、少し長めに書いてみました。
では、以後よろしくお願いいたします。
どうも、Dateです。
今回は宝石の王様、ダイヤモンドについて少し語ってみたいと思います。
先日、人生で始めて宝石を購入しました。
しかも指輪やピアスなどのアクセサリーではなく石のみで… （←？）
ダイヤモンドの価値は4Cで決まると言われています。
これだけであれば特に女性の方であればご存じの方も多いと思いますが、
今回はもうちょと掘り下げていきます。
１つめのＣ… 「Carat：カラット」
おそらく一番分かりやすいＣです。
宝石の質を表す単位で「1ct = 200mg」と定められています。
もちろん大きなものほど価値があります。
２つめのＣ… 「Color：カラー」
無色透明の印象が強いダイヤモンドですが、天然ダイヤモンドのほとんどは、
ほんのり黄色く色がついています。
その中でより色の薄いもの、無色透明に近い物ほど価値があります。
ただし同じ色でもブルー・ピンク・グリーンなどは稀少で、無色透明なものより
高価で取引される場合があります。
３つめのＣ… 「Clarity：透明度」
原石の中に含まれるキズ、不純物の大きさ・数・位置によって価値が左右します。
肉眼で見えるものから、ルーペで拡大してようやく確認できるもの、
全く確認できないものまで11段階に分類されています。
４つめのＣ… 「Cut：カット」
輝きに一番影響し、唯一人の手によって価値が変わってくる要素です。
ダイヤモンドのカットで一番有名なのが「ラウンドブリリアントカット」ですが、
反射・屈折率を数学的に分析し、上部から進入した光が全て内部で反射して
再び上部から出て行くことで、輝きを際立たせるように設計されています。
まさに「ダイヤモンドのためのカット」と言っても過言ではありません。
実は、これを利用してダイヤモンドが本物かどうか見分けることができます。
（※正しくカットされていることが前提となります）
紙の上に小さな●を書き、それを隠すように裏向けにダイヤを置きます。
裏側から●の一部でも透けて見えれば偽物。全く見えなければ本物です。
つまり… 本物であれば上部から入った光は全て反射・屈折して上部へ抜けるので、
裏側から光は出て行かない（＝見えない）。
逆に本物でなければ反射・屈折率の違いから、裏側から光が漏れる（＝見える）
ということになります。素人でも簡単に見分けることができます。（えへん）
ちなみに正しくカットされているダイヤモンドをルーペで覗くと、
上部からは「矢尻」、底面からは「ハート」の模様を確認することができます。
なかなか機会も無いと思いますが、機会があれば是非覗いてみて下さい。
実物を見ると、ちょっと感動します。
婚約指輪などによく使われるダイヤモンドですが、理由として…
「男性の矢尻で女性のハートを射抜く」という謂われがあるからだとか。
あっ… （察し）
と思われた方もあると思いますが、これについては別の機会に語りたいと思います。
そんな機会なんてあるのか…？(笑) ：P
台風がすごい角度で東に曲がっていきましたね。
日曜日のライブは無事に行けそうでよかった。
あ、なしろです。
みなさんベクター画像は好きですか？
そう、例のベクター画像です。
あのベクター画像です。
(ベクトル画像と呼んだりもします)
Illustratorで描いたりする画像ですね。
ペジェ曲線とか楽しいです。
ベクター画像はJPEGやPNGなど(ラスター画像と呼びます)と違い、線などが座標として記録されています。
なので拡大してもきれいな画像です。
今回はそんなベクター画像をWebで扱う話です。
Webでベクター画像というとSVGがあります。
SVGは昔からあり一部では使われていましたが、JPEGなどのラスター画像と比べて作成が難しく扱いづらいためあまり普及しませんでした。
最近のモニターの高解像度化(特にiPadやiPhoneのRetinaディスプレイ)によりWebでの画像の高解像度対応が必要になってきています。
ラスター画像で単純に大きくするとファイルサイズが大きくなり、Webではあまり使えません。
そこで再注目を浴びたのがベクター画像です。
ベクター画像なら拡大してもきれいなので、ファイルサイズも変わりません。
(ただし複雑な画像では座標情報が多くなるためファイルサイズが大きくなります)
HTML5ではSVGタグが登場し、HTMLの中にそのままSVGを書くことができます。
(ここからプログラマ寄りのお話ｗ)
そしてつい昨日のこと、AdobeがJavaScriptでSVGを扱うSnap.svgというライブラリを公開したと発表しました。
JavaScriptから動的にSVGを簡単に書くことができ、アニメーションもできます。
JavaScriptでSVGというと超有名なRaphaëlというライブラリがありますが、Snap.svgはこのRaphaëlの作者(Adobeの人)が一から作り直したライブラリです。
早速ちょっと触ってみました。
Raphaëlと比べるとマスクやグラデーションなどの表現に強いかなと感じました。
あと、これが一番大きいのですが、外部のSVGファイル(Illustratorなどで出力したファイル)も読み込んで同じように扱えます。
Raphaëlでは読み込んだSVGはただの画像(ラスター画像)のようにしか扱えませんでした。
それをアニメーションさせたり色を変えたりなど、動的に書いたSVGと同じように扱えるのです。
やはりJavaScriptで一から書こうとすると大変ですが、あらかじめ書いておいたSVGを読み込んで使えるとずっと楽ですね。
そんな訳で、みなさんベクター画像は好きですか？
拡大してもきれいな画像は好きですか？
Snap.svgでSVGを動かしましょう！
あ、公式サイトのURL貼っときます→こちら
Demosが楽しいです。
あとGetting Startedが分かりやすくていいです。
以上、ステマでした←違ｗ
ではまた。
どっからどこが梅雨かわからへんなあと思ってたら、急に日差しが強くて火傷しそうなぐらいですね。
熱中症には気を付けましょう。
あ、なしろです。
週末とかにたまに勉強会開いて、HTMLとかCSSとかJavaScriptとかPHPとかとか、人に教えたりしてます。
勉強会と言っても最近主流の反転授業なんで、授業の準備みたいなのは要らなくて楽ですｗ
で、先日、CSSの詳細度について話す機会がありました。
意外ときっちり理解できてへん人もおるみたいです。
そこで今回は基本に立ち返り、CSSの詳細度についてまとめときます。
ちょっと長なるけど興味のある人はお付き合いください。
(びっくり真面目なお話ですｗ)
発端はある人の「このスタイル適用されへん。上書きされんちゃうの？」と言う言葉でした。
その人は単純に「idを使えば優先される」「あとから書いたスタイルが優先される」と思っていたそうです。
間違いじゃないですね。
それに対して他の人が「classも大事やで」とか「ようさん書いた方が強いねんで」と発言しました。
これも間違いじゃないですね。
では、例えば次のHTMLに
<div id="contents">
<div class="article">
<div><ul>
<li><input type="text" value="aaa" /></li>
<li><input type="text" value="bbb" /></li>
</ul></div>
</div>
</div>
CSSで次の指定をしました。(問題のためややこしく書いてますｗ)
#contents ul li:hover [type="text"] {color:#ff0000;} /* マウスオーバーで赤 */
#contents div > div ul li:first-child input {color:#0000ff;} /* 1つ目だけ青 */
#contents div.article [type="text"] {color:#000000;} /* 黒 */
さて、”aaa”と”bbb”の文字色はどうなるでしょうか。最初に書いた「マウスオーバーで赤」は適用されないのでしょうか。
いっぱい書いて長い「1つ目だけ青」でしょうか。
classを指定して最後に書いた「黒」でしょうか。
答えはWebで！
はい、ここがWebなので答えですｗ
「両方黒でマウスオーバーで赤」です。
いっぱい書いて長い「1つ目だけ青」は適用されません。
何が違うんでしょうか。
ここで出てくるのが「詳細度」です。
超簡単に言うと各セレクタが持つ点数です。
「idやclassが強い」とか「長いのが強い」とかはここから来てます。
では「詳細度」について。
セレクタの1つ1つに点数を付けます。
点数の付け方が独特で、1点とか10点とか100点ではなく、0.0.0.1点とか0.0.1.0点とかです。
“.”で区切られた数値を桁と考えてもらえればいいです。
セレクタそれぞれの点数は
- インラインスタイル(style=””)
- 1.0.0.0
- id
- 0.1.0.0
- class、疑似クラス(:hover、:first-childなど)、属性セレクタ([type=”text”]など)
- 0.0.1.0
- タグ、疑似要素(:afterなど)
- 0.0.0.1
classと属性セレクタが同じ点数なのは意外かもしれませんね。
点数は”.”で桁ごとを合計し、桁上げはしません。
例えばclassが100個、タグが200個指定されても0.0.100.200となって、id1個の0.1.0.0には負けます。
では先ほどの問題の点数を出してみましょう。
#contents ul li:hover [type="text"] {color:#ff0000;} /* マウスオーバーで赤 */
#contents div > div ul li:first-child input {color:#0000ff;} /* 1つ目だけ青 */
#contents div.article [type="text"] {color:#000000;} /* 黒 */
マウスオーバーで赤→ 0.1.2.2
1つ目だけ青
→ 0.1.1.5
黒
→ 0.1.2.1
はい「マウスオーバーで赤」＞「1つ目だけ青」＞「黒」の順番ですね。
このため、「1つ目だけ青」は適用されず黒となり、マウスオーバーで赤くなりました。
では、「マウスオーバーで赤」から”ul”を取るとどうなるでしょうか。
#contents li:hover [type="text"] {color:#ff0000;}
点数は0.1.2.1となり「黒」と同じになります。答えはマウスオーバーしても黒のままです。
ここで「あとから書いたスタイルが優先される」が出てくるのです。
詳細度の点数が同じ場合はあとから書いた方を優先します。
まとめると
まずはセレクタごとの点数を計算し、点数が高い物を適用
点数が同じならあとから書かれた物が適用される
です。
長かったｗ
ではまた。
今年も残り5時間弱です。
3年連続大晦日の夜にブログ書いてます。くさかべです。
もはや大晦日と言えば、紅白歌合戦・年越しそば・ブログが定番に。
去年の大晦日のブログで、今年（2012年）の目標を
「アプリ開発の知識を身につけること」
と書いてましたが、残念ながら達成できませんでした。
もうひとつの目標は達成しましたが。。。
そんな中、最近気になっているのが
「PhoneGap」というスマホアプリ開発のフレームワークです。
HTMLとJavaScriptをベースにしており、
iOSアプリとAndroidアプリの両方が作成できます。
同様の、いわゆるハイブリッドアプリケーションを作成する
フレームワークは他にもいくつかありますが、
その中でも「PhoneGap」は有力株のようです。
正月休みの間に少しでも試してみたいものです。
みなさん良いお年を。
どうも。Dateです。
先日、仕事の関係でSHARPのBIGPADを触る機会がありました。
ファイルの展開、ドラッグ＆ドロップ、ウインドウのリサイズなど
普段パソコン上で行っている作業を、大画面のディスプレイの中で
腕を大きく動かして直感的に指で操作をする感覚がとても斬新でした。
気分は映画「M:I」「マイノリティリポート」のトムクルーズか
「アイアンマン」のロバートダウニーJrか…
そういえば、ドラえもんの道具で『おこのみボックス』というものがありました。
「○○になぁれ」と言うと、小さい箱が四角い物限定で色んな物に変化すると言うもの。
洗濯機、テレビ、カイロ、ライター、カメラ、レコードプレーヤーなど…
今や当たり前となったスマートフォン。
洗濯機やライターにはなりませんが、テレビ・カメラ・音楽プレーヤー…etc
胸ポケットに入れておけば、ほんのり暖かいのでカイロ代わりにも(笑)
記事のタイトルは去年SHARPで使われたキャッチコピーですが、日進月歩の技術で
数十年前に描かれた未来がどんどん近づいています。
次はどんなデバイスが出てくるのか… １ユーザとして楽しみです。
…が、制作者としてはこれ以上出て欲しくないという気持ちもあったりします。 :-P
どうも、ニシオカです。
Windows8 Consumer Preview版がインストールできるとのことなので
こちらの記事を参考に自宅のPCにインストールしてみました。
今回空きのハードディスクはなかったので新しいパーティションを切り、
ISOイメージからインストールすることにしました。
ちなみにディスプレイですがタッチ機能がありませんので
そこら辺の操作感は確認することが出来ません・・・。
通常ISOイメージをCDやDVDに書き込む場合、専用のソフトが必要だったりしますが
Windows７の場合ISOイメージを右クリックし「ディスクイメージの書き込み」で
ディスクに書き込むことが出来ました。（今回の作業で初めて知りました）
インストール自体は問題なく終わりましたが
僕のPCは標準で無線LAN機能がありませんので
インストール完了後無線LAN機能をインストールしました。
現状インターネットが使えるようにしたのと少し触ってみただけなのですが
見た目が今までとまったく変わっており最初に苦労したのは
シャットダウンの仕方がわかりませんでした。
Windows8の新機能「Metro UI」はまだほとんど触れていないので
こちらはまた紹介したいと思います。
こんばんは。くさかべです。
今回は、CSS Spritesのメモリ消費の実験をしてみました。
方法は、1枚の画像を画像をスライスしてHTML上に並べたものと、
CSS Spritesで同じ見た目を実現したものを
ブラウザで表示した際のメモリの消費量をタスクマネージャで調べる、
という至極単純な方法です。
今回は約100KBのJPEG画像を縦横8×8で64枚に分割したもので実験しました。
スライスバージョン
CSS Spritesバージョン
結果はというと、IE9、Firefox6、Chromeで調べた限りでは、
メモリの消費量には違いがみられませんでした。
ロードしている画像が100KBと小さかったり、
タスクマネージャでは正確なメモリの消費量がわからないということもありますが
少なくとも単純に画像を使用した回数に比例して
メモリを大量に消費する、というわけではなさそうです。
また機会があれば、もう少し方法を工夫したテストをしてみようと思います。