SEO、OGP……Vue.js製SPAの「困った」を解決できる「Nuxt.js」が便利だ！
Vue.jsでSPAを作ったものの、検索エンジンのクローラーやSNSのOGP取得といった問題で困ったことはありませんか？ サーバーサイドレンダリングを簡単に構築できるNuxt.jsの活用方法を解説します。 ユニバーサル（Isomorphic）JavaScriptはJavaScriptコミュニティで一般的な用語になりました。ユニバーサルJavaScriptとは、クライアントとサーバーの両方で実行できるJavaScriptコードのことです。 Vue.jsを含むモダンJavaScriptフレームワークの多くは、シングルページアプリケーション（Single Page Application : SPA）の構築を目的に作られています。シングルページアプリケーションはページがリアルタイムで更新されるので、アプリの動きが軽快でユーザーエクスペリエンスが向上します。さまざまな利点がありますが、欠点もありま
Webサイトをもっと楽しく！モダンでスタイリッシュなGIFアニメの使い方5つ
スマホの普及、マイクロインタラクションの導入と合わせて、再評価されているGIFアニメを使ったUIデザイン。Webサイトを楽しくする活用法を5つ紹介。 ユーザーエクスペリエンスとは、「使いやすさ」だけではなく、製品やWebサイトをより心地よく、そして楽しく使えるようにすることです。Webサイトをおもしろくする方法には、注意を引くトランジション、インタラクティブ性、ビジュアル要素を取り入れる手法がありますが、GIFとCSSを組み合わせることで実現できます。 この記事では、邪魔になったり、大げさになったりすることなく、ユーザーエクスペリエンスの向上を目的としたモダンでスタイリッシュなGIFおよびCSSの使用法について例を挙げます。GIFはもはや、ネコの画像を見るためや、サボっている同僚をからかったりするためだけのものではありません。 デザインや開発しているWebサイトの訪問者を、GIFやCSSを
ReactとD3.jsの組み合わせで変わる！JavaScriptアニメーション開発
人気のデータビジュアライゼーションライブラリー「D3.js」をもっと使いやすく、便利にするために。Reactを使ったコンポーネント化に取り組み、リアルタイムで描画されるアニメーションを作ります。 D3は最高です。Webのデータビジュアライゼーション分野におけるjQueryのように、考えられるあらゆることが実現できます。 オンラインで見られる最良のWebのデータビジュアライゼーションの多くがD3を使用しています。D3は素晴らしいライブラリーですが、最近のv4のアップデートで従来よりさらに安定性が増しました。 Reactと一緒に使えば、D3はさらに便利になります。 ちょうどjQueryのように、D3は高性能ですが課題もあります。データビジュアライゼーションが大規模になればなるほど、用いるコードは複雑になり、バグを修正したりアイデアを絞り出したりするのにさらに時間がかかるようになります。 しかし
全部知ってる？今後のサイト制作で押さえたいCSSの最新プロパティ9選
CSSの登場から20年。この間、CSSはものすごく進化していました。「それって昔のやり方ですね」なんて言われないように、今後のサイト制作でチェックしておきたい最新のプロパティ（と関数）が学べる記事を9つ、厳選して紹介します。まだまだドラフト段階の仕様もありますので、各自記事の解説をチェックしてください。 1.グリッドレイアウトが捗るGrid Layout Module 『CSSレイアウトの常識が変わる！Grid Layout Moduleが胸アツ』（WPJ） CSSのレイアウトといえば、伝統的にはfloatプロパティ、最近ではFlexboxをよく使いますよね。仕様策定中の「Grid Layout Module」なら、もっと効率が上がりそうです。 2.テキストの回り込みが簡単に！ CSS Shapesプロパティ 『CSS Shapesでテキストを回り込ませるレイアウトを表現』（Webクリエイ
ASCII.jp：IllustratorもJavaScriptで自由自在に！｜古籏一浩のJavaScriptラボ
JavaScriptやPythonなどのスクリプト言語を使ってアプリケーションを制御するのは、いまや珍しいことではありません。本連載の第3回では、Photoshop上で動くJavaScriptについて紹介しましたが、アドビのアプリケーション（旧マクロメディア製品を除く）でもっとも早くJavaScriptに対応したのが「Illustrator」です。Illustratorは2001年に発売されたバージョン10からJavaScriptによる制御に正式に対応し、それまで手作業でしていた面倒な処理を自動化できるようになりました。 今回は、IllustratorをJavaScriptで制御する方法について紹介します。最終的には作例として「百ます計算」の表を完成させます。百ます計算とは、左側と上側にある数値の合計を10×10のマス目に記入していくもので、集中力を高める手法として小学校などで使われていま
あのFlashサイトのUIをjQueryで作る (1/5)
「見た目に美しく、ユーザーに楽しさや心地よさを与えるUIを作りたい」 そう考えたときに参考になるのが、Flashで制作されたWebサイトです。最近では、JavaScriptによるリッチなUIを持つWebサイトも増えてきていますが、長年、さまざまなUIが実験的に生み出されてきたFlashの世界には、まだまだユニークなサイトが多くあります。 たとえば、今回紹介する「ハーズ実験デザイン研究所」のWebサイトは、フルFlashで制作された“楽しい”コーポレートサイトです。同社が手がけてきた過去の作品を、時間の経過とともにゆっくりと切り換えていく様子は、まるで1本の映像作品を見ているよう。メニューのちょっとした動きひとつをとっても、ユーザーを楽しませようという意図が感じられます。 Flashサイトのような美しくて楽しいUIを、JavaScriptでも作れないか――それが今回のテーマです。 今回のお手
実例でわかる！スマートフォンサイトの画面設計 (1/3)
スマートフォンサイト設計の基礎知識に続いて、今回からは実際のスマートフォンサイト制作のプロジェクトの流れに沿って、具体的なサイト設計と制作方法を解説します。ぜひ一緒に手を動かしながらスマートフォンサイトの制作の流れを学んでいきましょう。 実在するサイトが課題です！ 題材にさせていただくのは、東京都江東区で幼児向けのプリスクール（就園準備スクール）を運営する「プレイグループ木場校」さんのWebサイトです。 プレイグループ木場校のWebサイトでは、入学を検討している保護者やすでに通学中の生徒の保護者へ向けて、さまざまな情報を提供しています。カリキュラムや先生の紹介といったスクール案内に加えて、コラムなどのコンテンツも充実しており、情報量はかなり多い方だと言えます。 今回はこのWebサイトのスマートフォン対応の企画、設計について考えてみましょう。 ゴールの設定とコンテンツの選定 スマートフォンの
Evernoteが進化 連携する16本のiPhoneアプリはコレ！
「Evernote」といえば、テキストや画像といったメモをオンラインに保存して、iPhone／パソコンの間でそのデータを手軽にシェアできるオンラインメモツールだ（iTunes Storeで見る）。 そのEvernoteでは現在、ほかのiPhoneアプリとの連携を進めている。これから対応するものも含めて連携できるアプリの一覧を入手したので、いち早く紹介したい。 3種類ある連携方法 iPhone版EvernoteとほかのiPhoneアプリとの連携方法は具体的に3種類あるようだ。 1つ目は、Evernoteが公開しているAPIの利用だ。このAPIを使えば、ほかのiPhoneアプリからEvernoteサーバーに直接、データを登録できる。 2つ目は、新たに用意した「EvernoteBridge」というアプリ連携の技術を利用する方法。あらかじめiPhoneにEvernoteをインストールしておけば、ほ
WordPressのテーマ作成を超効率化するジェネレーター (2/2)
完成したテーマをお持ち帰り→WPに導入 ひと通りの設定が済み、だいたい納得できる状態になったら、一番下にある「Save」ボタンを押してテーマファイルをダウンロードしよう。WordPressのテーマは、ヘッダーやフッターといったブロックごとに分割されているが、Wordpress Theme Generatorでは必要なファイルをZIPファイルにまとめてくれる。ダウンロードしたZIPファイルをローカルで解凍して、中のファイルを丸ごとWordPressのThemesディレクトリにアップロードすれば準備は完了。あとは、WordPressの管理画面から作成したテーマを選べば、すぐに利用可能だ。 （左）＝「Save」ボタンを押すと表示されるダウンロード画面。「download themes ZIP file」からファイルをダウンロードする。（右）＝解凍したZIPファイルの中身。これらをまとめてWord
夏の50連発!! これが定番iPhoneアプリだ（前編） (1/5)
iPhoneの発売と一緒にオープンしたiTunes Storeの「App Store」。さまざまなサードパーティー製アプリを組み込んで、iPhoneを自分好みにカスタマイズできるとあって、あれこれ試してみた人も多いだろう。 今回はヘビーにiPhoneを使い込んでいるライター/編集者にアンケートを取り、実際に使っていたアプリの中から魅力あふれる50本を厳選。「ネット」「音楽・画像」「情報管理」「ゲーム」「その他」の5ジャンルに分けて紹介していく。前編では、以下にズラリと並んだ27個を取り上げよう（アイコンのクリックでソフト紹介に飛びます）。ソフトのインストール方法などを紹介したこちらの記事と合わせて、ぜひiPhoneをフル活用してほしい。 ※初心者向けのiPhone記事をこちらで連載しています。 ネット
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ゼロから始めるレスポンシブWebデザイン入門
一挙50連発！ 最初に試したいiPadアプリカタログ（前編） (1/6)