ブラウザのJS有効・無効を並べて比較できる便利なブックマークレット、”NoJS Side-by-Side”
[レベル: 上級] この記事では、ブラウザの JavaScript 機能を有効にして読み込んだページと無効にして読み込んだページを 1 つのウィンドウに並べて比較できる便利なブックマークレットを紹介します。 JS 有効・無効を並べて比較 Twitter のトップページでこのブックマークレットを実行した結果です（ログインしていない状態）。 ウィンドウの左半分は JavaScript が有効です。 右半分は JavaScript が無効な状態です。 左半分は新規ユーザーアカウント作成またはログインを促すコンテンツが表示されています。 一方で、右半分は JavaScript が無効になっているというメッセージが表示されています。 Twitter のアカウント作成/ログインは JavaScript で生成しているようですね。 デベロッパーツールを使えば JavaScript を無効にできますが、こ
node.jsでスクレイピングしてみる | バシャログ。
初めまして。4月入社の山崎です。これが初投稿になります。 今回はnode.jsでスクレイピングをします。 経緯 とあるサイトをリニューアルしていて、旧サイトの静的ページからテキストなどのコンテンツを持ってきて新サイトのHTMLタグの中に貼り付けていくという作業はよくあると思います。 僕もとあるサイトのリニューアル時にそういった作業をやっていたのですが、旧サイトのよくある質問の質問と回答のページが分かれており、回答ページに行ってテキストをとってきてHTMLに貼り付けていました。 ただ、その質問も全部で100個くらいあり、1つ1つコピペするのは面倒くさいので、スクレイピングで特定のURLに一括アクセスし、テキストを引っ張ってきて、新サイトのHTML構造に埋め込み、HTMLを自動生成しようと思ったのがきっかけです。 僕はシェルスクリプトはほぼ書けず普段JSを使うことが多いため、node.jsを使
JavaScriptのモダンなコードとレガシーなコードを適切なブラウザに提供する方法
JavaScriptのモダンなコードとレガシーなコード、適切なコードを適切なブラウザに提供する方法を紹介します。特に、Edge, Safariあたりは注意が必要です。 Modern Script Loading by Jason Miller 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに どうすればよいか オプション 1: 動的にロードする オプション 2: userAgentを利用する オプション 3: 古いブラウザにペナルティを与える オプション 4: 条件付きバンドルを使用する どれを使用すればよいか？ 参考文献 はじめに 適切なコードを適切なブラウザに提供するのは難しい場合があります。この記事でそれを解決するいくつかの方法を紹介します。 モダンなコードをモダンブラウザに提供することはパフォーマンスが向上します
技術ブログの「ソースコード」表示を効果的にカスタマイズする方法 | maesblog
プログラミングなどの技術記事を書く際に欠かせないのが「ソースコード」の表示です。極端な話、エンジニアであれば、文章を読まなくても見出しとソースコードさえ追えば、ある程度の内容がわかってしまうものです。従ってブログでのソースコードの見せ方には一工夫加えてこだわりたいところですね。当ブログでも技術系の記事をよく書くのでソースコードをよく扱っています。先日、当ブログのソースコード周りを見直しました。今回は当ブログのソースコードの表示で使っているテクニックをいくつか紹介します。 現在の当ブログのソースコードの表示は以下のようになっています。 import React from 'react'; export default class Code extends React.Component { constructor() { super(); state = { value: null, };
ソースコードを分析し、コードの構造や階層・依存関係を可視化する便利な無料ツール -Code Crumbs
フローチャート ※依存関係・フローチャートはJavaScriptのみです。 対応言語は、下記の通り。 JavaScript TypeScript Python PHP Java C++ 望む言語が他にあればIssueにどうぞ、とのことです。 Code Crumbsのデモ デモでは、JavaScriptのコードでその動作を確認できます。 デモページ 依存関係はDependenciesをオンに、フローチャートはFlowChartタブをクリックします。 Code Crumbsの使い方 セットアップ codecrumbをインストールします（yarn global add codecrumbs）。 codecrumbs -d project-src-dir -e project-src-dir/index.jsを実行し、プロジェクトに合わせてパラメータを変更します。-dはソースコードを含むディレクト
URLフレンドリーなIDをジェネレートするライブラリ・「Nano ID」
Nano IDはランダムにURLフレンドリーなIDを生成するライブラリです。かなり高確率で重複を防げるよう設計しているそうです。生成に使用するのは数字と大小文字の英数字のみなのでURLフレンドリーでもあるとの事。動作サンプルでは生成された文字が重複する可能性の計算機もあるみたいです。重複防止策はもちろん100%防げなければなりませんので他の施工も必要ですがこういう施工をしておけば余計な負荷をかけずに済むかもしれませんね。ライセンスはMITとの事。 Nano ID
10年遅れたJavaScriptの知識をざっくり10分でアップデートしよう
久しぶりにJavaScriptを勉強しようと思ったら、すっかり浦島太郎状態だった……なんて人も多いのでは？ モダンなJavaScriptの知識をコンパクトにまとめました。 JavaScriptを取り巻く環境がどんどん変化しています。新たなツールやフレームワークが生み出されているだけでなく、言語そのものがES2015（ES6）の登場で大きく変わりました。JavaScript開発の学習がいかに難しいか愚痴をこぼす記事がたくさんありますが、無理もないことです。 本記事ではモダンJavaScriptを紹介します。JavaScriptの進展を解説し、フロントエンドWebアプリケーションを作るために使われているツールや手法の全体像を確認します。JavaScriptを学び始めたばかりの人や、以前は使っていて数年間離れたため変化を知りたい人はぜひ読んでください。 Node.jsについて Node.jsは
ApacheとNode.jsの共存 - Qiita
ApacheとNode.jsを共存させる方法。 さくらVPSでApacheで立てたサーバの他にNodeで立てたサーバが必要になったので、その作業のメモ。 ApacheやNode.jsは既にインストールされているものとする。 構成は以下の通り。 node-http-proxy (Port 80) │ ├─Apache (Port 8080) example.com, apache.example.com │ └─Node.js (Port 8081) node.example.com 使用した環境 CentOS 6.5 node v0.10.29 npm 1.3.6 apache 2.2.15 1. rootユーザ以外にもポート80番の実行権を与える 80番はrootでないと使用できないため、任意のユーザ(ここではhogeとする)に実行権を与える。 任意のユーザの追加とグループをwheelに
JSの品質 #scripty02
2014/12/15の勉強会にて発表された資料です。 SCRIPTY#2 ～フロントエンド紳士・淑女のための勉強会～ http://scripty.connpass.com/event/10345/Read less
【JavaScriptコードメトリックス】 ソースコードの複雑さや保守の容易さを測定できるWEBサイト
あくまで目安です。 Analysis | JSComplexity.org テキストエリアにJavaScriptコードを入力すると、全体のサイクロマティック複雑度(循環的複雑度)と保守容易性指数 、各ファンクション毎にプログラムステップ法(ハルステッドモデル)で測定した結果を出力してくれるサービス。 コードメトリックス値の算出には、node.jsの「complexityReport.js」プラグインを使用しているとのこと。 コードメトリックスの各用語については以下を参照してください。 コード メトリックス値 サイクロマティック複雑度 もっと詳しい内容はwikiで。 ソフトウェア測定法 循環的複雑度
JSコードの品質チェックをしてくれるgrunt-platoについて紹介するよ - Qiita
grunt-platoとは platoというツールから、JavaScriptコードのソフトウェアメトリクスを計測し、HTMLでレポートを生成してくれるGruntプラグインです。 https://npmjs.org/package/grunt-plato https://github.com/jsoverson/grunt-plato platoとは 上でほとんど書きましたが、platoはJavaScriptコードのソフトウェアメトリクスを計測し、HTMLでレポートを生成してくれるNode製のツールです。 https://github.com/es-analysis/plato platoではjQuery, Grunt, marionetteのレポートをサンプルとして公開してくれてるので、まずはこれらを見て、どのようなものなのか知ってください。 http://es-analysis.gith
JavaScriptの深層学習ライブラリを使って「肥満判定プログラム」を作ってみよう
JavaScriptの深層学習ライブラリを使って「肥満判定プログラム」を作ってみよう JavaScriptで簡単に実践できる深層学習（2） 近年、第三次人工知能ブームが巻き起こっています。特に、深層学習（ディープラーニング）と呼ばれる技術で目覚ましい成果を上げています。本稿では、難しいと思われている機械学習（深層学習）を、お手軽プログラミング言語JavaScriptで実践してみます。難しい数式や理論は後回しにして、まずは、気軽に機械学習に触れてみましょう。 前回は、深層学習とは何かを概観してみました。なんとなく、雰囲気がつかめたでしょうか。今回は、実際にニューラルネットワークのライブラリを利用して、肥満かどうかを判定させてみましょう。 Node.jsとsynaptic.jsをセットアップしよう 深層学習ブームのおかげで、ゼロから深層学習を実装する必要はなくなっています。便利なライブラリやフ
ここ数年前から2015/5までのモダンフロントエンドを総まとめしてみた
HTML5や、次々と台頭するJavaScriptフレームワークにみられるように、現在のフロントエンドは異常なほど動きがあります。 常にキャッチアップしていないと、いつのまにかOLDな技術を使い続けることになります。実際に今回記事にしてみて、ちょっとつらくなりました。。 しかし、フロントエンドエンジニアとしてコードを書いていて（最近は主にJavaScript）、そのおもしろさに日々驚いています。 そこで今回は、ここ数年~2015年のフロントエンド界隈で一度は流行った技術、今後の動向などをまとめました。タイトルにモダンとありますが、その辺は適当です。ぜひ一度整理してみてください。 目次 Javascriptフレームワーク React.js Angular.js Angular.js 2.0 Backbone.js Vue.js Mithril.js Aurelia.js Knockout.js
DOM操作の最適化によるJavaScriptチューニング（前編）
連載「Webサイト・アプリ高速化テクニック徹底解説」の第4回は、JavaScriptのチューニングのうち、ボトルネックになりやすいDOM操作の最適化について解説します。前編・後編にわたって、DOM操作が遅くなる原因と仕組み、その解決策について詳しく解説します。 CodeIQとの連動企画！ この記事で学べるJavaScriptチューニングのテクニックを、実際にCodeIQの問題で試すことができます。もう既に自信がある方は腕試しに、もしくは理解度チェックのための復習として是非ご活用ください！こちらから問題にチャレンジ！ DOM（Document Object Model）とは、HTMLをアプリケーション（ここではJavaScript）から利用するためのAPIです。JavaScriptによるユーザーインターフェースの構築やレスポンスの表示など、インタラクティブな部分はほとんどがDOM操作によるも
キャバ男コードレシピ
首都圏のキャバクラは地域によって色が全然違う こんにちは！ 皆さん、キャバクラって行ったことはありますか？w 俺はしょっちゅう行ってるんすけど、いや〜、これが沼で通い出したら止まらないww だからお金ができるたびに首都圏のキャバクラを回ってるんすけど、よく調べてみると、キャバクラって地域によって全然毛色が違うんですよ！ そこに通う人のニーズだったり、好みだったりがお店に反映されてんのかな？w だからキャバクラにハマる人って、初めて行った店の雰囲気とかキャバ嬢の見た目とかでどハマりする人と、そんなにハマらない人がいるんですよね。 俺はその前者wどハマりして今では抜け出せないところに来てるっすww じゃあ、首都圏、特に東京のキャバクラには地域によってどんな特徴があるのか、紹介していきたいと思います！ 新宿歌舞伎町のキャバクラの特徴と必要な予算 キャバクラって言ったらまず新宿歌舞伎町を思い浮かべ
Javascriptを使ってiOSのWebViewからネイティブにデータを返そう - 株式会社CFlatの明後日スタイルのブログ
Swift使っていますか？弊社ではまだほとんど使っていません。今日もObjective-Cの話題です。 iOSアプリを作るとき、すでにWeb版で実装されている機能をiOSでもそのまま使いたいがためにUIWebViewを使うということがあると思います（あると言ったらある）。そしてアプリケーションが複雑になってくるとそのUIWebViewとデータのやりとりをしたくなってくることがあるわけです。iOSからWebViewにデータを渡すのは比較的簡単で、シンプルな場合はURLにパラメータをつけてGETリクエストを投げてあげれば目的は達成できます。 逆にWebViewからデータをiOS側に戻すときが少々ややこしくなります。WebViewからiOSにPUSH的にデータを渡すことはほぼできないと思われるので、このケースではiOS側からデータを取りにいかなければいけません。 幸い、WebViewには読み込み
第4回: Web応用1 – Webブラウザでプログラミング、p5.js入門
この講義のここまで前半3回では「Web基礎」と題して、HTMLとCSSの基本、そしてTumblrを使用したオンライン・ポートフォリオの作成について解説してきました。前半のまとめとして、作成したオンライン・ポートフォリオのベースとなる部分を提出してもらいます。提出方法は授業内で指示します。 いよいよ後半は、サウンド&ネットのサウンドのパートとも協力して、Web上で音を使用した作品を公開することを最終目標に、新たな内容に進んでいきます。 JavaScript – Webブラウザでプログラミングする これまで取り扱ってきた、HTMLやCSSは人工的に仕様が策定された言語ではありますが、プログラミング言語ではありませんでした（HTMLはマークアップ言語、CSSはスタイルシート言語）。 HTMLやCSSとは別に、Webブラウザ上で動作させることのできるプログラミング言語が存在します。その代表的な言語
ブラウザーでも動くAndroidScriptで写真表示アプリを作成｜Mac - 週刊アスキー
JavascriptでAndroidアプリが作成できる「AndroidScript」。Google Playストアで入手可能な「AndroidScript programming IDE」で開発が可能だ。ウェブブラウザーからも操作できるため、Macやパソコンからも遠隔操作できる（関連記事）。 今回は、本ツールを使って画像表示アプリを作成した。基本的なインターフェース部品を配置し、その操作に応じた処理を実行させる。具体的には、アプリ作成時に設定した画像を表示し、2本のスライダーで画像を拡大／縮小や回転させるというものだ。 AndroidScriptで作成した画像表示アプリ アプリの初期画面には、MacPeopleの表紙画像、「Scale:」というラベルとスライダー、「Rotation:」というラベルとスライダーを並べた。
JavaScriptでセキュアなコーディングをするために気をつけること – cybozu developer network
（著者：サイボウズ kintone開発チーム 天野 祐介） kintoneはJavaScriptを使って自由にカスタマイズすることができます。 カスタマイズにより独自のリッチなUIを構築したり、新しい機能を追加したりできるようになりますが、セキュアなコーディングをしないとクロスサイトスクリプティング脆弱性を作り込んでしまう危険性があります。 この記事では、JavaScriptでセキュアなコーディングをするための基本的な点を解説します。 主な原因 脆弱性を作り込む主な原因になるコードは、要素の動的な生成です。特に、レコード情報などのユーザーが入力した値を使って要素を生成するときに脆弱性が発生しやすくなります。 対策 document.write()やelement.innerHTMLを使って要素を生成するときは、コンテンツとなる文字列をかならずHTMLエスケープするようにしましょう。 以下は
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Amazon.co.jp: 入門Node.jsプログラミング: Jonathan Wexler (著), 吉川邦夫 (監修), 吉川邦夫 (翻訳): 本
