JavaScript:関数が定義されているファイルと行数を調べる-Chromeデベロッパーツールで快適生活
イントロダクション Web ページ内で使用している JavaScript の関数が、どのファイルの何行目に書かれているのか、知りたい場合がありますよね。 ソースコード全てが手元にあり、開発ツールもインストールされていれば、すぐにそれらを調べることが出来ます。 しかし、ソースコードが全て他者のWebサーバ上にあり、手元にChromeしかない場合にはどうしたらよいのでしょうか？ その場合、Chrome のデベロッパーツールを使えば、簡単にこの問題を解決できます。 JavaScriptの関数が定義されているファイルと行数をChrome のデベロッパーツールを使って調べる 調べ方は簡単です！ どこに定義されているのか知りたい関数の名前を、Chrome のデベロッパーツールのコンソールに打ち込むだけです！ Chrome のデベロッパーツールの Console に、 定義されているファイル名と行数を知
第1回 JavaScriptの基礎を見直す | gihyo.jp
連載のはじめに みなさんこんにちは、今回より「聞いたら一生の宝、プログラミングの基礎の基礎」 の連載を担当させていただく本橋佑介です。 本記事では、広く利用されている技術から新しい技術まで、基本的な部分を現場のエンジニアの声を取り上げつつ解説していきます。習得している方にとっては振り返りとなり、また今から学ぶ方にとっては同じ疑問にぶつかった方の意見が参考になれば幸いです。 現場のエンジニアの声は私が開発に携わっている技術系QAサイトteratailから抜粋しています。 第1回では、現在では様々な環境で利用されているJavaScriptの基礎をteratailの初心者投稿とともに振り返っていきます。 JavaScript JavaScriptは主にウェブブラウザを実行環境とし、動的なウェブサイト構築などに利用されてきました。 また、今ではNode.jsをサーバサイドで利用することが増え、
CreateJSとNode.jsを使ってサーバーサイドでCanvasを扱おう–ICS LAB
HTML5 Canvasのフレームワーク「CreateJS」(基本的な使い方は入門サイトをご覧ください）について、2015年2月10日に開催されたCreateJS勉強会 (第5回) でライトニングトーク「CreateJSとNode.jsを使ってサーバーでCanvas要素を使おう」を発表しました。今回はそのスライドを元に、サーバーサイドでCreateJSを使うメリットを紹介します。 デモ 今回紹介するnode-easelを使ったデモです。スマホ画面にTwitterのアイコンが、PC画面には白い矩形が表示されています。スマホで選んだTwitterのユーザーのアイコンがPC側でアニメーションします。画像加工はサーバーサイドで動くCreateJSを使って行われています。 Section1. Node.jsとモジュールについて Node.jsはブラウザではなくサーバーサイドで動くJavaScript
プログラムソース:コンマ(,)区切りの文字列の要素を、括弧[]でそれぞれ囲む - ver1.1:Blogger特有の問題の修正
Dr.ウーパのコンピュータ備忘録: コンマ(,)区切りの文字列の要素を、括弧[]でそれぞれ囲む : Comma Separated Words to Square-Bracket Separated Words http://upa-pc.blogspot.jp/p/double-quotes-comma-to-square-bracket.html 入力されたコンマ(,)区切りの文字列の要素を、括弧[]でそれぞれ囲んだ結果を出力します。 なお、このソースコードは初版(Ver1.0)のBlogger特有の問題を修正したVer1.1です。 その後、修正が行われていれば、現在動作しているプログラムとは異なっている可能性があります。 Ver1.0からの修正箇所 Bloggerだとページ中のJavaScriptの一部の文字が自動的にエスケープされてしまう問題へ対処 Blogger のページへ Ja
JavaScriptでセキュアなコーディングをするために気をつけること
kintoneはJavaScriptを使って自由にカスタマイズできます。 カスタマイズにより独自のリッチなUIを構築したり、新しい機能を追加したりできますが、セキュアなコーディングをしないと クロスサイトスクリプティング （以下、XSS）などの脆弱性を作り込んでしまう危険性があります。 この記事では、JavaScriptでセキュアなコーディングをするための基本的なポイントを解説します。
JavaScript:location.hrefの注意点 - URLのドメイン前にベーシック認証が埋め込める、そして脆弱性
JavaScript:location.hrefの注意点 - URLのドメイン前にベーシック認証が埋め込める、そして脆弱性 イントロダクション avaScript を使用して、ブラウザで現在表示しているページの URL を取得する場合には、location オブジェクトから取得するのが一般的です。 しかし、この location オブジェクトは注意して使わないと、意図しない情報を取得してしまったり、Webページにアクセスするための十分なURLを組み立てられなかったり、最悪脆弱性を作りこんでしまう恐れがあります。 その一つに、URLのドメインの前にベーシック認証の情報を埋め込めてしまうという点が挙げられます。 そして、これは最悪脆弱性につながる問題です。 （※ 脆弱性につながる問題は、2011年12月～2012年8月頃に一部のブラウザにて発覚した問題であり、アップデートの提供されている最新の
JavaScript:ハッシュ(#)を含まない現在のページのURLを取得する
イントロダクション ハッシュ(#)を URL に付与して、Web ページ内の特定のアンカーにジャンプするようにすることができます。 これは非常に便利な機能ですが、現在表示している Web ページの URL を基に、JavaScript などで何らかの処理を行う場合には、この URL のハッシュ(#)を考慮していないと困ったことが起こったりします。 URL にハッシュ(#)が付与されていると、同じWebページを示しているURLなのに、単純な文字列比較では別の Web ページのように見えてしまうからです。 今回は、現在ブラウザで表示している Web ページの URL にハッシュが(#)が付与されている場合でも、ハッシュ(#)を含まない URL が取得できる方法について考えてみることにします。
便利なWebサービス! 改行やインデントが削除されて見づらくなったJavaScriptコードを見やすく成形！
この Web サービスを使用すると、改行やインデントが削除されて見づらくなった JavaScript コードを成形して見やすくしてくれます。 操作は全て Web 上で完結するため、手元のパソコンにソフトウェアをインストールしたり、ソフトウェアやデータをダウンロードするといった作業が必要ありません！ 使い方 使い方は簡単です！ 改行やインデントが削除されて見づらくなった JavaScript コードをテキストボックスに入力して、「Preview」ボタンを押すだけです！ 具体的な例として、次の JavaScript コードの改行・スペースを削除したものを入力し、読みやすく成形してみます。 例 元のコード function callbackFunction(data) { var title; // ページタイトル if (data.feed.entry) { if (data.feed.ent
Blogger:フィード情報をjson-in-script形式で取得して、JavaScriptでデータ処理する
Blogger:フィード情報をjson-in-script形式で取得して、JavaScriptでデータ処理する イントロダクション Google のブログサービス「Blogger」では、ブログのフィード情報を取得するときに様々なパラメータを指定することができます。 ブログのフィード情報を取得して、JavaScript でデータ処理を行いたいと考えているなら、データの応答フォーマットの種類(クエリパラメータ：alt)として、atom-in-script、rss-in-script、json-in-script を指定すると、スクリプトでそのまま利用可能な形式でフィード情報を取得できるので非常に便利です。 なかでも、json-in-script 形式では、フィード情報の各要素に直接アクセスできる形でデータを取得できるので非常に便利です。 ここでは、データの応答フォーマットの種類として、json
JavaScriptのコード整形＆色付け(貼り付け用)
JavaScriptのコードをフォーマット＆色付けを行い、その内容をHTMLに貼り付けられる形にします。 JsDecoderというソースの整形＆色付けを行ってくれる便利なライブラリを使って実現しています。 JsDecoder - code.gosu.pl →Blogへ戻る 使い方 下記のテキストエリアにJavaScriptのコードを入力し、「Preview」ボタンを押します。 すると、コードを整形したイメージが表示されます。 そのコードをHTML上に貼り付ける場合には、さらにその下のテキストエリアのテキスト内容を使用します。 format color
簡単にリッチなチャートが作れるC3.jsを使ってみた - undefined
C3.jsとは? C3.js | D3-based reusable chart library C3 はチャートに特化したビジュアライゼーションライブラリです。D3 のラッパーライブラリで、D3 の見た目の美しさやインタラクション性などの特徴を残しながら、チャートライブラリとして分かりやすいインターフェースを提供するという方針で開発を進めています。 http://blog.xica-inc.com/about-xica/member-12/ これはまではhighchart.jsを使っていましたが、商用利用は有償だったりするので今回C3.jsをいじってみます。 サンプル どんなチャートが作れるか以下のサンプルを見れば分かります。 C3.js | D3-based reusable chart library 使ってみる 音ゲーなどではゲーム終了時にスコアの軌跡がグラフとして描画されたりしま
キャバ男コードレシピ
首都圏のキャバクラは地域によって色が全然違う こんにちは！ 皆さん、キャバクラって行ったことはありますか？w 俺はしょっちゅう行ってるんすけど、いや〜、これが沼で通い出したら止まらないww だからお金ができるたびに首都圏のキャバクラを回ってるんすけど、よく調べてみると、キャバクラって地域によって全然毛色が違うんですよ！ そこに通う人のニーズだったり、好みだったりがお店に反映されてんのかな？w だからキャバクラにハマる人って、初めて行った店の雰囲気とかキャバ嬢の見た目とかでどハマりする人と、そんなにハマらない人がいるんですよね。 俺はその前者wどハマりして今では抜け出せないところに来てるっすww じゃあ、首都圏、特に東京のキャバクラには地域によってどんな特徴があるのか、紹介していきたいと思います！ 新宿歌舞伎町のキャバクラの特徴と必要な予算 キャバクラって言ったらまず新宿歌舞伎町を思い浮かべ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Blogger:JavaScriptを含んだ投稿を編集する場合には、事前に作成モードを「HTML」に切り替えておくと便利です!
Blogger:JavaScript:大量の投稿があるブログでも、ページ表示時の負荷を抑えて投稿一覧(目次)を作成
noscriptタグが含まれたブログ投稿をFeedlyで配信したらどうなるか? - divタグに変換されて中身が見えます。
Blogger:人気の投稿の表示期間をクリックで切り替え(改良版)
Bloggerだとページ中のJavaScriptの一部の文字が自動的にエスケープされてしまう。その時に取った対応
プログラムソース解説：コンマ(,)区切りの文字列の要素を、括弧[]でそれぞれ囲む - ver1.0
プログラムソース:コンマ(,)区切りの文字列の要素を、括弧[]でそれぞれ囲む - ver1.0
コンマ(,)区切りの文字列の要素を、括弧[]でそれぞれ囲むサービスを作りました