サクサク読めて、アプリ限定の機能も多数!
トップへ戻る
ノーベル賞
willstyle.co.jp
【MW WP FORM】添付ファイルの保存先を変更して、管理方法を簡単に【Media Library Folders】 こんにちは。 エンジニアの松村です。 最近、久々にガンプラ(ガンダムのプラモデルの略)に手を出しました。 子供の頃ガンダムが好きで、よくプラモデルを買ってもらってたことを思い出したりしながら組み立てたのですが、最近のプラモデルは凄いですね。 塗装無しでも十分カッコいいですし、何より可動域に驚きました。関節部分がグリグリ動きます。 ディスプレイ用のスタンドも買って飾ってます。 さて、今回ですが、WordPressのフォームプラグインであるMW WP FORMについて記事にしてみました。 弊社でも非常にお世話になっているこのプラグイン、様々なカスタマイズが可能です。 その中でも、今回はフォームに添付されたファイルの管理について取り上げたいと思います。 フォームに添付されたファ
はじめまして、ウィルスタイルの岡本です。 2022年3月に中途採用で入社いたしました。職種はWebデザイナーです。 今回はタイトルにもある通り、未経験の職業訓練生だった私がどうやってウィルスタイルに入社したのか、就活エピソードをお話ししていきます。 私と似たような境遇の中、就活に悩んでいる方々にとって少しでも参考になれば幸いです。 Table of contentsもうひとつの夢職業訓練校へウィルスタイルとの出会い一次面接二次面接就活に不安を抱えている方に向けてもうひとつの夢岡山で生まれ育った私には、「保育園の先生になる」という夢がありました。 物心ついた時にはそう決めていたので、両親に頼んでピアノを習わせてもらい、大学では幼児教育を学び、卒業後は晴れて保育教諭として、保育園やこども園で先生をしていました。 そうして4年間働いた頃に、転機が訪れます。婚約のタイミングで、仕事を辞めて岡山から
こんにちは。 エンジニアの松村です。 遂に緊急事態宣言が解除されましたね。 お酒好きの私としては、本当なら外食して騒ぎたい気持ちもありますが、宣言が解除されたからといって油断せずに、もうしばらく大人しくしておこうと思います。 外食できない分、テイクアウトやデリバリーなどを使って、引き続き好きなお店を応援していこうかなと。 さて、今回は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で作られています。 非常に軽量かつ、アクセシビリティにも対応しており、モダンなプラグインといえるでしょう。
こんにちは、CTOの奥田です。 あっという間に年の瀬となり、もう2020年が終わろうとしていますね。 この記事を書いているのは2020年の年末なのですが、今年の年末年始は例年とは少し違ったものになりそうですね。 私も帰省はせず、自宅で過ごすこととなりそうです。 さて、今回は久しぶりにD3.jsの記事です。 構築したグラフが複雑になってくるとズーム機能が欲しくなってくると思います。 D3.jsにはBrushという機能があり、意外と簡単にズームさせることが出来ます。 今回はBrush機能を使ったズーム機能の実装方法についてご説明できればと思います。 Table of contentsチャートを描画するブラシを追加するズームするズームをリセットする「戻る」と「進む」を実装するさいごにチャートを描画するまずはチャートを描画します。 チャートを描画するまでの書き方は前回までのブログを参照ください。
こんにちは。 エンジニアの松村です。 先日、久しぶりに競馬場へ行ってきました。 この秋から一定数の指定席のみが開放され、その席数分入場できるといった形で営業が再開されました。 大勢のファンで賑わっていた、コロナ以前の競馬場の姿とは大きく異なっていましたが、それでも目の前で競走馬が駈ける姿を見れたことが嬉しかったです。 来場されてたい他の方々も、久々の競馬を静かに楽しんでいるようでした。 さて、今回は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とは、データをサーバとクライアント間で送受信するために用いるプ
こんにちは、CTOの奥田です。 いよいよこの時が来たかという感じではありますが、今回のPHP入門はついに「オブジェクト指向」についてです。 ギターで言うと「F」と私はよく言っているのですが、それぐらいオブジェクト指向は理解するのが難しく、挫折する人が多いのではないかと思います。 今回はできる限り難しくないようにクラスの概念だけをご説明できればと思います。 Table of contentsオブジェクト指向とはクラスとはインスタンスとはコンストラクタクラスの継承アクセス修飾子静的メンバさいごにオブジェクト指向とは今までの解説ブログでご説明してきたPHPの記法はいわゆる「手続き型」と呼ばれるもので、設計図無しでただコードを書いてくようなイメージでした。 それとは反対にオブジェクト指向とはクラスを用いて関連するデータとメソッドを組み合わせ、設計をしっかりして構成しましょうという考え方です。 オブ
こんにちは、CTOの奥田です。 先日、義父が急逝しました。 普段は鳥取で生活しており年に数回しか会えなかったのですが、私は義父を実の父のように思っていたので本当に悲しかったです。 お義父さん、どうか安らかに。 さて、サイトやアプリケーションでグラフの描画をすることがあると思います。 最近ではグラフ描画用のライブラリも豊富になっておりますがD3.jsはグラフだけでなく様々なビジュアライゼーションが可能です。 今回はD3.jsについて実際にラインチャートを描画しながらご説明したいと思います。 Table of contentsD3.jsとはインストールチャートの軸を描画する線を描画するエリアを描画するアニメーションさせるデータに沿ってアニメーションさせるツールチップを表示するさいごにD3.jsとはD3.jsとはデータを基盤として、ウェブブラウザで動的コンテンツを描画するJavaScriptライ
【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」をより使いやすく拡張してみましたのでご紹
こんにちはアートディレクターの奥田です。 最近はハンドドリップコーヒーにはまっています。 手軽にペーパードリップですが思っていたより手間もかからず抽出している時間がいいリラックスタイムにもなってオススメです。 コスパでいくと業務スーパーの「ラグジュアリッチコーヒー」がいいのですが味はハマヤのコーヒーが個人的には好きです。 もっと他のコーヒーも試してみたいですね。 さて、ウェブサイトにより強烈な印象を与えるにはアニメーションが欠かせませんが、よくあるSVGアニメーションではつまらなく感じることはありませんか? 今回は少し個性的な印象を与えることができる手書き風アニメーションの実装方法をご紹介いたします。 Table of contents今回実装したいもの用意するものマスク用のレイヤーをつくるSVGでマスクを作るvivus.jsでアニメーションさせるさいごに今回実装したいものまずは今回の完成
こんにちは、アートディレクターの奥田です。 先日自分がバンドをはじめた頃に第一線でライブをしていた兄貴的存在のバンドの限定復活ライブがありました。 自分がバンドをはじめた頃といえばちょうど10年前ぐらいでしょうか。10年の時を経てもその音は色褪せず「バン」と一発、音を出しただけでそのバンドの空気になる。 やはり音楽の持つ力は素晴らしいとあらためて感じました。 さて、Web制作でjQueryとおさらばして数ヶ月経ちますが、調べれど調べれどjQueryのプラグインしか出て来ず困ったという場面が何度かありました。 今回はアニメーションスクロールはこれで決まりでしょうというプラグインがあったのでご紹介致します。 Table of contentsインストール使い方固定ヘッダーの指定URLを更新せずにスクロールさせるイージングコールバック最後にインストールまずはSmooth Scrollをインストー
こんにちは、2018年冬アニメは観たいアニメが多すぎて録画がどんどん溜まっていっています。 アートディレクターの奥田です。 今期アニメで中でもオススメなのが「ヴァイオレット・エヴァーガーデン」、「よりもい(宇宙よりも遠い場所)」「ゆるキャン△」「りゅうおうのおしごと!」このあたりでしょうか。 みなさんもぜひご覧ください。 さて、インタラクティブなユーザーインターフェイスを構築する際にフロントエンドフレームワークを使うとメンテナンス性の高い構築が可能です。 ただ、ReactやAngularなどリッチなフレームワークを導入しようと思うと学習コストも高く、一筋縄では行かない事が多いです。 そんな時、「Vue.js」を使うととても簡単にインタラクティブなユーザーインターフェイスを構築することができます。 今回はVue.jsをつかって簡単にインタラクティブなユーザーインターフェイスを構築する方法をご
こんにちは! つい先日、誕生日を迎えたディレクターの池原です。 学生の頃までは毎年ワクワクしていた誕生日も、社会人になるとあの頃ほど楽しみでも無くなっているな〜、と思っていましたが、やっぱりお祝いされると本当に嬉しいものですね! 改めて、特別な日を祝福してくれるような友人や家族に恵まれている事に、心から感謝した1日でした。 さてさて、9月にウェブ解析士を受けてきた私。 結果は・・・、合格でした! 余裕を持って1ヶ月勉強しましたが、合格ラインギリギリでした。 そこで今回は、私が実際に試験を受けてみて、効果的だったこと、「もっとこうしていたら良かったかな」と思ったことなどをまとめたいと思います。 これからウェブ解析士の受験を検討されている方、参考になれば幸いです。 Table of contentsウェブ解析士とはカリキュラム資格取得のメリット試験の難易度試験までの1ヶ月間試験当日と合格後のレ
こんにちは、今期オススメのアニメはもちろん「NEW GAME!!」ですが、個人的には「メイドインアビス」や、「賭ケグルイ」も面白くて毎回ドキドキしながら見ています。 さて、Webサイトでアニメーションを使って動きのあるサイトを構築する際に、GPUを使って動くCSSでアニメーションさせるほうがもちろん良いのですが、かゆいところに手が届かなかったり、「こうしたい!」が叶えられない場面がまれにあります。 そんな時はJavaScriptでアニメーションさせてしまったほうが手っ取り早いでしょう。 今回は軽量で簡単にアニメーションが実装できる「anime.js」をご紹介致します。 Table of contentsインストール使い方さまざまなアニメーションデュレーション・イージング・ディレイループ・ダイレクションタイムラインの設定コールバック最後にインストールまずはインストール方法です。 公式サイトよ
こんにちは、Art Directorの奥田です。 夏季休暇は妻の実家に帰省し、リフレッシュできるかと思いきや甥たちの強襲に会い、更に疲れが増してしまいました(笑) しかし帰省はやはりいいものですね。もう一つ田舎が出来たようで毎年帰るのが楽しみです。 さて今回はLaravelでさまざまな条件でデータを絞り込む方法をご説明いたします。 Table of contents通常のQueryの使い方複数条件での絞り込みカラム数の違う別テーブルの複数条件での絞り込み結合した結果のページネーションを機能させる方法参考にさせていただいた記事通常のQueryの使い方まずは通常の絞り込み方法です。 Controller側で使用するModelをuseで記述し、queryを呼び出し、最後にget()することで条件の行を取得することが出来ます。 use App\Post; class PostsController
こんにちは、Designer / EngineerからArt Directorに変わりました奥田です。 肩書きはあまり気にしていないのですが、Art Directorというと指示するだけでデザインしていないみたいなのと、後でTechnical Directorも付け加えるべきだなと思ったのは内緒です。 さて、最近ではページの読み込みにローディングをはさんでいるサイトがよくみられます。 そんな時、非同期でページ遷移すれば必要な箇所だけを読み込み、少ないロード時間でページをシームレスに変更することが出来ます。 そこで今回はPjax(非同期画面遷移)を導入できるBarba.jsをご紹介したいと思います。 Barba.js サイトの中になぜPjaxを使うのか、そのメリットが掲載されていたのでご紹介します。 ページ間の素敵なトランジションを作成して、ユーザーのエクスペリエンスを向上させる可能性があり
こんにちは、デザイナーの奥田です。 最近では「脱jQuery」や「Vanilla.js」という言葉が流行っていますがjQueryをはじめに覚えた僕としてはなかなかハードルが高いイメージでした。 jQueryを切り捨てるメリットとしては「ファイルサイズ」や「表示速度」があると思います。そこまで大きな差は感じないかもしれませんが少しでもクオリティを上げるためであれば切り替えてみてもいいかもしれません。 今回は脱jQueryする際によく使う書き方をjQueryとNativeを見比べながら解説していきたいと思います。 Table of contents要素の取得イベントの操作クラスの操作属性の操作スタイルの操作ループ処理Vanilla.jsのプラグイン最後に要素の取得IDはDocument内に1つというルールがあるので取得はgetElementByIdで取得するのが手っ取り早いでしょう。 ID//
こんにちはデザイナーの奥田です。 最近では様々なCSSフレームワークが登場していますね。 個人的にはパイオニア的存在でもあるBootstrapを今後も支持していきたいところです。 今回はさらに進化を遂げた「Bootstrap4」のBootstrap3からの変更点を簡単にまとめてみました。 では早速まいりましょう。 Table of ContentsBootstrap4とは使用しているCSSプリプロセッサーがSassに変更された基本単位がremに変更されグローバルフォントサイズが14pxから16pxに変更されたグリッドシステムがflexbox対応になり基準のサイズ名が変更になったPanelsが廃止され、Cardsが追加された汎用クラスが追加された各種記述法が変更された最後にBootstrap4とはBootstrapとは、いまやWebデザイナー・Webエンジニアで知らない人はいないのではないか
次のページ
このページを最初にブックマークしてみませんか?
『Will Style Inc.|神戸にあるウェブ制作会社』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く