WordPressをやめ、静的サイトジェネレーターで高速化した話 - ICS MEDIA
ICS MEDIAは2019年4月にリニューアルしました。シンプルでモダンなデザインへと見栄えは変わり、フロントエンドの最新技術によって爆速なサイトへと生まれ変わっています。 技術的におもしろいポイントは、WordPressワード・プレスを廃止したことです。 この記事では、オウンドメディアとしてWordPressをやめた理由、代用技術の選定で苦労したことを紹介します。 リニューアル前後の違い リニューアルによってどのくらい改善したか、定量的な結果を紹介します。ウェブサイトの性能を示す指標としてLighthouse（Google ChromeのデベロッパーツールのAuditsタブ）というツールがあります。 Lighthouseの採点で、リニューアル前は80点ほどだったのが、ほぼ満点のスコアをたたき出せるようになりました。SEOやアクセシビリティの点数も満点です。 動画でもご覧ください。リニュ
Web Share APIでページをシェアする
現代において、SNSやアプリへのページシェアは必須とも言える機能です。例えばこのブログの記事も、記事の下部に多数のシェアボタンが設置されています。 Web Share APIはそういったページシェアをブラウザ上で実現するAPIです。今までは各サービス独自のシェアボタンを設置していましたが、Web Share APIを使うことで、統一的な手法でシェアができるようになります。 Web Share APIについて Web Share APIはページをシェアするためのAPIで、WICGが仕様を定めています。詳しい仕様は以下のURLになります： https://wicg.github.io/web-share/ 対応ブラウザは現在のところAndroid版Chrome61のみです。 簡単な使い方 Web Share APIは非常に単純なAPIです。以下に最も簡単な例を示します： // ボタンを作ってb
LINE Engineer Insights vol.3「UITエンジニアに聞く、最新のフロントエンド開発の裏側やアプローチ手法」
LINE株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。 LINEヤフー Tech Blog LINEで働くエンジニアに色々と話を聞いていく「LINE Engineer Insights」の第3弾です。当コーナーはインタビュアーにLINEで働くエンジニア @tokuhirom を迎え、エンジニア同士でざっくばらんにお話を伺っていくというものです。今回も、LINEのエンジニアは一体どんな人達なのか、その内面に迫っていきたいと思います。 第3弾は、開発1センター UIT室所属の喜多に、最新のフロントエンド開発の裏側やアプローチ手法などについて聞いてきました。あらかじめ説明しておきますと、UIT は User Interface Technology の略で、HTML/CSS/JavaScriptによる LINE のウェブフ
TwitterはScalaを捨ててNode.jsに移ったそうです。 - 望月いちろうのREADME.md
2017 - 02 - 24 TwitterはScalaを捨ててNode.jsに移ったそうです。 Node.js Scala Tweet 世界で最も大きなトラフィックを捌いているサービスの１つであるTwitterはそのバックエンドをScalaで独自開発したフレームワーク(Finagle)を採用していましたが、ここ数ヶ月の間にこれをNode.js(Express)に置き換えたそうです。 以下はTwitterのエンジニアであるNicolas Gallagherさんのツィートより github.com Today we moved all of Twitter's mobile web traffic (that's like, a lot) to our new web stack – Node.js, Express, React PWA. — Nicolas (@necolas) Febr
PhantomJS + MochaでクライアントサイドJavaScriptのテストをしよう - undefined
ブラウザゲームとかを作っているとなかなかテストが難しくどうしたらいいんだろうと調べていたらPhantomJS + Mochaという組み合わせを見つけたので勉強してみました。 PhantomJSとは？ ブラウザです。JavaScriptのAPIを通じて制御できるヘッドレス（画面のない）Webkitブラウザらしいです。 まだ試せてませんがCanvasやSVGにも対応してるっぽい。 インストール http://phantomjs.org/download.htmlよりダウンロードしPATHを通すことで使用できます。 Macでhomebrewが入って入れば以下でOK。 $ brew update && brew install phantomjs PhantomJS準備運動 まずは以下のようなhello.jsを用意します。 ・hello.js var page = require('webpage
BlockAdBlock - アドブロックが使われているかどうか検知
最近広告ブロックが話題になっています。個人的にはルールが変わったのだとみるべきだと思っており、かつての地図業界におけるGoogleマップ、ガラケーとスマートフォン、雑誌、新聞、テレビ業界などと変わらないと感じてはいます。 とはいえ、配信側のサービスも広告ブロックを甘んじて受け入れる必要もありません。対抗策として考えられるのがBlockAdBlockです。 BlockAdBlockの使い方 BlockAdBlockはAdBlockが入っているかどうかを検知できるライブラリとなっています。AdBlockが有効な状態だと赤くなります。 使っていなければ緑になります。 検出できるブラウザは限定されるようですが、AdBlockが入っていると分かればコンテンツを配信しないといったような手段はとれるかと思います。 BlockAdBlockはJavaScript製のオープンソース・ソフトウェアです。 Bl
とほほのAngularJS入門 - とほほのWWW入門
AngularJS と Angular は別物です。バージョン 1.x を AngularJS、2.0 以降を Angular と呼びますが、根本から作り直しているので互換性はありません。AngularJS は 1.8.x で開発を停止しており、2021年12月31日にサポートも停止されました。現在は拡張LTS (XLTS) のフェーズにはいっています。(2022/1/2追記) 目次 AngularJSとは？ サンプル フィルタ モジュールとコントローラ リスト リストフィルタ アクション フォームバリデーション もう少し複雑なサンプル {{...}} をそのまま表示するには リンク AngularJSとは？ AngularJS は、下記の様な特徴を持つ JavaScript フレームワークのひとつです。 Google社とコミュニティが開発するJavaScriptフレームワーク ライセンス
Web上で画像の範囲を指定できる·imgAreaSelect MOONGIFT
imgAreaSelectは画像の切り抜きに役立つ範囲選択機能を提供するjQueryライブラリです。 ユーザにアップロードされた画像の一部を切り出してアイコンに使うと言ったような操作はよくあります。そんなUIをjQueryを使って実現するのがimgAreaSelectです。 一例です。 選択されていない場所はグレーになるので分かりやすいです。 各ポイントの数値が取れます。 imgAreaSelectではユーザが縦、横の長さを自由に変更できる他、比率固定でサイズを変更したり、あらかじめ決められた場所に選択範囲を置くと言った指定ができます。切り抜く箇所や大きさの値が受け取れるので、後はサーバサイドで切り抜き処理を行えば良いでしょう。 imgAreaSelectはjQuery/JavaScript製のオープンソース・ソフトウェア（GPL/MIT License）です。 MOONGIFTはこう見る
JSONLint - The JSON Validator
To format and validate your JSON, just copy + paste it below: About the JSONLint EditorJSONLint is a validator and reformatter for JSON, a lightweight data-interchange format. Copy and paste, directly type, or input a URL in the editor above and let JSONLint tidy and validate your messy JSON code. What Is JSON?JSON (pronounced as Jason), stands for "JavaScript Object Notation," is a human-readable
jsdo.it
We’re getting things ready Loading your experience… This won’t take long.
ページの一番下まで来たらイベントを発生させる(TwitterのTLみたいに) - Study03.net 対シンバシ専用
Twitterみたいに、ページの一番下まできたら、次のページを読み込む(ページング)みたいなのって、割とメジャーだから、どっかにあるかと思ったけど、(情弱で探せなくて)割となかったので、自分がやった方法というかプラギン(GitHub - jimyi/jquery_bottom: jQuery plugin to add a “bottom” event that will be triggered when the user has scrolled to the bottom or within proximity to the bottom of an element.)の使い方を書いておく。 1. そもそも「一番下に来た」とかいうイベントはない 社内のSkypeでJSに詳しい人に聞いてみて分かったことは、そもそも JS or jQury にそんなイベントはない。という事、だから画像が
JavaScript MVCフレームワークはすでに十種類以上、その比較や最新情報などのまとめ
グーグルが開発したJavaScript MVCフレームワーク「AngularJS」を紹介した1つ前の記事の反応が予想以上に大きく、1日たたずにブックマークが500以上もつきました。 本記事では、AngularJS以外にもすでにたくさん存在するJavaScript MVCフレームワークに関する情報をまとめて紹介したいと思います。 JavaScript MVCフレームワークの比較記事 既存のJavaScript MVCフレームワークを比較した記事が「The Top 10 Javascript MVC Frameworks Reviewed」です。Top10と書いてありますが、12種類のフレームワークの比較です。これは公開当時は10種類だったものが、その後11種類になり、今回のAngularJSの公開で12種類になったためです。 上記のような比較表を載せた上で、12種類すべての利点と欠点を説明し
【リクナビNEXT】で転職！
現在、あなたがお使いのブラウザは、Cookie（クッキー）をブロックする設定になっています。 リクナビＮＥＸＴでは、個人情報保護と利便性の観点からクッキーの使用をお願いしています（個人情報収集等の目的では使用しておりません）。お手数ですが、ブラウザの設定を変更してください。
blog.cuegraphix.com - jQueryのFlexigridを使ってみた(2) データ成形編
前回 Flexigrid のパラメータのメモを残しましたが、表をHTMLに表示する際、データベースのデータをそのまま表示するのではなく、表示用に変換させてから表示するという場合が少なくありません。 たとえば表に画像を表示したり、詳細ページのリンクを張ったりと。 出力する JSON なり XML 自体を変換して出力してやれば済む話なんですが、タグをそのまま出力するのでエスケープ処理をさせたりしなくちゃならない。 なんとなくここまできたら表示部は表示部で分離させたい！となりました。 で、いろいろ模索してると見つけました！ パラメータに preProcess というメソッドを指定することができ、データ取得時の表示直前に全読み込みデータを引数として渡されます。 たとえば下記のようなデータを読み込むとします。 { page: 1, total: 5, rows: [ {id:'1',cell:['1
TwitterやFacebookのように一番下までスクロールしたら自動的にコンテンツを表示する「jQuery.Bottomプラグイン」
TwitterのタイムラインやFacebookのニュースフィードように、ページの一番下までスクロールしたらコンテンツを自動的に表示する「jQuery.Bottomプラグイン」を紹介します。 １．サンプル jQuery.Bottomプラグインにはデモページが用意されていますが、いまいちなのでサンプルページを作りました。 jQuery.Bottomプラグインサンプル ページの一番下までスクロールすると自動的にコンテンツを表示します。 なお、最初に表示した状態でコンテンツがすべて表示されてしまっているとそもそも動作しないので注意してください。 ２．プラグインの機能 jQuery.Bottomプラグインは「bottom」イベントを登録するためのものです。このイベントを利用してページの一番下までスクロールすれば、bottomイベントが発生します。 ３．プラグインのダウンロード githubのjQue
IEがajaxキャッシュするのを抑制 - はらぐろブログラマン
IEはXmlHttpRequestでキャッシュする問題がありますが、 jQueryのajaxメソッドも同じ問題が起きます。 でもさすがjQuery。対処法は用意されている。 JavaScriptの最初の方で以下のメソッドを1回呼ぶだけ。 $.ajaxSetup({ cache: false });
jQueryプラグインの作り方｜jQuery Tips｜Ajax｜PHP & JavaScript Room
jquery.basic.js(function($){ /* プラグイン名（myplugin）を指定 */ /* 関数にオプション変数を渡す */ $.fn.myplugin=function(config){ /* 引数の初期値を設定（カンマ区切り） */ var defaults={ defColor:"#ff6699", defPadding:5 } var options=$.extend(defaults, config); /* 一致した要素上で繰り返す */ return this.each(function(i){ /* プラグイン内での現在の要素はthisで参照 */ $(this).text(this.tagName+"["+i+"]").css({"color":defaults.defColor,"padding":defaults.defPadding}); }
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
http://www.ctrlshift.net/jsonprettyprinter/
DataTables | Javascript table library
http://grantgalitz.org/get_the_hell_out/LegendOfZelda_Links_Awakening/