Tags

閉じる

Category

閉じる

Search

Search

閉じる

記事一覧

細かすぎて伝わらないアンチエイリアスの話

細かすぎて伝わらないアンチエイリアスの話

はじめまして、デザイナーの越後です。
webフォント全盛の昨今ですが、まだまだ文字を画像化する機会も多く
画像で文字を扱うにしても、くっきりはっきり、意図した形でデザインがしたいものです。

そこで今回は「細かすぎて伝わらないアンチエイリアス」と題して、
少しマニアックなphotoshopでのフォント調整についてお話したいと思います。

ps-anti-aliasing.png

続きを読む

これで一撃！簡単にOGP画像をつくれる2つの秘密道具！

これで一撃！簡単にOGP画像をつくれる2つの秘密道具！

こんにちは！デザイナーのわりえもんです！
ドラえもんみたいな見た目の、のび太みたいななにかです。
デザイン制作に役立つ秘密道具を紹介します！

さて今回はサイト・アプリ制作に必需品な
Facebook OGP画像つくりに役立つ2つの秘密道具をお教えします！

facebook-ogpsd.png

続きを読む

デザイナー『裏』説明会もある！１社だけの合同説明会

みなさんあけましておめでとうございます(´∀｀∩)

意匠子です！

新年早々ですが、デザイナーに関係するカヤックのイベントのお知らせです！

中途もOK！即内定もあり！１社だけの合同説明会！

ざっくばらんに話ができるデザイナー『裏』合説！

 

どちらも１月１１日（土）、つまり今週の土曜日にやりますよ！

詳しくは続きで！！

続きを読む

これだけは抑えておきたい！ jQuery や CSS の「イージング」の基礎知識

初めまして！
14年新卒で入社予定の、HTMLファイ部のゴンです！

現在は入社前インターンシップとして、カヤックに通い、
一流のマークアップエンジニアになるべく、研鑽を積んでおります。

今回は、CSSアニメーションやjQueryで使う、イージングの話を書こうと思います。

イージングの話！

イージングとは

イージングは、CSSアニメーションやjQueryで、アニメーションに緩急をつけるために使うプロパティです。
CSSやjQueryでアニメーションを作るとき、ease-inとか、linearとか、設定することがあると思います。

CSSではanimation-timing-function、 jQueryではEasingと呼ばれるものです。

いろんな呼び方があるとは思うのですが、この記事ではイージングで統一します。

下はjQueryでアニメーションをするときの例です。

$("div.ball").animate({
    left: "300px";
}, 3000, "easeInQuad");

この"easeInQuad"にあたる部分が、イージングです！
イージングを設定することで、動きに、勢いや波をつけることができます。

イージングを設定して、ボールを左右に動かしたものがこちら！

ball_in_quint.gif

ちなみに、イージングがないとこんな感じです。

ball_linear.gif

イージングを使いこなそう！

イージングは結構、種類が多いです。
例えば、jQuery Easing Pluginでは、なんと30種類以上のイージングが用意されています！

でも、30種類もあっても、ぱっと見、違いがよくわからないなんてことありませんか？
今回は、私の独断と偏見で、jQuery Easing Pluginのイージングを中心に、
それぞれのイージングの特徴と、使いどころを紹介します！

続きを読む

みんなでつくるフォント「FONTA」に投稿された、秀逸すぎるタイポグラフィのまとめ

一人一文字 みんなでつくる！

HTMLファイ部のほんだです。

このたび、最近リリースしたカヤックのサービス、
FONTA 一人一文字 みんなでつくるフォント
への投稿が1000文字を超えました。（ワーッ）

今回は集まった文字の中から、
制作チームも予想していなかった、秀逸すぎる作品を紹介します！

続きを読む

遂に出た！3Dプリンタが出力できる3Dプリンタ！最速レビュー #エイプリルフール

いま話題の3Dプリンタとは？

3Dプリンターとは、紙に出力する2Dのプリンタとは違い、樹脂などを使い、実際に立体のモデルを出力できるプリンタのことをいいます。

以前は、価格が高く、一般には手の届かないところにあったのですが、
ここ最近、小型化された安価な3Dプリンタが販売されるようになり、
2013年は、3Dプリンタがますます普及していくと、いくつかニュースにもなっています。

そんな中、ついに3Dプリンタが出力できる3Dプリンタが発売されました！

続きを読む

CSSで絵を描く！？今日から作れる達人のコツをご紹介

はじめまして! HTMLファイ部(内定者)の、のびーです。

4月の入社に向けて、せっせと勉強をしているアルバイターです。

jsdo.itでは、なんと本日、「HTML5実力テスト 応用編」をリリースしました！！
http://jsdo.it/blog/2013/01/html5cat-update.html
リリースを記念して、テスト問題にも出題される、「CSSで絵を描く」ことをテーマに記事を書いてみます！

※ 文中の例について、ChromeとFirefoxとOperaいずれの最新版とIE10が対応しています。

CSSだけで絵を描く!?

さて突然ですが、こちらのイラストをご覧下さい。

はい、絵本に出てきそうな、おひさまです。
そしてこのイラスト、実はCSSだけで描かれています。

「CSSって、Webのレイアウトをするためのものじゃないの?」、と思う方もいるかとは思いますが、
断言します。いまCSSお絵描きが熱いんです!!

今回の記事では、このイラストの作り方について説明しながら、
CSSお絵描きの楽しさを伝えられたらなと思います。

続きを読む

「秒速で1億PV稼ぐ条件」をエンジニアに聞いてみた

平日は割りと仕事しているんですが、
さっきふとこんな技術相談を、エンジニアに投げてみました。

お題を投げてみた

hayashi.png barimi
ねえねえ、技術相談なんだけど、秒速で1億PV稼ぐサイト作るなら、技術的にどうする？
私ならオートリロードとiframeだと思うんだけど。

tanaka-hirotaka.pngtaiyoh
iframeで自分を開くようにするだけで、１回表示しただけで待ってれば相当数のPV数稼げそう。。。
（ブラウザがクラッシュするまで放置）
 
tanaka-hirotaka.pngtaiyoh
秒は無理だと思うので、あとは物量勝負ですね
 
hayashi.png barimi
なるほど。まあぶっちゃけ1億人集めればいいんだもんね
 
tanaka-hirotaka.pngtaiyoh
一人200タブ×複数ブラウザくらい開いておいて、
スクリプトで全部一斉にリロードできるようにすれば、
1億人もいらなくてもいけそう
 
hayashi.png barimi
10000×10000ピクセルのサイトで1×1ピクセルのiframe作れば、、、

そして話はサーバーへ

 
hayashi.png barimi
サーバースペックはどれくらいになるの
秒速で1億PVのサーバーっていくら位？
 
tanaka-hirotaka.pngtaiyoh
とりあえずgoogle並か、場合によってはそれ以上の力が必要な気がします！
 
hayashi.png barimi
聞いてみようかな。見積もり。
誰かサーバー屋さんの友だちでこのくだらない質問答えてくれそうなヒトいないかな、、、
 
tanaka-hirotaka.pngtaiyoh
Fさんに聞いてみようかな
 
hayashi.png barimi
ｗｗｗｗ
椅子投げられる
 
tanaka-hirotaka.pngtaiyoh
サーバどころか、そもそもネットワークがそこまでの流量に耐えられるかもあるなぁ
 
hayashi.png barimi
さ○○さーばーじゃだめなの？
 
tanaka-hirotaka.pngtaiyoh
間違いなく無理ですね
 

そのころIRCでは…

<taiyoh> fu****a: barimiさんからのお題で、与沢翼へのオマージュで、秒間1億PVのサイトを作るにはどれくらいのサーバスペックにすればいいだろう、と聞かれています
<fu****a>秒間1億ってgoogleでも作るつもりですか
<taiyoh> 僕もそう思います
<fu****a> Mobageで一日35億だっけ
<fu****a> という数値をお伝えください
<taiyoh> はい。ありがとうございます〜
<ke****rg_> モバゲーの2500倍！！
<S****u_> 計算早い
<taiyoh> http://game.watch.impress.co.jp/docs/news/20120426_529521.html これによるとサーバは700台くらいか
<ke****rg_> その量のサーバーは東京ドーム何個分の敷地なら入るんだ？
<ke****rg_> 175万台...
<ke****rg_> 46,755平米 が東京ドームだから 1平米のラックに10台サーバーが入るとすると東京ドーム４個分の敷地でまかなえるのか
<ke****rg_> なんとなく琴線に触れてしまった
<fu****a> 発電所作らないと…
<fu****a> マジレスするといろんなところの回線が持ちませんねきっと
<aci****n> さくらの石狩データセンターの完全形態(8棟?)でどのぐらいなんだっけ
<m***py> 今が
<m***py> 東京ドーム1.1倍？
<m***py> 11,392m^2
<fu****a> PVあたり10KBとすると、1TB/sec
<m***py> 延床面積
<typester> 与沢翼ってあの電車に広告でてるやつか
<fu****a> 全国の基幹線を8Tbps(現状の5倍)まで引き上げる目処が付いた
<fu****a> って
<m***py> バックボーンが足りない
<fu****a> 日本国内のインフラを全部置き換えるぐらい出ないと無理ですね
<fu****a> 1TB/secってことは1TBのハードディスクにデータ詰めて毎秒に放り投げる
<fu****a> 必要がある
<fu****a> 物理攻撃に近いな…
<taiyoh> 175万台の内訳を仮にEC2のインスタンスで換算してみて、
<taiyoh> ざっくりと「アプリ（c1.xlarge）６：DB（m2.4xlarge）３：ログ（hi1.4xlarge）１」と振り分けてみた時
<taiyoh> 重度使用リザーブドインスタンスでも月間713億円はかかるという試算が出たことだけお伝えいたします
<fu****a> そもそもawsに175万台あるのかなw
<aci****n> まずIPv4のアドレスそんなに揃うのかっていう
<aci****n> DNSラウンドロビンして分散するにしても/24を1個まるまる使う勢いが必要そうな
<aci****n> 255個でたりないかもしれないけd
<m***py> 東京ドームの値ぜんぜん違う……
<taiyoh> o
<m***py> 1.1倍だけあってて
<m***py> 延べ床面積が上の値で、敷地面積が51,448m^2でこっちで考えると東京ドーム1.1個分
<aci****n> なるほどね
<aci****n> たしか8棟ぶんの敷地があってまだ2棟しかできてなかったはずなので
<aci****n> さくら(完全体)が4個必要ってことね
<m***py> みたいです、二棟で11,392m^2
<aci****n> 道民としては北海道経済がうるおうならウェルカムやで！
<m***py> 全然関係ないけれど洞窟データセンターってどっかやってるんだろうか
<ken****walker>ヨルムンガンド発動できそうやん
<taiyoh> wikileaksっぽい＞洞窟データセンター
<ken****walker> 完全国内仕様じゃなければ海底ケーブルとかIXの増設とか必須っぽい
<m***py> 洞窟にデータセンター突っ込めば年中通して気温が一定だから冷却系楽になるねという北海道と同じ発想で
<m***py> どっかで提案していたような
<aci****n> 洞窟は湿度的な問題があるからなー
<m***py> 確かに
<ken****walker> Googleがつくってた海流利用したデーセンまだ全然できないのかな
<m***py> IBM Blackboxでも置いとけば
<m***py> 何とかなりそうな気も
<aci****n> ジオフロントさがしてそこにサーバおきましょう
<m***py> この規模だと一箇所にまとめるのがつらい
<m***py> 秒間1億PVならリージョンごとに分散させてやれば、個々のPVは分散される説

秒速で1億PV稼ぐサーバーは一体いくらなのか！？

hayashi.png barimi
えーいくら掛かるのか知りたいｗ

tanaka-hirotaka.pngtaiyoh
（今計算中ですが、超めんどい！）
去年時点で700台くらいと考えると、
<ke****rg_> モバゲーの2500倍！！
単純計算で
700 * 2500 = 1,750,000
のサーバが必要で、仮にEC2で換算してみると、（あくまで試算です）
DeNAでは超ハイスペックのマシンは確か使ってないので
重度使用リザーブドインスタンスで1年使用するとして、
 
<アプリケーション用：ハイ CPU エクストララージ インスタンス>
1台あたり年間：$2000(前払い)+($0.16*24*365=$1401.6)
(2000 + 1401.6) * 1050000（台） = $3,571,680,000
 
<DB用：ハイメモリ クアドラプル エクストララージ インスタンス>
1台あたり年間： $4120(前払い)+($0.352*24*365=$3083.52)
(4120 + 3083.52) * 525000（台） = $3,781,848,000
 
<ログ保持用：ハイ I/O クワドラプルエクストララージインスタンス>
1台あたり年間： $7280(前払い)+($0.621*24*365=$5439.96)
(7280 + 5439.96) * 175000（台） = $2,225,993,000
合計で$9,579,521,000 （今のレートで8 554.67137 億円）となります。
 
でも、これは年間のサーバ費の超概算というだけで、
他にやることはあって、
  1. 国内のネットワークインフラをすべて劇的にスペックアップさせないとそもそアクセスすらできない
  2. サーバをすべて置くために東京ドーム4個分くらいの敷地とサーバを設置するための施設
  3. サーバの電力量が無茶苦茶高いので、それを賄うための発電所の建設費用
辺りが別途含まれます
 
> 合計で$9,579,521,000 （今のレートで8 554.67137 億円）となります。
この数字だと年間なので実感わかないですが、
月間に直すと713億円弱くらいです
 

秒速で1億PVはお金がかかる！

ということで、構成とか色々工夫すれば金額変わると思いますが、秒速1億PVもお金がかかるんですね～。
くだらない相談に乗ってくれた、ステキなエンジニアの皆さんありがとうございました！
 
※この話題はIRCでまだ続いているようなので追記あると思います。笑

続きを読む

HTML5の最先端技術で顔文字はこんなにおもしろくなる

HTMLファイ部のしんちゃんです。よろしくぅ(^o^)/

「顔文字」と「ASCII Art」はほとんど毎日使っていますが、
コードで表現するとどうなるのか考えたことはありますか？

jsdo.itでは「第三回HTML5実技コンテスト」が現在開催中です。
今回のお題は、HTML5で表情豊かに表現する「顔文字(・∀・)」です。

顔文字とASCII ArtがHTML5最先端の技術との融合は、
果たしてどんな結果を生み出せるかを考えたらワクワクしますよね。
((o(´∀｀)o))ﾜｸﾜｸ

では、さっそく投稿したコードをいくつか見ていきましょう！

続きを読む

2012年のHTML5総まとめ＆来年の先読みイベント「放課後のHTML5」フォトレポート！

こんにちは～！意匠子です！
最近はふんどしにハマってます☆

先週開催された、jsdo.it主催『放課後のHTML5 vol.2』の様子を 写真レポートしちゃうよっ！

この勉強会イベントは、
・『HTML5の最新の動向や今後の展望』をテーマにした講演
・『第二回 HTML5実技コンテスト』結果発表＆表彰式
の二本立てで行われました。

会場は、前回と同じく、話題の渋谷ヒカリエ！
DeNAさんにオシャレな社内カフェテリアを貸していただきました。
ありがとうございました～！

では、盛り上がったイベントの様子をさっそく見ていきましょ～！

続きを読む