サクサク読めて、アプリ限定の機能も多数!
トップへ戻る
iPhone 16
arakaze.ready.jp
せっかくREST APIの情報を元にページを作るならgenerateするファイルは自動で出力したいですよね。 公式ドキュメントのところでいう「動的ルーティング」を使って実現してみましょう。 うまくいけばREST APIを元に自動でディレクトリ構造やhtmlファイルが生成されます。 考え方 nuxt.config.jsにgenerateプロパティを記述、そこに使用するAPI情報を読み込む記述をします。 ここでは読み込んだjsonの配列の中にある、ディレクトリ構造を示す値をrouteに設定していきます。 次に自動生成されるページ用のテンプレートファイルを作成します。 ディレクトリに対して細かく設定することも出来ますがWPのパーマリンクを元にする事を考えると「pages/_.vue」というファイルを作ってしまうのが手っ取り早いかなと思います。 テンプレートファイルは頭文字にアンダースコアを付ける
WPで投稿のサムネイル(アイキャッチ)画像URLを取得するのって地味にめんどくさかったんですが、いつの間にか公式で簡単に取得出来るようになっていたようです。知らなかった。 それが下記の関数になります。 // 引数には取得したい画像のサイズを指定します。'thumbnail','medium','large'など。 the_post_thumbnail_url('full'); 英語ですがこちらの『Function Reference/the post thumbnail url』に公式のリファレンスがあります。 今までみたいにid取得してプロパティにアクセスして…って冗長なことしなくて良いのがとても嬉しいですね! <?php if(has_post_thumbnail()): ?> <a href="<?php the_permalink(); ?>" title="<?php the_t
CSSの考え方としてはposition:fixed;で配置。座標は後でJavaScriptでマウスに追従させるという感じです。ちなみにpointer-eventsを記述し忘れるとマウスイベントがうまく使えなくなったりします。 .stalker{ position:fixed; z-index: 10; /* 一番上のレイヤーに */ pointer-events:none; /* マウスイベントの邪魔にならないように */ width: 30px; height: 30px; border-radius:50%; background:#fff; /* ストーカーDOMの中心をマウス座標に */ top:-15px; left:-15px; /* DOMを滑らかに追従させる為に */ transition: transform 0.2s ease-out; }
フレームワークはもはや流行りとか言うよりもひとつふたつは使っていて当たりまえ…みたいな雰囲気を感じる今日この頃ですが、受託制作で普通のWebサイトを作っていると普段の仕事では早々使う機会がないんじゃないかと思います。(僕だけですかね…?) Webサービスやゲームのように非同期で通信する要素があるわけでもなく、DBもなくページ内の物量も普通…そんな普通のコーポレートサイトやLPなんかを作るのにフレームワークはややオーバースペックに感じます。 ついでにクライアントから「ちょっとならHTML触れるから自分で更新します」と言われた日には開発環境の導入自体のハードルが高く、そもそもhtmlじゃないフレームワークの導入なんて出来ません。 今回はそんな風に「別に使わなくても仕事は出来るしなぁ」と腰が重かった自分が、自身のポートフォリオサイトをNuxtに作り変えてみた感想を書いていきます。 Nuxt.js
前回書いたこちらの記事では普通のWebサイトをNuxt.jsで作り変える流れをざっと書きました。 普通の受託系Web制作者による普通のWebサイトをNuxt.jsで作り変えてみた話 今回は上記の記事では割愛したNuxtでSassやpugなど、これまでgulpで使っていた便利なものを同じように使うためにはどうすれば良いか、ということを書いていこうと思います。 あくまで僕の環境(Mac)でこうしたら動くようになった、という記録なので正しいやり方ではないかもしれません。でも大事なのは成果物で、環境なんてのは自分が便利に使えれば良いの精神で書いていきます。 (沢山の人が関わるような大規模プロジェクトはちゃんとした環境構築しないとやばいとは思いますが) なぜSassとpugとjQuery(プラグイン群)を使いたいか? まず自分にどんな前提知識があったかをざっと説明しておきます。 ・Sassやpugを
Getting Started · React Native そんなに興味無かったんですが最近Reactを少しだけ勉強しまして。 React-NativeっていうのでiOSもAndroidも簡単なアプリなら作れるようになると聞き、少し興味が湧いたので試しにすごく簡単なアプリ制作に挑戦してみました。 僕がメインで使っているのがMacなので今回はiOS版の内容になります。 React-Nativeのインストール こちらの公式ページに従ってReact-Nativeの開発環境を整えます。 Getting Started · React Native まずReact-Nativeを使うと言ってもiOSアプリの開発にはXcodeが必要なので、なければインストールしてください。App Storeで無料配布しています。 ※ただXcode非常に重いので通信環境によってはこれだけで凄く時間かかります。 次にN
Vivus.js 今回はSVGのパスアニメーションが使えるプラグインをご紹介です。 個人的に思うVivus.jsのいいところは、pathタグだけじゃなくてrectやcircleなんかのタグもpathに変換して一括コントロールできるところです。SVG関係のプラグインてこのpathだけって縛りが結構使いづらかったんですよねー。 用意するもの 必要なものは公式Githubからダウンロードします。必要なものは以下の2つです。両方ともsrcディレクトリの中に入っています。 distの方に.minの圧縮ファイルも入ってるのでそちらでも大丈夫です。 <script src="vivus.js" type="text/javascript"></script> <script src="pathformer.js" type="text/javascript"></script> プラグインの本体はviv
HOME web
TweenMax 少しずつThree.jsの使い方をかじっている今日この頃なんですが、オブジェクトをアニメーションさせる際にthree.jsだけでアニメーションの記述を書くとどうしてもやりづらいなと思っていました。 そこで先人の方々のコードを見ているとどうもTweenMaxを使っている方が多い模様。そこで下記のICS MEDIAさんの記事を参考にどうやって併用するかを解読してみました。 高機能なモーション制作用JSライブラリTweenMaxを使ったタイムリマップ表現 用意するもの Three.jsとTweenMaxを普通に読み込みます。script.jsは処理の記述用です。 <script src="js/TweenMax.min.js" type="text/javascript"></script> <script src="js/three.min.js" type="text/ja
WPのテンプレートを作る際に毎回忘れちゃって、ついつい後回しにしてしまうページネーションのカスタマイズ方法をメモしておこうと思います。 paginationの追加 まずは下記のコードをfunction.phpに追加します。 /* $rangeの値で出力されるページナンバーの範囲を設定 */ function pagination($pages = '', $range = 2){ $showitems = ($range * 2)+1; global $paged; if(empty($paged)) $paged = 1; /* ここで全体のページ数を取得 */ if($pages == ''){ global $wp_query; $pages = $wp_query->max_num_pages; if(!$pages){ $pages = 1; } } /* ページ数が1じゃなけれ
この前transformの値をjQueryで取得してみたんですが、結構知らないことがあったのでメモに残しておきます。 transdormの値はmatrix、matrix3dとして取得される 他のcssプロパティのように指定したcss通りの文字列では取得されません。 transform2dで収まっている場合は下記のように6つの値が入った配列で、 // matrix(scaleX, rotate, rotate, scaleY, translateX, translateY) transform3dとなっている場合は下記のように16つの値が入った配列として取得されました。 // matrix3d(scaleX, rotateZ方向, rotateY方向, perspective, rotateZ方向, scaleY, rotateX方向, perspective, rotateY方向, rot
pace.js ちょっとリッチなコンテンツを作る際に用いられるローディング画面。 今回は読み込むcssを変えるだけでローディングのエフェクトを変更できるPACEの使い方を紹介します。 用意するもの まずは公式から一式をダウンロードしましょう。 その中から最低限必要なものは以下の通りです。たくさんファイルが入ってますが、本体となるpace.jsとエフェクトの種類を決めるcssを読み込みます。 <link href="pace-theme-barber-shop.css" rel="stylesheet" /> <script src="pace.js" type="text/javascript"></script> 基本的な使い方 基本的には、上記のようにjsとテンプレート用のcssを読み込めば自動的に要素が追加されてローディングエフェクトが追加されます。 ただ、いろいろとオプションも用意
ScrollTrigger 今回ご紹介するScrollTriggerは、スクロールアニメーションを実装したいときに便利なJavascriptプラグインです。jQueryなどは必要なくこれ単体で動きます。 このプラグインがやってくれることはざっくりまとめるとこんな感じです。 スクロール量と対象オブジェクトまでの距離を計測して、 オブジェクトが表示範囲に入ったらvisibleのclassを追加、 オブジェクトが表示範囲外に出たらinvisibleのclassに変える。 このclassの切り替えに対してtransitionなどを使ってアニメーションを付けていきます。 用意するもの まずはGitHubからプラグインを手に入れましょう。 最低限必要なのはScrollTrigger.min.jsのみです。そして、Javascript側で記述するのは基本的には下記のinitのみのようです。 <scrip
Barba.js 今回はPJAXを比較的簡単に実装し、シームレスなページ遷移を実現するjavascriptプラグイン「Barba.js」を紹介します。 ちょっと前まではサポートブラウザの関係でいまいち仕事では使えることが少なかったPJAXですが、IE9以下をほぼ考えなくても良くなってきている昨今ならどんどん使っていけるのではないでしょうか。 というわけで、こちらサポートブラウザはpushStateが使えるモダンブラウザ&IE10+っぽいです。 用意するもの まずはGitHubからプラグインを手に入れましょう。 いろいろ入っていますが、とりあえず最低限必要なのはbarba.min.jsのみです。 ただ、Barba.jsを作動させたりトランジションを書いたりする用の外部jsも用意しておくといいかもしれませんね。 <script src="barba.min.js" type="text/jav
Instagram ロゴのリデザインや広告の実装、有名アカウントが取り上げられたりと最近Instagramの勢いが凄いですね。 今年の6月には勧告通りAPIの仕様が完全に移行するので、自分用メモとしてざっくりとした使い方と、無申請で使えるSandbox modeの出来る範囲を書いておこうと思います。 仕様の変更で何が変わるか?(ざっくり) 昔はInstagramのAPIって仕様がちょっと緩くて使いやすかったんですが、今回の仕様変更で一気にハードルが上がりました。 もともと『ハッシュタグで検索した写真を表示する』などの使い方はグレーでしたが、APIの仕様的には可能だったので色々なキャンペーンやサイトで使われていました。 今回の変更ではそういった使い方は完全に申請が必要な仕様となっており、ユーザーを大切にするという意味では至極もっともな変更かなぁと思います。 Instagramが審査した健全な
Photo by フリー写真素材ぱくたそ 今回紹介するのはJSでスクロールを一時的に禁止する方法です。 以外と使う機会多いんですよね。 「このライトボックスを開いた際はページのスクロールは止めたい…」 「このスマホサイト、このメニューを開いた場合はスクロールされないようにしたい」 「または、全体はスクロール禁止で指定オブジェクトのみスクロールさせたい」 制作しているとこんな要望を聞くことがたまにあります。 やり方忘れた頃にぽろぽろと出現するのでメモしておこうと思います。 ちなみに生のJSで書くのは手間なのでjQueryは使います。 スクロールイベントを取得して何もしなければいい やり方は単純で、mousewheelやtouchmoveとかに”何もしないイベント”を追加すればいいのです。 PCは色々あるマウスホイールイベントをまとめて指定、スマホの方はtouchmoveにスクロール禁止のイベ
要素の重なりについて少しハマってしまったのでメモに残しておこうと思います。 最近作ったサイトで、z-indexをどういじっても重なり順を直せない事象に遭遇しました。 ごちゃごちゃとした構造のサイトだったので初めは普通にpositionの親子関係によるものかなと思いましたが、全てのpositioinを洗い出しても解決せず…。 DeveropperToolでひとつひとつタグを見てみてようやく原因が判明。 どうやら導入していたプラグインによってタグに直書きされたstyleが原因のようでした。 (htmlやjsを開いて考えていたのでJS部分の直書きに気づくのが遅くなってしまいました…) 犯人は translate3d 問題となった直書きされたstyleは以下です。 style="width: 800%; transition: 0s; -webkit-transition: 0s; -webkit
Raindrops.js 今回はちょっと珍しいエフェクトを実現するjQueryプラグインを紹介します。 しずくが落ちてきた水面をcanvasで再現していて、あまりWebでは見かけない有機的な動きを実装することができます。 用意するもの GitHubからプラグイン一式をダウンロードしましょう。 その中から最低限必要なものは以下の通りです。こちらのプラグインはjqueryとjQueryUIを読み込む必要があります。それぞれ最新をダウンロードしておきましょう。 <script src="js/jquery.js" type="text/javascript"></script> <script src="js/jquery-ui.js" type="text/javascript"></script> <script src="js/raindrops.js" type="text/javasc
pagePiling.js pagePiling.jsはmコンテンツのセクションごとにフルスクリーンで表示し、スクロールしてもぴたっとコンテンツを表示してくれるサイトを作る事が出来ます。オプションも豊富なので結構使い勝手が良さそう。しかもIE8から対応しているようなので実務で使う機会もありそうな予感がします。アンカーリンクにも対応しているし至れり尽くせりですねー。 用意するもの 用意するものは下記のとおりです。公式からダウンロードするものとjqueryで動きます。注意としては、IE8に対応しているのでjQueryのバージョンが最新だとダメかもしれないです。 <link rel="stylesheet" type="text/css" href="jquery.pagepiling.css" /> <script src="http://ajax.googleapis.com/ajax/li
photo by pakutaso.com ちょっと知らなかったのでメモです。 先日、Photoshopからデザインをスライスしているときに、Web用に書き出したデザインパーツがなんだか小さくなるという現象に遭遇しました。 よくよく見てみると、Web用に書き出しウィンドウでサイズが100%になってない…。 直そうと思って数字を打ち込んでもダメって言われる…。 なぜだろうと思って調べてみたら、Photoshopでは カンバスの縦か横のピクセルサイズが8192pxを越えると縮小される仕様らしい。 なんでそんな仕様があるんだろう…。 こちら参考ページです。 Web用に保存で100%のサイズにならない | Adobe Community – 縦長デザインのサイトを作るときにはカンバスサイズに気をつけて デザインデータを作った方がいいかもしれません。
FlexSlider2 今回紹介するjQueryプラグインもまた、有名どころですが「FlexSlider2」です。 豊富なオプションとIE7まで対応しているので重宝します。ほんとはIE7なんざ絶対にもう対応したくないけど! 用意するものは3つ まずは公式ページからファイル一式をダウンロードします。いろいろと入っていますが最低限必要なファイルは下記になります。 <link rel="stylesheet" href="flexslider.css" type="text/css" media="screen" /> <script defer src="jquery.js"></script> <script defer src="jquery.flexslider.js"></script> 基本的な書き方 htmlのマークアップはこんな感じになります。普通にリストを作れば良いので簡単です
ImagesLoaded アニメーションを多様するようなWebページを作っていると「画像が読み込まれるのが遅くてうまくいかない!」、「画像がちゃんと読み込まれてから関数を実行させたい!」といった場面にぶち当たることが出て来きます。 そんなときに便利なのが「ImagesLoaded」!非常に簡単な記述で、要望を満たしてくれます。 必要なもの 公式ページがあるのでそちらから必要ファイルをダウンロードしてきます。 1つしかありません! <script src="js/imagesloaded.pkgd.min.js" type="text/javascript"></script> 使い方 使い方も至極単純です。通常のJSで使う場合のほかに、jQueryなどの書き方もあります。 //通常の書き方 imagesLoaded( '#container', function() {/*実行させたい処理
jQueryの繰り返し処理用の関数、$.eachを使って複数の要素に時間差でアニメーションをつける方法をメモしておこうと思います。 ギャラリーサイトなどで要素を表示するときに、ひとつずつ徐々にフェードインさせたい時などに使えると思います。 書き方はこんな感じ li要素でオブジェクトを並べるとして、サイト表示時にオブジェクトをひとつずつフェードインさせていくコードを書いてみましょう。オブジェクトはcssで透明度を0にしておきます。 ul li{ opacity:0; } var thum=$('ul li'); //オブジェクトを取得 var interval=100; //フェードインさせる間隔 $.each(thum,function(i){ thum.eq(i).delay(i*interval).animate({'opacity':'1'},900,'swing'); }); .d
jQuery.Bottom ページを最後までスクロールさせたら、何らかの処理を行いたいときに使えるプラグインです。ツイッター等のSNSでよく見られる自動ロードや、最後までスクロールしたら現れるトップへもどるボタンなど、色々とお世話になることが多そうです。 こちら自分のフォトギャラリーを作るときに利用させてもらいました。 用意するもの 用意するものは、jQueryとjquery.bottom.jsの2つです。この他に、最後までスクロールしたときに発生させたいイベント用のjsも必要なことが多いかもしれませんね。 <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="jquery.bottom-1.0.js"></script> 基本的な書き方 記述自体はシンプルで
skrollr 簡単にパララックスを実現するプラグインとして魅力的なskrollrをご紹介します。 jQueryを使わず単体で動くので、軽量で済ませたいスマホサイト構築の時などに良いかもしれません。 用意するもの まずはGitHubからskrollr.jsをダウンロードします。また、IEでも動くようにするためにこちらからskrollr.ie.jsを手に入れて追加しておくと良いでしょう。 <script type="text/javascript" src="skrollr.min.js"></script> <!--[if lt IE 9]> <script type="text/javascript" src="skrollr.ie.min.js"></script> <![endif]--> 書き方 JavaScript部分で最低限必要な記述は下記の1行だけです。skrollrを実行し
結構前ですが、練習でなんとなく作っていたWebサービスでTwitterやFacebookのアカウントでログインさせたい。 いわゆるOAuth認証を導入してみようと思って使ってみたのが「HybridAuth」というPHPのライブラリです。 調べてみたところ、OAuth認証を簡単にしてくれるライブラリで一番シンプルなのが「HybridAuth」らしい。 CakePHPやWordPressのプラグインもあるようで素敵です。 PHPに関しては独学なうえ別に仕事で使ってる訳でもないので自信がないけど挑戦してみました! 1から10までお世話になったのはこちらの記事。とてもわかりやすく参考になりました。ありがとうございます! シンプルなOAuth認証ライブラリ「HybridAuth」を試してみた | Mach3.laBlog 1. とりあえずダウンロード! 公式サイトからとりあえずダウンロード! Hyb
JavascriptやjQueryを書いていると、「この処理がちゃんと終わってから、こっちの処理を始めたい!」って場面に結構遭遇するのではないかと思います。特にアニメーションを作っているときによくあるのではないでしょうか。 コールバック関数を設定出来る処理なら簡単なのですが、それがないものも結構あったりします。僕が困ったのは.html()や.ajax()でした。なんかいい解決策は無いかなーとググってみたところ.when().done()という処理の仕方が良さげだったので使ってみたらばっちりでした。 .when()には先に終わらせたい処理を書く ざっくりとした説明の仕方をすると、.when()には先に完了させたい処理をまとめて書いておきます。例えば、“横に移動したら、フェードアウトする”みたいな事をしたい場合、“横に移動したら”の部分を.when()の中には書きます。 (まあ、そんな簡単な動
次のページ
このページを最初にブックマークしてみませんか?
『ARAKAZE NOTE』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く