サーバーサイドエンジニアも知っておくべきフロントエンドの今Rails Developers Meetup 2019
Bookmarklet という一番身近な自動化技術 | blog.jxck.io
Intro 「毎回やるなら bookmarklet にでもすれば?」と言ったら、後輩が「そんな便利なことできたんですね、知りませんでした」と言っていた。 そんな時代にこそ、今更だれも解説しないであろう、 bookmarklet という技術についてもう一度書いておく。 Bookmarklet 簡単に言えば、 JS を書き、それを Bookmark として登録すれば、クリックするだけで現在のページでそれが動くというものだ。 ブラウザ上で何かを自動化したいと思うなら、最も簡単に実現できる便利な技術だろう。 似たような手法ではブラウザの Extension などもあるが、 Bookmarklet の良いところは一切誰にも邪魔されないというところだ。 開発者登録も、ストアへのアップロードも、難解なドキュメントを忖度して煩雑な設定ファイルを書く必要もない。 開発者ツールで、「こんなことできないかな」と
JavaからHTML5ヘ。業務システムの開発におけるWeb技術の変化と適応事例
JavaからHTML5ヘ。業務システムの開発におけるWeb技術の変化と適応事例 佐川 夫美雄（Ashiras, inc.） フロント開発の現場では、Java中心の開発から、HTML、CSS、JavaScript中心の開発にかわりつつあります。今回は具体的な事例をもとに、実装アーキテクチャや開発インフラに、どのような変化が起きているかレポートします。 はじめに HTML5が2014年に正式勧告されることを受け、フロント業務アプリケーションに影響を与えています。より多くのことがHTMLやCSSでできるようになり、現場レベルでは開発スタイルそのものの見直しも行われています。実際、私が担当しているプロジェクトではJava中心の開発からHTML、CSS、JavaScript中心の開発へと開発環境を変えています。具体的に何をどのように変更しているのかを、私が担当しているプロジェクトの内容に沿ってご説明
クライアントサイドJavaScriptのライセンス管理 | GREE Engineering
最近シリコンウエハーもらって嬉しかったago（@kyo_ago）です。 このエントリはGREE Advent Calendar 2013 11日目の記事です。 今回はクライアントサイドJavaScriptにおけるライセンス管理の問題を取り上げたいと思います。 ライセンス管理の問題点 「使用しているライブラリのライセンス管理をどうするか」はクライアントサイドJavaScriptにかぎらず発生する問題ですが、クライアントサイドJavaScriptには以下の様な特徴があるため問題が複雑になります。 コードが結合、圧縮される場合がある クライアントサイドJavaScriptでは読み込みの速度を上げるため、使用しているライブラリの結合、圧縮を行うことがあります。しかし、この時誤ってライセンス文が捨てられてしまうことがあります。 ソースが外部に公開される クライアントサイドJavaScriptではソー
はてなグループの終了日を2020年1月31日(金)に決定しました - はてなの告知
はてなグループの終了日を2020年1月31日(金)に決定しました 以下のエントリの通り、今年末を目処にはてなグループを終了予定である旨をお知らせしておりました。 2019年末を目処に、はてなグループの提供を終了する予定です - はてなグループ日記 このたび、正式に終了日を決定いたしましたので、以下の通りご確認ください。 終了日: 2020年1月31日(金) エクスポート希望申請期限:2020年1月31日(金) 終了日以降は、はてなグループの閲覧および投稿は行えません。日記のエクスポートが必要な方は以下の記事にしたがって手続きをしてください。 はてなグループに投稿された日記データのエクスポートについて - はてなグループ日記 ご利用のみなさまにはご迷惑をおかけいたしますが、どうぞよろしくお願いいたします。 2020-06-25 追記 はてなグループ日記のエクスポートデータは2020年2月28
Node.jsとは何か、開発者ライアン・ダール氏が語る（前編）～ノンブロッキングとはどういうことか？
いま注目されているサーバサイドJavaScriptの火付け役となったNode.js。その開発者であるライアン・ダール（Ryan Dahl）氏自身がNode.jsを紹介した講演「Introduction to Node.js with Ryan Dahl 」のビデオが公開されています。 この講演は、サンフランシスコのPHP開発者の集まりであるThe SF PHP Meetup Groupが2月にダール氏を招待して行われたもの。 そのため、Node.jsを知らないデベロッパーに向けて、Node.jsがどのような特徴を持つプログラミング言語なのか、分かりやすく解説しています。内容を紹介しましょう。 Node.jsとPHPとの本質的な違いとは何か Node.jsを触ってみよう。今日は特にスライドは用意してなくて、タイプしてどんなものかを動かしながら紹介していくつもりだ（注：ダール氏はここで最初に「
javascript - ソースを見せてかつ動かすための３つのtips : 404 Blog Not Found
2009年02月24日04:30 カテゴリLightweight LanguagesTips javascript - ソースを見せてかつ動かすための３つのtips livedoor Blogを私が愛用しつづけている理由のひとつが、JavaScriptを受け付けること。 おかげでかなりのentriesが溜まりましたが、それだけにで実行用のソースと表示用のソースを用意するのが人一倍おっくうに感じられます。そんなわけで、どうやれば怠慢をもっと発揮できるかをまとめてみました。 0. DOMにIDをふらずにデモる こんな感じのデモがあったとしましょう。「404 Blog Not Found:javascript - Array#sortがオレquicksortより遅い!?」にあるものを書き直したものです。 # of Items: よくあるのは、inputタグやpreタグにIDをふって、docume
もうこれで十分。HTML上でテーブルを表示するなら·Sigma Grid MOONGIFT
業務システムを構築する際に、一覧表を表示するという処理は多い。そしてそのデータを並べ替えたり、チェックボックスを入れたりしたいというニーズも多く発生する。場合によってはカラムを並べ替えたり、一括更新したいなんて言われることもある。 ソートも並べ替えもページネーションも全部こみこみ それを一つ一つ実装していては非常に工数がかかってしまう。そこで使いたいのがこのSigma Gridだ。 Sigma Gridはテーブルの表示とソート、データ編集などを可能にする超豪華ライブラリだ。LGPLライセンスの下に公開されているオープンソース・ソフトウェアだ。 Sigma Gridはデータの表示に際してJSONでデータを渡す必要がある。そのため既存のシステムにそのまま組み込むのは難しいかもしれない。だがその変更してもあまりあるメリットを享受できるに違いない。 画像表示とクリックアクションの例 まずカラムごと
memorycraft wiki: SproutCoreとは
SproutCore?はJavaScript?で書かれたアプリケーションロジックをブラウザで実行するためのMVC Webアプリケーション開発フレームワークであり、 ウィンドウで表示されるデスクトップアプリのように単一ページでの動作を奨励します。 通常、サーバーとの連携は、最初のページロードでは得られないデータの取得をする場合や、ユーザーの入力データをデータベースに保存する場合にのみ行なわれます。 これらの連携は、通常RESTful と JSONで構成されます。 SproutCore?アプリケーションフレームワークは、以下のようなデスクトップアプリケーションに組み込まれた一般的な機能を提供します。 ドラッグアンドドロップ アンドゥ/リドゥ キーボードショートカット 洗練されたユーザーインターフェイス テキストと画像のローカライゼーション リッチな内部データモデル SproutCore? アプ
JavaScript-XPath をリリースしました！さあ、あなたも XPath を使おう！（解説付き） - IT戦記
JavaScript-XPath とは JavaScript-XPath は、 DOM 3 XPath を実装していないブラウザに対して、実用的な速度で動作する DOM 3 XPath のエンジンを追加します。 一言で乱暴に言ってしまえば、どのブラウザでも document.evaluate って関数で XPath 使えるようになるよ！ってことです。 以下が公式サイトになります。 http://coderepos.org/share/wiki/JavaScript-XPath DOM 3 XPath ってなんなの！？ めっちゃ簡単（で、ちょっとだけ適当）なDOM 3 XPath の説明をします＞＜。 JavaScript でよく使う document.getElementById や document.getElementsByTagName って関数ありますよね？ DOM 3 XPath
ブラウザのローカルストレージ - ヽ( ・∀・)ノくまくまー(2007-04-16)
● 結論 ├→ Flash9 はもう標準だよ派 (Macromedia工作員) │ └→ storage.js (or Dojo) └→ 顧客を逃がしたくないよ派 ├→僕の想定する顧客はIEのみだよ派 (保守本流) │ └→ UserData ├→ブラウザはIEだよ派 (ゲイツ原理主義) │ ├→ UserData │ └→ でも自分だけは開発にFirefox2を使うよ派 (ユダ) │ └→ rakuto式ストレージ ├→世の中はIEとFirefox2で95%だよ派 (希望的現実主義) │ └→rakuto式ストレージ └→その他 ├→ まだFirefox1のままだよ派 (メンド教) ├→ 俺マカーだよ派 (サファリパーカー) ├→ なんでみんなOpera使わないの派（ドンマイ！） └→ w3m だから JavaScript 動かないだよね！とか言ってｗ (舞美) └→で
XSS対策:JavaScriptなどのエスケープ - ockeghem's blog
昨日の日記に対して、id:ikepyonさんからトラックバックを頂戴した。内容はそちら(Tipsと考え方とXSS対策)を読んでいただくとして、興味深いテーマなので少し突っ込んでみたい。 # 日によって「です・ます」で書いたり、「だ・である」で書いているのは気分の問題なので、あまり気にしないでいただきたい Tipsだけでなく、物事の本質を見極め、何が危険で、何が安全なのかということを考える必要があると思う。 昨日の記事は、(一般的な)XSS対策として、どの文字をエスケープするのが「本質的」だったかを考えたかったのであって、あれをTipsととらえると確かに失敗する。 JavaScriptのスクリプトなどが入っている場合も昨日と同じ方法論で考えることは可能である。まずはこれを検討してみよう。 スクリプトがonXXXのイベントハンドラとして記述されている場合 この場合は、HTMLタグの属性値として
JavaScriptによるブラウザの種類とバージョン判断
[訳註] Linkタイトルも一部和訳しましたが、実際のLink先に和訳があるとは限りません。和訳が用意されている場合でも、本文書での和訳と異なる題名となっていることがあります。 Sniffer と Detection : 前者は"嗅ぎ分け"と直訳されることが多いですが、あまり好きな表現ではないので(^^; 前者を"判別"とし、後者は"判断"というように使い分けました。 以下、このような緑色の小さな文字(要CSS対応)となっている部分が訳註です。 究極の JavaScript クライアント判別, Version 3.03 JavaScriptによってブラウザのベンダ、バージョン、オペレーティングシステムを判断 ウェブページの作成にあたっては、閲覧者が多くのベンダーによる様々なバージョンのブラウザを使用している可能性を考慮に入れる必要があります。プラグインを必要とするような特定のページ
53 CSS-Techniques You Couldn’t Live Without | Smashing Magazine
CSS is important. And it is being used more and more often. Cascading Style Sheets offer many advantages you don’t have in table-layouts - and first of all a strict separation between layout, or design of the page, and the information, presented on the page. Thus the design of pages can be easily changed, just replacing a css-file with another one. Isn’t it great? Well, actualy, it is. Over the la
Enjoy×Study - ブラウザのスクロールバーで隠れている領域を含むサイズを取得する方法。
昨日のエントリに引き続き、今度はスクロールバーで隠れている領域を含むサイズを取得するためのプロパティをまとめてみました。 Enjoy×Study - ブラウザの表示領域のサイズを取得する方法。 調査したのは、下記のプロパティです。 window.innerWidth window.innerHeight document.body.scrollWidth document.body.scrollHeight document.body.offsetWidth document.body.offsetHeight document.body.clientWidth document.body.clientHeight document.documentElement.scrollWidth document.documentElement.scrollHeight document.docu
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ASCIIFlow
JavaScriptを利用してフォームの二重送信を防止する：CodeZine
IBM Developer