気がつけば師走。今年も残すところあと数日ですね～！
頭からユニコーンの「雪が降る町」が離れないスギタニです。
そして今日はどうやらクリスマスイブのようですね～。
皆さん、クリスマスはどのように過ごされますか？
先週末にパーティーをされた方も多いのではないでしょうか。
なんとなんと、私はパリのエッフェル塔を見てきました！
といっても、もちろんそんなに簡単に行けるわけ無いので、
私の妄想旅行に大活躍の、お気に入りのアプリを紹介します！
行ったことのある国のあの場所、今どんな風なんだろう・・・と。
その妄想旅行を楽しむときに使うのがWorldViewというアプリです。
このWorldViewは、世界中の様々な場所に設置されたwebカメラをiphoneで見ることの出来るアプリです。
自分が見たいポイントが絶対に見つかるというわけではないですが、地図上や土地名から検索することも出来たりするので、行ったことのある場所を探してみたり、これから行ってみたいと思っている国を探してみたり。
ただひとつ、簡単に世界の今が見えてしまう分、実際に始めて訪れる国へ行ったときの感動は少し薄れてしまうかも。。。
といった気持ちはあります。
その反面、「自分はあの場所に行くんだ～！」という気持ちが膨らみ、また日々の妄想旅行が楽しくなります♪
今年の目標は「旅行に行く！」と宣言していた私ですが、
アイルランド・イギリスへと行き、無事目標達成でき、悔いのない充実した一年が過ごせました♪
少し早いですが、皆様良いお年を～☆
くさかべです。
先日、個人的にECサイト構築の相談を受けました。
現在、一般的なECサイトを構築する場合、
EC-CUBEをベースに構築することが多いと思います。
EC-CUBEは、純国産のソフトなので、日本人の感覚や商習慣に
よくフィットし、国内では圧倒的な支持を受けています。
相談を受けたサイトもEC-CUBEを使用すると思うのですが、
カスタマイズ箇所が非常に多くなりそうなので、
もっと適したソフトが無いか、まだ少し検討しています。
高機能なECサイト構築では、MagentoやCS-CARTなども候補になりますが
なかなか日本語の情報が少ないのが現実です。
海外の情報ですが、↓は主要なECサイト構築ソフトをレビュー・比較したサイトです。
http://www.iecsp.com/review-compare-php-shopping-cart.html
ただし、CS-CARTの構築サービスを行っている会社のレビューなので
多少のひいきは差し引いて見てください。
最適なソフトの選択ができるよう引き出しを増やすのも大切ですね。
おまけ。
先日なぜか仕事で立ち寄ったお寺で絶景に出会いました。
門の向こうにまっすぐな石段と紅葉。
稜線が目の高さにあって、夕焼け空がきれいでした。
だいこん。
台風がすごい角度で東に曲がっていきましたね。
日曜日のライブは無事に行けそうでよかった。
あ、なしろです。
みなさんベクター画像は好きですか？
そう、例のベクター画像です。
あのベクター画像です。
(ベクトル画像と呼んだりもします)
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となり「黒」と同じになります。答えはマウスオーバーしても黒のままです。
ここで「あとから書いたスタイルが優先される」が出てくるのです。
詳細度の点数が同じ場合はあとから書いた方を優先します。
まとめると
まずはセレクタごとの点数を計算し、点数が高い物を適用
点数が同じならあとから書かれた物が適用される
です。
長かったｗ
ではまた。
こんにちは。ブログ初投稿のいまいです。
最近ものすごく気になることがあります。電車に乗ってふと周りを見渡すと、多分乗客の７～8割ぐらいか・・もしかしたらそれ以上の人たちが携帯やスマートフォンを覗き込んでいる・・。 試しにいたずらで、対面に座っている人たちの顔を順にじっと見つめてみても、誰ひとり顔を上げてくれないんですね。 昔は電車やバスに乗ると知らない人とも目が合って微笑みかけたり会話が始まったりしたものですが、その時代の人が見たら今のこの光景はどのように映るのでしょうか・・？なんて言ってる時点で随分年寄りになったような気分ですが。
そんな沢山の人々が夢中になって街角でも触っている携帯電話ですが、中でも最近特に増えた気がするスマートフォンの日本国内での普及率は2012年時点で38％だそうです。
もっと多いかと思っていたので、まだ全携帯電話の半分にもなっていないとはちょっと意外ですね。
でも、その数は今爆発的に伸びていて、2016年の国内普及率予測はなんと約70％とか。ちなみに日本は携帯メーカーとキャリア独自の機能がごった煮になった、いわゆる「ガラケー」（ガラパゴス携帯）文化の国。そういう呪縛のない欧米の先進国ではスマートフォンへの切替えベクトルさらに顕著で、同じ2016年にはアメリカではほぼ100％の携帯端末がスマートフォンに切り替わるという予測です。 ちなみに、同じ2016年にはタブレットPCの出荷台数がノートPCを抜いて、もっとも人気のあるPCになるとか。 もうPCや携帯電話は「古い」モノと呼ばれる日がすぐそこに来ています。
タブレットPCとノートPCの出荷台数予測
Source: NPD DisplaySearch Quarterly Mobile PC Shipment and Forecast Report
スマートフォンやタブレットPCがそこまで爆発的に広がっている理由には、ツイッターやフェイスブックをはじめとした生活密着型のソーシャルネットワークの普及も牽引しているのは周知の通りですが、スマートフォンを使っている人のほとんどがこれらのサービスを使っていると言っても過言ではないですね。ちなみにフェイスブックの国内ユーザー数は約1,300万人、ツイッターは約3,300万人、LINEは約3,200万人だそうです。ちなみに、日本の人口は12,800万人ですから、その割合は予想以上でしょう。
周りを見渡すだけで時代の変遷がはっきりとわかってくるようになったのはやはり年齢を重ねてきたせいでしょうが、インターネットの世界はほんの数年でもめまぐるしく進化します。
電話とFAXで仕事をしていた頃がちょっと懐かしく感じたりして。
こんばんは。
またずいぶん間をあけてしまいました。加地です。
2歳になった娘もだいぶんしゃべりだし、色もずいぶん言えるようになりました。
不思議なのがどうしても覚えやすいものとなかなか出てこない言葉があるのです。
あお→あか→きいろ→ぴんく→しばらくかかる→→→みどり→くろ→ちゃいろ→おれんじ
「みどり」がどおしても難しかったらしく
はじめて言えたときは、大喜びでした！！！
親バカですね(^_^;)
こどもの記憶力には時々ほんとにびっくりしますが、
毎晩なにげなく、てきとーに子守唄を歌ってるんですが（歌詞はでたらめ）
朝おきると、そのでたらめの歌詞で娘が歌えるようになってるんです。
自分でも忘れてたのに・・・でたらめのまま覚えてしまったのでまずいですね。
カラーといえば最近スマホやiPadなどのお仕事も増えてきたのですが
一からパーツやアイコンを作ると制作時間がものすごくかかります。
そこで便利なUIデザインテンプレートというものあります。
今回はUIデザインテンプレート素材Polaris UIが公開されていたので、ご紹介します。
Webサイトを作成するときに、必要であろうデザインパーツ、
素材が、ひと通りデザインされているので、統一感もばっちりな仕上がりが魅力的です。
ダウンロードファイルには、48個のシンプルアイコン素材Lineconsも一緒に収録されています。
配色がものすごく綺麗です。
娘も上手にお絵かきできるようになるかな・・・
それでは。
こんばんは。くさかべです。
今回は、CSS Spritesのメモリ消費の実験をしてみました。
方法は、1枚の画像を画像をスライスしてHTML上に並べたものと、
CSS Spritesで同じ見た目を実現したものを
ブラウザで表示した際のメモリの消費量をタスクマネージャで調べる、
という至極単純な方法です。
今回は約100KBのJPEG画像を縦横8×8で64枚に分割したもので実験しました。
スライスバージョン
CSS Spritesバージョン
結果はというと、IE9、Firefox6、Chromeで調べた限りでは、
メモリの消費量には違いがみられませんでした。
ロードしている画像が100KBと小さかったり、
タスクマネージャでは正確なメモリの消費量がわからないということもありますが
少なくとも単純に画像を使用した回数に比例して
メモリを大量に消費する、というわけではなさそうです。
また機会があれば、もう少し方法を工夫したテストをしてみようと思います。
こんばんは。くさかべです。
先日、社内でHTMLのコーディングの標準化に関するミーティングを行いました。
その中で、ページ内で使用する画像を、大きな1枚の画像として作成し、
CSSで表示位置を調整する CSS Sprites （のようなこと）の是非に関する話題が上がりました。
CSS Sprites は、ロードされる画像の枚数が減る分、高速化、軽量化が
可能なケースがある一方、あまりに大きなファイルを何度も使いまわすと
メモリを大量に消費する可能性が指摘されています。
To Sprite Or Not To Sprite
http://blog.vlad1.com/2009/06/22/to-sprite-or-not-to-sprite/
そこで、次回は実際にテストをしてみようと思います。
お楽しみに~
こんばんわ。かじです。
最近、我が家のおチビさんが、早くもつかまり立ちをはじめて
あちこち引っ張り出すので、目が離せずテンテコマイの毎日を過ごしています。
そんな中、毎日ひそかな楽しみがあります。
それは夜な夜な冷凍庫をあけて、バリバリバリ。。。
そう、寝る前のアイスタイムです♪
もうアイス中毒なのか冷凍庫に3個以上アイスがないと落ち着いていられません^^;
そこで先日ヒルナンデスというお昼の情報番組をみていたら
これまで700種類以上アイスを食べ、約1年で120万 アクセスを突破した
「アイスマニア」を運営するアイス評論家さんについてのコーナーが！
なんでもアイス王を目指すべく、コンビにアイスを毎日ひたすら食べて
評価しているそうで、独断と偏見のアイスランキングを紹介されていました。
アイスを知り尽くした人が選ぶなんて、これは気になるっっ ・・・でしょう？
と思って抜粋しました。
———————————-
★第1位 チョコモナカジャンボ 森永製菓
★第2位 ガツンとみかん 赤城乳業
★第3位 プレミアムホームランバー 協同乳業
☆第4位 チョコバリ センタン
☆第5位 あいすまんじゅう 丸永製菓
☆第6位 ジャイアントコーンスペシャルミルフィーユ グリコ
☆第7位 あずきバー 井村屋
☆第8位 JUNヒットチョコ 栄屋乳業
☆第9位 アイスの実 グリコ
☆第10位 ビエネッタカップ 森永乳業
———————————-
なんと私とかぶってるではないですか。
チョコモナカジャンボは最近特にはまっていまして
今も冷凍庫（アイス専用引き出しがあります）の中に４つ入っています。
チョコバリは大学時代に毎日食べていました。
残念ながら「ガツンとみかん」は食べたことがないのでこれは見つけたら
トライしようと思っています。
私も、アイス評論家を目指すかな・・・
アイス評論家がコンビニアイスを食べまくって紹介する情報ポータル
どうも、なでしこJAPANのW杯優勝でかなりテンションが上がってしまった西岡です。
まさか、こんなに早く日本人がW杯を高々に掲げるのを目にする日が来るとはって感じです。
ちなみに、男子のW杯は大会の度に返還するのですが
女子のW杯は毎回作るらしく、優勝すると優勝国で保存できるみたいです。
最近Googleが画像で検索というサービスを始めました。
これはGoogleの画像検索サービスの新機能で検索ボックスに画像をアップし
アップした画像から検索をするというサービスです。
例えば、ある場所の画像をアップして検索をするとその画像に類似する画像やサイトを検索してくれます。
気になる画像があれば一度試してみてください。