1 pixel｜サイバーエージェント公式クリエイターズブログ サイバーエージェントのクリエイターの取り組みを紹介するオフィシャルブログです。最新技術への挑戦やサービス誕生の裏話、勉強会やイベントのレポートなどCAクリエイターの情報が満載です。 こんにちは。Ameba事業本部の杉本と申します。 業務では「天下統一クロニクル」というチームでフロントエンドのディベロッパをしています。 今回は、「node-webkit」という一風変わったアプリケーションを紹介させていただきます。 私達は普段、gruntといったnode.js製のツールを使ってJavaScriptの結合や圧縮、画像の減色といった処理を自動化していますが、node-webkitはこれらnodeのモジュールを使ってGUIアプリケーションを作れるツールです。nodeの資産をそのまま利用できるので、私のようなディベロッパには嬉しいですね。
このノートは、Paul Irishによる記事 “WebKit for Developers” の日本語訳です。 僕ら開発者の多くにとって、WebKit はブラックボックスだ。HTML, CSS, JS, その他のアセットを投げると、WebKit は魔法でもかけたかのように、綺麗な Web ページを返してくれる。しかし、僕の同僚 Ilya Grigorik は本当の WebKit はこうだと言っている。 WebKit はブラックボックスではない。ホワイトボックスなんだ。さらにそれだけではなく、オープンなホワイトボックスなんだ。 じゃあ、これから次のことについて理解していこう。 WebKit ってなに？ なにが WebKit じゃないの？ WebKit ベースのブラウザで WebKit はどう使われているの？ なんですべての WebKit が同じじゃないの？ さて、世の中に数多くの WebKi
PC 版の Google Chrome や Safari で見たときにユーザビリティーが落ちるから。 以上。 で終わってしまうと記事にならないので、ちゃんと説明しておく。 そもそも -webkit-text-size-adjust とは何か iPhone や Android のブラウザーは、縦向き (Portrate mode) と横向き (Landscape mode) の文字サイズを自動調整する機能がある。 これを制御するのが CSS の -webkit-text-size-adjust である。 文字サイズ自動調整の具体例 次のような HTML をスマートフォンで表示してみる。 <!DOCTYPE html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-
ドッ ドッ ドリドリ ドドドド ドリランドドッ ドッ ドリドリ ドドドド ドリランドLoading...RandomTweet課金して新しい機能を手にいれる($1)課金して新しい機能を手にいれる($2)課金して新しい機能を手にいれる($5)
Google Chrome、Safari、Lunascape Webkitなど、Webkit系ブラウザで利用できる::-webkit-scrollbar擬似要素に関する覚え書きです。 これはその名の通り、スクロールバーをデザインするときに使います。 基本的な説明はSafariのブログに書かれていますので、そちらを参考にしました。 また、この記事で説明に使っているキャプチャ画像は、Safariのデモページのものです。 Surfin’ Safari - Blog Archive » Styling Scrollbars スクロールバーのパーツを構成する擬似要素これらを指定するときにはWebkit用のベンダープレフィクス-webkit-を忘れないようにしましょう。 ::-webkit-scrollbarwidthで縦スクロールバーの幅、heightで横スクロールバーの高さを指定します。 パーセン
WebKitにはCSSでスクロールバーをカスタマイズ出来る独自拡張が存在します。 Surfin’ Safari - Blog Archive » Styling Scrollbars Scrollbar Debug View この設定はルート（セレクタ的にはhtml）のスクロールバーには反映されないため、全体に使いたい場合にはbody要素にスクロールバーを表示させて肩代わりさせる必要があります。overflowでこんな感じに: html { /* scrollbar */ overflow-y: auto; } body { /* scrollbar */ position: absolute; top: 0; left: 0; bottom: 0; right: 0; overflow-y: scroll; overflow-x: hidden; } bodyに設定する関係で気付いた点を
みなさん お久しぶりですヽ(´ー｀)ノ夏休みの宿題終わりました？ 毎日が夏休みの最終日みたいな生活してるあまちゃんです！ さてさて 今日は WebKit サーバーというものを作ってみたので、紹介してみます。 WebKit って何？ WebKit っていうのは Chrome や Safari の中に入ってるブラウザのエンジンのことです！ 実はブラウザっていうのは、エンジン部分と見た目の部分（タブとかボタンとかね）に別れていて、意外と違うブラウザでもエンジン部分は同じものを使ってるってことも多いんですよ(*´ー｀) ブラウザのサーバーってどういうこと？ 要は、サーバーサイドでブラウザを起動して JavaScript を実行したり、 JavaScript が実行されないと読めないページから値を持ってくるのに使ったりしようという魂胆です。 今まではそういうのなかったの？ 実は、今までは JavaS
この節は検証可能な参考文献や出典が全く示されていないか、不十分です。 出典を追加して記事の信頼性向上にご協力ください。（このテンプレートの使い方） 出典検索?: "WebKit" – ニュース · 書籍 · スカラー · CiNii · J-STAGE · NDL · dlib.jp · ジャパンサーチ · TWL (2020年12月) WebKitは元々、macOSのウェブブラウザ "Safari" のレンダリングエンジンとして使用するため、LinuxやBSDといったUnix系用のブラウザ "Konqueror" のKHTMLソフトウェア・ライブラリを基にAppleによって作成され、現在までに、Apple、KDE、ノキア、Google、Torch Mobileなどによって改良が加えられた。 LinuxやBSDなどのUnix系用ブラウザとして、1998年に KDEプロジェクト の HTML
Webkit users — that is, anyone using Apple Safari or Google Chrome: Have you ever wondered how to get rid of that fuzzy blue/yellow halo that appears when you focus on text fields, textareas, and other form controls on your website? Here’s a small snippet of CSS code that you might find useful: *:focus { outline: none; } This will effectively remove all traces of the outline, allowing you the fre
はてなグループの終了日を2020年1月31日(金)に決定しました 以下のエントリの通り、今年末を目処にはてなグループを終了予定である旨をお知らせしておりました。 2019年末を目処に、はてなグループの提供を終了する予定です - はてなグループ日記 このたび、正式に終了日を決定いたしましたので、以下の通りご確認ください。 終了日: 2020年1月31日(金) エクスポート希望申請期限:2020年1月31日(金) 終了日以降は、はてなグループの閲覧および投稿は行えません。日記のエクスポートが必要な方は以下の記事にしたがって手続きをしてください。 はてなグループに投稿された日記データのエクスポートについて - はてなグループ日記 ご利用のみなさまにはご迷惑をおかけいたしますが、どうぞよろしくお願いいたします。 2020-06-25 追記 はてなグループ日記のエクスポートデータは2020年2月28
Webサイトのサムネイルを表示するサービスってあるじゃないですか で、それって実際どうしてるのかなと思ったのでちょっと調べてみた。 SimpleAPI の仕組みについて考察してみる :: drk7jp これとかがそのやり方なのかな、と思ったのだけど、ブックマークコメントを見るともっと手軽な方法があるようだ。 利用するだけでいいなら，linux に webthumb が，mac には webkit2png なんてのが使えそうな予感．debian に khtml2png というものも．hatenascreenshotでは，IEを使ってるってのをどっかで聞いたことあるなぁ． http://b.hatena.ne.jp/entry/www.drk7.jp/MT/archives/001042.html というわけで、Macで（python製だけど）webkit2pngとやらを試してみる事にした。
The Search for a Trusted 메이저사이트: A World of Thrills, Security, and Immersive GamingdErsPOId - December 1, 2023In the dynamic world of online entertainment, the quest for finding a trustworthy 메이저사이트, or major site, is akin to navigating through a labyrinthine digital jungle. Much like the adventurers of old scouring for hidden treasures, modern-day netizens are on the lookout for that one platform
Fall leaves are beautiful… on someone else’s lawn. Dino’s Lawn Care ☎ 555-2143
Zepto is a minimalist JavaScript library for modern browsers with a largely jQuery-compatible API. If you use jQuery, you already know how to use Zepto. While 100% jQuery coverage is not a design goal, the APIs provided match their jQuery counterparts. The goal is to have a ~5-10k modular library that downloads and executes fast, with a familiar and versatile API, so you can concentrate on getting
2010年09月09日13:00 カテゴリLightweight Languages javascript - Webkitでは$が定義済みな件 これに対する驚愕の事実。 [を] JavaScript のセレクターの定番イディオム JavaScript の定番イディオム。 function $(id) {return document.getElementById(id)} document.getElementById() の省略記法として $() を使うためのおまじない。 Google Chrome 6 の $ は function () { return document.getElementById.apply(document, arguments) } ですね。#JavaScriptless than a minute ago via Chromed Birdthink49 t
The WebKit Open Source Project WebCoreにおける2つのパイプラインと処理の概要 - Surfin’ Safari Blogより抜粋 Surfin’ Safari - Blog Archive ≫ How WebKit Loads a Web Pageにおいて、WebKitにおいて具体的にどういった手順を踏んでページコンテンツのダウンロードとレンダリングが実施されているかが簡単に紹介されている。実際にどういった仕組みになっているのか短くまとまっていて参考になる。 WebKitではWebCoreが主なレンダリングコンポーネントになるという。WebCoreにはドキュメントをフレームへ読み込むパイプラインと、画像やスクリプトなどのサブリソースを読み込むパイプラインの2つのパイプラインが用意されている。つまり、HTMLのダウンロードとレンダリング、画像やスクリプト
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
