Webサイト制作をどれくらいの粒度で分解してタスク化するか｜重松佑 / Shhh inc.
プロジェクトが始まるときにかなり初期の段階でWBSを作ることは多いとおもいます。そのWBSの作成、プロマネやディレクターに任せっぱなしになっていないでしょうか。WBSはスケジュールをガントチャートで表したものを指していると思われがちですが、実はスケジュールだけでなく見積もりやアサインを精度高く行うためにも重要なものです。 たとえば「Webデザイン作成」というスコープにどのような実作業が含まれているかはWBSを作ることによって見える化しプロジェクトメンバーやクライアントと共有できるようになります。ときどき下記のように書かれたWBSを見ることがあります。 Webデザイン作成 ・作成 ・確認 ・修正 ・確認2 ・修正2 ・確定 しかし、これでは「Webデザイン作成」に必要な知識、さらには作業量・スケジュール・予算も分かりません。Webデザイン作成の例を続けると、下記のように「作成」のスコープを分
どう書くんだっけ？ を一発解決！コピペ用コードスニペットを集めたオススメWebサイトまとめ
この記事では、コーディング作業で迷ったときに確認したいコードスニペットを集めた便利サイトをまとめて紹介しています。 ウェブ開発において、フロントエンドやデベロッパーが悩んでしまう問題の解決方法を知ることができるだけでなく、世界中の優秀なプログラマーの作成したコードを確認、実際に動かしながら学ぶことができます。 ちなみに、2020年に人気だったコードスニペットランキングがこちら。 2020年にCodepenで話題！コピペ可なHTMLスニペット ベスト100発表 どう書くんだっけ？ を一発解決！コードスニペットを集めたオススメWebサイトまとめ CoddMyUI Javascript、HTML、CSS、jQueryプラグイン、ウェブ開発にできるデザインスニペット1200個以上が揃ったサイト。ボタンやホバーリンク、テキストアニメーションなど細かくカテゴリ分けされているので、必要なパーツごとのコー
Webページ高速化に必須の知識！ブラウザがWebページをどのようにレンダリングしているか、図を用いて解説
ブラウザがWebページをどのようにレンダリングしているか、図を用いてやさしく解説した記事を紹介します。 レンダリングの仕組みを理解することで、HTMLやCSSやJavaScriptなど実装時にも気をつける点があります。 How the browser renders a web page by James Starkie 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに 1. HTMLの解析（パース）を開始する 2. 外部リソースを取得する 3. CSSを解析し、CSSOMを構築する 4. JavaScriptを実行する 5. DOMとCSSOMをマージしてレンダリングツリーを構築する 6. レイアウトとペイントを計算する はじめに 私の考えとしては、高速で信頼性の高いWebサイトを構築するには、実装中に各ステップを最適
「魔法部」 ブランドサイトのつくりかた｜MEFILAS
今回より、Webサイトの制作方法を実際の案件を通してお伝えする「Webサイトのつくりかた」シリーズをスタートします！ Webサイトは目的や狙いによって制作方法はさまざま。いざつくろうとすると... ・制作の進め方がわからない ・企画のアイデアがまとまらない ・どんなデザインが良いか判断できない ・アニメーションが考えられないなど、わからないこともたくさん出てきますよね。 このシリーズでは、そんな「実際どのように制作しているのか」という疑問を、制作を依頼される方・制作を担当される方の参考となるように、弊社の制作実績を通してお伝えしていきたいと思います。 第一回目は、魔法の世界観が魅力的なファッション・雑貨ブランド「魔法部」ブランドサイトのつくりかたをご紹介いたします。 01. 魔法部とは 魔法部 https://www.felissimo.co.jp/mahoubu/ 「魔法部」とは、通販会
Webサービスの被リンク集めにProductHuntが超有能な話（英語圏限定） - Qiita
先日リリースした自作Webアプリを何となくProductHuntにアップロードしたのですが、それだけで急激に被リンクが増えて驚いたので、自分がやったことと成果をシェアします。 ProductHuntとは ProductHuntというのは、イケてるアプリをシェアできるプラットフォームで、誰でもユーザー登録をすれば自分が作ったアプリや見つけてきたWebサービスをアップロードすることができます。月間1000万近くのアクセスを稼ぐ巨大サイトなので、それだけ多くの人の目に触れるチャンスがあります。 他にもAlternativeto.netというサイトも集客目的で使っているのですが、アップロード時のレスポンスは明らかにProductHuntの方が上だったので、初期の集客という点ではProductHuntが有効だと思います。 https://www.producthunt.com/ ProductHun
【保存版】Webフロントエンド基礎力（初心者向け） - Qiita
ブラウザで動くWebページのプログラミング実装をフロントエンドと呼びます。 最近はJSON色つけ係と呼ばれてたりしますが、 Web開発未経験・初心者向けに最低限知っておいたほうが良い基礎知識とテクニックに関して体系的にまとめておきます。 （CodePenによる動作例付き） 環境構築に関しては（兎に角）早くプロトタイプを作る技術（初心者向け）を参考にしてください。 HTML、CSS、JavaScriptはブラウザ自体の実装に依存します。 この記事では比較的汎用的に使える書き方やHTML、CSS、JSを記載したつもりですが 最新のJavaScript APIやCSS3の機能によってはブラウザによってサポートされていない機能もあります。（特にIE） 各機能に関してはCan I useで現在のブラウザの対応状況を確認することができます。 HTML HTML(Hyper Text Markup La
「改めまして、Progressive Web Appsと申します」── Web UXの新たな基準を考える
Progressive Web Appsというワードが世に出て約2年半が経ちました。2015年10月に開催されたChrome Dev SummitにてFlipkartの事例をもってお披露目となったそのコンセプトは、2018年現在までに徐々に成功事例を増やしながらWeb界隈の注目を集め、ついに先日（忘れもしない2018年3月30日！）iOS 11.3からiOSデバイスでも一部の機能が利用できるようになるまで成長しました。これは、まるで進学する我が子を見ているかのような、新年度にふさわしい晴れやかなニュースですし、いい機会なので PWAとは何かを改めて振り返ってみようと思います。 Webに足りなかったもの 私はWebが大好きです。リンクを1つクリックしたら（インストールなど煩わしい手続きなしで）すぐに新しいコンテンツを読めるのは最高の体験だなと常日頃感じています。ただし、今までのWebアプリの
[JS]一昔前と比べて、かなり簡単に！ページの機能を紹介するツアーを実装できる超軽量スクリプト -Driver
ページ上の任意の要素を目立つようにハイライトさせたり、ページの機能を紹介するツアーを実装できるスクリプトを紹介します。 一昔前までのは実装が少し面倒だったり、jQueryなど他のスクリプトに依存していましたが、ここで紹介するのは実装が非常に簡単で、超軽量の4kb！ しかも依存は一切無し！ 既存ページにもすぐに利用できると思います。 Driver -GitHub Driverの特徴 Driverのデモ Driverの使い方 Driverの特徴 ページ上の任意の要素をハイライト表示します。 Webアプリの機能を順番に紹介することもできます。 ユーザーにフォーカスシフターを追加します。 キーボードでも操作可能で、ユーザーフレンドリーです。 実装が簡単で、他のスクリプトやスタイルシートの依存はありません。 わずか4kbの超軽量バニラ スクリプト。 強力なAPIを備えており、高度なカスタマイズも可能
![[JS]一昔前と比べて、かなり簡単に！ページの機能を紹介するツアーを実装できる超軽量スクリプト -Driver](https://cdn-ak-scissors.b.st-hatena.com/image/square/22f66ab471ebdd64b5590aad13ac85273ede28f7/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201801%2F2018031401-01.png)
フリーエンジニアのIT案件ならレバテックフリーランス
Web業界における技術トレンドの移り変わりは激しいもの。次から次へと押し寄せる波を乗りこなし、荒波にのまれることなく、この先もWebエンジニアとして生き残っていくためには、どうすれば良いのでしょうか。 そこで今回は、Web技術者向けメディア「HTML5 Experts.js」編集長、「TechFeed」プロダクトマネージャーを務める白石俊平氏と、Webエンジニアとしてイベントや書籍の執筆など精力的な発信を行い、「dotstudio」でIoTプロダクトの開発などを手掛ける菅原のびすけ氏に、Webエンジニアとして生き抜く秘訣を伺いました。 <Webエンジニアがこの先生きのこるには> 1. 思い切って踏み出すこと 2. 向上心を持ってスキルを磨き続けること 3. 自分のブランディングを意識すること Webエンジニア案件を提案してもらう 白石俊平（しらいし しゅんぺい）氏 株式会社オープンウェブ・
これから先10年、フロントエンドに関する予言 - mizchi's blog
これは怪文書です ここから10年はWASMがDOMのGCインテグレーションを果たしてJSを置き換えるか、JSがWASMに追いつかれる前にまともな言語として進化しきれるかのチキンレースになる ES Modules のブラウザ実装が枯れた頃に先鋭化したフロントエンドツールセット群は一旦そこで破棄され、シンプル化への揺り戻しが起こる 仮想DOMはブラウザエンジンの何らかの処理で更新が隠蔽されるか専用のDOM更新APIができ、Reactのような実装の手を離れる WASMで git, vim, bashなどが porting されるにつれ、再びWebOSのようなものが試みられる TC39でJSの型アノテーションの構文だけだけ決めよう => V8 が型アノテーションを元にランタイムを最適化したぜ！ => 気づいたら標準化みたいな流れがある IE11のサポートは延長されず、MSがなんらかの強攻策に出る
Webプログラマと数学の接点、その入り口
フロントエンドのパラダイムを参考にバックエンド開発を再考する / TypeScript による GraphQL バックエンド開発
メタップス、タイムバンクのマネジメントバイアウト（MBO）実施
株式会社メタップスホールディングス（渋谷区、代表取締役社長 山﨑 祐一郎）は、2024年3月26日開催の株主総会において、役員人事を決定しました。今後も内部統制の維持改善を含めたコーポレート・ガバナンスの充実を図りながら、さらなる企業活動の推進に取り組んでまいります。
WEB系各社で使われている監視ツールまとめ - mikedaの日記
次世代 Web カンファレンスで監視について話すことになったので、ネタとしてWEB系各社で使っている監視ツールを調査中。 うちはこれ使ってるよ！！！ってのがあったら@mikedaにメンションください！ Cookpad Zabbix 昔はNagios+muninだけど台数増えて性能的に破綻した ビューはそのままじゃ辛いのでmunin風に表示するのを自作 StatusCake DataDog。サービス系、サーバに紐付かない系の監視に。DashBoard便利 waker。通知用。PagerDuty高い、と言ってryot_a_raiが秒で作ったらしい Kibana imon。独自のリアルタイムなサービス稼働状況表示ツール NewRelic 試し中なもの Real-User Monitoring : JSでbeacon飛ばしてfluentd -> BigQuery。Google SpreadShee
将来もWeb開発で活躍するために、全体を見通す力を。『絵で見てわかるWebアプリ開発の仕組み』刊行
8月17日、翔泳社では複雑多様化し、分業が進んだWebアプリ開発の全体像を解説した『絵で見てわかるWebアプリ開発の仕組み』を刊行しました。いまや自分の担当領域以外は知らずとも仕事ができ、ライブラリやフレームワークの利用で技術のブラックボックス化も進んでいます。ですが、Web開発者としてキャリアアップを目指すなら、全体像を知っておくことが不可欠なのです。 アプリといえばスタンドアロン（デスクトップ）アプリケーションだった時代も今は昔。ネットワーク・通信を介して提供されるWebアプリやWebサービスが当たり前になり、複雑な処理も可能になりました。需要と必要は拡大し、今後も成長・進歩し続けるのは間違いありません。 翔泳社が8月17日（金）に刊行した『絵で見てわかるWebアプリ開発の仕組み』では、そんなWebアプリ開発の仕組み・全体像を、フロントエンドとバックエンドの両サイドから解説しています。
AI、IoT、ビッグデータなど知っておくべき4つの俯瞰図 | IT Leaders
IT Leaders トップ ＞ テクノロジー一覧 ＞ 業界動向 ＞ 市場動向 ＞ AI、IoT、ビッグデータなど知っておくべき4つの俯瞰図 業界動向 業界動向記事一覧へ [市場動向] AI、IoT、ビッグデータなど知っておくべき4つの俯瞰図 2015年7月15日(水)田口 潤（IT Leaders編集部） リスト 米国ではベンチャーキャピタリストなどの投資家が、担当分野の俯瞰図（ランドスケープ）を作成し、公開しているケースがある。分野の動きを追ったり企業動向を把握するには状況を一覧して把握できる俯瞰図が、とても都合がいいからだだろう。この種の整理は日本のITリーダーにとっても大いに参考になる。 例えば、Machine Intelligence（http://www.shivonzilis.com/）。いわゆるスマートマシン分野の俯瞰図だが、コア技術だけでもArtificial Intel
「私には特技がない。でも...」女性WEBデザイナーが10年以上フリーランス活躍してきた秘訣
フリーランス歴10年を超え、ますますWEBデザイナーとしての幅が広がってきたという「crema design」黒野明子さん。グラフィックデザイナーであり、コーダーであり、講師としても活躍する彼女は「私にはコレ！という特技はない」という。いかにしてマルチスキル力を高めてきたのか？ ［プロフィール］黒野明子 デザイン事務所、制作会社を経て2003年よりフリーのWEBデザイナーに。デザインユニット「linker」を経て、現在は「crema design」として個人で活動。インターフェイス開発・運営、サイトデザイン等を担う。動画学習サイト『lynda.com日本版』トレーナー、WEB制作入門サイト『Adobe Pinch In』でのデザイントレンド解説記事執筆等も担当。主な著書『デザインの学校 これからはじめるIllustrator&Photoshopの本』（技術評論社）『ウェブデザインコーディネ
.htaccessの有用な設定を集めたコレクション「.htaccess Snippets」 | ソフトアンテナ
Apacheの設定をディレクトリ単位で制御するためのファイル「.htaccess」。管理者だけではなく一般ユーザーにとってもお馴染みのファイルですが、急に設定を変更しようとしても、書き方を忘れてしまってすぐには出来ないという方も多いかもしれません。 「.htaccess Snippets」はそのようなときに参照したい便利な設定集です。有用な.htaccessの設定が、やりたいこと別に簡潔にまとめられています。覚えておけばいざというときに役に立つこと間違いないと思われます。 見慣れた設定も確認できる .htaccess Snippetsの内容は、リライト / リダイレクト、セキュリティ、パフォーマンス、その他に大別されていて、例えばセキュリティカテゴリの中では、アクセス制御の書き方などが説明されています。 全て禁止で一部許可する場合。 Order deny, allow Deny from
3社のオウンドメディア成功事例から学ぶ、「ちゃんと運営する」ことのメリット
オウンドメディアというのは、「企業が自社で所有するメディア」のことを言い、自社のウェブサイトや、メールマガジンなども含まれます。
初心者向け簡単プログラミングレシピ投稿サイト『コードレシピ』を公開しました - あのねノート。
2015-01-01 初心者向け簡単プログラミングレシピ投稿サイト『コードレシピ』を公開しました 作った コードレシピ あけましておめでとうございます。ウェブサービス作りました。 誰か読んでる人いるのかな。 コードレシピ - 初心者のための簡単プログラミングレシピサイト 初心者向けのプログラミングレシピ投稿サービスです。 コードレシピは、「関数やクラスなどの基礎はやったが、実際にどのようにゲームやツールを作ればいいかわからない」を解決するサイト。 「ドットインストールやったからなにか作りたい」とか、「暇なんで簡単なゲーム作りたい」なあなたは是非。レシピの手順通りにコードを書けば必ず一つのアプリケーションが完成します。 雑記 なぜ作ったか 弟や知り合いが「ドットインストールやったけど、基礎だけやっても実際どうやって作っていくかわからない」と前から呟いていた。 プログラミングマスター:「作りた
Web上で最も強い力を持つ色は？
下の画像は有名なサーチエンジンからポルノサイトまで、あらゆるコンピューター関連の会社のロゴを色別にまとめたものです。 こうして見ると、同じカテゴリーのトップブランドは似た色のロゴを使う傾向にあるような気がします。紫のロゴが少ないのは何かわけがあってのことなのかな？ ランキングの上位2社はロゴにレインボーを採用していますね。 さて、何か傾向を発見できましたか？ [Colourlovers] Jesus Diaz（原文／あんね）
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
