サクサク読めて、アプリ限定の機能も多数！
トップへ戻る
ドラクエ3
willstyle.co.jp
こんにちは、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エンジニアで知らない人はいないのではないか
こんにちは、今期アニメは本当に久々の豊作で毎週のアニメ消化も忙しくしているデザイナーの奥田です。 さて、久しぶりにLaravelを使って開発を行う機会がありました。 その際に使った5.2からのデフォルトの機能であるマルチ認証をご説明したいと思います。 Table of ContentsLaravel 5.4をインストール通常のAuthの生成とadminsテーブルとAdminモデルの作成Authの設定とリダイレクトの設定、ルーティングの設定コントローラーの作成ビューの作成最後にLaravel 5.4をインストールまずはじめにhomesteadをインストールしLaravel5.4をインストールします。 homesteadのインストール方法についてはこちらをご覧ください。 composer create-project laravel/laravel Laravel --prefer-dist途
こんにちは。愛鳥家の池原です。 インコと暮らして10年以上になります。 最近は全国各地でインコフェスや、インコ好きのオフ会が開催される程のインコブームです。 インコアイスなんてのもあるんですよ。 神戸でも近々、インコグッズのイベントがあり、私は非常にワクワクしております。 さて、ここまで「インコ」をしつこく連呼しましたが、 今回はウェブ制作の過程で必ず必要になるサイトマップを、無料のソフトXMindを使って簡単に作成する方法をご紹介いたします。 Table of ContentsXMindとはダウンロードしてみる実際にサイトマップを作ってみる無料で使える便利な機能のご紹介プリントする際の設定方法おわりにXMindとはXMindとは香港のXMindLtd.社が開発しているオープンソースのソフトフェアです。 このソフトを使用して、マインドマップ、フィッシュボーンチャート、ツリー図、組織関係図な
こんにちは、2017年春アニメは良作揃いで今からワクワクが止まらないデザイナーの奥田です。 さて、ワクワクといえばIE9、10のサポート終了でかなりできる幅が広がりワクワクしますね。 個人的にはjQueryを切り捨て（jQuery今までありがとう！）できるだけコードはネイティブで書きつつ、モダンな環境で構築するという新たなステージに挑戦しました。 今回は僕が構築したWebサイト制作におけるフロントエンド開発環境をご紹介いたします。 「もっといい方法があるよ！」という方はぜひご一報ください。 Table of contents使用するビルドツール必要なパッケージをインストールするgulpfile.jsを作成するwebpack.confg.jsを作成する最後に使用するビルドツール今まではgulpでBrowserifyを使用していましたが今流行のWebpackに移行しました。 本来Webpack
こんにちは。デザイナーの池原です。 弊社の事務所から一望できる六甲山へ、先日ハイキングに行ってきました。 いつも見上げてる山を歩きながら、神戸を満喫してきました。 その後1週間程、筋肉痛女子でした。 歩き方がロボットでした。 さて！普段お客様とお話をしている中で、「サイトって自分でも作れそうな気がするのだけれど…」というご質問をいただくことがあります。 確かにウェブサイトを簡単につくれるようなテンプレートがあったり、私自身も独学で作っていた経験があるので、出来ないこともないのではないかと思います。 しかし実際にウェブ業界に飛び込んでみて、『ウェブサイトは、ただ見れれば良いんじゃないんだ！』と、多くの気づきや学びがありました。 そこで今回は、企業のコーポレートサイトを作る際に、抑えておきたいトレンドやポイントなどを考えて、まとめてみたいと思います。 Table of secウェブサイトとはウ
こんにちは、デザイナーの奥田です。 最近フロントエンドでは「脱jQuery」なんて言われていますね。 まだまだjQueryバリバリ書いてますって方もちょっとずつ「脱jQuery」していくとこの先もスキルが活かせると思います。 さて、今回は「もう最近の案件はこれしか使っていないんじゃないか？」というぐらい高機能で便利なスライダーをご紹介いたします。 Table of contentsSwiperの使い方カルーセル表示にするレスポンシブに対応するPC時はグリッド表示、スマホ時にスライドにするサムネイル付きカルーセル表示その他オプションまとめSwiperの使い方まずは普通に使ってみましょう。下記よりファイルをダウンロードするかCDNでの使用でも実装できます。 SwiperCDN CSSとJSを読み込みます。 <html> <head> <link rel="stylesheet" href="h
こんにちは。デザイナーの池原です。 いつも優しい先輩方にぬくぬくと囲まれ、やっとお仕事に慣れてきた私ですが、最近タイ・インドのカレーにハマっております（まだ違いがよく分かっていない） 日々、三ノ宮駅付近のカレー屋さんを開拓中です。 そして外食カレーを極めた暁には、スパイスを揃えて本格カレーを自作してみようと目論む今日この頃です。 さて、今回は先輩から教えていただいたイラストレータの整列パネルの使い方についてまとめてみました。 Table of contents整列パネルを活用しよう中央に整列させる上に整列させる均等に配置させるすべてを組み合わせてみる最後に整列パネルを活用しよう 整列パネルとは、こんなアイコン達が並ぶパネルです。 水平方向に整列。 縦に並んだオブジェクトを揃えたい時に活用できます。 垂直方向に整列。 横に並んだオブジェクトを揃えたい時に活用できます。 垂直方向に分布。 縦に
【Adobe Creative Cloud】Typekitの使い方まとめ フォント選びをもっと簡単、スマートに こんにちは。 春競馬に向け気分が高まりつつあるディレクターの松村です。 今年は新設G1が２つもあり、そのうち１つは阪神競馬場で春に開催されます（嬉しすぎる）。 ただ、もう一つの新設G1は有馬記念よりも更に後に開催だそうです。 有馬記念で終わるからこそいいと思うんですが…。 さて、競馬の話はこの辺にしまして、今回はTypekitについてです。 Adobeが提供する、数多くのフォントが利用できるサービスで、弊社でも制作する上で非常にお世話になっています。 というわけで、その使用方法について簡単にまとめてみましたのでご覧ください。 Table of ContentsTypekitとは同期してみるWebフォントとして使用してみる終わりにTypekitとはAdobe Creative Cl
はじめまして。 デザイナーの池原です。 先日、社内でSEOについての勉強会に参加しました。 とても分かり易い内容でした。 今回は私の復習も兼ねて、教わった事をまとめてみたいと思います。 ご参考になれば幸いです！ Table of contentsそもそもSEOって？ホワイトハットSEOに至るまで具体的にはどのように対策していけばいいの？PCとスマホの検索順位は違う！モバイルフレンドリーへSEOのために、WEBデザイナーができることまとめそもそもSEOって？「SEOってよく聞くけど、具体的にどういったものか分からない・・」といった方は多いのではないでしょうか。 SEOとは”Search Engine Optimization” の略称。 検索エンジン最適化 という意味で、「ウェブサイトを検索エンジンに拾ってもらえるように最適化してあげること」です。 今や、検索エンジンと言えばGoogleを利
こんにちはデザイナーの奥田です。 2017年冬アニメは「この素晴らしい世界に祝福を」と「幼女戦記」が個人的には面白いです。あと「ガヴリールドロップアウト」は最高に笑えますね。ぜひ御覧ください。 さて、今流行の高速環境を実装できるNginx+PHP7の環境をさくらのVPSで構築する機会がありましたのでその備忘録として手順をブログに書き認めようと思います。 Table of contentsインストールとユーザーの作成公開鍵認証の設定NginxのインストールPHP7 + php-fpmのインストールMariaDBのインストールGitリポジトリの作成と自動デプロイの設定Nginxの設定今回参考にさせてただいた記事インストールとユーザーの作成まず、さくらVPSのコンソールから、カスタムOSインストールで「CentOS7」を選択します。 sshで接続（IPはコンソールに記載されています。） ssh
こんにちは。 ディレクターの松村です。 遅くなりましたが、2017年最初の自社ブログとなります。 本年もどうぞ宜しくお願い致します。 さて、今回はサイトのバックアップについて書きたいと思います。 弊社では万が一の際に備え、WordPressで構築させていただいたサイト全てに対し、定期的なバックアップを行なっています。 データ消失なんて、そう滅多に起こる事ではないですが、備えあればなんとやら。 WordPressのプラグインとクラウドストレージサービスのDropboxを組み合わせる事により、定期的に自動バックアップをとってくれますので、その方法をご紹介したいと思います。 Table of contentsDropboxの準備BackWPupのインストール・設定Dropboxとの連携終わりにDropboxの準備Dropboxのアカウントをお持ちでない方は、まずアカウントを作成しましょう。 もち
こんにちは奥田です。 さて、今Instagramが流行っていますね。 何より手軽に画像をアップできるのがいいですね！ サイトに自身のアカウントのFeedを取得して表示したい場合に少しややこしい作業が必要です。 今回はざっと流れをご説明したいと思います。 Table of contentsAPI取得用のクライアントを作成するUSER IDを取得するアクセストークンを取得するInstafeed.jsを使ってFeedを取得する今回参考にさせていただいたサイトAPI取得用のクライアントを作成するまずInstagramにログインします。 次にプロフィールページへ行き、下部にある「API」というリンクをクリックします。 次に「Register Your Application」をクリックします。 クライアント情報の入力フォームがでてきますので次のように入力します。 「Security」タブに切り替え、
こんにちは。9月よりディレクター兼エンジニアとして入社しました松村と申します。 趣味は競馬観戦で、騎手見習いとして地方競馬に所属していた事もありました。 このブログを通じて様々な情報を発信していけたらと思いますので、よろしくお願い致します。 さて、初めてとなるブログはGoogleマイビジネスについてです。 サービスが開始されて結構経ちますが、まだまだ未登録の店舗様が多いのが現状です。 今回はそんなマイビジネスの魅力と利用方法についてご案内します。 目次Googleマイビジネスとは？登録方法店舗情報を編集する番外編：既にマイビジネス登録されていた場合最後にGoogleマイビジネスとは？Googleの各種サービスで「ユーザーが今いる場所」を元にお店を宣伝してくれるというものです。 実際にどういう事かというと… 例えば三宮にいる時に「パン屋」と検索してみれば、 上記画像の様に端末の位置情報を利用
こんにちは、制作の奥田です。 以前、PhotoShopでRetinaディスプレイに対応した画像を書き出す方法という記事を書きました。 今回はRetina Displayに対応した画像をPCとスマホで切り替える方法についてご説明いたします。 Table of contents用意する画像記述方法Demo最後に用意する画像用意する画像はもちろん6枚です。 例えばスマホだけで切り替えたい場合は4枚になります。 通常の画像(image.jpg)Retina Display用の画像(image@2x.jpg)タブレット用画像(image-991.jpg)Retina Display用のタブレット用画像(image-991@2x.jpg)スマホ用画像(image-767.jpg)Retina Display用のスマホ用画像(image-767@2x.jpg)※上記はブレイクポイントにあわせたファイル名
設定ファイルの作成 まずROOTでログインします。 sudo su そして、/etc/pki/tls/ディレクトリへ移動してください。 cd /etc/pki/tls/ 秘密鍵とCSRを生成します。 openssl req -new -nodes -newkey rsa:2048 -keyout private/willstyle.key # 秘密鍵の保存ディレクトリ/秘密鍵のファイル名 -out certs/willstyle.csr # CSRの保存ディレクトリ/CSRのファイル名 ※ファイル名はわかりやすいように変更してください。 いろいろと質問されるので質問に従って入力していきます。 Country Name (2 letter code) [GB]: JP State or Province Name (full name) [Berkshire]: Hyogo # 都道府県（登
こんにちは、制作の奥田です。 私事で恐縮ですが、ウィルスタイルに来てデザイナーとして働き始め１年半が経ちました。 僕自身はそれまで、フロントエンジニアや、WEBエンジニアとして働いていたので、個人以外でのデザインのお仕事は未経験でした。 そこを弊社代表に制作のすべての業務を任されるようになり、最初は四苦八苦していましたがそろそろデザインの仕事にも慣れてきたのもあり、もう一度改めてWEBデザイナーという仕事についてゼロから考えなおしてみるいい機会かなと思い、この記事を執筆するに至りました。 ここでいう「Webデザイナー」とは広義のデザイナーのことを指します。 デザインから、フロントエンド業務、バックエンド業務まですべてを含みます。 これからWeb制作の仕事を始めようと思っている方、すでにWebデザイナーとして働いているが、よりステップアップしていきたい方に、これからのWebデザイナーの在り方
データベースを作成まず、それぞれのDBを作成します。 すでにpostsテーブルやtagsが存在する場合でもそれぞれに影響を与えることなく実装できるのもこのリレーションの素晴らしいところですね。 php artisan make:migration create_posts_table #すでにある場合は必要ありません。 php artisan make:migration create_tags_table #すでにある場合は必要ありません。 php artisan make:migration create_post_tag_table 各migrationファイルは以下のようにします。 # create_posts_table.php Schema::create('posts', function (Blueprint $table) { $table->increments('id
こんにちは制作の奥田です。 先日30歳を迎えました。年齢を聞かれ、答えた自分が「あ、自分30歳になったんや・・・」と少し戸惑ってしまうほど中身はまだまだですw さて、ちょっとしたアプリケーションを作る際に画像のアップロードは欠かせませんよね？ そんな時、非同期で複数のチャンクに分割してアップロードしてくれる「flow.js」を使うとストレスなくファイルをアップロードできます。 今回はLaravelを使ってファイルのアップロード、取得、削除までを解説いたします。 flow-php-serverとImageのインストール今回解説するLaravelのバージョンは5.2ですが、Laravel4系でも同じように実装可能だと思います。（一部コードの変更が必要です。） まずどんな完成かイメージできない方のために、完成イメージはこんな感じです。 でははじめに必要なパッケージをインストールします。 comp
こんにちは制作の奥田です。 お問い合わせフォームで、テキストフィールドやテキストエリアを装飾するのはとても簡単なんですが、セレクトボックスやチェックボックス・ラジオボタンの装飾はクロスブラウザの問題などでちょっとややこしいイメージをお持ちの方も多いと思います。 しかし、IE8以前のサポート終了によりIE9以降の対応でよくなったのを期に、フォームをデザインすることが容易になってきました。 せっかく良いデザインにしてもフォームの要素がデフォルトのままだとなんか残念な気持ちになりますよね？ というわけで今回はCSSのみでフォームを装飾する方法をご紹介いたします。 セレクトボックスの装飾まず、select要素の挙動を統一するため、要素をappearance: button;でボタン要素にしてしまいます。 select::-ms-expandでIEの矢印を非表示にします。 select:-moz-f
こんにちは、制作の奥田です。 もうすっかり暖かくなってきて心も晴れやかになってきましたね。 そろそろ、WEBサイト制作しませんか？ さて、昨今WEBサイト制作にはWordPressが欠かせない存在になってきました。 正直１つのCMSがここまで大きくなるとは思いもしませんでした。 弊社でも複雑なシステムの場合を除いて、WordPressを使って制作しています。 制作していく中でブログの一覧画面のサムネイル取得に以下の記事の「記事の１枚目の画像を取得する方法」を使わしていただいていたんですが、 [参考]WordPress（ワードプレス）で記事の一番最初の画像を取得する方法 http://liginc.co.jp/designer/archives/3205 カスタムフィールドの値があればそちらを、なければ記事の一枚目を取得したいという場面に遭遇したので少しカスタマイズしてみました。 Table
こんにちは、制作担当の奥田です。 今まではPhotoShopで画像を書き出す際、スライスを使って「WEB用に保存」というコマンドで書き出していました。 しかし、もうその必要は無くなりそうです。 PhotoShop CC 2015で新たに追加された書き出し形式の指定を使って書き出しがとても容易になりました。 今回はその方法についてご説明いたします。 Table of contentsRetinaディスプレイに対応した画像とはどのように記述するのかPhotoShopでの書き出し方Retinaディスプレイに対応した画像とはRetinaに対応していないと折角のきれいなデザインも汚く表示されてしまいます。 以下の画像は左がRetina対応、右がRetina非対応の画像をRetinaディスプレイで見た例です。 右は文字が少し荒く表示されています。 どのように記述するのかHTMLではどのように指定すれば
こんにちは制作担当の奥田です。 2016年冬アニメ圧倒的イチオシは「僕だけがいない街」です。 前期の「すべてがFになる」もそうでしたが、ノイタミナ枠は毎回面白いですね。 あと面白いのは「Dimension W」ですね。気になる方はぜひご覧ください。 と、アニメの話はさておき（冒頭がアニメの話ばっかりですねw） 最近はJavaScript界隈がとても活発ですね。 今回は現在人気沸騰中のライブラリ「React.js」をさわってみました。 まだまだ僕も触り始めたばかりなので超入門編といったところでしょうか。 Table of contentsReact.jsとはgulpで環境を構築するとりあえず動かしてみるPropsとState最後に参考にさせていただいた記事React.jsとはReact.jsとはFacebookが作ったライブラリで、MVCフレームワーク(Model,View,Controll
【Google Feed API廃止に対応する】PHPとJavascriptでFeedを取得する方法。 こんにちは、制作の奥田です。 2015年12月2日に事件は起きました。 Google Feed Apiが突然廃止され、Google Feed Apiを使用してアメブロなどのFeedを取得していたサイトで軒並み403アラートを表示する事態に陥りました。 弊社でも幾つかアメブロのFeedを取得しているサイトが存在していたので対応に追われました。 今回はPHPを使った取得方法と、PHPが使えない場合のJSONPを使った取得方法をご紹介いたします。 Table of contentsPHPによるFeedの取得APIにしてJSONPでのFeedの取得PHPによるFeedの取得これはいろいろなサイトで説明されていますが、アメブロのFeedの例をご紹介します。 まず、simplexml_load_fi
こんにちは、制作の奥田です。 最近、PHPのフレームワークとして人気急上昇中のLaravelを使って開発をしました。 最新版のLaravel5はまだまだドキュメントが少なく試行錯誤しながらではありますが、少しずつブログに書いていければいいなと思います。 Laravelはローカル開発環境としてHomestead（ホームステード）というVagrantboxを提供してくれているので今回はHomesteadを使ってローカル開発環境を構築してみたいと思います。 手順は大体ここに書いてあるとおりです。 Table of contentsVirtualboxとVagrantのインストールVagrant boxの追加Homestead CLIのインストールHomestead.yamlの編集Vagrant boxを起動するLaravelプロジェクトの作成参考にさせていただいた記事 Laravel Larav
こんにちは、急に寒くなって驚きを隠し切れない奥田です。 前回はLaravel5開発環境の構築について書きました。Homesteadを使ってLaravel5開発環境を構築する なので今回はLaravelの標準機能として備わっている認証機能を実際に触ってみて体系的にLaravel5.1の動きを見ていきたいと思います。 Table of contentsDBマイグレーションとコンフィグレーションルーティングの設定とテンプレートの作成ビューの作成ログイン後の画面の作成パスワード再設定画面の作成参考にさせていただいた記事DBマイグレーションとコンフィグレーションLaravelにはartisan（アルチザン）というCLIが用意されていて、データーベーステーブルの作成や、モデル・コントローラーの作成がコマンドラインから行えます。 CakePHPでいうBakeみたいな感じですね。 まず、前回作成したhom
こんにちは、制作の奥田です。 弊社では開発はもちろん、クライアントワークでもGit（分散型バージョン管理）を使ってソースコードを管理しています。 CUIが苦手という方には「SourceTree」のような便利なGUIもあり、デザイナーもデベロッパーも一度は耳にしたことがあるのではないでしょうか？ FTPでアップロードしていると違った場所にファイルをあげてしまったりしてテンパった経験はありませんか？ Gitならその心配は皆無です。 今回はベアリポジトリの作成から、自動デプロイまで一連の流れをご説明いたします。 Table of contents環境の確認ssh公開鍵認証を設定するベアリポジトリを作成し、リモートとローカルにクローンする自動デプロイの設定と.gitignoreファイルを作成する環境の確認まずはバージョン管理をしたい環境がssh接続が可能な環境かどうかを確認してください。 さくらの
次のページ
このページを最初にブックマークしてみませんか？
『Will Style Inc.｜神戸にあるウェブ制作会社』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
