タグ

フロントエンドに関するnewsmasuda-tのブックマーク (64)

  • とあるソシャゲのHTML/CSS設計話

    【Frontendアドベントカレンダー19日目】 Xboxに釣られて転職してから2年半…あっという間だった…。 関与したもの: スマホ版ピグ(リニューアルして面影無し) ピグファンタジア(11月末クローズ) 新規ゲーム ←今ここ 今は新規ゲームでコーディングの人としてjoinしてます。 新しいサービスを立ち上げる時に必要なHTMLCSSの土台作りを全部やるということが、 「HTML/CSS設計」という言葉で装飾されることを知ったのは割と最近です。 マークアップだけで一人据えるのは珍しいと思うので、今やってることなど含めてつらつら書きます。 ここが変だよソシャゲ開発 依頼を受けてサイトを作る場合は次のようなフローだと思います: クライアントと打ち合わせ 仕様が決まる デザイン決まる 値切られる 価格が……決ま…る コーディング クライアントチェック 突然の無理難題に戦慄走る テスト・修正

    とあるソシャゲのHTML/CSS設計話
  • 問題解決のためのスタイルガイド入門

    定義が広いスタイルガイド フロントエンド開発者からスタイルガイドという言葉を耳にするようになりました。効率的、かつ一貫性のある見た目とコードをつくるための共有ツールとして、スタイルガイドが使われることがあります。一見、目新しくみえるスタイルガイドですが、最近生まれた新しいアイデアではありません。ロゴやコーポレートカラーの使い方を記したスタイルガイドは昔からありますし、ライターにもスタイルガイドがあります。 このように、開発者も、デザイナーも、ライターも同じように「スタイルガイド」という言葉を使っています。人によって、その言葉から受ける印象も異なれば、必要としている要素も異なります。YUI 並の UI アセット をスタイルガイドに含めることを期待している人もいます。アプリや Web サイト開発におけるスタイルガイドを作る際に難しいのは、何で作って管理するかではなく、どの範囲をスタイルガイドと

    問題解決のためのスタイルガイド入門
  • フロントエンドなサイト / アプリケーション・アセンブラまとめ | Pen

    はじめに 最近非常に活発に開発されている、サイト/アプリケーション・アセンブラ(スタティック・サイトジェネレータと表現するものもあるようです)、ファイル・ジェネレータなどをまとめました。 これらのツールは、ファイル監視、Liveリロード、ビルドインサーバ、画像軽量化、パッケージマネージメントなど、サイトやアプリケーション開発に必要とするものをパッケージングしたものになります。 各ツール、もっている機能もバラバラであったり、用途も微妙に違うものがあったりしますので、ほんとは同じエントリー内でまとめるのも適切なのか悩ましいところだったのですが、大きなくくりでフロントエンド開発におけるジェネレータ系のツールという解釈のもとに行いました。 また、ほとんどのツールの説明はデフォルト値のもので、設定によって、例えばテンプレートエンジンの種類の変更や、ディレクトリパス、サーバのポート番号などを変更できた

  • フロントエンドな現場でよく使う制作ツールまとめ | Pen

    はじめに ふだん仕事でお世話になっているツールたちを徒然とリストアップしていこうかと思います。 中にはもう使わなくなったものもあるかと思いますが、記念的な意味をこめまして、いっしょにならべたいと思います。 そしてほとんど、Mac用のツールです。。。 タスクランナー GRUNT YEOMANでも使われているタスク・ランナーです。使用するにはNodeが必要です。 最近の空気感では、フロントエンド系のタスクランナーでは定番のものになったのではないでしょうか。 使い方はJavaScriptかCoffeeScriptで設定ファイル(Gruntfile)をつくり、そこにタスク(例えばソースを圧縮する、JavaScriptの構文をチェックする、デプロイするなどなど)を登録し、自動実行させるというものです。 また、grunt-initを別途インストールして、対応したテンプレートをインストールすると、お手軽