スピーカー自己紹介、『JavaScript コードレシピ集』を出版池田泰延 氏（以下、池田）：みなさんよろしくお願いします。ICSの話として、私と鹿野の2名で発表します。HTMLとかCSSとかJavaScriptとか、フロントエンドまわりの最新を説明していきたいと思います。では始めていきましょう！ ます自己紹介します。ICSの池田と言います。株式会社ICSの代表をやっています。これはオフィスの写真でして、南麻布にあるのですが、こんなところで仕事をやっています。今はこの状況下なので、会社にはほとんど誰も行っていませんが、こんなところでやっていました。 JavaScriptに関して2年ほど前に『JavaScript コードレシピ集』という本を出しています。この本はまだ役に立つ内容もあるかなと思いますので、もし書店で見かけましたらぜひご購入を検討ください。宣伝でした。 Webの劇的な変化は少なく

まずは作ったサイトを貼っておきます。 https://wp-nuxt-for-netlify.netlify.com/ いかがですか？現在住んでいるオーストラリアのADSLな爆遅回線でも、爆速です。 WordPress は heteml のレンタルサーバーですよ？ 感動しすぎたので、徒然なるままに〜。 ざっくり構成 WordPress側 リニューアル中の家族ブログ（ https://nishida.lol ） Heteml レンタルサーバー（月額 2000円） Heteml で無料SSL WP REST API でGET APIだけ利用 https://v2.wp-api.org/ フロント側 Nuxt Nuxt.js 1.0.0 nuxt generate で静的ファイル生成 netlify にホスティング https://www.netlify.com/ GitHub 上で nuxt

WordPress5.0から採用されるGutenbergだが、決定的に新しい概念として、「ブロック」というものがある。ブロックの正体は <!--wp:xxx--><!--/wp:xxx--> というHTMLコメントで囲まれた独自タグのようなものだが、これは独自に追加することができる。ショートコードのようなものだと思ってもらっていい。 このコメント、筆者はあまり好きではない。純粋なHTMLを保存したかった。 これにかなり近い機能として、現時点でも使えるプラグインに Shortcake というものがあり、筆者も便利に使っていたのだが、こちらはBackbone製でおいそれとカスタマイズできるものではないので、公式採用にいたらなかったのだろう。 なにはともあれ、Gutenbergをカスタマイズして使いこなすにあたって避けられられないのがブロックである。今回はReactがなんなのかをよくわからないま

さて、本連載はWordPressをバックエンドにしてREST APIとJavascriptによるアプリケーションを作成するためのチュートリアルである。利用するライブラリはVue.JS、作成するものはジョブボードである。 前提 対象とする読者 WordPressを使ってテーマカスタマイズを行ったことがある人。 基礎的なJavascriptの知識（変数の取り扱い、文法）がある人。ES2015以降の新しい記法については知らなくても構わないが、if-elseも書いたことがないというレベルだと厳しいかもしれない。 目的 WordPressをアプリケーションバックエンドとして、Webアプリケーションを作成する。 免責事項 WordPressにはジョブボードプラグインがすでに存在するので、「手っ取り早くジョブボードを実装したい」という人に本チュートリアルは向かない。 Vue.JSとは Vue.JSは人気

WordPressの新しいエディタGutenbergは紆余曲折を経てReactでの開発を続けており、2018年5月ぐらいのリリースを目指しているようだ。新しいAPIも整備されつつあり、カスタムフィールド製造業界を震撼させたメタボックスも新しいAPIが整備されつつある。 さて、いずれにせよ、投稿編集画面に新しい時代が訪れることは間違いないので、それをどのように作っているのかについて知っておくのは悪いことではない。 Reactに関する前提知識 今回の記事ではあまり詳細に立ち入らないが、Reactは昨今のJavascript開発を牽引するライブラリであり、2010年ごろのJavascript開発とは圧倒的に違っている。圧倒的に変わった点として、次のようなものがある。 npmを使ったパッケージ管理。npm install というコマンドをなんでかよくわからないまま打たされている人も多いだろう。基本

Ajaxを使ったWordPressプラグインの開発方法を学びましょう。独自の「あとで読む」機能を実装するプラグインの作り方を例に解説します。 急速に広まったWebテクノロジー「Ajax」は、ほとんどのWebサイトで使われています。Ajaxの重要な機能は、Webページをリロードせずにデータベースが操作できることです。つまり、ページを更新することなくデータベースからデータを取得してブラウザーに表示できるのです。 Ajaxは、素早くそしてスムーズにコンテンツを表示できるため、いまやさまざまな用途でWebサイトに使われるようになりました。たとえば、ブログコメントの投稿、記事間のリンク、ファイルのアップロードなどです。Webサイトを完全にAjax化して、サイトのどのページでも非同期で読み込めるようにすることさえも可能です。 この人気を受けて、大半の有力CMSがその仕組みにAjaxを取り入れています。

WordPress REST APIを利用した投稿の取得と新規投稿と、Advanced Custom Fields (以下 ACF) を利用したカスタムフィールドの所得・更新を行ってみました。 今回検証に使用した環境は以下になります。 PHP 5.6 WordPress 4.5.3 Advanced Custom Fields 4.4.7 WordPress REST API (Version 2) 2.0-beta13.1 Application Passwords 0.1-dev ACF to REST API 2.2.0 注意 公式のページにもあります通り、WP REST APIはまだベータ版となりますので使用には十分注意して下さい。 重要: ベータ1は、将来のバージョンで互換性が保障されているわけではありません。公にテストを行うには十分な信頼性があると考えていますが、さらに改善する

この投稿は 13年 前に公開されました。いまではもう無効になった内容を含んでいるかもしれないことをご了承ください。 Never Let Me Go 先ほど拙作WordPressプラグインのNever Let Me Goをアップデートしたので、その際の作業ログです。基本的にはWordPressを知っていて、PHPとかJavascriptとかはまあわかるかなという人を対象にしています。それでは、レッツスタディ。かなり長いですよ。 成果物 Ajaxでユーザーを検索して、IDと名前の一覧を取得して表示、選択すると該当するユーザーIDをinputタグにセットします。 管理画面でのインクリメンタル検索 Ajaxを導入した経緯 Never Let Me Go（以下NLMG）はユーザーが自分で退会できるようにするプラグインなのですが（参考）、そのユーザーがコンテンツを作成していた場合、そのコンテンツは消え

この投稿は 10年 前に公開されました。いまではもう無効になった内容を含んでいるかもしれないことをご了承ください。 さて、前回まででボタンを出力することに成功したのですが、ボタンがどんな風になるかはtwitterのUIをパクる参考にすることでわかりましたね。ボタンの遷移はこんな感じになります。 フォローしていない場合は「フォロー」と表示 フォローしている場合は「フォロー中」という表示 「フォロー中」にマウスオーバーすると、「解除」という表示になる あと、どんなアクションがあればいいでしょうか。ちょっとここで立ち止まって考えましょう。 そうですね、まずログインしていないユーザーにはどんな風に表示すべきでしょうか。twitterにログアウトした状態でアクセスすると、「フォロー」というボタンを押すことでユーザー登録ダイアログが開きます。下の方には「アカウントを持っている人はログイン」というリンク

Before visitors click on a link, they hover over that link. Between these two events, 200 ms to 300 ms usually pass by (test yourself here). 引用：InstantClick — JS library to make your website instant リンクにマウスオーバーしてからクリックするまでには200msから300msほど時間がかかるそうです。実際このテストページでクリックしてみるとMacのトラックパッドだとさらに遅く500msくらいかかってました。 InstantClick.ioはその間に裏でリンク先ページをロードして勝手にリンクをpjax化してしまうという高速化ライブラリです。 やってることはRails4のturbolinksと似てます

ご連絡頂いて、良さ気だったので ご紹介。以前記事にした、テキスト の両端を揃えるタイポグラフィ系 のスクリプト・slabTextを日本語 でも利用出来るようにし、且つWP で利用出来るようにしてくれました。 今年の1月くらいにご紹介したslabTextをWPで、且つ日本語で利用出来る、というプラグインです。slabTextに関しては以前の記事をご参照下さい。 テキストのサイズを自動調整して幅一杯に広げるレスポンシブWebデザイン対応のjQueryプラグイン・SLABTEXT 過去記事でも書いたように、普通に使っても日本語環境で使うのは若干微妙でした。（単語単位で半角スペースを入れる必要があった）これをうまく解消してくれているので需要も結構あるのでは無いかなと思います。 もともと目をつけていたスクリプトだったので日本語環境で利用出来るようになったのはとても嬉しいです。スクリプトの開発者さんは

こういうふうに説明してもらえたら、もっと速く理解できたのにな、ということをまとめて見ました。 テンプレートタグの使い方だけでなく、テンプレートタグが動くに至るまでの仕組みについて、サーバ、htmlとphpの関係、データベースなどの話を絡めて作っています。 初心者がWordPressをインストールした時に、ぶつかる壁について話をしたつもりです。 上級者には初心者が何に躓き易いかが気が付きにくく、初心者は自分が何がわからなくて迷子になっているのかが分からない。 その間が埋められればと思っています。 YouTubeに動画が上がるそうなので、そちらもお楽しみに！

この記事は年以上前に書かれたもので、内容が古かったり、セキュリティ上の問題等の理由でリンクが解除されている可能性があります。 WordPressで作ったWebサイトを、 スクロールすると、次ページが 自動でロードされる無限スクロー ルが出来るようにする、という 方法です。今更感満載ですけど。 よく見かける、「スクロールするだけで次ページが次々とロードされる」みたいなサイトをWordPressで作ろう、みたいな話。既出な話題なので基本的な導入方法だけ書きます。 無限スクロール(Infinite Scroll)出来るようにする WordPressを無限スクロール出来る様にします。 以下、手順。サンプルコードはTwenty Elevenで動作テストしています。 スクリプトを用意する 無限スクロールさせるスクリプトを用意します。いろいろあるのでお好みで構いません。今日はWordPressのプラグイ

『フォトショップ・ブイアイピー』の新着記事です。フォトショップやデザインをたのしむウェブサイト。2009年３月創刊以来、3800を超えるコンテンツを更新しています。フリーフォントなどの無料デザイン素材／配色やWeb制作といった最新トレンドも公開中。

2017年6月29日 Webサイト制作, Webデザイン, 便利ツール iPhone持ってないくせにWebクリエイターボックスをiPhoneで見やすいよう改良しました。iPhoneからhttp://webcreatorbox.comにアクセスすると自動的にhttp://webcreatorbox.mobify.meにリダイレクトされます。（されてなかったら直接http://webcreatorbox.mobify.meからドウゾ…）今回は下記に説明するmobifyというサイトからiPhone用サイトを作りましたが、他にも便利な方法があったので紹介してみます。 ↑私が10年以上利用している会計ソフト！ 1. CSSのみで切り替える iPhone用に作成したCSSを作り、デバイスの幅によって使用するCSSを切り替えます。 &amp;amp;amp;amp;amp;amp;lt;link rel