Tags

閉じる

Category

閉じる

Search

Search

閉じる

記事一覧

jsdo.itのウィジェットの3つの新機能と使い方

jsdo.itで書いたコードをブログに埋め込んで紹介することができます。

使い方

jsdo.it 新ウィジェット

  1. 紹介したいコードのページで、「ブログに埋め込む」ボタンをクリックします
  2. 必要があれば、最初に見せたいパネルとウィジェットのサイズを指定します
  3. 埋め込みタグをコピーして表示したい場所に貼付けます

Sample

新機能

最初に見せるタブ・ウィジェットのサイズを設定できるようになりました

これまでは一番行数の多いコードのタブを表示していましたが、見せたいタブを選べるようになったので記事の中で紹介しやすくなりました。

画面いっぱいに表示できるようになりました

右上の最大化ボタンをクリックすると新しいタブでウィジェットを大きく表示できます。コードをじっくり読みたいときや、大きな画面でプレビューしたいときに便利です。

シェアしやすくなりました

Readmeのタブにシェアボタンを追加しています。

続きを読む

デザインするための三種のリファレンス

はじめまして。

まだカヤックでは新顔ですが、意匠部最年長!?の山下です。
 
「つくるための三種の神器」
というテーマということで、
 
僕の方からは、つくる(デザインする)ときにとても意識して参考にしているものを
三つのメディア別にご紹介したいと思います。

続きを読む

HTML+CSS+JavaScriptでつくるサイトの定番演出「高級ペライチ」!

HTMLファイ部の「HTML5の鬼」ことほんだです。

カヤック社内では「高級ペライチ」という愛称で呼んでいる縦や横に長い1ページサイト。
スクロールに合わせたパララックスやアニメーションの演出が印象的ですよね。

今回は「高級ペライチ」とググると1位に表示される、
僕のはてブ「高級ペライチ」タグから厳選32サイトを紹介します!

続きを読む

Workflow para reducir el tamaño de tus assets

この記事はカヤックの七夕のイベント「777カヤック☆フェスティバル」に向けたリレーブログです。
今回は、いつもと趣向を変え、スペイン人デザイナーのダニエルが母国語で書きました。どうぞお楽しみください。

3 programas para reducir el tamaño de tus png.

Normalmente en mi trabajo diario tengo que preparar un monton de material para los programadores. Generalmente se trata de pngs transparentes que van a ser utilizados dentro de Flash, de iOS, Android o directamente web.
Como te descuides, tu applicacion puede multiplicase en tamaño, o tu web va a  tardar infinito en cargar.
Con tres herramientas te voy a ense;ar como reducir en algunos casos el 75% del volumen de un png y comprobar la calidad del mismo. (No queremos sacrificar la calidad de nuestro trabajo!)
 
El proceso incluye los siguientes programas:
 
Archivo original (567kb
 
Empezamos exportando nuestro PNG-24 (8bits por canal, incluyendo uno para el alpha) desde Photoshop, segun mi experiencia los mejores resultados con color son los siguientes: checkea "convert to sRGB" y "Internet standard RGB (No color Management)", Metadata "none" (no queremos inflar el png con informacion que no queremos).
 
01-photoshop-settings.png
 

Image Alpha

 
El objetivo de esta aplicacion es convertir un png de 24 bits en uno con una paleta de menos de 256 colores pero con un canal alpha completo para reducir el tama;o del archivo. Bien no?
Dependiendo de nuestra imagen esto es factible o no.
 
Dentro de la aplicacion seleccionamos el numero de colores al que vamos a reducir nuestra paleta, y el tipo de algoritmo que vamos a utilizar:
Median cut: Normal, reduce el numero de colores basando en la media.
NeuQuant: Funciona mejor con gradientes.
Posterizer: Realmente reduce la intensidad de niveles en png de 24 bits no el numero total de colores.
 
Image Alpha Settings
 
En nuestro caso seleccionaremos "Median cut" y 128 en el numero de colores.
 
"Save as" y seleccionamos donde queremos grabar nuestra imagen. Aqui viene un detalle importante: Activamos la casilla "optimize with ImageOptim", automaticamente, el programa abrira y grabara la imagen utilizando ImageOptim.
 

ImageOptim

 
Realmente aqui no tenemos que hacer nada, solo esperar que el programa ejecute las optimizaciones necesarias en el png. Si no estamos satisfechos podemos pasar los filtros otra vez pulsando "Again"
 
ImageOptim incluye un monton de herramientas de optimizacion, si quieres saber mas sobre ellas: http://imageoptim.com/
 

Kaleidoscope

http://www.kaleidoscopeapp.com/

Despues de exportarlo, me gusta comprobar que no estamos sacrificando la calidad de nuestras imagenes (o por lo menos no mucha) y para eso tenemos Kaleidoscope.
 
Kaleidoscope es una herramienta que te permite comparar dos imagenes para ver la diferencia, si unas "Versions", programa de control de versiones, es la herramienta perfecta.
 
03-kaleidoscope.jpg
 
Para comprobar la diferencia de calidad, amplio a una cantidad razonable la imagen, hago un split y me muevo por zonas donde la imagen ha podido ser comprometida. Despues de eso, siempre compruebo si al 100% es perceptible esos fallos.
 

Conclusion

La imagen original de 567kb ha quedado reducida en 111kb, algo mas del 81% reducida!
Imaginate la cantidad de imagenes que tienes para tu aplicacion en iOS o en esa web que usa tantos png. Puedes reducir de un 50-80% en tama;o sin reducir la calidad, y las herramientas estan en tu mano.
 

Extra

Si quieres reducir jpgs, echale un vistazo a jpegmini.

続きを読む

新しいPCに入れる基本ソフト3つ:Windows版

777ブログウェイ始まりましたー!

この記事は面白法人カヤックの七夕のイベント「777」に向けたリレーブログです。

技術系のアドベントカレンダー(*)になぞり、777イベントが開催される7月7日までの期間に、
4つの職能ブログ ( エンジニアデザイナーフロントエンドエンジニアディレクター ) を横断し、更新します。

テーマは「つくるための三種の神器」。

カヤック有志による、それぞれの切り口で記事を投稿していきます。
では期間中、どうぞお楽しみにください。

* アドベントカレンダーについての記事 「師走を楽しもう。技術系アドベントカレンダーの魅力とは

続きを読む

初夏。HTMLファイ部の本多です。

夏祭りが待ちきれないあなたのために、金魚すくい顔負けのハマるゲームをご用意しました!

カヤック運営のHTML5ゲームの投稿プラットフォーム「jsdo.it HTML5-Games」から、
HTML5でつくられたブウラザゲームを紹介します。

※ Chrome、Safari など、最新のモダンブラウザでご覧ください。

HTML5ゲームまとめ

JSパーティクル崩し

ブロック崩しならぬパーティクル崩し!

最初はガマン...!
数分間打ち返し続けると、フィーバータイムに突入します!

jsdo.it HTML5-Gamesでみてみる。(詳細説明あり)

続きを読む

先日、東京学生広告研究団体連盟の総会にて、
「インターネットでつくる人を増やす」というテーマでお話させていただきました!
その時に紹介したサービスをまとめます。

この記事のターゲットは、インターネットでまだ作ったことがない人。
興味があってこれから始めよう!と思っている人向けです。
ポイントは、ブラウザだけで完結できるもの。PCさえあればOK。

続きを読む

HTML5ゲームの投稿プラットフォーム「jsdo.it HTML5-Games」がスタート!

HTMLファイ部ほんだです。

カヤックの新規開発事業部「ブッコミジャパン」が、
HTML5ゲームをあそべる、つくれるプラットフォーム「jsdo.it HTML5-Games」をリリースしました!

jsdo.it(弊社運営のHTML5コード共有サイト)からHTML5ゲームを簡単に投稿でき、
他のクリエイターによって投稿されたゲームを無料で遊べます!

また、スマートフォンをコントローラーにしたゲームを簡単につくれるようになる
JavaScriptライブラリ「jsdoitController.js」もリリースしました。

今回は「jsdoitController.js」で使えるようになる
jsdo.it WebSocket Controller」(以下:jsdo.it コントローラー)の
仕組みについてお話ししたいと思います!

続きを読む

HTML5花見の会場はこちらになります

コーディングコンテスト "Q" vol.2を開催中です!

jsdo.itで開催中のイベント「Web Creator's Contest "Q"」で「桜」を募集したところたくさんの投稿が集まっています。まだ募集期間中ですが、花見シーズンが終わる前に投稿作品の一部を紹介したいと思います!

Flashの名作をHTML5でリメイクしてください

このFlashで作られた作品をHTML5でリメイクするのが今回の課題です。

SAKURA - wonderfl build flash online

続きを読む