ブラックなWeb開発現場の救世主、Gruntのインストールと使い方
連載目次 一昔前であれば、HTML／JavaScript／CSSを使用してWebアプリを作成する場合、（筆者の経験では）所定の位置にファイルを置くだけでした。最近はHTML／JavaScript／CSS関連の技術も複雑化／多様化し、いろいろなことを考慮しなければなりません。 例えばJavaScriptファイルの場合は、以下の作業を行うこともあるでしょう。 minify（圧縮）や結合 単体テストの実行 JSLint（構文チェック）の実行 さらに、CoffeeScriptやTypeScriptを使用している場合にはコンパイル（JavaScript変換）を行う必要もあります。 また、SCSS（Sass）やLESSなどのCSS拡張メタ言語を使用している場合にも、コンパイル（CSS変換）作業が必要です。 ファイルを修正してビルドするたびに、これらの作業をいちいち手作業で行っていては非常に面倒でしょう
会社を辞めずに夢を追う方法―Zaim 閑歳孝子“プライベート開発のすすめ”［1］ | CAREER HACK
公開後すぐiOS版が国内外のランキング上位となり、1年が経過したいま、ダウンロード数が30万を超えているオンライン家計簿サービス『Zaim』。企業に勤めながらも、完全なるプライベート開発によって大ヒットアプリを生み出した閑歳孝子さんに学ぶ、正しいプライベートプロジェクトの進め方。 プライベートプロジェクトで自分を変えよう。 プライベートで開発したアプリが多くのユーザーを集め、起業。その可能性に着目した企業から4000万円超の大規模な出資を受ける―― いささか“出来過ぎ“ともいえるストーリーを1年足らずで実現したのが、閑歳(かんさい)孝子さんだ。 そもそもインターネットは、大企業に依存せずともエンジニア個人が 自分の力でサービスを生み出し、社会に対して価値を提示していける世界。だがそうしたWEBならではのダイナミズムは、ともすれば日々の業務に追われる中で、忘れられがちでもある。 「起業するこ
「安全なWebアプリケーションの作り方」を読んでセッションを復習してみた - As a Futurist...
タイトルが長くて略称があれば知りたい感じの「安全な Web アプリケーションの作り方」を暇を見つけて読んでいます。今まであいまいなままだった部分を順を追って説明してくれるので、本当に助かります。Web アプリ作りの初心者は卒業したかなーという人は必ず目を通しておくと良いと思います。 Cookie を用いたセッションについて復習 「HTTP はステートレスで」とかいう話はよく聞きますが、じゃあどうやってセッション管理するのがいいの？って話をよく考えると体系的に聞いたことがなかった！というわけで、この本で文字通り体系的に学び直すことができました。 その中でも、「セッション ID の固定化」という話題はちゃんと分かってなかった部分があったので、こちらのサイトを参考に PSGI なアプリケーションを作ってみました(僕の書いたアプリ自体はその他の脆弱性に溢れていますがｗ)。コードはエントリの最後に。
Web開発にお役立ちなチートシート集 | TRIVIAL TECHNOLOGIES on CLOUD
みんなのIoT/みんなのPythonの著者。二子玉近く160平米の庭付き一戸建てに嫁/息子/娘/わんこと暮らしてます。月間1000万PV/150万UUのWebサービス運営中。 免責事項 プライバシーポリシー All The Cheat Sheets That A Web Developer Needsという記事を先日見つけて，割と知らないものが多く，また便利だったのでご紹介:-)。英文のチートシートだけど，仕様を短くまとめてあるチートシートは日本人のWeb開発者も便利に使えるはず。 HTML HTML/XTML in one page HTML5: The Evolution of Web Standards by James Sugrue (X)HTML Elements and Attributes Doctype Declarations (DTDs) XHTML Character
少しのコードで実装可能な20のjQuery小技集
2016年6月22日 jQuery 素敵な動きを手軽に実装できるJavaScriptライブラリ「jQuery」。jQueryには多くのプラグインが揃っていますが、以前書いた「少しのコードで実装可能な20のCSS小技集 」に続き、今回はプラグインなしで実装できるjQueryの小技を紹介します！「jQueryってなんだ？」という人もコピペで実装できますよ！サンプルも用意したのでぜひご覧ください！ ↑私が10年以上利用している会計ソフト！ 追記：この記事で紹介されているいくつかの方法が、今ではCSSのみで実装可能です！詳しくは「かつてはJavaScriptを利用していたものの、今ではCSSのみで実装できる10の小技」をご覧ください。 jQueryの基本的な使い方 まずはjQuery本家からjQueryファイルをダウンロードします。<head> 内に下記を記述し、jQueryファイルを読み込みます
PHPでリッチなショッピングサイトを構築できる「Avactis」:phpspot開発日誌
Ecommerce Solutions | Avactis: Ecommerce PHP Shopping Cart Software PHPでリッチなショッピングサイトを構築できる「Avactis」。 スキンに対応していて見栄えを変えられる他、CSSによるテンプレートデザインが可能。 ショッピングカートや、PayPal等による決済機能、商品管理や注文統計が見れるリッチな管理画面、検索機能などショッピングカート構築に必要な機能は殆どそろっています。 ショッピングサイト画面。ＵＩもamazon風ですっきり見やすい。 スキン切り替えでデザイン変更が容易にできます。 管理画面がとっても多機能です。 今後の発展にも期待したいですね。 関連エントリ PHPで書かれた次世代のショッピングカートシステム「TomatoCart」 フリーで使えるPHP＋MySQLで構築されたショッピングカートシステム「Ze
JavaScriptで書かれたWeb統合開発ツール「Orion」発表。Eclipseの新プロジェクトとして
EclipseはオープンソースによるJavaベースの統合開発環境として知られていますが、そのEclipseで新プロジェクト「Orion」が発表されました。 Orion is not a set of Java plug-ins which run in the existing Java IDE. It is browser-based open tool integration platform which is entirely focused on developing for the web, in the web. Tools are written in JavaScript and run in the browser. Orionは、既存のJava IDEに対応したJavaプラグインのセットではありません。ブラウザベースのオープンなツールの統合プラットフォームであり、Web
[JS]モバイル・タッチデバイス用のアプリケーションを構築するためのJavaScriptのフレームワーク -DHTMLX Touch | コリス
DHTMLX Touch [ad#ad-2] DHTMLX Touchの主な特徴 DHTMLX TouchはUIウィジェットのセットだけでなく、モバイルやタッチデバイス用のクロスプラットフォームのウェブアプリケーションを作成することも目的とした完全なフレームワークです。 対応デバイス iPad, iPhone, Androidなど人気の高いデバイス全てに対応。 Firefox3.6, Chrome, Safari など主要ブラウザにも対応。 リリース計画 以下のリリースを予定しています。 フル機能のヴィジュアルデザイナー サーバーサイトのインテグレーション データストアのグローバル化 カルーセルコンポーネント アニメーションの追加 詳細なドキュメント クライアントストレージのサポート ver 1.0のリリースを2011年第1四半期に予定しています。 [ad#ad-2] DHTMLX Tou
Webデザインやプログラミングなどの勉強に良さそうな国内のブログ記事やWebサイトいろいろ
いよいよ2011年がスタートしました。 今年も去年同様、勉強することが 沢山あります。まだモチベーションが そこそこあるうちに勉強になりそうな 国内の記事をリンク集にしました。 迷ったときに見てみようかなと思い ます。 より最適な方法というのはあると思いますが、まずは扉を叩かない事には何が悪いかも分かりません。ということで、内容に拘らず、否の意見をスルーしてここに色々まとめさせて頂きました。 勉強したい気持ちはあるけど出来ない理由は「何を始めればいいのか分からない」という方も、何が出来るのか、どういった勉強法で出来るようになるかが分かればやる気が起きるかも知れません。 5分で分るシリーズ以前も流行ったんですね。Web関連以外も含めてここにまとめられています。 5分で分かる PHP を知らない人が PHP の便利さを学べる記事を書いたよ5分でわかる Ruby を知らない人が Ruby の便利
Webプログラミング未経験からmixiアプリを作るまでにやったこと - nakawai’s diary
mixiアプリ「大喜利PHPプレイバック」を公開しました - 理系のためのTIPS集 上記エントリでも書きましたが、今年の目標だったmixiアプリの公開までなんとかこぎつけることができました。 アプリ名：大喜利PHPプレイバック URL:http://mixi.jp/view_appli.pl?id=16441 2012/02/28 追記 mixiアプリの仕様変更に伴い、上記のアプリは提供を終了しました。 公開日は2010年10月26日。現時点での利用者数は50人(！)です。大喜利好きな人は使ってみてください！（泣） このエントリの趣旨 Webプログラミング未経験だった自分がmixiアプリの開発をすすめるにあたっては、以前話題になった下記の２エントリにたいへん刺激を受けました。 文系ド素人がmixiアプリを開発〜リリースするまでのまとめ - kazu0620の日記 Webプログラミング素人
yohei-y:weblog: REST 入門
日本語の REST のリソース集を以前作ったのだが、 日本語では一般人向けの解説がない。 sheepman 氏の REST のページはすばらしいんだけど、多少わかっている人向けだ。 市山氏のプレゼン資料は RoyF の論文を詳しく解説していてよいのだけれど、いかんせんアカデミックすぎる。 技術的な要素も抑えつつ、入門者にもわかりやすい解説はないものかと探していたのだが、みつからない。 英語の文書を訳すことも考えたんだけど、あまりよいものが見つからない。 で、結局自分で書くことにした。 最初はひとつのポストで済ませるつもりだったんだけど、書き始めたら長くなってしまったので、複数のポストに分けることにした。 えらそうなことを書いたが、内容は「ないよりマシ」といったレベルだろう。 前書きが長くなったけど(ここから始まりです。ですます調なのは入門記事だから)、 この記事(から始まる一連のポスト)は
APIアクセス権を委譲するプロトコル、OAuthを知る ― ＠IT
クロスドメインでのデジタルアイデンティティを守る APIアクセス権を委譲するプロトコル、 OAuthを知る 作島 立樹 NRIパシフィック 2008/1/21 マッシュアップと呼ばれる仕組みで、既存のWebサービスが次々とつながり、新たなサービスが登場している。しかし、メールアドレスなど重要な個人情報が意図せずに「つながれてしまう」可能性もある。そこで登場したのがアクセス権の「委譲」を目的としたプロトコル、OAuthである。本記事ではOAuthの仕組みとともに、なぜそれが登場したのかという背景にも触れる（編集部） マッシュアップの犠牲になるユーザーのアイデンティティ GETなどのHTTPメソッドをもちいてURLへリクエストする、いわゆる「RESTful」【注1】なWeb APIを使ったアプリケーション同士の交流は、いままさに隆盛を極めている。「マッシュアップ」と呼ばれているこのサービス形態
Part5 SOAP，WSDL，REST――Web APIの基礎技術を学ぶ：ITpro
Web API（WebサービスAPI）をプログラミングで活用するにあたって，ぜひ知っておきたい基礎技術が三つあります。古典的な技術の代表としてSOAPとWSDL，そして昨今急速に普及してきたRESTです。ごく単純に言ってしまうと，前者は「高機能で複雑」，後者は「シンプルで簡単に利用可能」と区別できるでしょう。現時点では，そのシンプルさが多くの開発者に受け入れられたおかげか，REST方式が（先達である）SOAP方式を圧倒しているように見えます＊1。 もっとも，だからといってRESTがSOAPよりも優れていると結論付けるのは早計でしょう。昨今では，SOA（Service Oriented Architecture）という言葉に代表されるように，大規模なシステムを「サービス」という単位で構成し，互いに連携し合う設計手法が注目されています。特に，SOAを実現する具体的な基盤技術として注目されている
【レビュー】HTML5/CSS3対応のデザインテンプレート集「Free HTML5 Templates」 | エンタープライズ | マイコミジャーナル
170を越えるテンプレートからお気に入りを見つけて参考に - Free HTML5 Templates Free HTML5 Templatesにおいて、HTML5/CSS3を駆使したデザインテンプレートが数多く公開されている。このWebサイトは今年の2月11日(米国時間)に掲載されたテンプレートをはじめ、執筆時点で176のテンプレートが公開されている。掲載されている全テンプレートをサムネイルとして確認できる「Template Portfolio」はまさに圧巻だ。 Template Portfolioで登録されているデザインテンプレートを一望できる。画像クリックで拡大、more infoリンクをクリックしてテンプレート詳細画面に移動する これらのテンプレートはGoogle Chrome 5.0以上とFirefox 3.6以上に最適化されており、Creative Commons Attrib
CSS＋jQueryでクロスデバイスサイトを作ろう (1/4)
WebサイトをiPhone/Androidに最適化するには、PCサイトとは別にスマートフォン専用サイトを用意するのがベストですが、コストや時間などの理由で難しい場合があります。そこで今回は、PC向けのWebサイト（HTML）はそのまま利用し、CSSとJavaScriptだけでレイアウトやデザインを変更する｢クロスデバイスサイト」の作り方を説明します。題材は、筆者が制作した「iPhone/Android Webサイト制作出張セミナー」のWebサイトです。 このサイトは1ページ完結の告知サイトで、左右2段組みで構成されています。左カラムにはナビゲーションメニューを、右カラムにはメインコンテンツを配置し、ナビゲーションメニューをクリックするとページ内リンクで表示する部分を変えられます。iPhone/Androidからアクセスしたとき、このページを以下のように表示するようにします。 PCサイトのマ
JavaScriptで並列処理ができる「Web Workers」 (1/5)
HTML 4時代のJavaScriptは主にWebページの装飾に使われていたので、マシンやブラウザーへの負担はそれほど高くなく、JavaScriptの処理にユーザーが待たされることはほとんどありませんでした。ところが「Webアプリケーションのプラットフォーム」と位置付けられるHTML5時代になると、JavaScriptのプログラムは巨大で複雑になります。そのため、各ブラウザーベンダーはJavaScriptエンジンを高速化し、複雑で時間のかかる処理を素早くこなせるように努力してきました。 しかし、いくら高速化しても回避できないこともあります。従来のJavaScriptはJavaのようなスレッド処理ができないので、時間のかかる処理を実行するとブラウザーが停止状態になってしまい、その間、ユーザーはUI操作がまったくできなくなる問題がありました。 そこで、ブラウザーで複数の処理を並行して実行させる
Webアプリケーションの検査テクニック（1）
※ご注意 他社および他組織のWebサイトなどへのポートスキャンおよびデータの取得などの行為で得た情報を侵入などに悪用するか、または同じ目的を持つ第三者に提供した時点で違法となります。ご注意ください。 本稿の内容を検証する場合は、必ず影響を及ぼさない限られた環境下で行って下さい。 また、本稿を利用した行為による問題に関しましては、筆者および株式会社アットマーク・アイティは一切責任を負いかねます。ご了承ください。 前回まではさまざまなWebアプリケーションの脆弱性についての説明を行ってきたが、今回からは実際に検査を行う場合に必要となるテクニックについて説明する。 Webアプリケーションの検査とは？ まず初めにWebアプリケーションの検査とはどういったものなのか、攻撃とどう違うのか、ということについて説明しておこう。 ここでいう検査とは、外部からWebアプリケーションに対してブラウザでアクセスす
HTML5 を学ぶための情報源まとめ
ちょっと更新サボりすぎでしたが、最近 HTML5 関連の話もとっても増えてきましたので、ここらで HTML5 に関する情報を集めるときに情報源として有益なサイトをまとめてみたいと思います。やはり、英語での情報が多くなってしまうので、英語能力が残念な私なんかは結構厳しいんですが、いくつか日本語での情報源も挙げてみましたので、併せて見ておくといいと思います。 ちょっと更新サボりすぎでしたが、最近 HTML5 関連の話もとっても増えてきましたので、ここらで HTML5 に関する情報を集めるときに情報源として有益なサイトをまとめてみたいと思います。 やはり、英語での情報が多くなってしまうので、英語能力が残念な私なんかは結構厳しいんですが、いくつか日本語での情報源も挙げてみましたので、併せて見ておくといいと思います。 ちなみに、XHTML 好きな私としては、XHTML5 で次のサイトリニューアルとか
Webの3つの問題を解決する「HTML5」とは何なのか
最近よく目にする「HTML5」という言葉。JavaScriptのAPIやCSS3、SVGなどを含め、急速な広がりを見せつつある「HTML5」の基礎を学べる入門連載です。「HTML5を使うと、何ができるのか」「それを実現するには、どのようなプログラムを書いたらいいのか」をお届けします どっからどこまでが「HTML5」なの？ 最近、「HTML5」という単語を目にする機会が驚くほど増えました。ニュースやブログで取り上げられない日はほとんどありませんし、筆者が主催している勉強会を含め、開発者同士の勉強会でもHTML5がテーマになることが少なくありません。 しかし一方で、「『HTML5』といわれているものは範囲が広すぎて、とても学ぶ時間がとれない」という声もよく聞きます。それもそのはず、HTML5は現在世界でも最もホットなテーマといってもよく、世界中の名だたる開発者や企業が日々仕様を提案したり、改善
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
HTML5.JP - 次世代HTML標準 HTML5情報サイト