LINE BLOGアプリ開発で contenteditable と戦った話
こんにちは、LINE Fukuoka の tarunon です。LINE BLOG iOSのリリースまで、クライアントとエディタの開発を担当していました。昨年11月に、LINE BLOG は一般開放と、iOS/Androidクライアントの公開を行いました。ほぼ1年がかりの開発だったのですが、クライアント側で最も大変だったのがエディタの開発でした。この記事では LINE BLOG のエディタの根幹を支えている Workaround について解説します。普段は Swift を書いていて、ほぼその話しかしていないのですが、今回は HTML と JavaScript の話になります。 LINE BLOG はこういったサービスです。 LINE BLOG - 芸能人・有名人ブログ LINE BLOGエディタはWebブラウザの上で動作しています。開発は iOS/Android 共通のソースコードで、 i
iFrameで外部ドメインのサイトを読み込んだ際、iFrame内のページが遷移したかを取得する - jsdo.it - Share JavaScript, HTML5 and CSS
タイトルのような事をしようとして、 iframeのsrcを定期的に取得する方法を試してみたのですが、 セキュリティ上の問題なのか、ページが遷移した後もsrcで取れる値は最初に設定したsrcのままでした。 また、locationプロパティに関しても同じことをしてみましたが、 同様の理由でだめでした。 他にタイトルのような事ができる方法はございませんでしょうか。 よろしくお願い致します。
favico.js
favico.js v0.3.10 Make use of your favicon with badges, images or videos View on GitHub Try it: +1 -1 Set icon Play video Start webcam Reset Works on Chrome, Firefox, Opera and IE11+ Badges Animate your favicon with animated badges. You can customize type of animation, position, background color and text color.
name属性にdocumentのメソッド名を指定してはいけない例 - とあるプログラマの日記 @s025236
id:masa141421356:20111201:1322749788の記事が発端ではてなブックマークで話題になっていたので調べてみた。 検証コード <!DOCTYPE html> <html> <head> <title></title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script type="text/javascript" src="http://code.jquery.com/jquery-1.5.min.js"></script> <script> <!-- $(function(){ //native try { console.log( document.getElementById('target') ); }catch($e){ console.log( 'e
Zudolab -
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
ブラウザ動作の理解－レンダリングの負荷を測る | ゆっくりと…
転勤・単身赴任というライフ・イベントがあり、すっかり更新が止まっていましたが、前回 に続き、「Rendering: repaint, reflow/relayout, restyle」から後半のレンダリング負荷を測るツールの使い方をお届けします。記事中の リフロー や リペイント といった用語は、前回記事「用語の定義」 を参照してください。 元記事は初稿が2009年12月でツールのバージョンも古いため、現時点の最新バージョンで記事を再構成しています。また実行環境によって観測結果が異なるため （非力なマシンの方がレンダリング負荷の割合が高いけど、サンプルとしては分かりやすい）、以下に本記事で試した環境を記しておきます。 dynaTrace AJAX Edition バージョン：Version: 2.1.0.603, built on 2010-12-15 ブラウザ、PC：IE8 / Wind
ブラウザ動作の理解－リフローとリペイント及びその最適化 | ゆっくりと…
ブラウザ動作の理解の2回目です。今回はレンダリング・ツリーの更新に絡む、リフロー （要素の大きさ、位置などの再計算） とリペイント （描画） に関する解説を、「High Performance Web Pages – 20 new best practices」 の著者 Stoyan Stefanov のブログエントリーから 「Rendering: repaint, reflow/relayout, restyle」 を翻訳してお届けします。 同記事は、前半がリフローとリペイントに関する解説と、表示レスポンスを向上させるためのスタイル変更に関する Tips、後半は dynaTrace AJAX Edition と SpeedTracer を使った IE および Chrome の描画パフォーマンスの計測の解説で構成されてる、長い記事となっています。 今回はその前半部分をご紹介します。 レンダ
Flash の z-index を Javascript から有効にする - elm200 の日記(旧はてなダイアリー)
趣旨 Flash は、ただのインラインレベル置換要素であるにもかかわらず、デフォルトでは CSS の z-index に関する決まりごとに従わない。z-index とは、画面の x軸・y軸の両方に直交する軸で、要素が画面の手前におかれているのかそれとも奥かを指示する CSS プロパティである。たとえば、position:absolute で z-index を指定した DIV 要素を z-index の指定のない Flash と重ねると、本来ならば、DIV は Flash の手前に表示されなければならないのに、実際には Flash のほうが手前に来てしまう。 では打つ手はないのか、というと実は wmode という Flash のプロパティがあり、これを "transparent" にしてやればよい。たとえばつぎのような感じだ。 <!-- EMBED を使うとき --> <embed src
src=""だけでもリクエストとデータ取得が発生する | エンタープライズ | マイコミジャーナル
Nicholas C. Zakas is a web software engineer who specializes in user interface design and implementation for web applications using JavaScript, Dynamic HTML, CSS, XML, and XSLT. HTMLにおいて画像やスクリプト、リンクのURLが「src=""」のように空指定になっている場合のブラウザの振る舞いをNicholas C. Zakas氏がNCZOnlineにおいてまとめている。HTMLでは空URLを指定していなくても、JavaScriptで同様の要素を生成すると同様のものとして処理されるので注意が必要。動作はブラウザごとに異なるが、主要なブラウザのなかではOperaのみが何も実施せず、ほかのブラウザは空URLでもリクエス
サロゲートペア入門
はじめに Windows VistaのJIS2004対応により、WindowsのUnicode環境で使用できる日本語漢字の数が増えました。従来、12238字（Windows XP）だったのが13145字（Windows Vista）になり、907字追加されることになりました。これによって、JIS第3水準、JIS第4水準の漢字がすべてサポートされることになったのです（Windows XPまでは一部サポート）。 またWindows XPでも、パッチさえ当てれば、Windows Vistaと同じように追加907字を加えた13145字の漢字が使用できるようになりました。 ところが、この追加された907字の中には「サロゲートペア」という特殊な文字が304字あり、これらは今までのUnicodeの文字とは扱いが少し違います。この点について解説していきたいと思います。 対象読者 Unicodeでデータ処理
HTML/JavaScript/CSSをシェイプアップ！·Patu Digua MOONGIFT
HTMLやJavaScript、CSSを構造化して見やすく書こうと思うとインデントやスペースを使うだろう。確かに見やすいが、ブラウザへのレンダリングを行う上では特に意味はない（中には意味のあるスペースもあるが）。できるだけ転送量を抑えようと思うと、このスペースをなくしていくという作業が大事になる。 HTML/JavaScript/CSSのサイズを軽減 そのためのツール（難読化ツール）はいくつか存在するが、HTML/JavaScript/CSSのいずれにも対応したものは多くない。そこでPatu Diguaだ。 今回紹介するオープンソース・ソフトウェアはPatu Digua、HTML/JavaScript/CSSからスペースやコメントを排除するソフトウェアだ。 Patu DiguaはJavaで作られたソフトウェアで、Windows/Mac OSX/Linuxで動作する。指定したファイルからコメ
Web標準仕様 日本語訳一覧
CSS メディアクエリー 画面サイズなど、媒体の持つ特徴を利用し、スタイルシートを適用するための仕組みを提供します。 原文: “Media Queries” (W3C Recommendation 19 June 2012) セレクタ Level 3 :nth-child()や:not()など、新しいセレクタを定義するモジュールです。 原文: “Selectors Level 3” (W3C Recommendation 29 September 2011) CSS 名前空間モジュール CSSで名前空間を扱う@namespace規則を定義しています。 原文: “CSS Namespaces Module” (W3C Recommendation 29 September 2011) CSS カラーモジュール Level 3 opacityやrgba()など、色に関する値やプロパティを定義す
JavaScriptの動かないコード (中級編) p要素への appendChild() で失敗する - 主に言語とシステム開発に関して
連載目次へ クイズ…下記のJavaScriptコードが，意図した動作をしないのはどうしてですか。（制限時間１分） やりたい事： ＜p＞タグの中に，div要素が１つ入っている。もう一つdiv要素を追加して， <p id="target_tag"> <div id="div_1">１つ目のdivです。</div> <div id="div_2">２つ目のdivです。</div> </p> というタグ構造にしたい。 <body> <script language="JavaScript"> function f() { // <div> タグを複製します。 var element_div2 = div_1.cloneNode(false); element_div2.id = "div_2"; element_div2.innerHTML = "２つ目のdivです。"; // 上の要素を，<p>
Download Free Cheat Sheets or Create Your Own! - Cheatography.com: Cheat Sheets For Every Occasion
Over 6,000 Free Cheat Sheets, Revision Aids and Quick References! Programming Cheat Sheets Software Cheat Sheets Business and Marketing Cheat Sheets Education Cheat Sheets Home and Health Cheat Sheets Games and Hobbies Cheat Sheets Latest Cheat Sheets 3 Pages (0)Git/Github Cheat SheetThis Git Cheatsheet is a quick reference guide to essential Git commands used in version control. It provides con
ewbi.develops: IE, IFRAME, and HTTPS
Recent Stuff Some Resources for RSS Generation Older Stuff June 2009 (1) January 2008 (1) December 2007 (2) November 2007 (8) September 2007 (1) May 2007 (5) April 2007 (2) March 2007 (1) December 2006 (2) November 2006 (3) October 2006 (5) September 2006 (6) July 2006 (2) May 2006 (3) April 2006 (3) Grouped Stuff Consulting (7) Dev Practices (3) FlexWiki (9) MS .NET (54) MS Access (25) MS Excel (
チェックボックス、ラジオボックスをオシャレに表示するJS:phpspot開発日誌
Custom Checkboxes, Custom Radio Buttons, Custom Select Lists チェックボックス、ラジオボックスをオシャレに表示するJS。 次のようなチェックボックス、ラジオボックスにスタイルできるJSです。 <input type="checkbox" class="styled" /> のように、class="styled" で自動スタイルされます。 CSSを変更でデザイン変更可能です。 関連エントリ CSSデザインされたTextAreaサンプル inputのtype=fileをCSSでクールにスタイルするサンプル サイトのチェックボックス、ラジオボタンを可愛い感じにするためのJavaScriptライブラリ
Re:href=
Re:href="#" onclick の悪習 ネタ元：某日記：href="#" onclick の悪習 <a href="#" onclick="...">検索</a> なんて書き方やめようぜ！というお話 a要素のhref属性に値が入ってるとonclick属性の内容を実行後にhref属性の値を参照しようとする。 #なんかが入ってるとページの一番上部にページ内遷移をする。(※1) 某日記さんの代替案ですけどspanで代替するもの <span style="cursor: pointer" onclick="...">検索</span> 私だとこんな書き方 <a href="javascript:void(0)" onclick="...">検索</a> onclickイベントハンドラを実行しようとしてるなら、こんな書き方もある <a href="javascript:（onclickの内容
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Mozilla — 利益ではなく、ユーザーのためのインターネット
Web ページを高速化する
jsmario.com.ar