CSS フレームワーク活用のタイミング Bootstrap、Foundation をはじめとした CSS フレームワークを一度くらい使ったことがあると思います。制作はもちろん、どのように CSS ファイルを整理すれば良いのか、どのようにデザインのルールを設計するのかといった CSS の書き方を学ぶ際にも使えます。もちろん CSS フレームワークはたくさんありますし、 Gridlex のように Flexbox を活用したグリッドシステムだけといった UI の特定要素のみを提供しているツールもあります。 CSS フレームワークは制作において非常に便利なツールですが、最終成果物として扱うかは注意が必要です。以下のような場合を除いて、CSS フレームワークはなるべく使わないようにしています。 プロトタイプ作成 Photoshop や Sketch のようなグラフィックツールで Web サイトをデザ
はじめまして、ほそだと申します。昨年秋まで個人事業主の立場でドワンゴでお仕事させていただいておりましたが、いろいろ経緯がありまして中の人になりました。ドワンゴ歴はそこそこ長い新入りです。よろしくお願いいたします。 さて、今回はデザイナー(HTML/CSS/JSは扱えるいわゆる「Webデザイナー」)として1年間ほどReactを使ってみたので、そのメリットを書いてみようかと思います。 Reactとの出会い ReactとはFacebook製のJSライブラリです。 https://facebook.github.io/react/ WebアプリケーションのView部分を実装します。2014年の暮れにエンジニアの方々が魂を震わせているのを見て存在を知りました。2015年はReact元年な感じでしたよね。 僕自身、以前から比較的JSを書くタイプのデザイナーではありましたが、正直なところ自分が関わってき
グレープシティは10月20日、HTML/JavaScript/CSSなどのウェブ標準技術でAR(拡張現実)アプリが開発できる「Wikitude SDK」、ブラウザー上でARコンテンツが作成可能なクラウドサービス「Wikitude Studio」、大規模AR開発ソリューション「Wikitude Cloud Recognition」を発表した。 Wikitude SDKは、場所を認識してARコンテンツを重ねる「ロケーションベース型」と、任意の画像を認識してARコンテンツを重ねる「画像認識型」の両方をサポート。iOS、Android、スマートグラスに対応するネイティブアプリの開発ができる。Xamarin やCordova、Titanium、Unityなどの開発環境のプラグインも無償で提供する。HTML/JavaScript/CSSなどのウェブ標準技術で開発可能なので、iOS/Android間で開
連載目次 前回記事「Gruntで独自タスクを定義し、独自プラグインをnpmモジュールとして作成・公開するには」では、Gruntを使っていろいろな手法でタスクを定義する手法や、独自プラグインを作成してnpmで公開する方法について解説しました。 今回は少し角度を変えて、Gruntを自身の機能として利用しており、快適な開発ワークフローを提供してくれるツール、「Yeoman」について解説します。 3つのツールを統合したワークフローを提供する「Yeoman」 Yeomanとは、公式サイトいわく、「The web's scaffolding tool for modern webapps」とのことです。 訳すと、「今風のWebアプリのための土台/基盤を作ってくれるツール」といったところでしょうか。「scaffolding」はRuby on Railsの主要機能として有名になった言葉で、コマンドを打つだ
テストランナーとは、様々なブラウザでテストを実行し、その結果をまとめてレポートするためのツールを指します。Karma は Node.js 上で動作するテストランナーです。元々はTestacular という名称で Google が AngularJS の開発で使うために作ったものですが、2012 年にオープンソース化されたタイミングで業 ( カルマ ) を背負った名称に変わりました。 Karma - Spectacular Test Runner for Javascript 本記事では、Jasmine をベースにしてテストコード ( 実処理 ) を記述し、それらを Karma から実行してレポート ( テスト結果 ) を確認するという流れで進めていきたいと思います。 環境構築 前提条件 Mac OS X Yosemite node.js インストール済み (v5.4.0 ~) npm イン
作成:2015/08/10 更新:2017/04/16 Web制作 > 開発環境 ページを移動せずにテンプレートや仕様書を確認したい。今回はPCの横に貼ったり印刷したり、ワンクリックで見れるように、1ページで完結している資料をまとめました。Web制作をする上で便利なチートシートや資料・仕様書まとめです。 エンジニア速報は Twitter の@commteで配信しています。 もくじ WordPress版 受託用マニュアル 1.ヒアリングシート 2.WP版ホームページ制作の流れ 3.WordPress管理マニュアル 4.WP版品質チェックシート 5.Wordpress タグ タスクランナー 6.gulp 7.Bower JavaScript 代替言語/JST 8.TypeScript 9.CoffeeScript 10.Jade コーディング用 11.Chrome 開発ツール 12.html5
(English article is here.) こんにちは、吉岡([twitter:@yoshiokatsuneo])です。 最近のリッチなWebサービス開発ではブラウザ(クライアント)とサーバ両方のコードを書いたり、Webソケットなどで連携したりすることもあり、気軽に取り組みづらくなっています。しかし、MEANスタックはクライアントからサーバまで全てをまとめた環境で、これを使えば素早くWebサービスを作ることができます。 今回は、MEANスタックの開発環境の一つ、AngularJS Full-stack generator(generator-angular-fullstack)を用いて実際にサンプルプログラムを動かしたり、修正したり、Herokuにデプロイしたりしてみます。 ブラウザ側のJavaScriptコードだけの作り方や、サーバ側だけのコードの書き方はWeb上でも多くでてい
2. 2015 Yusuke Hirao, CC BY-ND. 自己紹介 平尾優典(ひらお ゆうてん) === 株式会社ディーゼロ Webエンジニア ## コミュニティ活動 - 福岡フロントエンド友の会 Fukuoka Frontend Frogs - 福岡マークアップ勉強会 - baserCMSユーザー会 Yusuke Hirao @cloud10designs 3. 2015 Yusuke Hirao, CC BY-ND. 自己紹介 ## コミュニティ紹介 ### 福岡フロントエンド友の会 Fukuoka Frontend Frogs ### 福岡マークアップ勉強会 ### baserCMSユーザー会 「井の中の蛙」にはならないようにと集まった フロントエンドエンジニアのためのコミュニティ。 Webコーディング・アプリ開発の悩める蛙たちが その場で話題を決めて、アンカンファレンス形式で
作成:2015/05/25 更新:2018/11/18 Web制作 > 今後のWeb制作では受託だけじゃなくて販売できるレベルの商品を作りたい。上から指示された分業だけでなく、一人でも一貫して制作できる技術を知っておきたい。 実際にどういった本がおすすめ?と聞かれることも多いので、会社と自宅に常備してあり、実際に筆者がサイト構築する際に参考にした本を中心に書いておきます。今回は多くの書籍の中から特にビジネスで使えそうなものを絞りに絞ってピックアップしました。少人数での起業や一人でサービスを開発したい人に。 エンジニア速報は Twitter の@commteで配信しています。 もくじ フルスタックエンジニア(入門編) webエンジニアの教科書 フロントエンドエンジニアの教科書 HTML5 インタラクティブ表現ガイド CSS3 逆引きデザインレシピ WordPress (ビジネス向け) Wor
こんにちは。LIGフィリピン支社代表のせいと(@seito_horiguchi)です。 昨今ではWebのフロント周りを取り巻く環境が激変しています。 Webサイト・アプリケーションが進化するに連れて構築も難しくなってきましたし、技術やツールもいろんなものが登場しました。 そこで今回は、フロントエンドエンジニアはもちろん、コーディングに携わる人なら誰でもおさえておきたい、今旬な技術やツールを紹介したいと思います。 コーディングに関わる人ならおさえておきたい必須のフロント技術&ツール8選 1. タスクランナー フロントコーディングに関わるあらゆるタスクを自動化してくれる頼もしいツールです。Grunt,Gulpといったツールがコレにあたります。 JadeやSass,CoffeeScriptのコンパイル、画像圧縮、バリデーションチェック、webfontのアイコン化、スプライト画像生成、スタイル
マイナビクリエイター公式ブログ「マイナビクリエイター編集部」を御覧の皆様ご機嫌麗しゅう。OZPAの表4の@OZPA です。 今回のコラムは、「初心者Webコーダーが覚えると便利なオススメツール・テクニック」をお送りいたします。ンガググ エディタに関して ズバリ!好きなエディタを使いましょう。 …ってこれで終わると編集部さんからぶん殴られそうなので追記しますが、エディタに関しては各人によって求めるものが違うので、私にとって使い勝手の良い物があなたにとってのベストプラクティスとならない場合もあるのです。 その業はきのこたけのこ戦争より根深いと思います。 SublimeText それを承知であえてオススメするのであればやはり、Sublime Textでしょうか。 優雅なデザイン、豊富なプラグイン、軽快な動作、増やせるキャレット…。 リリース以来、数多くのコーダー・エンジニア・デベロッパーの
Web制作やアプリ開発では、本格的なデザインに入る前にワイヤーフレーム作ることがよくあります。制作会社によってはPower pointやExcelなどが使われることもありますが、それらはワイヤーフレームに最適化されておらず、やや不便。 以下で紹介するようなツールを使えば、もっと便利で豊富な機能を使うことができます。Excel方眼紙から卒業したい!という方は要チェック。 無料で使えるワイヤーフレームツールまとめ JUSTINMIND こちらはワイヤーフレームからデザインまで可能なプロトタイピングツール。PCサイトはもちろん、モバイル向けのサイトやアプリのワイヤーフレームも作れます。Photoshopのような洗練されたUIで、ドラッグ&ドロップでコンテンツを追加することができます。 Wireframe CC こちらは完全フリーで使えるワイヤーフレームツール。Webアプリなのでブラウザ上で編集す
ビジネスを行う上で「どうやったら集客できるの?」「どうやったら売れるの?」と課題は尽きません。こうした課題の解決に向けて考えた結果、どうしていいのかわからない!と悩む人も多いのではないでしょうか。 そういった考えるべきポイントをパターンとして落とし込み、誰でもできるようにしたものがフレームワークです。このフレームワークを目的によって使い分け、ビジネスに当てはめて考えることで、何が必要で何が課題となっているのかを論理的に導くことができるでしょう。 今回は汎用性の高い基礎的なフレームワークを、用途別にまとめました。 ▼今すぐ使えるフレームワークのテンプレートはこちら 【記入例付き】マーケティングフレームワーク テンプレート集 目次 ビジネスにおけるフレームワークとは フレームワークを活用する5つのメリット 論理的思考に役立つ6つフレームワーク ビジネス全体像の把握に役立つ2つのフレームワーク
ども お久しぶりな中村です。 さて、今回は以前書いたドライブドキュメントネタの続編みたいな感じですが、皆さんも(多分)大好きなGoogleスプレッドシートの裏ワザ&アドオンのまとめとなります。 なんとなーくエクセルの代わりになるよねーくらいでしか使ってない人は確実に損してると思うので、ぜひぜひ使い倒してみてください。 レポート瞬間生成!満を持して登場したGoogleアナリティクス公式アドオンGoogle Analytics add-ons もはや説明の必要は無いでしょう。ついに出たんですよ…Google Analytics公式のスプレッドシートアドオンが。 完全無料で!Google Analyticsのレポートを!一切の機能制限なく!スプレッドシート上で生成&管理できるようになったんですよ! 連携したら最初に アドオン>Google Analytics>Create New Reportで
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く