HTML5とは何かを簡単にまとめてみた
ヤフー株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。LINEヤフー Tech Blog はじめに こんにちは。R＆D統括本部 制作本部 ウェブデベロップメント部に所属しております。岡部和昌（@kzms2）と申します。 最近スマートフォンやタブレット向けのページを作成する機会が増えてきました。 なので、今回はちまたで大人気のHTML5について書きます。 若干今更な内容にも思えますが、あまりHTML5になじみがない方にもわかってもらえるような内容にしています。 HTML5の基本概念や思想・実際の組み方というよりも、 HTML5で組むと今までと比べて何が違うのか などについて書いていきます。 なぜこれからHTML5なのか HTML4との違いがわからない HTML5を使う利点がわからない など疑問に思っている方はぜひ見ていた
サーバーの熱は冷まさなくても良い？
ヤフー株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。LINEヤフー Tech Blog こんにちは、運用技術本部 サイトオペレーションズ部の秋山と申します。 Yahoo! JAPANには日本一のサイトを支えるたくさんのネットワーク機器、サーバー、ストレージがあります。 日々増え続ける、インフラ機器の運用管理に頭を悩ませている、管理者も多いかと思います。 悩むポイントは機器管理、コスト等いくつかあるかと思いますが、今回は「サーバーの熱」に焦点を絞り、話をします。 普段使っているパソコンなどもそうですが、情報技術（IT）機器全般に電源投入後は熱を持ち、 内部のファンで、たまった熱をケース外に吐き出す構造のものがほとんどです。 パソコン1台ですと、暖かい風が出てくるだけ。というイメージが多いかと思いますが、 データセンタの
iPadでHTML5でWebアプリを作ってみました。
こんばんは。LatLongLabの河合（@inuro）です。 ようやくiPadが日本でも発売されましたね。入手された方もたくさんいらっしゃることかと思います。 ヤフーではこのiPad国内発売にタイミングを合わせ、Yahoo!ラボで「yubichiz」というiPad専用の地図Webアプリを公開しました。 Yahoo!ラボ - yubichiz（ゆびちず） 詳しい機能はリンク先ページを見ていただくとして、 地図に書かれた文字（大塚家具、とか紀伊國屋書店、とか）をタップするだけでその店舗の詳細情報が表示されます 地図を指でなぞるだけで、なぞったラインの距離を測定できます 同様に地図を指でなぞるだけで、道沿いのお店を検索できます といった特徴があります。 またyubichizは、App Storeからダウンロードするいわゆる「アプリ」ではなく、HTML5を用いてiPadのSafari上で動作するW
マークアップ効率化 - zen-codingでコーディングを倍速に
HTMLの記法について 基本的には「div」の様に要素を省略せずに記述して、それを展開すると「<div></div>」という形に展開されます。 このときに展開できる要素は以下の公式ドキュメントに明記されていますのでそちらを見るとよいです。 Zen HTML Elements Zen HTML Selectors Zen CheatSheets 基本的な記法 ひとつずつ順番に記述して説明していきます。しばらく初歩的な説明になるのである程度知っている方は飛ばしていただいて良いかと思います。 まずものすごく基本的な記法である、単独タグの記法について説明を行います。 cssのセレクタをイメージしながら見ていくと納得しやすいと思います。 タグだけ変換 変換前 div 変換後 <div></div> デモ 文末でtabを押してください div 変換後、div要素の間にカーソルが移動するので、すぐにテキ
Yahoo!検索の「ユーザーインターフェース設計」
分業による効果 一般的なデザイン作業において、下記のようなデザイン作業の上流部分をごく限られた人数で行い、そこから先の展開部分を大人数で行う方法を取る場合が多いと思われます。 インタラクションの設計 ビジュアルの設計 主要要素のHTMLマークアップ・CSSコーディング設計 しかし、モジュールの概念を取り入れることにより、デザイン作業の上流部分から分業を行うことが可能になります。 作業者のスキルやサービスへのコミット具合によって、多少ぶれる場合もありますが、そこはサービスの全体的なルールや作業時の補助ツールによってコントロールを行うことが可能です。 そのため、モジュールの命名規則や運用ルールについては、あらかじめドキュメントを作成した上で、ある程度厳密に運用を行う必要があります。 コミュニケーションの効率化による効果 最初にインタラクションの設計時に命名したモジュール名や要素名を、ビジュアル
JavaScript の不思議な面白さ - 最終回
ヤフー株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。LINEヤフー Tech Blog これまで七回に渡って連載を続けてきました。 今回が最終回です。 ここまでが、私の知る JavaScript 開発の手法変化の歴史です。 最近では多くのフレームワークやライブラリが登場し、最近ではこうしたライブラリを利用した開発が一般的になりつつあります。 今回は、ここまでの手法を元にフレームワークを完成させたいと思います。 ＊ フレームワークといっても今回作るのはごく小規模なものです。 大規模に利用する場合にはここにさまざまな機能を付け加えていく必要がありますが、ここまででも必要最低限の機能を備え、HTML を効率よく構築することに特化したフレームワークとなっています。 前回からの変更点は以下の通り ・クラスの継承を利用 ・x-i
JavaScript の不思議な面白さ - 第六回
ヤフー株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。LINEヤフー Tech Blog JavaScript フレームワークを作ろう 私はフレームワークを、ある特定のコーディングルールを実現する為の手法ともとらえています。 それがなんであれ、世にあるフレームワークには何らかのコーディングルールを満たした状態を容易に維持しながら効率よく開発する為の基盤を提供していると思います。 今回からはフレームワークを実際に作ってみましょう。 題材としてはもちろん、前回まで利用してきたプログラムを使います。 ＊ 前回のプログラムをご覧になった方で勘の良い方はここから「HTML 文字列の効率よい組み立て方」に話の主軸が移ってくることにお気づきだと思います。 まず対象のコードをじっと見つめてみましょう。 var HTMLParts =
エンジニアにもわかる「ユーザーインターフェース設計」
ヤフー株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。LINEヤフー Tech Blog はじめに 島津悠樹と申します。Yahoo! JAPANのソーシャルメディア系サービスの開発・ユーザーインターフェース（以下UI）設計を担当しています。私からは「エンジニアにもわかる『ユーザーインターフェース設計』」と題し、エンジニアのみなさまに考え方のヒントとなるようなネタをお届けします。 エンジニアの方々にとって、UI設計は、おもしろそう、けれど、どこかとっつきにくい......、そんな印象を持っておられるのではないかと思います。 私も以前はそう思っていました。ですが、とっつきにくさを理由にUI設計をやらないのはもったいない、という思いで試行錯誤した結果、なんとか、UI設計のお仕事をいろいろ担当させていただくことができるようにな
JavaScript の不思議な面白さ - 第五回
ヤフー株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。LINEヤフー Tech Blog 「第三回」「第四回」とプログラムの分離とそれによってもたらされる動作速度の変化の検証をおこなってきました。今回は速度を追及する為、多少の犠牲はいとわず速度優先でライブラリ化を進めることとしてみます。 今回からは、プログラミング技術の話にお付き合いください。 再度になりますが、ライブラリ化の目的が、 ・ほかの開発者がライブラリを利用することで容易に開発できる ・ライブラリ開発者が独立してプログラムの改善を行える といった開発効率の向上が目的であることを忘れないでください。 最高速を目指すのであれば「第二回」で示した解答例でよいのです。 前回のルールに沿った形でライブラリ化を行います。 解答例（ライブラリ化） 今回は柔軟な機能拡張の為
JavaScript の不思議な面白さ - 第四回
ヤフー株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。LINEヤフー Tech Blog 前回の「第三回」ではよくある手法でプログラムの分離を試してみました。 そろそろこの連載も折り返し地点となります。 実はこの記事は、最初、小さな課題を与えられたプログラマが正攻法で突撃するもうまくいかず、策をろうしてやっと勝利、その知識を広めようとライブラリ化を行ったところで難題にぶち当たり、裏街道に突入。状況を打開する為にプログラム技術を駆使し、最終的にフレームワークとして完成させる、というストーリーになっています。 ＊ さて、さっそく前回の答えですが「A」です。 まずは下のグラフをごらんください。 上記は、各実装でどれぐらい表示に時間が掛かるかを測定したものです。 単位は ms (ミリ秒＝1000分の1秒)です。 重要なのは プ
JavaScript の不思議な面白さ - 第三回
ヤフー株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。LINEヤフー Tech Blog 「第二回」では、グレー文字入り入力欄という課題への解答例としました。 プログラムの設計といったものがどんなものなのか、その面白さが少しでも伝わっていれば幸いです。 とはいえ、動いてさえいればあとはどれも似たようなもので、あとはプログラマの自己満足の世界です。その中での創意工夫はプログラマに閉じた世界とはいえ、ポケットの中に広がった空ではないかと思っています。 前回の最後の問題の答えを示す前に一つ重要なことを忘れていました。 そうです、使ってもらう為にはライブラリ化が必要でした。 ＊ 三回目となるこの記事からは、皆さんお待ちかねの関数化・ライブラリ化といったプログラムを隠す手法を試していこうと思います。ロジックの複雑化や高機能化につ
ウェブページの高速化に必要なもの
ヤフー株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。LINEヤフー Tech Blog こんにちは、オークション事業部のさかいです。 ネットサーフィンに慣れている techblog 読者のみなさんの中には、あちこち見て回っているうちに重いページに行き当たり、イライラしながら応答を待ったり、容赦なくバックスペースキーで前のページに戻ったり…という経験をされた方が多くいらっしゃると思います。 そういったストレスのないレスポンスが行えるよう、バックエンドのプログラムの最適化や、サーバーのチューニングを行うのは私たち技術者の仕事のひとつです。 しかし、あるウェブサイトにアクセスして、そのサイトを閲覧できる状態になるまでの時間のうち、そういったバックエンドでの処理に必要な時間は 1〜2 割でしかないというデータがあります。残り
JavaScript の不思議な面白さ - 第二回
ヤフー株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。LINEヤフー Tech Blog 前回の記事「JavaScript の不思議な面白さ」はお楽しみいただけたでしょうか？ 一例として正攻法で突入していった例については賛否両論あるようです。確かに結果としてできたプログラムは見た目にも美しくなく、目を覆いたくなるばかりでした。 今回は解答編として JavaScript ならではといえる "奇妙な" 例をひとつお見せしたいと思います。ヒントは前回もちらっとお話させていただいたものです。 コード改善に向かって その前に前回の問題はなんだったのかをプログラマ視点で見ていきます。 コードが美しくないと感じるのはなぜでしょうか？ 改善するならどうすればよいのでしょうか？ ひとつの方法は "隠す" ことです。関数化・クラス化・ライ
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
