2019年前半の「JavaScriptをちゃんとやるための地図」（追記あり）｜TechRacho by BPS株式会社
こんにちは、hachi8833です。BPS社内勉強会の発表を元に、社内JavaScript勢の皆さまのお力を得て記事を書きました。 目的 JavaScriptをたまにしか使わない私ですが、それもあってなおさら書くときに迷いに迷います。 ネットの情報多すぎ、動き激しすぎ、選り分けるにしても指針が欲しい 古いコードや毒入りコードを拾って食あたりや、泥舟に乗って沈没するのを少しでも避けたい 最初の一歩をどこから踏み出すかの手がかりが欲しい そういったわけで、2019年前半と区切って、一度JavaScript世界について門外漢ならではの「大きな絵」が欲しかったのでした。ここに書いたことの中には来年には古くなっているものあるかもしれません。 ただ、社内のJS勢の話を総合すると、JavaScript世界は数年前に比べるとかなり落ち着きつつあるとのことです。この機会にということで、主に自分のために現在の
独学の人には特にオススメ！JavaScriptの基礎が一通り、14分ちょいで学べるチュートリアル
コンソール まずは、JavaScriptのコンソールを使用して、「Hello World!」を表示します。 コンソールの表示方法 Edge F12 Chrome command+option+J (win: ctrl+shift+J) Firefox command+option+K (win: ctrl+shift+K) Safari command+option+C Safariの場合はショートカットが他のアプリ(Alfred)に使用されている場合があるので、環境設定から「メニューバーに開発メニューを表示」をチェックすると、メニューバーからコンソールを表示できます。
Webブラウザの操作をJavaScriptで自動化。Headless Chromeのフレームワーク「Puppeteer」がバージョン1.0に到達。ChromeのDevToolsチームが開発
UIを持たずスクリプトから操作可能なWebブラウザのHeadless Chromeを利用するためのフレームワーク「Puppeteer」がバージョン1.0に到達した。Webアプリケーションの自動テストなどに利用可能だ。 GoogleのWebブラウザ「Chrome」は、ユーザーインターフェイスを持たずコマンドラインやリモートデバッグ機能を通じてWebブラウザを操作できる「Headless Chrome」機能を備えています。この機能は2017年6月にリリースされた「Chrome 59」から実現されたものです。 Headless Chromeを利用すると人間がWebブラウザをマウスやキーボードで操作することなく、プログラムでHeadless Chromeを起動し、特定のWebページを読み込み、画面キャプチャの取得や、指定された場所をクリックし、値を入力し結果を取得する、といった操作を自動的に行わせ
ウェブページを1秒台で表示させる原理と方法 | Philosophy Guides
可能な限り最新の情報を反映していますが、追いつけていないこともあります。本サイトに採用していても、記事に反映できていない設定もあります。ページのソースを読んでいただくと、参考になる箇所があるかもしれません。 ウェブページの高速化に関するテクニックは、ネットで検索すれば簡単に見つけることができます。優れた情報も数多くありますが、｢CSSとJavaScriptはminify（ミニファイ）しておけばOK！」のような都市伝説も少なくありません。 そこで、ここでは本サイトのデザインリニューアル時に施した対策をもとに、一歩進んだウェブページの高速化の方法と、それを支える原理について、できる限り分かりやすく説明したいと思います。フロントエンジニアやデザイナーの方からすれば「んなもん知っとるわ！」な情報なのかもしれませんが、都市伝説を駆逐すべく、私なりの仕方で解説（≒加勢）したいと思います。 初めに結果を
HTTP Headers という 5万人が使っている Chrome 拡張のマルウェア疑惑。セッション盗まれて BTC も盗まれそうになった話。 - clock-up-blog
疑惑どころか 99.99% くらい黒な話。 （後記：セッション盗まれたと思ってたけど、よくよく考え直してみると生パスワードごと盗まれてる可能性もあるしやばい） 追記：続報 11月3日 今回指摘した HTTP Headers 以外にも、「Tab Manager」「Give Me CRX」「Live HTTP Headers」等で同様（？）の問題が報告されています。第三者が元の作者からソフトウェア権利を買い取って悪用する、というケースが割とある模様（？）。皆さま情報ありがとうございます。 11月4日 Zaif については、「不正な Chrome 拡張」と「スクリプトから保護されていなかったクッキー」のコンボによりセッションが盗まれていた可能性あり。 Zaif のセッション情報が盗まれた原因のひとつについて。JavaScript からクッキー値を取得させない方法。 - clock-up-blog
とほほのBootstrap 3入門 - とほほのWWW入門
このページは 「Bootstrap 3」について説明しています。Bootstrap 4 については、「Bootstrap 4入門」を参照してください。 Bootstrap は、スマートフォンなどのモバイル端末にも対応し、レスポンシブデザインを採用した HTML, CSS, JavaScript フレームワークです。 Twitter 社で開発され、最初は「Twitter Bootstrap」と呼ばれていましたが、現在は「Bootstrap」となりました。 ライセンスは MIT License で、商用利用も可能です。 現時点(2018年5月6日)の最新バージョンは 4.1.1 です。 Bootstrap 2 と Bootstrap 3 以降では一部互換性の無い機能があります。 2018年1月に Bootstrap 4 も正式リリースされました。
改行削除するくらいなら gzip したらいいじゃない
CSS や JavaScript ファイルなどを gzip 圧縮して転送量の削減や Web サイト表示速度の向上を実現する方法を解説。既存 Web サイトのソースには一切手を加えない方法でまとめています。おまけでキャッシュ関連の記述もあり。 いや、1バイトの無駄もゆるせねぇんだよとか、難読化したいとかなら別にやればいいんですけど、CSS や JavaScript ファイルの改行やスペースを削除しただけでファイル容量圧縮、読み込み速ーい的なこという人がいるので今さらですが書いてみます。すでに色々なところで書かれてるのでかぶるのは承知の上で。 改行や無駄なスペースなどを削除すること自体が悪いと言ってるわけではありませんのでその辺は誤解ないようにお願いします。ただ、gzip 使って圧縮するのに比べたら、改行削除して削れるファイルサイズなんて微々たるものです。もちろん、両方やれば最大限ファイルサイ
初心者でも２週間でiPhoneアプリが作れちゃうTitanium Mobileがすごい件 | 株式会社インフィニットループ技術ブログ
初心者でも２週間でiPhoneアプリが作れちゃうTitanium Mobileがすごい件 どうもこんにちは、フレッシュさに定評のない新入社員のtek_kocです。 初めてのお仕事として「Titanium Mobileでアプリを試しにつくってみる」というのを担当していました。 JavaScriptはあまり使ったことがないですし、そもそもMacもほとんど触ったことがなかったので苦戦するかと思いましたが、２週間ほどでとりあえず形になるところまでできました。Titanium Mobileすごいです。 ということで、Titanium Mobileで試しにアプリ開発をしてみた感想を書いてみました。 そもそもTitanium Mobileとは？ Titanium Mobileとは、Appcelerator社によるスマートフォン対応アプリケーションの開発環境です。 iPhoneやiPad、Androidを
セキュリティ情報 - iモードIDを用いた「かんたんログイン」のDNS Rebinding脆弱性
iモードIDを用いた「かんたんログイン」のDNS Rebinding脆弱性 HASHコンサルティング株式会社 公開日:2009年11月24日 概要 iモードブラウザ2.0のJavaScriptとDNS Rebinding問題の組み合わせにより、iモードIDを利用した認証機能（以下かんたんログイン）に対する不正アクセスが可能となる場合があることを確認したので報告する。危険度の高い攻撃手法であるので、サイト運営者には至急の対策を推奨する。 背景携帯電話のかんたんログインとは、ケータイブラウザ（たとえばiモードブラウザ）に用意された契約者固有IDを利用した簡易的な認証であり、ユーザがIDやパスワードを入力しなくても認証が可能となる。iモードIDは、NTTドコモの提供する契約者固有IDの一種で、URLにguid=ONというクエリストリングを含めることにより、端末固有の7桁のIDがWebサーバに送
bookreader.js
bookreader.jsは、長文を縦スクロールではなく、横スクロールで表示し読みやすくするJavaScriptライブラリです。 →プロジェクトのホーム (Google Code) - New!! →ダウンロード(ver 0.4.6) - 2009/04/18公開 ※ダウンロードの詳細については、こちらのページをご覧下さい。 まずは、このページで体験してみて下さい。キーボードの[→]/[←]キーが、「進む」あるいは「戻る」に対応します。画面上に表示される、半透明の▶/◀ボタンをクリックしてもOKです。使い方の詳細は「ヘルプ」を参照ください。 次期バージョンの開発状況 幸いにしてさまざまな方からフィードバックをいただきました。ありがとうございます。それを元に機能の絞り込みとWEBサイトへの「組込み方」について検討を行っています。まだ、実装の方針が定まった、という段階ですが次期0.8.x系のサ
[JS]わずか14KBのJavaScriptで動作するスーパーマリオ
nihilogicのエントリーから、14KBのJavaScriptで動作するスーパーマリオを紹介します。 Super Mario in 14kb Javascript デモページ マリオを操作するには、矢印キーで行います。 サイトでは上記のノーマルサイズ＋音無し版の他に、音有り版・ダブルサイズ版が公開されています。 スーパーマリオの表示が崩れる時は、「西ヨーロッパ言語(ISO)」にすると正常に表示されます。 スーパーマリオ：ノーマル版 スーパーマリオ：ノーマル＋音付き版 スーパーマリオ：ダブルサイズ版 スーパーマリオ：ダブルサイズ＋音付き版
JavaScript でタブ切り替え UI を実装する | WWW WATCH
先日、タブ切り換えタイプの UI を、JavaScript と CSS で簡単に実装する仕組みを探していて （他力本願）、ちょうど求めていたスクリプトが Arc... 先日、タブ切り換えタイプの UI を、JavaScript と CSS で簡単に実装する仕組みを探していて （他力本願）、ちょうど求めていたスクリプトが Archiva さんで紹介されていたので使わせていただきました。 時間がなかったので、できれば自分では書きたくないなぁ、なんかいいの公開している人いないかな～なんて思っていたのですが、おかげ様で助かりました。ということで、お礼を兼ねて紹介させていただきます。 タブ切替をサクッと実装 ： Archiva タブ切り換えを実装する JavaScript ライブラリやサンプルソースはいくつか存在しますが、私が求めていたのは JavaScript が OFF の時でもページ内リンクと
エブログ JavaScript で形態素解析もどき
JavaScript で形態素解析もどき JavaScript で形態素解析のようなものを。 totonの日記 - すべての漢字を取り出す正規表現 「すべての漢字を取り出す正規表現」をPHPで試す:phpspot開発日誌 これらの記事を参考にして JavaScript で漢字、ひらがな、カタカナ、英数字に区切ることをしています。 ただ、文字コード的にちゃんとできるのか、よくわかりません。Seesaa はShift_jis なのでおかしくなる場合もあるかも知れないです。 下のテキストエリアに文章を入力して解析ボタンを押すと解析結果が表示されます。解析というか、単純に改行で区切っているだけですが。 サンプルは青空文庫の太宰治 走れメロスの冒頭部分。 メロスは激怒した。必ず、かの邪智暴虐（じゃちぼうぎゃく）の王を除かなければならぬと決意した。メロスには政治がわからぬ。メロスは、村の牧人である。笛
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
テクノロジー : 日経電子版
CSS Spriteを活用しよう - DesignWalker
2007年度web制作者の為のまとめ再構築30選*ホームページを作る人のネタ帳