サクサク読めて、アプリ限定の機能も多数!
トップへ戻る
おみそ汁
blog.yuhiisk.com
今までWordPressでブログを運用してきたのだが、HTMLとPHPを絡めたテーマ開発が煩雑で表示速度も遅かったため、フロントエンドにGatsbyJS, Netlify, WP REST APIを導入することで改善した。 あまり時間がない中、ガガガッと移行したので忘れないように備忘録を残しておきたいと思う。 目次 ブログのシステム構成WordPressからデータを取得する準備GraphQLを試すビルド・デプロイ設定ケーススタディ ブログのシステム構成 フロントエンドのソースコードはGithubに置いておき、masterへのプッシュをNetlifyが検知してGatsbyのソースコードを自動ビルドする。 このビルドでWordPressから記事データを引っ張ってきて静的ファイルを生成してくれる。 ビルド後はそのままNetlify上でサイトデータをホスティングという流れになる。 ブログの更新はこ
Angular入門コースの受講者さんから、 Peing経由でRxJSについての質問が届きました。 はじめまして、udemyのangular講座を受講しています。 「RxJSを理解しよう」節の追加ありがとうございます。 リアクティブとは?の説明の「リアクションして」の部分が、 これまでの非同期のコールバックとどう違うのか?が いまいち良く理解できておりません。 例えば、https://qiita.com/hkusu/items/78fbf31051e6ee131731で RxJSを使う場合と使わない場合で ただ単にコードが複雑になってるだけのような気もします。 使うと何か良いのか?使わない場合に何ができるようになるのか? とか、どうゆう場面で使うのか?あたりと もう少しつっこんで頂けると嬉しかったかもしれないです。 実際どうなのでしょう? 質問ありがとうございます! RxJSは非同期処理をう
Firestoreにはタイムスタンプを保存することができますが、 クライアント側からJavaScriptのDateオブジェクト経由で取得する時間がサーバー側の時間とズレが生じやすいという問題があります。 そこでFirebase Admin SDK経由でFirestoreのサーバータイムを取得して管理しましょう。 firebase.firestore.FieldValue.serverTimestamp() Firebase Admin SDKを利用して、firestoreオブジェクトのFieldValue.serverTimestampメソッドで、Firestoreのサーバータイムを取得することができます。 import admin from 'firebase-admin'; admin.initializeApp(); const timestamp = admin.firebase.
どうも、イソップです。 最近のコーディング業務では、静的サイトでもHTML出力にJavaScriptのテンプレートエンジンを使うことが多いです。 以前まではJadeを使ったりしていましたが、なんか個人的にシンプルじゃないって思ったりして、 今はEJSに落ち着きました。 ベースはやっぱりHTML構文がいいんですよ。余計なこと考えなくてもいいし、協業する場合も負担が減ります。 EJSならテンプレートエンジンでやりたいことは一通りできますしね。 そこで今回は、EJSをCLIでコンパイルする方法を紹介したいと思います。 EJSとは 今回は、EJSの使い方の説明はしません。 次のページを読むと大体わかりますんで、夜・露・死・苦。 テンプレートエンジン「EJS」とタスクランナー「Gulp.js」で爆速HTMLコーディング テンプレートエンジンEJSで使える便利な構文まとめ ejs-cliを使う
本日バージョン6がリリースされたので、さっそく個人プロジェクトのAngularをアップデートしてみました。 この記事では、Angular CLI v6で追加された ng update コマンドを利用してアップデートを行う手順を紹介します。 記事での解説は、バージョン5.1のAngularプロジェクトをバージョン6にアップデートする手順になります。 事前に公式で用意されているツールを使うとアップデート手順を確認できます。 https://update.angular.io/ プロジェクトの現在のバージョンに応じたアップデート方法を確認できるのでとても便利です。 Angular CLI アップデート はじめにグローバルのAngular CLIをアップデートします。 $ npm uninstall -g @angular/cli $ npm cache verify $ npm install
どうも、イソップです。 Reactアプリケーションでは、データをループ処理で一覧表示することが多いと思います。 その際によくあるのは、少しだけ違うコンポーネントが複数ある場合にループ用コンポーネントをたくさん作ってしまうこと。 例えば、参照するデータは同じだけど、表示するコンポーネントの見ためがほんの少しだけ違うとか。 そういうケースが増えると、非常に管理が煩雑になりがちです。 そこで、今回はループ用の親コンポーネントを用意して、 その中のデータ表示用コンポーネントを親コンポーネントから指定できる方法を紹介します。 コンポーネントを用意 次のようなデータがあります。
どうも、イソップです。 Railsアプリを rails new で新規作成すると、Gemfile が作成されますよね。 これは Bundler というRubyのライブラリ管理システムのための設定ファイルで、 Railsアプリで使用するライブラリの情報が保存されています。 この Gemfile の中に、Railsで利用するRubyライブラリを記述して管理していきますが、 中を覗いてみると、gem 'rails', '~> 5.0.2' と書いてあり、~> 5.0.2 ってなんだろう?って思いませんか? これはバージョンを指定しているのですが、Rails初心者には記号の意味がさっぱりわかりません。 ということで、今回はGemfileでのバージョンの指定について紹介してみたいと思います。 Gemfileでバージョン指定できる種類 Gemfileの中では、利用するgemを次のように書きます。 [r
この記事は Angularアドベントカレンダー2017 の5日目の記事です。 こんにちは、イソップ(@Yuhiisk)です。 つい先日、動画配信プラットフォームのUdemyでAngular入門の解説コースを作成・リリースしました。 今日はAngularへの想いも含めて、内容を紹介させてもらいたいと思います。 作ろうと思った経緯 なぜ作ったか。 それはAngularが好きだから。 ぼく自身、実務での技術選択や、勉強会を開催してSPA関連(JSフレームワーク)のお話をしてきましたが、周りからのAngularに対しての視線・イメージをうすうす感じました。 え、選択肢にすら上がらない? こんなに素晴らしいフレームワークなのに? なんで? それはAngularの学習におけるハードルが高いということが一番大きかった。 どうしてもフルスタックだからこそ、ごちゃごちゃと難しそうなイメージがある。 それはぼ
どうも、イソップです。 WordPressで記事を編集中に、ビジュアルモードとテキストモードを切り替えることで、spanやstyleなどのタグが自動で削除されることはないでしょうか。 なぜなら、WordPressのエディターで自動削除される設定になっているからです。 これはfunctions.phpに設定を追加することで回避できます。 <span class="">のように、class属性をつけると削除されないといった記事をよく見かけますが、 何を言ってんだお前らは。いちいち入力する手間がかかるし、HTMLが汚れるだろ。 ということで、functions.phpへの設定方法を紹介します。 tiny_mce_before_initフィルターの設定を追加する テーマディレクトリのfunctions.phpの最後に、次のコードを追加します。 function my_tiny_mce_before
どうも、イソップです。 ライターさんからWindows・Macの両方で使える音声再生アプリが欲しいと要望があったので、それならすぐ作れるよってことで作ってみました。 writer.app 概要 至ってシンプルな音声再生アプリです。 一番の特徴は再生スピードを変更できること。 文字起こしをする際に会話のスピードが早くて入力が追いつかないことがあると思うのですが、これを解決します。 使える機能は以下の通りです。 音声ファイルの追加・再生・停止 波形データ(タイムライン)をクリックして現在の再生位置を操作可能 音量・再生速度の変更 テキストエディタ 音声入力・フルスクリーンモード NEW 音声入力の言語選択 対応ブラウザ Chrome、 Firefox、Safari (Mac)、Microsoft Edge ※スマートフォンでは動作しません。 対応音声フォーマット .mp3、.wav、.ogg、
どうも、イソップです。 ReactやAngular、最近ではVue.jsが普及してきたおかげで、シングルページアプリケーション(以下SPA)の実装を多くの人ができるようになってきました。 宣言的なコンポーネント志向のアーキテクチャ、Fluxを用いたデータフロー。 コンポーネントの構築やデータの流れを意識することで、昔に比べて設計やデータ管理がラクになりました。 ただ注意したいのは、昔に比べてUIを実装しやすくなっただけで、アプリケーション実装のポイントを抑えておかないと次第にコードが散らかってしまうことです。 例えばReact + Reduxでは、始めは良くてもすぐにReducerやActionが膨れ上がります。 その結果コードの行数は増え、コードを追うのに時間がかかり、修正作業も困難。常にあれこれ考えながら実装を進めることになってしまっては元も子もありません。 そこで、重要になってくるの
どうも、イソップです。 突然ですが、JavaScriptのアニメーションライブラリは何を使っていますか? 最近は、滑らかに動くvelocity.jsやTweenMaxが世界的にも人気です。 ぼくもどちらも試しましたが、非常に使い勝手が良くて、気持ちの良い動きを実装できるライブラリでした。 しかし、ぼくのイチオシは何と言っても、 TweenMaxの軽量版のTweenLiteなんです。 TweenLiteは、TweenMaxの機能を削ぎ落としてファイルサイズを小さくしたライブラリですが、 もちろんそのままでも使えて、プラグインを足せば、イージングやTweenMaxの機能も使えます。 最近個人的に好んで使っていて、DOMアニメーションはもちろんのこと、SVGアニメーションの実装にも大活躍しています。 今日は、そんな溺愛中のTweenLiteを紹介します。 TweenMax、TweenLiteとは
WordPressのインストールディレクトリを変更したい場合がよくあると思います。 ドキュメントルートにインストールしたけど、やっぱり /wp に移動したい、でもURLはルートのままがいい。 WordPressをインストールし直そうと思いがちですが、意外と簡単にできちゃいます。 今日はWordPressのディレクトリを変更する方法を紹介します。 (何気に今回が初めてのWordPress記事です。) ルートディレクトリからサブディレクトリに移動する 今回は、WordPressを既にルートディレクトリにインストール済みで、wp ディレクトリに移動する想定で説明します。 1. URL設定 始めに、管理画面からURLの設定を変更します。 管理画面の 設定 -> 一般設定を開きます。 WordPress のアドレス (URL) 欄を、WordPress を配置する新しい URL に変更します。 サイ
どうも、イソップです。 CSSの「counter-increment」というプロパティをご存知でしょうか。 JavaScriptを使わなくても、CSSだけでカウント表示ができるプロパティです。 今日はcounter-incrementを応用した、カウント数字のゼロ埋め(ゼロパディング)の方法を詳解します。 counter-incrementとcontentプロパティを上手く使います まずはデモを見てみましょう。見出しのh2タグにカウント数字を表示します。 See the Pen oYywrK by Youhei Isokawa (@yuhiisk) on CodePen. できとるやんけ! では早速詳しく見てみましょう。 HTMLは見出しと段落が続く、よくありそうな構造にしてます。 <div class="content"> <h2 class="heading"></h2> <p>par
scaleでは、負の値が設定できます。 x軸でマイナス1を設定すると、あら不思議。 左右反転させることが出来ます。 ぼくは業務でもかなりの頻度で使っています。 rotate(180deg)でもできるけど… 左右対称の画像の場合、rotate(180deg) で180度回転させることでも反転させられます。 .flip-horizontal { transform: rotate(180deg); } ただし、こちらはあまりおすすめできません。 画像の中心がずれている場合、きれいに左右反転させることができないのです。 これは transform-origin: 50% 50% を指定しても解決できません。 ですので、画像の反転は transform: rotate(-1, 1) がおすすめです。 上下反転するには もし上下反転させたければ、scale(1, -1) とy軸に設定すればいいのです
どうも、イソップです。 WordPressで作成したメディアサイトを、SmartNewsに対応させることがありました。 SmartNewsではSmartFormatという配信の仕組みがあり、 サイトからSmartFormatの仕様に沿ったフィード情報を配信することで、SmartNewsでサイトの記事が表示されます。 WordPressでは、RSSテンプレートをカスタマイズすることで、SmartNewsに対応させることができます。 今回は、WordPressでのSmartNewsへの対応方法を紹介します。 WordPressのRSSテンプレートの複製・読み込み設定 まず始めに、WordPressのインストールディレクトリにある、wp-includes/feed-rss2.php を、 現在使用しているテーマディレクトリへコピーします。 コピーしたファイルの配置ができたら、現在のテーマの fu
どうも、イソップです。 突然ですが、HTMLフォームのデザインカスタマイズって得意ですか? ぼくの個人的な印象だと、カスタマイズが苦手な人って多いと思います。 ぼくも前までは苦手だったんですよ。 フォームパーツのデザインをいじるのってクロスブラウザを意識すると、ややこしくて面倒な印象だったんですよね。 実は今年、ありがたいことにフォームのカスタマイズをする機会が多くありました。 そこでかなりの知見を得ることができたんです。 今日は実際の事例から学んだ、見ためをカンタンにカスタマイズする方法を紹介します。 appearance プロパティを過信するな まず、カスタマイズするときはデフォルトのスタイルをリセットしなければいけません。 ここでやりがちなのが、appearance プロパティを使ってしまうこと。 CSS Appearance – Can I use appearance プロパティ
前回の記事で、Angular2のPipeを紹介しましたが、 すでにはじめから用意されているPipeをいくつか紹介しました。 しかし、Angular2では自分でPipeを定義できるんです。 煩雑になりがちな繰り返し処理をすっきりまとめることができるので、地味に重宝してます。 そこで、今回はカスタムパイプの作成方法を紹介します。 カスタムパイプを定義する 数字を入力すると、それに紐付いた文字列を出力するPipeを定義してみましょう。 「サーバーのAPIから取得する値は数字だけど、ブラウザでの表示は文字列」といったよくある場面を想定します。 今回は1〜9までの数字から、家族の続柄の文字列を出力してみましょう。 family-type.pipe.ts import { Pipe, PipeTransform } from '@angular/core'; @Pipe({ name: 'family
どうも、イソップです。 今日はCSSアニメーションでのイージングの話です。 CSSで用意されている、ease , linear , ease-in , ease-out のイージングは、 バリエーションが少ないのが残念なところですよね。 もっとJSのような動きをつけたいこともよくあります。 cubic-bezier() で自分でイージングを定義出来ますが、仕組みがわからないと手を出せないですし、 cubic-bezier.comなどで、ベジェ曲線を作ってもいいですが、結構手間だったりします。 そこで、個人的に使っているイージングスニペットを紹介します。 このスニペットを使えば、すぐにCSSアニメーションでイージングが使えます。 かなり便利ですよ〜。 最近は凝った演出を実装する機会が多く、スマホでも比較的処理が軽いCSSアニメーションを多用しています。 Sassのイージングスニペット まずは
WordPress の人気SEO対策用プラグイン Yoast SEO では、 Focus keyword という項目を設定できます。 しかし、何のための設定なのかわからなかったので、 Focus keyword について調べてみました。 WordPressプラグイン、Yoast SEO とは? まずはじめに、Yoast SEO の説明をしておきましょう。 Yoast SEO はSEO対策の設定を管理するための、WordPressのプラグインです。 タイトルタグやメタタグの設定はもちろん、SNSアカウントの設定やOGP設定、サイトマップの出力やパンくずリストの表示など、無料で使えるのに超高機能なプラグインです。 Googleトレンドをみるとわかるように、最近非常に人気が上がってきています。 今回はこのプラグインの設定で、Focus keyword という設定項目があり、これが何を指しているの
どうも、イソップです。 最近ボタンのアニメーションを、自分でイチから作る機会が減ってきています。 なぜなら、CSSベースの使いやすいアニメーションライブラリが増えてきているからです。 アニメーション作成は地味に時間がかかるものですよね。 複雑じゃないものだったら、出来上がったものを使ったほうが断然効率的です。 今日は数ある中でも、主要なものを厳選して紹介したいと思います。 Animate.css Animate.cssは、クラスをつけるだけで使える人気のライブラリ。 何度も使っていますが、メリハリのあるアニメーションがカンタンに適用できるので、重宝しています。 やろうと思えば、ダウンロードしたコードをいじってカスタマイズも出来ますよ。 使い方ですが、CSSファイルを読み込んで、
ブログを書いて投稿する時に、SNSへのシェアも同時にしたいですよね。 WordPressなどでは自動でSNSにシェアできるプラグインがありますが、いろいろ試した結果、柔軟性にかけたり日本語では不具合があったりとあまり良くない印象でした。 そこでプラグインではなく、外部サービスをいくつか使ってみてかなり使いやすかったので、何日かに分けて紹介したいと思います。 今回はIFTTT(イフト) を使った自動SNS投稿機能を紹介します。 今回フィード情報をつかうので、RSSなど配信されていることが条件です。 ぼくのブログはJekyllなのでWordPress使っていないのですが、フィード情報さえあれば何の問題もありません。 IFTTT まず最初にIFTTTの説明から。 IFTTT IFTTTというのはサービスとサービスを結びつける仲介役のようなWebサービスです。 「もし、〇〇したら●●をする」という
どうも、イソップです。 以前DOMの連載記事を書きましたが、一覧にまとめておきます。 JavaScript DOM APIの基本を学ぶ 【導入編】 JavaScript DOM APIの基本を学ぶ 【構造編】 JavaScript DOM APIの基本を学ぶ 【取得編1】 JavaScript DOM APIの基本を学ぶ 【取得編2】 JavaScript DOM APIの基本を学ぶ 【取得編3】 JavaScript DOM APIの基本を学ぶ 【操作編】 DOMを理解する理由 JavaScriptを理解できる jQueryでしかコードが書けない、そんな人は「JavaScriptが書けます」なんて言えません。 「DOMを制するものは、JavaScriptを制する」。大げさに聞こえるかもしれませんが、実際そうです。 あわせてイベント処理も覚えておきましょう。 パフォーマンスに気を使えるよう
Angular2でアプリケーションを構築する時に、 親コンポーネントから子コンポーネントを操作したいことが多くあります。 例えば、子コンポーネントの値を取得・変更したい時や、DOMを取得したい時などが挙げられます。 Angular2では、ViewChildren、 ContentChildren を使用することで、 親要素から子要素を参照することができます。 今回はViewChildren、ContentChildren を使用した、子要素の参照方法を紹介します。 ViewChildren とは コンポーネントのテンプレートの中に配置された子要素をViewChildren と呼びます。 使い方は、@ViewChildren もしくは @ViewChild デコレータを @angular/core からインポートして使用します。 @ViewChildren は複数個取得でき、@ViewChi
どうも、イソップです。 Angular2が正式リリースされて、Angular2 QUICKSTARTの内容も更新されています。 そこで、さっそく日本語訳を再作成しました。 最新版はこの記事を参考にしてください。 みなさんの学習に役立ててもらえれば幸いです。 概要 クイックスタートアプリケーションは、実際のAngularアプリケーションの構造を持っていて、 簡単なメッセージを表示します。 実際にやってみてください。ここでは、実際のデモへのリンクです。 また、Githubからクイックスタートアプリケーションを複製することができます。 このアプリケーションを構築します! 前提条件: Node.jsとnpmのインストール ステップ1: プロジェクトの作成と設定 ステップ2: アプリケーションの作成 ステップ3: コンポーネントの作成とアプリケーションへの追加 ステップ4: アプリケーションの開始
どうも、イソップです。 JavaScriptの連続処理を間引く方法として、throttleとdebounceが使われるのは有名です。 よく使われるのは、jQueryのthrottle/debounceプラグインや Underscore.js、lodash.jsのthrottle、debounceメソッドを使う事が多いのではないかと思います。 しかし、jQueryを使わない場合や、ライブラリを読み込んでもそのほとんどの機能を使わないとなると、 違う実装方法が欲しいですよね。 そこで見つけたのが、npmに登録されている throttle-debounce です。 CommonJSスタイル(require)で読み込むので、BrowserifyやWebpackなどのモジュールバンドラーを使う際にも使いやすいです。 実際に試して使いやすかったので、今日はthrottle-debounceを紹介したい
Cloud Functions + TypeScriptでデプロイ時に親階層のnode_modulesが参照されてしまう 2019.05.09
Httpクライアント これから全部で3つのコードを紹介します。 今回例で使うソースコードは公式リファレンスで紹介されているものです。 Ajaxで取得したデータをリストで表示します。 app/toh.component.ts import { Component } from '@angular/core'; import { HTTP_PROVIDERS } from '@angular/http'; import { HeroListComponent } from './hero-list.component'; import { HeroService } from './hero.service'; @Component({ selector: 'my-toh', template: ` <h1>Tour of Heroes</h1> <hero-list></hero-list>
次のページ
このページを最初にブックマークしてみませんか?
『Yohei Isokawa』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く