サクサク読めて、アプリ限定の機能も多数！
トップへ戻る
大そうじへの備え
magnets.jp
こんにちは、VRゲームにハマり自宅でライトセーバーを振り回してるウラカワです。 昨年chromeにloading属性が実装されたりと、表示速度を改善するための仕組みがどんどんブラウザに追加されて便利になってきてますね。 今回はリソースの非同期・遅延読み込み方法をまとめてみました。 画像とiframeの遅延読み込み Chromium系は機能が実装されたので<img>と<iframe>にloading="lazy"をつけるだけ！！ 非対応ブラウザの場合はLazysizesなどのJSライブラリを使うことになります。 <!-- Native lazy-loading --> <img src="hoge.jpg" srcset="hoge.jpg 1x, [email protected] 2x" loading="lazy"> <picture> <source srcset="mobile.jpg 1x,
こんにちは、西です。もうすぐ平成が終わってしまいますね。 今回は文字などを不透明マスクを使って、アナログっぽくかすれ（グランジ）加工する方法を紹介したいと思います。 ブラシのチョークでかすれさせる ↑最終的にこんな感じにかすれさせようと思います。 文字を書いて、円で囲って印鑑ぽくしてみました。 ブラシツールで適当に線を引きます。 かすれさせる部分を作るため、ブラシを「チョーク」にしたいと思います。 チョークを出すにはブラシパネルの右上のメニューから【ブラシライブラリを開く】→【アート】→【アート_木炭・鉛筆】 すると【アート_木炭・鉛筆】パネルが開くのでその中の【チョーク】を選択します。 チョークを選択して線幅を3ptにしてみました。 不透明マスクをかけます。 全部まとめて選択した状態で【透明】パネルの【マスク作成】を押します。 一旦全部見えなくなるので【クリップ】のチェックを外します。
今回は「jpg」や「png」「gif」などのいわゆる画像フォーマットの中でも次世代フォーマットと呼ばれている「WebP（ウェッピー）」についてのお話です。 ことの発端はGoogle Speed Insightの「改善できる項目」でたびたび目にする下記の『次世代フォーマットでの画像の配信』という記述です。 『「JPEG 2000」「JPEG XR」「WebP」などの次世代フォーマットを使えばPNGやJPEGより圧縮率が高くファイルサイズを抑えられるので、結果読み込み速度も上がるよ』というGoogle先生からのお達しです。 普段から画像に圧縮をかけてからアップをしていますが、次世代フォーマットにすることでそれより更にファイルサイズを落とせる可能性があるということですね。 フォーマットごとの対応ブラウザ状況 じゃあ実際に次世代フォーマットを試すとなると、提示されている「JPEG 2000」「JP
こんにちはムラタです。 今回は今後ビッグウェーブが来るかもしれないし来ないかもしれない、そんな「PWA」の触りの部分だけ実装してみたお話です。 PWAって？ 「Progressive Web Apps（プログレッシブ ウェブ アプリ）」の略で、Googleがモバイルユーザーの体験向上を目的として策定した仕組です。 特徴としてブラウザからアクセスするwebページとApp StoreやGooglePlayからダウンロードして使うネイティブアプリの両方の利点を兼ね備えたアプリということです。 超ざっくりいうと通常のwebページをアプリっぽい感じでユーザーに提供できるよ！みたいな感じで捉えていいと思います。たぶん。違ったらごめんなさい。 PWAでできること PWAを実装することで以下のメリットを受けることが出来ます。 ページの読み込み速度の上昇。 通信環境が良くない場所、もしくは完全なオフライン状
Node.jsを直接ローカルにインストールしても動かすことは可能なのですが、今回は仮想マシンにインストールにします。 必要なものはVagrantとVirtulBoxです。 今回試した時点での環境はホスト・VMで以下のようになっています。 Windows 10 VirtulBox 5.2.16 Vagrant 2.1.2 Ubuntu: 16.04 Node: 8.11.3 Ghost-CLI: 1.8.1 仮想マシンにインストール まずはvagrantfileを作成。 $script = <<-SCRIPT # update packages apt-get update apt-get upgrade # install nginx apt-get install -y nginx ufw allow 'Nginx Full' # install mysql echo "mysql-se
最近かなり涼しくなって来ました。このぐらいの気温がちょうどいい西です。 今回はイラストレーターで不透明マスクを使って画像などに透明のグラデーションを掛ける方法を説明したいと思います。 フォトショップで画像に透明グラデーションを掛ける方法は以前のブログに掲載されていますが、今回はイラストレーターなので操作の仕方が全く違います。 レッツ透明！（操作説明はIllustratorCC2017となります） 上記のように端に向かって透明になるグラデと円形に透明になるグラデを掛けていきたいと思います。 線形グラデーションで不透明マスクを掛ける まずイラストレーター上に「ファイル」→「配置」で好きな画像を配置します。 スナメリの赤ちゃんです。かわいい。 次に「長方形ツール」を使って画像の上に画像と同じサイズかそれより大きいサイズの長方形を作ります。 そしてその長方形に白と黒でグラデーションを掛けます。 次
こんにちは。一夜明けても昨日のギータのサヨナラホームランに痺れているちな鷹ワイです。今週末には2年連続日本一のビールかけを見れることを期待しています さて定期通販（定期購入）は、健康食品やサプリ、美容系の商品ではよく見かけますよね。 ただ、定期通販用のカートは導入費用やランニングコストが通常のECサイト（通販サイト）用のものと比べると高額なものが多いので、「自社の商材がハマるかどうかとりあえずやってみたいって方」にとってはハードルが高く、なかなか導入に踏み切れないのではないでしょうか？ 昨年11月にスタートしたばかりの新しい定期通販カート「カラーミーリピート」は多くの定期通販用カートの月額料金が数万円かかる中、月額料金9800円と格安で導入が出来ます（2018年11月1日現在、多分最安） 今回は、そんなカラーミーリピートを使って作られた定期通販サイトの運用をしばらくお手伝いしてみた経験を元
こんにちは稲垣です。 今回は簡単にゲームが作れるphina.jsというライブラリを使って、横スクロールゲームを作成してみます！ phina.jsとは？ 以下、公式サイトより引用です。 ゲームやツールを簡単に作る事ができる JavaScript ゲームライブラリだよ♪ PC とスマートフォンどちらでも動くんだ 『プログラミングって気軽にできるもんなんだ』『ゲームってこんなに簡単に作れるんだ』って感じてもらえると嬉しいな なんだかとてもお手軽そうな印象を受けますね。 初めて触る私でもゲームが作れるのではないでしょうか！ 国産でオープンソースとのことなので、英語が苦手でも情報が探しやすそうです。 デモ 今回作ってみたものです。 卵が転がってきたらクリックでキャラクターをジャンプさせてください。 目標の動きとしてはgoogleのネット接続エラー時に遊べる恐竜のゲームを目指したつもりです。 飛び越え
こんにちは、最近エアロバイクを買おうか迷っているウラカワです。 社内でずっとWordPressを弄っているような状態なので、新しいものを求めて探してみると「Grav」という面白いCMSを見つけたのでご紹介します。 フラットファイルCMSというあまり馴染みの無いCMSに分類されるものです。 Gravとは？ データベース不要 多言語対応 Markdownによるコンテンツ管理 プラグイン機能あり テーマ機能あり 本体、プラグイン、テーマの更新機能あり といった特徴を持つCMSです。 機能的には簡単に更新可能な今時のCMSですが、データベース不要です！ PHP 5.5.9以上であればzipを解凍するだけで動きます！ より詳しい要件は以下を参照してください。
こんにちは、ウラカワです。 今回はWordPressの固定ページテンプレートに関するカスタマイズです。 通常、固定ページに別々のデザインのテンプレートを適用させる場合、デフォルトだと以下のテンプレートのどれかで対応することになります。 {custom}.php page-{slug}.php page-{id}.php ページ数が少なければ特に問題はないのですが、ページ数が多い場合や階層が深い場合が問題です。 1つ1つカスタムテンプレートを紐付けるのはかなり手間ですし、階層化しているとスラッグが同じになることもあります。
こんにちは、ウラカワです。 今回はWordPressの新しいエディターGutenbergについてです。 挙動が怪しかったり調整不足だったりして、お世辞にも使いやすいとは言えないですが、じわじわと改善されています。 まだリリースされていないので仕様変更は十分ありうると思いますが、執筆時点での基本的なカスタマイズ方法をまとめてみました。 目次 そもそもGutenbergを使いたくない場合 テーマで使う機能の設定 カスタム投稿タイプで使う方法 ブロックを制御する方法 スタイルを設定する方法 そもそもGutenbergを使いたくない場合 そもそも使いたくないという場合は以下でクラシックエディターに戻ります。 ただ、スタイルの読み込みがそのままだったりと完全に取り除くわけではありません。専用のオプションが欲しいですね。
こんにちは、ウラカワです。 今回はタイトル通りjQuery・CSSを使って、ランダムで表示するアニメーションを作ってみました。 背景に円をランダムで表示 マップにマーカーをランダムで表示 という簡単なものです。
どうもムラタです。 早いもので今年も残りあと僅かですが、今年はまったくバイクでツーリングに行ってないので寒さが本格的になる前にどこか行きたいですね。まあ十中八区どこも行かないですが。 さて、今回は前回の「VCCWを導入してWordPress開発環境を構築しよう」に引き続き、ローカルでのWordpress構築環境のお話です。 前回のVCCWでは導入前になんやかんやインストールしたり、設定ファイルいじったり、起動させるのにコマンドプロンプト触ったりと、正直ちょっと敷居が高い感じがしたと思います。 実際自分も導入いたるまでかなり嫌悪感がありました。 そんなわけで今回はそんな難しいことは取っ払ってもっと楽にローカル環境を構築しようというわけです。 Local by Flywheelとは 今回使用するのが「Local by Flywheel」というツールで以下のような特徴があります。 無料で使用でき
こんにちは。体力の続く限り桜の名所スポットを巡るツーリング計画を立てていましたが、土日が雨の予報でどうしようもない憤りを覚えている稲垣です。 さて、今回はjQueryで簡単なタイマーを作ってみました。 100秒にしたのは某ゲームに入れ込むハンター達の力になりたいという個人的な理由からです。 目次 デモ htmlとcssと画像を用意する html CSS 画像パーツ 動きの実装 終わり デモ 早速ですが完成イメージです。 各要素の仕様は下記のようになります。 スタート…カウントダウン開始、一時停止を解除 ストップ…カウントダウンの一時停止 リセット…カウントダウンを停止して100秒へ戻す 秒数変更…デフォルトの100秒を変更 htmlとcssと画像を用意する html、css、画像パーツを準備します。 基本的に各要素を並べていくだけになります。 残り秒数のところだけgoogle fontを入
夏ですね。暑いのも寒いのも苦手な西です。 イラストレーターでイラストを描いてみたいけど難しいんでしょ？と思っている方もいるかもしれませんが、昔と違って今はめちゃ簡単に描く事ができます。 ※作者下書きと色塗りのレイヤーを一緒にしていたため今回のエビ子とジャスティスのマンガは休載致します。 ライブペイントツールを使ってイラストを描く 今回は「ライブペイントツール」を使用して元絵をトレースして簡単に着色していく方法をご紹介します。 昔はイラストレーターでイラストを描く時は線画と塗りの部分を分けたりしないといけなかったのでこのライブペイントツールは本当に快適です。 まず下絵を準備して配置します。 最近はアナログで描いてもスキャナなしでスマホで撮影してPCに取り込めるので便利ですね。 トレースしやすいように画像の透明度を50%くらいにします。 画像を配置したレイヤー1にロックをかけて間違って触ってし
こんにちは稲垣です。 昨年末に流行ったどうぶつタワーバトル、遊んだ方も多いのではないのでしょうか？ 上から落ちてくるどうぶつ写真に、実際に重みがあるかのような動きがおもしろいですよね。 そこで今回はmatter.jsという物理演算エンジンを触ってみました。 matter.jsとは？ matter.jsは物理演算を簡単に使うことができるようになるJavascriptのライブラリです。 物理演算を自力で行おうとすると、専門知識や時間が必要になりものすごい労力がかかるのですが、これを使うことによってJavascriptを使ったサイトやゲームでより手軽に面白い表現が実装できるようになります。 今まで物理演算のライブラリはBox2Dくらいしか知らなかったのですが、matter.jsは非常に軽量でスマートフォンでも問題なく動作するそうです。 サンプルもたくさん載っておりデモ画面を触るだけでも楽しいので
発売から約1ヶ月してようやくドラクエ11も落ち着いてきたムラタです。 年のせいなのか分からないですけどエンディング見ちゃったらもう完全に心折れちゃってやりこみとかまったくする気起きないですね。 さて今回はローカルでの開発環境のお話です。 会社に入ったばかりのころは特に開発環境と呼ばれるものもなく、必要ともしていなかったのですが、Wordpressを触り始めた頃からxamppを扱うようになり、それ以来ずっとxamppで作業してきました。 正直今更開発環境変えるのもしんどいし、別段今でもxampp使ってて不便だと思ったことはそんな無いんですけど、新しいものを取り入れずにずっと停滞してるのも良くないし、最近は昔に比べてwordpressを使用する案件の率が非常に多いので、もっとwordpressに特化した開発環境に変えてみようと思ったのが発端です。 そこで今回はGoogle先生で『wordpre
こんにちは、ポケモンGOとりあえずやってみたけど即行辞めてしまったウラカワです。 ミドルロースペックのAndroidで格安運用しているのでバッテリー消費が致命的すぎました・・・。 さて、今回は動画を導入しているWebサイトでよく見かける以下2つの方法をjQueryを使用して実装してみます。 動画を背景で表示する 動画を埋め込む（ライトボックスで表示する） 動画を背景で表示する 動画を背景で表示させるプラグインは色々ありますが、やってることは今回紹介している方法と同じなので、あえてプラグインを使う必要は特に無さそうです。 特に音声や再生・停止を操作したいならプラグイン使わない方がやりやすいと思います。 単純に動画を表示させるだけなら以下で可能です。 （古いブラウザも対応必要であれば代替画像も設定してください。） <div id="video-container"> <video id="vi
どうも吉塚のポケモンおじさんことムラタです。 今回はEC-CUBE（Ver2.13.5）にWordpressを触ったことがある人には馴染み深いエディター「TinyMCE」を導入してみます。 目次 TinyMCEをダウンロードする TinyMCEをEC-CUBEに設置する TinyMCEの設定 最後に TinyMCEをダウンロードする それでは早速TinyMCEを下記URLからダウンロードしましょう。 今回はVer4.4.0となります。
こんにちは、デザイナーのかわさきです。 マウントレーニア（カフェラッテ）の美味しい季節になってきました（個人的に）。ちなみに「コーヒー豆2倍」が売りのダブルシリーズはレッドブル並みに目が覚めるので、眠たい時におすすめです。 さて本題です。 マグネッツでは普段お仕事にて広告用のバナーもよくご依頼いただき、制作しているのですが、今回は受注からデザイン制作・サイズパターン制作までの流れを、実例をつくりながら解説してみようと思います。 目次 まずは着手前に確認！ 出稿先を確認 バナーの必要サイズ・規定を確認 誘導先のページを確認 納期の確認 バナーに掲載する情報やデザインテイストを確認 では、架空のバナーで実演してみます 前提条件を改めて確認 それでは、早速作っていきます！ リサイズしていきます 終わりに まずは着手前に確認！ 出稿先を確認 掲載する媒体やメディア（PC向け/スマーホフォン向けなど
こんにちは。今日の夜は会社の花見なのに、全然予定地で花が咲いてNeeeee!!!!!…ってことでプルプルしてるかわさきです。夜までに少しでも開いてくれると…。 さて、前回の予告からずいぶんと日が経ってしまって、本人も忘れてしまいそうだったのですがカラーミーショップ設定方法の続きを書いていきます。 前回は絶対必要な初期設定についてでしたが、今回はオリジナルテンプレート作成の流れとポイントを簡単にご説明します。html/cssがある程度触れる・自分でサイトを制作出来る方向けです。 ※ご紹介している管理画面や機能は2015年3月現在の内容になります。随時機能追加や改定が行われていますので、実際に構築時は公式サイトやマニュアルをご確認ください。 目次 まずは下準備 スマートフォン対応をレスポンシブデザインにするか？ 別テンプレートにするか？ デザインを作成 コーディングしておく FTPでファイルを
こんにちは、ウラカワです。 WordPressを使っていて、閲覧者側への配慮として並び替えや絞り込み機能をつけたいと思ったことはありませんか？ 今回はその機能を簡単に実装する方法をご紹介します。 パラメータについて WordPressは基本的にURLにパラメータを追加することで良い感じに処理してくれます。 実装するまでもなく、並び替え・絞り込み機能は元から付いているってことですね。 じゃあ、実際にどんな感じで追加すればいいの？という話です。 頻度の高そうなパラメータをまとめてみました。
こんにちは、FF10以来久しぶりにFF新作を買ったムラタです。 発売される前も後も色々辛口な評価が目立ったFF15ですが、やってみると腐ってもFFですね、普通に楽しくてどっぷりはまってしまってます。 さて、今回は360°の写真や動画をwebサイトに取り込んでコンテンツとして活用する事例をご紹介したいと思います。 前回の全天球撮影についての記事もあわせてご覧ください。 全天球撮影を始めよう サイト内に360°コンテンツを埋め込むにあたって、普通の写真のようにimgタグで張り付けただけでは当然360°グリグリ動かすような処理にはなりません。 このように何だか引き伸ばされたような画像が張り付けられるだけです。 360°コンテンツとしてサイトに埋め込むにはWebGLと呼ばれるweb上で3次元グラフィックス（3Dコンテンツ）を表示させるための技術を用いる必要があります。 webGLを実装するにあたっ
こんにちは。 絵を描きたくて会社のブログの中でプチ漫画を描き始めたデザイナーの西です。普段は印刷物のデザインを中心に行っています。 いきなり見知らぬキャラが出てきて「な、なんなんだ？」とお思いの方もいらっしゃると思うので、上の画像にこれから登場する彼女たちの紹介を記載しました。 まだまだ謎が多い一人と一匹ですが、今後、回を重ねるにつれ明らかになる秘密や、あとから思いついた後付けの設定が増えていくかもしれません。 エビ子ちゃんはどうやらイラレでキラキラを描きたいけど上手くいかないようですね 丸や四角からキラキラをつくろうよ！ という訳で本題に入りたいと思います。 今回はイラレで簡単にキラキラを作る方法をご説明したいと思います。 これでみんなもキラキラだよっ！ キラキラは丸や四角から作る事が出来ます。 今回は両方同時に作っていきますね。 まずは長方形ツールや楕円形ツールで四角や丸を作ります。
こんにちは、最近20年振りにポケ●ンマスターを目指してマサラタウンにさよならバイバイしたポケモ●トレーナー（31）のムラタです。 最初に貰う一匹のみを鍛え抜き、酷使し続け、ただひたすらに効率のみを求めるプレイスタイルに心の汚れを感じます。 そんな少年の心を忘れた汚い●ケモンマスターからの今回の投稿はPhotoshopの「画像のアセット」で切り出される画像の出力先を「シンボリックリンク」を使って擬似的に変更させるというものです。 この記事読んでる人はだいたい「画像のアセット」がどんな機能なのか知っていると思いますが、一応ざっくり説明しておきます。 画像アセットとは 従来のスライスツールでの範囲を指定して書き出すのとは違い、レイヤー単位での書き出しとなり、レイヤー名に「parts.png」や「banner.jpg」といった具合に「画像名+拡張子」を指定しておくことで、その名前と拡張子で勝手に書
こんにちは。最近やたらとカラスにハンガーを盗まれて怒り心頭のかわさきです。盗まれて初めて知ったんですが、カラスはハンガーを巣の材料にするらしいですよ。個人的には住み心地悪そうな気がするんですが…。 ワイヤーのハンガーをご利用の方は春～初夏はお気をつけください！ さて今回は、先日、Googleアナリティクスでクロスドメイントラッキング＆マルチトラッキングで計測するための設定を行ったので、その作業メモを兼ねて記事にしてみました。 ※こちらの記事で紹介するトラッキングコードはユニバーサルアナリティクス（UA）のコードになります。 目次 クロスドメイントラッキング/マルチトラッキングとは クロスドメイントラッキング（複数のドメイン間で計測） マルチトラッキング（複数のトラッキングIDで計測） クロスドメイントラッキング+マルチトラッキングで計測する プロパティ（トラッキングID）を3つ用意 トラッ
オッス、オラムラタ。 今回はWordpressのタイトル下やらエディター下など色々な場所に要素を追加してみたいと思います。 投稿の際の注意書きを入れたりマニュアルへのリンクを貼ったりすることでクライアントにも優しい投稿画面が仕上がるのではないでしょうか？ 目次 アクションフック タイトル直前で実行「edit_form_top」 タイトル直後で実行「edit_form_after_title」 エディター直下で実行「edit_form_after_editor」 オプション要素の最後で実行「edit_form_advanced」 独自のボックスを追加「add_meta_box」 投稿タイプによって内容を変更させる 最後に アクションフック WPでは管理画面を開いた時や投稿画面を開いた時、プラグインを停止させた時など様々なタイミング（アクション）にフックを使い任意の処理を実行することができます
どうもこんにちは、かわさきです。最近はポケモンゲットよりも「どうぶつの森」での村運営に忙しいです。なんかブログの書き出しを見返すとゲームしかしてない人みたいになってますが、ちゃんと仕事もやってます…よ……一応…。 さて、今回は「Illustratorをゼロから勉強する場合、なにをやったらいいのか」という質問をもらったので、自分なりに勉強したほうがいい内容や練習方法をまとめてみました。（あくまで勉強した方がいい内容の紹介なので、詳細な操作方法などは参考書やチュートリアルサイトをご覧ください！） これからIllustratorを始めてみたい…という人の参考になれば幸いです。 目次 Illustratorの機能、まずはこれを覚えよう＆練習方法 0.アートボード・環境設定 1.図形を描く（パスツール） 2.文字を入れる・設定する 3.レイアウトする 勉強の心構え Illustratorの機能、まず
こんにちは西です。 最近急に寒くなってきて子供と風邪のキャッチボールをしている状態です。 みなさんも風邪やインフルエンザ、マイコプラズマ肺炎にはお気をつけ下さい。 久しぶりのエビ子とジャスティスのお話しです！ エビ子の吹き出しがちょっと窮屈に見えるのにお気づきになりましたでしょうか？ 今回はイラストレーターで作る「吹き出し」について書いていこうと思います。 セリフが多く入るマンガのような使用の仕方ですとちょっと気をつけた方が良いかなという部分があります。 吹き出しをキレイに見せる方法を説明する前に基本的な吹き出しの作り方を説明したいと思います。 丸い吹き出しの作り方 まず楕円ツールで楕円を作り、三角で吹き出し部分を作り好きな場所に配置します。 2つを選択した状態で【パスファインダー】の【合体】を適応させます。 すると簡単に吹き出しの完成です！ モコモコ吹き出しの作り方 楕円ツールで中心の楕
次のページ
このページを最初にブックマークしてみませんか？
『福岡のホームページ制作会社・メディア総研株式会社 マグネッツ事業部』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
