はてなブックマーク

こんにちは。 エンジニアの松村です。 遂に緊急事態宣言が解除されましたね。 お酒好きの私としては、本当なら外食して騒ぎたい気持ちもありますが、宣言が解除されたからといって油断せずに、もうしばらく大人しくしておこうと思います。 外食できない分、テイクアウトやデリバリーなどを使って、引き続き好きなお店を応援していこうかなと。 さて、今回はWordPressプラグインWP Mail SMTPを使用し、Gmailからメール送信する方法を解説したいと思います。 フォームご利用でプラグイン設定が無い場合、Wordpressはデフォルトのメール送信方式（Sendmail）で送信しようとしますが、この場合だと、受信側で迷惑メールに分類される可能性があります。 そのため、メール送信にはSMTPサーバーを利用するのがおすすめです。 そこで、無料で取得できるGmailとあわせて、プラグインの設定方法をご説明しま

セレクトボックスはセレクト要素自体の背景にSVGでアイコンを配置することでwrapすることなくプルダウンアイコンを表示できます。 また、こちらもフォーカスした時にoutlineをbox-shadowで表現しています。 multipleの時はheight:autoにし、プルダウンアイコンを非表示にしています。 .c-select{ &:focus{ border-color:rgba($select-focus-color,.3); outline: none; box-shadow: 0 0 0 3px rgba($select-focus-color,.2); } &:disabled{ background-color: #eee; cursor:not-allowed; } &[multiple]{ height: auto; background-image: none; padd

こんにちは。デザイナーの山田です。 激動の2020年が終わろうとしています。今年は本当に大変な1年でした。 来年の今頃はどうなっているのか、今の時点では全く想像ができません。 少しでも世の中が好転しているといいですね。 今回はプラグインのご紹介です。 JavaScriptの自己学習の中で色々なプラグインに巡り合うのですが、その中でも実務に取り入れたいと感じたものを見つけました。 今回の記事が、皆様の参考になれば幸いです。 Table of contents「Micromodal.js」の特徴インストール使い方オプションJavaScriptからモーダルを操作するおわりに「Micromodal.js」の特徴「Micromodal.js」は、jQueryを用いない、純粋なJavaScriptで作られています。 非常に軽量かつ、アクセシビリティにも対応しており、モダンなプラグインといえるでしょう。

こんにちは。 エンジニアの松村です。 先日、久しぶりに競馬場へ行ってきました。 この秋から一定数の指定席のみが開放され、その席数分入場できるといった形で営業が再開されました。 大勢のファンで賑わっていた、コロナ以前の競馬場の姿とは大きく異なっていましたが、それでも目の前で競走馬が駈ける姿を見れたことが嬉しかったです。 来場されてたい他の方々も、久々の競馬を静かに楽しんでいるようでした。 さて、今回はGoogleMapについてです。 2018年にGoogle Maps APIの仕様が大きく変わり（Google Maps Platform）、サイト上のGoogleMapカスタマイズにはAPIキーが必須となりました。 仕様変更に伴い、iframeに差し替えた方も多いのではないでしょうか。 iframeのGoogleマップは基本的にカスタマイズ出来ないのですが、実はcssで色合いを変更することが可

こんにちは。Webデザイナーの山田です。 とても暑い日々が続いていますが、皆さまいかがお過ごしでしょうか。 今年はマスクをつけて外出されることが殆どだと思います。しっかり水分を取って熱中症にならないよう、ご自愛くださいませ。 さて今回は、Webのアクセシビリティを考慮するうえで切り離せない存在である「WAI-ARIA」についてご紹介いたします。 個人的な振り返り・備忘録をかねた記事となっておりますが、何かの参考になりましたら幸いです。 Table of contentsWAI-ARIA（ウェイ エリア）とは暗黙のARIAセマンティクスWAI-ARIAを利用したコーディング例さいごにWAI-ARIA（ウェイ エリア）とは WAI-ARIAとは、「Web Accessibility Initiative – Accessible Rich Internet Applications」の頭文字を

<!-- unpkg --> <script src="https://unpkg.com/@barba/core"></script> <!-- jsdelivr --> <script src="https://cdn.jsdelivr.net/npm/@barba/core"></script><script> barba.init({ // ... }) </script>また、モダンブラウザであれば動作するようですが、以下のスクリプトをサポートしていないブラウザはPolyfillが必要です。 PromiseSet() and Map()Array.prototype.findIntersectionObserver(@barba/prefetchで使用)polyfill.ioであれば下記を読み込んでください。 <script src="https://polyfill.io/v3

こんにちは。 エンジニアの松村です。 新型コロナウイルスの影響により、弊社も4月1日からテレワークを実施しています。 まだまだ落ち着くような気配も無く、1日も早い事態収束を願うばかりです。 テレワークを開始してしばらくは観葉植物の水やりに事務所へ行っていましたが、極力外出を控えるために先日自宅へ運んできました。 水やりの効果か順調過ぎるぐらい育っており、運ぶのに割と苦労しました。 さて、今回はテレワークにちなんだツールの紹介です。 テレワークに伴いweb会議の機会も多くなると思いますが、webカメラ自体をお持ちで無い方もいらっしゃるのではないでしょうか。 そんな時、「EpocCam」を使えばお持ちのスマートフォン・タブレット（iOS/android）を、そのままwebカメラとして使用することが出来ます。 携帯端末がwebカメラになれば、カメラの位置も自由に出来るのでそういった面でも便利なツ

<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollTrigger/1.0.3/ScrollTrigger.min.js"><script>使い方使い方は以下です。ES6方式のimportを使用した場合とscriptを読み込んだ場合とで少し記法が違うので注意してください。 import ScrollTrigger from '@terwanerik/scrolltrigger' const trigger = new ScrollTrigger() trigger.add('[data-trigger]') scriptを読み込んだ場合は.default()が必要です。 <script src="/path/to/ScrollTrigger.min.js"><script> <script> const trigger = n

こんにちは、CTOの奥田です。 新年あけましておめでとうございます。 昨年もたくさんの方にブログをご覧いただき、ありがとうございました。 本年も気を引き締めてより一層良い制作ができるよう努めてまいります。 2020年もどうぞよろしくお願いいたします。 さて2020年1発目のブログはaxiosについてです。 昨今のWebサイトは非同期でアレコレするのが当たり前になっています。 axiosを使えば簡単に非同期処理を実装することができます。 今回はそんなaxiosについてご説明したいと思います。 Table of contentsaxiosとはインストールGET通信POST通信エラーハンドリングaxios APIを使用するさいごにaxiosとはaxiosとはブラウザやnode.js上で動くPromiseベースのHTTPクライアントです。 jQueryで言うところのjQuery.ajaxであり、非

こんにちは、Designerの松並です。 今年の夏も終わりですね、朝晩は冷える日が多くなってきました。 皆様、体調管理には十分お気をつけくださいませ。 さて今回は、2017年10月19日に正式版がリリースされた「AdobeXD」を今更ながらですが、紹介させていただこうと思います。 Table of contentsAdobeXDとはAdobeXDでデータ作成プロトタイプ作成（遷移設定）さいごにAdobeXDとは AdobeXDは、Webアプリやモバイルアプリ用のユーザー操作性をデザインし、プロトタイプ化するためのベクターベースのツールです。ワイヤーフレーム、ビジュアルデザイン、インタラクションデザイン、プロトタイプ化、プレビュー、共有間の切り替えが簡単な、オールインワンの強力なツールです。（公式サイトより） AdobeXDには無料の「スタータープラン」があり、誰でも簡単に始められます。 ま

こんにちは、CTOの奥田です。 先日、Twitterでお誘いをいただき「関西のイケてる人たち」の飲み会に参加させていただきました。 参加メンバーの方は現場でバリバリやっておられる方や、フリーランスの方、経営者の方などすごい方ばかりで非常に恐縮でしたが、すごく良い刺激をいただきました。 「奥田さんのブログ見ましたよ」って言っていただき嬉しい限りです。 神戸というローカルな場所ではありますがこれからもコツコツとより良いモノを作っていきたいと思います。 さて今回はPHPの内容というよりはどちらかというとHTTPの仕様のお話になります。 ただ、PHPとは切っても切れない関係ですので必ず覚えておくと今後の学習にも役立つと思います。 Table of contentsGETとPOSTGETPOST使い方の違い注意すべきことさいごに HTTPとは、データをサーバとクライアント間で送受信するために用いるプ

【JavaScript】Pure JavaScriptで書かれたシンプルで使いやすいモーダルプラグイン「Tingle.js」 こんにちは、CTOの奥田です。 先日イチロー選手が引退されました。 小学生の頃、近所の友達とグリーンスタジアムにオリックスの試合を何度か観に行きました。 彼の素晴らしいプレーとその肩に書かれた「がんばろう神戸」の文字は私達に勇気をくれました。 いつまでも私のヒーローはイチロー選手です。 長い現役生活、本当にお疲れ様でした。 さて、今回はPure JavaScriptで書かれたシンプルなモーダルを実装できるプラグイン「Tingle.js」をご紹介致します。 Table of contentsTingle.jsとはインストール使い方カスタマイズ方法iframeの表示フッターボタンのコールバックさいごにTingle.jsとはTingleは Pure JavaScriptで

こんにちは、CTOの奥田です。 WordPressでサイトを制作している時に必要となってくるのがメールフォームだと思います。 一番ポピュラーなメールフォームプラグインといえばContact Form 7がありますが、確認画面を出力するにはカスタマイズが必要だったり何かと手がかかります。 そんな時、「MW WP Form」を使えば確認画面付きのメールフォームを簡単に設置できます。 今回は更に「MW WP Form」で作成したメールフォームに任意の項目を追加する方法をご紹介いたします。 Table of contents「MW WP Form」とはフォームと投稿を紐付ける投稿内の任意の値を選択項目で出力する任意の選択項目を任意の数だけ出力するさいごに「MW WP Form」とは「MW WP Form」とはWordPressで構築したサイトに確認画面付きのメールフォームを簡単に設置できるプラグイ

こんにちは、Designerの松並です。 2018年9月27日でGoogleが20年目の誕生日を迎えたそうです。 創立20周年おめでとうございます。これからもよろしくお願いいたします。 ブラウザはChrome、GoogleドキュメントにGoogleスプレッドシート、動画サイトといえばYouTube、その他にもあらゆる場面でGoogleが登場するようになりました。 さらに先月の9月19日にはGoogle Pixel 3を日本で発売する予定であることが発表されましたね。 皆さんはそんなGoogleが昨年公開した、新しい求人検索機能「Google for Jobs」というサービスをご存知でしょうか？ リスティング広告とオーガニック検索の間に新たに生まれた求人検索に特化したGoogleの新しいサービスです。 本記事では、Google for Jobsの基本情報やマークアップの方法等をご紹介させてい

こんにちは、制作の奥田です。 今期から取締役 CTOに就任しました。 就任したからといってもやる業務は大きくは変わる事はなく、引き続き魂を込めて制作していきたいと思います。 さて、VanillaJSでWebサイトやWebアプリケーションを作っておられる方で良いLightboxがなく困った方も多いのではないでしょうか？ 先人達の涙ぐましい努力の甲斐もありjQueryにはLightbox系のプラグインが豊富に存在します。 ですがVanillaJSにはそれほど多くはありません。 そんな中VanillaJSで使える「PhotoSwipe.js」は非常に高機能でレスポンシブにも対応しており大変便利です。 しかし、ただJavaScriptとCSSを導入し、Scriptを数行書いて実行するだけでは使えないのが難点です。 今回は高機能な「PhotoSwipe.js」をより使いやすく拡張してみましたのでご紹

こんにちは、アートディレクターの奥田です。 先日、日本列島を襲った台風21号、皆様は大丈夫でしたでしょうか？ 僕は幸い家は無事でしたが26時間停電し、マンションのテレビのアンテナが壊れ10日間テレビのない生活を強いられました。 普段はニュースや録画したアニメを観る程度なのですが、いざ観られないとなると逆に気になるものですね。 北海道地震も含め、もっと大変な思いをされた方もいらっしゃると思います。 一日も早い復興と、皆様が日常の生活に戻れるよう、お祈り致します。 さて、ここ数年のフロントエンド界隈の発展は目覚ましく、わりとカオスな状況になっているとよく言われていますね。 現在はビルドツールに関してはWebpackが主流なのではないでしょうか。（また変わってくる可能性は大いにありますが・・・） ただ、Webpackは設定ファイルの書き方が特殊でなかなか一筋縄ではいかないのが現状です。 僕がよく

こんにちは、アートディレクターの奥田です。 以前、Pjaxを簡単に導入できるBarba.jsをご紹介いたしました。 前の記事：Pjax（非同期画面遷移）でシームレスな画面遷移ができるBarba.js シームレスでかっこいいWEBサイトの制作にはBarba.jsが非常に便利なのですが、リンククリック時の動作やメタタグの取得などちょっとしたことで躓くことがあります。 今回は僕がこの1年ほどで使用してきたスニペットをご紹介したいと思います。 サイト制作のお役に立てていただければ幸いです。 Table of contentsGoogle Analyticsを有効にするheadタグ内の必要なメタタグを取得する該当する拡張子がついたリンクにtarget=”_blank”をつける外部リンクにtarget=”_blank”をつけるアンカーリンクであり同一ページでなければPjaxを有効にする該当クラスに属し

ディレクターの池原です。 先日ひどい大雨が続いた日、パン屋さんで買い物をして外に出ると、持ってきたはずの私の傘がありませんでした。 土砂降りで途方にくれていたところ、ちょうどパン屋さんに入ろうとしていた、がっしりとした体格のやや強面なお兄さんが「ぼく近くなんで。」といって、なんと見ず知らずの私に傘を差し出してくださいました。 胸があたたかくなった帰り道、事務所に着いて傘を置いた時、持ち手にクローバーのシールが貼ってあるのに気づき、さらにほっこりとさせられました。 またお会いした際には、ぜひお礼とお返しがしたいなと思っています。 さて、今回はおなじみGoogleの便利なツールのひとつ、Googleドキュメントの便利な機能をご紹介したいと思います。 Table of contentsGoogleドキュメントとはドキュメントを共有するWord形式へエクスポートするURLから画像を挿入する便利な目

こんにちはアートディレクターの奥田です。 最近はハンドドリップコーヒーにはまっています。 手軽にペーパードリップですが思っていたより手間もかからず抽出している時間がいいリラックスタイムにもなってオススメです。 コスパでいくと業務スーパーの「ラグジュアリッチコーヒー」がいいのですが味はハマヤのコーヒーが個人的には好きです。 もっと他のコーヒーも試してみたいですね。 さて、ウェブサイトにより強烈な印象を与えるにはアニメーションが欠かせませんが、よくあるSVGアニメーションではつまらなく感じることはありませんか？ 今回は少し個性的な印象を与えることができる手書き風アニメーションの実装方法をご紹介いたします。 Table of contents今回実装したいもの用意するものマスク用のレイヤーをつくるSVGでマスクを作るvivus.jsでアニメーションさせるさいごに今回実装したいものまずは今回の完成

こんにちは。ディレクターの池原です。 自宅の向かいにあるお店の桜が開花していました。 春の訪れを感じますね。 さてさて、最近はGoogleサービスに若干頼りすぎな気がする私ですが、普段はプロジェクトの進捗を管理するのにGoogleスプレッドシートを活用しています。 今回は実際に私が使用しているプロジェクト管理シートをご紹介したいと思います。 Table of contentsGoogleスプレッドシートとは？使い方機能のご紹介プロジェクト管理シートの公開おわりにGoogleスプレッドシートとは？ Googleスプレッドシートとは、Googleによって開発された無料の表計算ソフトです。 Googleのアカウントを所有（無料）していれば、誰でも利用することができます。 表計算ソフトといえばMicrosoftのExcelですが、Googleスプレッドシートは表計算や関数の使用、グラフ化といった、

こんにちは、アートディレクターの奥田です。 先日自分がバンドをはじめた頃に第一線でライブをしていた兄貴的存在のバンドの限定復活ライブがありました。 自分がバンドをはじめた頃といえばちょうど10年前ぐらいでしょうか。10年の時を経てもその音は色褪せず「バン」と一発、音を出しただけでそのバンドの空気になる。 やはり音楽の持つ力は素晴らしいとあらためて感じました。 さて、Web制作でjQueryとおさらばして数ヶ月経ちますが、調べれど調べれどjQueryのプラグインしか出て来ず困ったという場面が何度かありました。 今回はアニメーションスクロールはこれで決まりでしょうというプラグインがあったのでご紹介致します。 Table of contentsインストール使い方固定ヘッダーの指定URLを更新せずにスクロールさせるイージングコールバック最後にインストールまずはSmooth Scrollをインストー

こんにちは、2018年冬アニメは観たいアニメが多すぎて録画がどんどん溜まっていっています。 アートディレクターの奥田です。 今期アニメで中でもオススメなのが「ヴァイオレット・エヴァーガーデン」、「よりもい（宇宙よりも遠い場所）」「ゆるキャン△」「りゅうおうのおしごと！」このあたりでしょうか。 みなさんもぜひご覧ください。 さて、インタラクティブなユーザーインターフェイスを構築する際にフロントエンドフレームワークを使うとメンテナンス性の高い構築が可能です。 ただ、ReactやAngularなどリッチなフレームワークを導入しようと思うと学習コストも高く、一筋縄では行かない事が多いです。 そんな時、「Vue.js」を使うととても簡単にインタラクティブなユーザーインターフェイスを構築することができます。 今回はVue.jsをつかって簡単にインタラクティブなユーザーインターフェイスを構築する方法をご

こんにちは、今期オススメのアニメはもちろん「NEW GAME!!」ですが、個人的には「メイドインアビス」や、「賭ケグルイ」も面白くて毎回ドキドキしながら見ています。 さて、Webサイトでアニメーションを使って動きのあるサイトを構築する際に、GPUを使って動くCSSでアニメーションさせるほうがもちろん良いのですが、かゆいところに手が届かなかったり、「こうしたい！」が叶えられない場面がまれにあります。 そんな時はJavaScriptでアニメーションさせてしまったほうが手っ取り早いでしょう。 今回は軽量で簡単にアニメーションが実装できる「anime.js」をご紹介致します。 Table of contentsインストール使い方さまざまなアニメーションデュレーション・イージング・ディレイループ・ダイレクションタイムラインの設定コールバック最後にインストールまずはインストール方法です。 公式サイトよ