UIデザインとWeb開発に関するトピックのライター。個人ポートフォリオやWeb上のいたるところで彼の記事を見つけることができます。最新のアップデートなどを見るにはTwitterをフォローしてください。 Googleで検索すると、Webサイトのパフォーマンス改善のための便利なツールが数多く見つかります。 サイトの画像最適化から独自のCDN設定にいたるまで、さまざまです。 しかし、デザイナーの中でコード最適化について考える人はほとんどいません。 コード最適化とは、総HTTPリクエスト数を減らしたり、ファイルを軽量化したり、表示スピードアップのために最適なカスタムフレームワークに切り替えることを意味します。 最新のBootstrap v4は素晴らしいデザインですが、残念ながら最も重いフレームワークの１つです。 そこで今回の記事では、重いBootstrapの代わりに軽いWebフレームワークを厳選し

Webパフォーマンス向上施策のために、今更ながら超速本1を読んだので、今までの自分の知見と合わせてまとめてみます。 なるべく柔らかく、**改善施策ってまず何をどうすればいいの？**という疑問を持った人に向けて書いています。 ▪️格言 そもそもWebは速い。遅くしているのは我々です。大抵は技術の問題ではなくて、人の問題。 引用元： テクニックではなく、今、本気で取り組むべきWebパフォーマンス （html5jパフォーマンス部 部長 竹洞さん） 心得 パフォーマンス向上に対する施策は大別すると以下の２通り 軽量化 （単純にやりとりするデータ容量を小さくすること） 圧縮 削除 最適化 （その時に最も適している実装・実行をとること） 経路・順番の変更 非同期 もっとも遅くしている原因を探して、それを対策するのが原則。「対効果」が絶対的正義である。手段から入るのは愚策。まず先に原因を知ることが重要。

2015/09/19 (更新日: 2018/07/18) プラグインなしでWordPressサイトを高速化する方法【JS・CSS・キャッシュ設定】 PROGRAMMING WordPress WordPressサイトを高速化することで、ユーザビリティの向上だけではなく、SEO最適化にも繋がります。今回はWordPressサイト高速化施策を４つご紹介します。 プラグインでも同様のことができますが、プラグインはバグの元。ということでWordPressプラグインなしでサイトを高速化する方法のみをご紹介します。 JavaScriptを非同期読み込みして、サイト表示を高速化する方法 JavaScriptを非同期で読み込む方法です。asyncをつけるだけで簡単です。方法は下記のとおり。 // 変更前 <script src="myscript.js"></script> // 変更後 <script

担当サイトが受賞したので、アニメーションの演出に使ったJavaScriptライブラリ、webツールを晒してみる こんにちは、まろCです。 最近、僕が担当した JOYSOUNDのキャンペーンサイトで、いろいろな賞を受賞することができました。 CSSREEL Design Awards Asis CSS WINNER 今回は、このような演出を入れるサイトで僕がいつも使っているJavaScriptライブラリや、webツールを晒したいと思います。 アニメーションの基本的なフロー 基本的に、アニメーションはCSSにtransitionやanimationで記述しています。 javascriptで、ロードやスクロールをトリガーにして、その要素にaddClassやremoveClassしてアニメーションを発動しています。そのほうが軽いからです。 より複雑、かつ連動して動かしたい場合は、ライブラリを使用し

こんにちは、CTOのづやです。 サイトを作っていると「スクロールに応じて何かをさせたい」なんてことをよく思ったりするのではないでしょうか。 0から書いてもいいのですが、簡単にできたら、というときのためのプラグイン「ScrollMagic」を試してみました。 こんな例のような動きがつけられちゃうらしいので、早速紹介していきます。 使うための準備 まずはこちらのGitHubから。 ScrollMagicはjQuery PluginなのでjQueryが必須なのはもちろん、TweenMaxといったライブラリも必要になります。 読み込むときには当然それらも必要になりますので、↓のような感じで準備しましょう。 <script src="js/TweenMax.min.js"></script> <script src="js/jquery.min.js"></script> <script src="

チームで開発を行うときにGitのスキルは必要不可欠なものとなってきています。以前、Git初心者向けにスライドをまとめたものを紹介しましたが、今回はGit（GitHub）をさらに活用するために参考にしたい記事を紹介します。 この記事は以下のような方におすすめです！ ・ブランチをどのように運用すれば良いのかわからない。 ・コミットメッセージの書き方にいつも悩んでしまう。 ・issueやPull Requestをもっとうまく活用したい。 ・Git�やGitHubに関する便利なテクニックを知りたい。 ・間違ってコミットしてしまったけど対処法がわからない。 今回は、運用編、コミットメッセージ編、issue編、Pull Request編、テクニック編、問題解決編と５つの内容で分類してみました。実践的な読み応えのある記事ばかりなので、ぜひ参考にしてみてください。 運用編 中の人に聞いたGitHub fl

2016年02月14日更新2016年03月08日 プラグインを使わずWordPressの固定ページでAMP対応ページを作ってみた 現時点のお話ですが、WordPressプラグインでAMPを実装してみましたが、Structured Data Testing Toolでチェックを行うとエラーがあったので、固定ページを使って自作してみることにしました。 固定ページのページングでAMPページを生成する 固定ページのカレントページNoを取得する 投稿の現在の記事が何番目の投稿か取得する 投稿のimgをamp-imgに置換する 以上を満たせれば、できるはずです！ WordPressの準備 まず、固定ページをampというスラッグで作成しておきます。下書きで保存すればページIDがわかるのでSEO的に厄介なことにならないように、除外するところは公開する前に除外しておきましょう。とりあえず僕はXML Site

サイバー・バズの@kashira2339です。 最近巷を賑わせているAMPと、導入にあたって検討されるであろうことがらについて サイバー・バズでの取り組みにあわせて触れていきたいと思います:) 急いでいる人用 AMPを導入すると... モバイルページの表示が早くなる 検索結果にカルーセルUIが表示される Twitter、FacebookなどSNSのシェアボタンが設置できる サイドメニューやアコーディオンUIは拡張コンポーネントで使える 限られた広告は表示できる テンプレートエンジンの駆使で仮想的に外部ファイルが読み込める サードパーティのレコメンドエンジンは海外に強い会社を中心に対応されている 現状、記事ページのみ対応可能 SEOに直接影響はない GoogleAnalyticsが使える SNSの投稿やyoutubeも埋め込める 10人日程度の工数がかかる 時間があるならば、やらないよりはや

ますます進化するウェブデザインの世界を体感でき、コピー&ペーストで利用することもできる HTML/CSS スニペットをまとめてご紹介します。ただいま流行中のWebトレンドの実装を可能にする最新レイアウトから、どんなプロジェクトにも活用したくなるエフェクトやテクニックなどを中心にまとめています。 「Run Pen」をクリックすることで読み込みが開始されます。右下に表示された「Return」で再読み込みし、左上のHTML/CSS/JSタブを切り替えることで、それぞれのスタイリングを確認できます。実際にカスタマイズしたいときは、右上の「Edit on Codepen」をクリックしましょう。 詳細は以下から。 コピペでOK、最新トレンドを押さえたすごい HTML/CSS スニペット40個まとめ 01. Fixed Images That Fades as You Scroll 画面を２分割し、スク

はじめに WordPress テンプレートはパズルのピースのように組み合わせられ、サイト上で Web ページを表示します。一部のテンプレート（例: ヘッダー・フッターテンプレート）はすべての Web ページ内で使用される一方、他のテンプレートはある条件の下でのみ使用されます。 このドキュメンテーションの目的 このドキュメンテーションは、次の疑問に答えてくれるでしょう。 ある種類のページを表示するとき、どのテンプレートファイルが使われるのか？ このドキュメンテーションの使い方 WordPress 1.5 で「テーマ」機能が導入されて以来、テンプレートはますますカスタマイズしやすくなりました。WordPress テーマを作成するには、WordPress がブログ上の各種ページを表示するためにどのようにテンプレートファイルを選択するのかを正しく理解する必要があります。すでにあるテーマをカスタマイ

【Webデザインに必須！】無料で使えるかっこいいフォントまとめ！ 無料で利用できるかっこいいフォントをまとめています。現役のWebデザイナーも利用しているおすすめなフォントです。初心者でも簡単にかつ無料で利用できるので、ぜひ活用してみてください。 テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元：GMOリサーチ株式会社　調査期間：2021年8月12日～8月16日　 調査対象：2020年8月以降にプログラミングスクールを受講した18～80歳の男女1,000名　 調査手法：インターネット調査 かっこいい・クール系フォントの中から、無料で商用利用も可能なものをまとめました。 フォント一つでサイトの印象もガラリと変わるので、皆さんもぜひ使って

You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert

kintoneはJavaScriptを使って自由にカスタマイズできます。 カスタマイズにより独自のリッチなUIを構築したり、新しい機能を追加したりできますが、セキュアなコーディングをしないと クロスサイトスクリプティング（以下、XSS）などの脆弱性を作り込んでしまう危険性があります。 この記事では、JavaScriptでセキュアなコーディングをするための基本的なポイントを解説します。

どうも、まさとらん（@0310lan）です。 今回は、JavaScriptを使って「グラフやチャートを描きたい！」とか、「さまざまなデータを可視化させたい！」という人にオススメのJSライブラリをご紹介しようと思います。 また、すぐに使い始められるように、ミニマムな構成の「サンプルコード」も合わせて掲載しているので、自分に合ったライブラリを使う取っ掛かりになれば幸いです。 ■Chart.js 【Chart.js】 最近、活発にバージョンアップをしている「Chart.js」は、すべてのグラフが自動的にアニメーション表示されるユニークな仕掛けを持っており、シンプルで理解しやすい記述が出来る点も魅力です。 グラフの種類は少ないものの、モダンブラウザ＆レスポンシブ対応で、あまりカスタマイズせずに「デフォルト」のままでも手軽に使えるでしょう。 【 基本の書き方 】 「chart.js」ファイルは、公式

こんにちは、@yoheiMuneです。 今日はライトなネタですが、Gulpで文字列置換を行う方法をブログに残したいと思います。 目次 Gulpとは Gulpとは、grunt.jsと同様にフロントエンドのビルドツールです。JavaScriptでタスクを定義することができ、JSの結合や圧縮、CSSのプリプロセッサ/ポストプロセッサの実行など様々なことを行うことができます。具体的には、[フロントエンド] nodeモジュール管理がフロントで使えるBrowserifyに入門に書きましたのでそちらもご覧いただけたら幸いです。 Gulpで文字列の置換を行う場合には、gulp-replaceモジュールを用いることで簡単に実現することができます。具体的には以下のように利用します。 まずはモジュールをインストールします。 $ npm install --save-dev gulp-replace 次に、gul