サクサク読めて、アプリ限定の機能も多数!
トップへ戻る
買ってよかったもの
www.monster-dive.com
皆さんはじめまして! LIVEプロダクション事業部でアシスタントをしています、YOUといいます。 よろしくお願いします。 気づいたら手放せなくなった、マイク付きイヤホン ここ2年、コロナの影響で仕事ではテレカン、プライベートでは自宅で友人と通話しながらゲームをして遊ぶ、なんて機会が増えたんじゃないでしょうか? そうなると自然と需要が高まってくるこの子たちの存在。 そうです、マイク付きイヤホンです! 今回はこの子たちの音質やマイク性能...ではなく、先端のこの部分に注目した記事になっています! 「いやマニアックすぎない?」と言われてしまいそうですが、実はこの先端(以降"端子"と表記)、ぱっと見は同じに見えても中身が違うものがあります。 それを知らずに使っていると、 「イヤホンを挿しているのに端末に認識されない」 「スマホでは使えるのにPCではイヤホンのマイクが使えない」 というトラブルが起こ
緊急事態宣言下のGW、皆さまはいかが過ごされましたか。 今年こそは積みゲーを崩したいと意気込んでいた私ですが、いざ休みに入るとなかなか重い腰が上がらず、Netflixで受動的コンテンツを貪るだけの日々を過ごしました。ダメ人間でごめんなさい。 せめて、MDのゲーム伝道師として、ブログではゲーム成分を存分に摂取&発散したい。そしてついでにクリエイティブな何かをWeb制作に還元したい。 そこで! 名作ゲームに学べ!伝わるUI/UXデザインのススメ 「ゲーム」というUI/UX業界の先駆者を講師に招いて、そのエッセンスを齧ってみようという企画です。 コンピュータとインターフェイスの発展史 本題に入る前に、少し歴史の話をさせてください。 1984年、コンピューターの歴史において大きなパラダイムシフトが起こりました。 初代Macintoshの発表、つまりGUIを持ったPCの誕生です。 それまで文字の羅列
ナマのHTML、CSSを書いていた頃が懐かしいと感じる今日この頃ですが、今は今で様々な開発方法(モジュールバンドラ)が乱立しています。 MONSTER DIVEではみんながみんな同じ環境で開発するのではなく、それぞれのスキルセットに合わせて柔軟に対応できるようにベースとなる環境を用意しクリエイターそれぞれがカスタマイズして開発を進めています。 デザイナーなど非エンジニアがコードを触る機会もありますが最低限Sassは使用するという点だけ縛りがあります。 そんなMONSTER DIVEでのフロントエンド開発環境を簡単にご紹介します。 タスクランナー 「タスクランナー」とは、「タスク(仕事・課題)」をプログラム処理で自動化してくれるツール全般のことを指します。 フロントエンドの制作業務の中で出てくる単純作業を自動化してしまい、業務の効率化、サイトの品質を守るが目的です。 Grunt→Gulpとタ
Webでも組み込みでも、何かのシステムを構築したことがある方ならご存知でしょう。 開発というものは、「プログラムを書く作業」よりも、その前の「仕様を決めて文書化する作業」の方がずっとカロリーが高いものです。 最近ちょっとしたAPIを作る機会があり、やはりAPI仕様設計のしんどさと闘いました。 が、API Blueprintという規格とそれに対応するツールを使うことで、そのしんどさが相当な具合で和らぐことがわかりました。 今回はこのAPI Blueprintを全力で推していく記事です。 API Blueprintとは? https://apiblueprint.org/ API Blueprintは、APIの仕様設計や連携開発を効率的に進めるためのドキュメント仕様です。 Markdownに従った仕様になっているので、そのまま眺めてもある程度理解できるのですが、Blueprintの強みはなんと
以前このブログでは「Laravel初心者講座」というシリーズを連載?していたのですが、あの頃はまだLaravel4でした。 しばらく扱っていなかった間にLaravel5になり、すっかり垢抜けて進化してしまいました。 今回、仕事でちょっとしたログイン絡みのシステム構築の機会があったので、久しぶりにLaravelネタを投下してみます。 管理者とユーザのログイン窓口が別で、それぞれ管理したい。よくあるパターンですね。 Laravel5の標準のログイン認証パッケージはよくできているのですが、多少面倒なステップを踏む必要があります。 インストールは省略します! 初期設定 インストールディレクトリの.envを編集して、DBの接続情報を入力しておきます。 DB_CONNECTION=mysql DB_HOST=MySQLのhost DB_PORT=MySQLのポート番号 DB_DATABASE=DB名
まいど! まずはひとつお知らせがあります。 この記事を読んじゃうなんていう、勘の良い皆さん! いや感度の高い、そんな皆さんならもうお気づきですよね〜。 重大発表! MONSTER DIVE、新しく「乃木坂オフィス」に引っ越したんです! 詳しくはこちらの記事を見て! そこで! エントランスにプロジェクターを設置し、 お客様にご来社時のひとときの楽しみと、取り組みへの興味を持っていただこうと、社内の有識者(有志)が集められました。 さながら名画のような、センターにMST、右に助言するARK、みたいに見えたり? プロジェクターを使ったプロジェクションマッピングは、MONSTER DIVEとしては経験値がありますが、個人的には初めての取り組みになります。 そこで、先輩方のアドバイスをもらいながら、イチから挑戦してみました! さっそく使用ソフトを検討 まずは第一段階ということで! プロジェクター1台
お久しぶりです、Webの何でも屋さんことmioです。 今までは割と技術的な記事を書くことが多かったのですが、今回は柔らかめなネタを一つ。 我々のような仕事においてはテキストエディターはお供のような存在ですが、皆さんは何をお使いでしょうか。 私はしばらくAtomを使っていたのですが、動作の重さが気になり、以前使っていたSublimeTextに出戻ったクチです。 SublimeText、軽くていいなぁ。 でも、カスタマイズしようとするとちょっと独特のクセがあって、Atomよりハードルが高い部分もあるんですよね。 この記事では、Web制作するなら黙ってこのプラグインを入れとけ!的なオススメプラグインを紹介いたします。 全般的な使い勝手を良くする Side Bar Enhancements 特にオススメ 左のサイドバーのツリーにおいて、右クリックメニューを超強化します。 複製したり、直接ブラウザで
前回、Vue.jsのトリコになって、試しに時計アプリを作成してみましたが、二回目の今回はもう少し複雑なアプリを作りたいと思います。 作るのはiTunesのAPIを使ったiTunesSearchです! 実装ポイントはAPIとの通信による非同期処理とそれに伴うローディングの実装、親コンポーネントと子コンポーネントの連携方法などです。 開発環境構築 基本的な開発環境の構築は前回の記事を参考にしてください。 今回は axios というhttp通信を行う為のライブラリを使用するので、 コマンドプロンプト(ターミナル)に npm install -S axios と、入力してインストールしてください。 これで準備は完了です。 開発開始 前回同様、ファイルの整理から始めます。 src/App.vue を開いて <template> </template> <script> </script> <styl
ゲームと猫と多肉植物を愛するMioです。 最近は猫を見ているだけで飽きないのですっかりPS4を起動しなくなってしまいました。 代わりに多肉植物を育てるという時間のかからない且つ一見オーガニックな趣味を見つけたのですが、実のところは交配してオリジナル品種を作出するというマッドサイエンティストな野望を抱いています。 さて、MONSTER DIVEではWordPress関係のお仕事を定期的にいただくのですが、新規構築する際に毎回同じ作業をするのはダサいな!という気持ちになった秋の夜長。 今回はComposerを使ってWordPressの導入作業を出来る限り自動化して楽するための小ネタです。 Composerとは PHPのパッケージ管理システムです。 MacにおけるHomebrewだったり、あるいはNode.jsにおけるnpmと同じ位置づけです。 例えばAというライブラリを導入したいと思った時、A
近頃、Vue.jsのトリコになって抜け出せずにいるOhkiです。 Vue.jsとは表示部分の view層 に焦点を当てたフレームワークです。 記述が簡単なので、同じ様なフレームワークである、ReactやAngularに比べて 学習コストが低い のが良い所です。 基本的な使い方は公式サイトの日本語ドキュメントが豊富で困ることはないと思います。 ただ、Vue.jsについて検索すると初心者向けの記事はたくさん見つかるのですが、具体的なアプリの作り方はあまり無かったので、ご紹介したいと思います。 一回目ということで簡単に作れる時計アプリを一緒につくりましょう! 開発環境構築 Vue.jsには vue-cli という開発環境を簡単に構築出来るものが用意されています。 Node.jsを使用するのでインストールしていない方はインストールしてください。 nodist(Windows)、nodebrew(M
どうも、フロントエンドエンジニアのスギヤマです。 前回の記事で脱jQuery!?な記事を書きましたが、その流れで〇〇使ってみた、作ってみた、みたいなものを書いていきたいと思います。 今回はPJAXライブラリ-Barba.js-。PJAXはjQueryプラグインでも実装でき使ったこともありますので軽く比較などしてみたいと思います。 そもそもPJAXはAjaxとpushStateを組み合わせて非同期通信でページの切り替えを行うもので、指定したエリアのみ通信が発生するのでスムーズなページ遷移が可能になります。 では、jQueryプラグインからいってみましょう。 jQueryプラグイン jquery-pjax jQueryプラグイン jquery-pjaxにはfalsandtru/jquery-pjaxとdefunkt/jquery-pjaxの2種類があるようですがこの先はdefunkt版です。
はじめまして、ウェブプロダクション事業部でフロントエンドエンジニアをしていますスギヤマです。 スギ さんは先役がいましたのでヤマさんと生まれかつてない呼ばれ方をしています。 さて、トレンドの移り変わりの激しいフロントエンド界隈。 常にアンテナを張って新しい情報を仕入れ続けないといけません。 案件でも個人でも必要に応じてJavaScriptフレームワーク(JSフレームワーク)を使ってきましたが、半年、1年も経てば状況もいろいろと変わってきます。 ここらで再度、JSフレームワーク(クライアントサイド)をまとめておこうかと思います。 フレームワークの種類と特徴 AngularJS Googleで開発されている最も有名なフレームワークのひとつ。 2016年9月にAngular 2として正統後継版がリリースされたばかりだと思っていたら、3月に「Angular 4.0.0」がリリースされました。 4.
どうも、ディレクターのtknrです。 今月でMONSTER DIVEにジョインして7年目の幕開けを迎えました。当時10名ほどだったモンスターズも、いまでは倍を超える職人集団にスケールアップ! クライアント企業のみなさま、関係者各位、チームの仲間のおかげでございます、ありがとうございます。 さて、ディレクションって何なんだよっ、と、2年以上前にも悶々としたエントリをポストしていて、相変わらずの堂々巡りではあるのですが、デキるWeb担当者さんとチームを組ませてもらうと、もれなく、よいモノをつくることができて、モノづくりそのものがより良くなる! と、そう実感するシーンが多くあります。 そこで今回のブログでは、この濃密な6年間でプロジェクトをご一緒させていただいたクライアント企業のWeb担当者さんたちの"スゴワザ"、よいモノづくりに繋がるディレクション・テクニックについて、ご紹介していきたいと思い
[OOCSS/BEM/SMACSS] HTML/CSSのclassの命名規則について、今ふたたび考える 随分と気温が上ってきましたね。 夏が近づくにつれ、自宅のリビングのエアコンが壊れていることを思い出し暗い気持ちになります。 いい加減買い換えないと人命に関わるかもしれません。 さて、今回は命名のお話しです。 恐らくHTMLやJSを書く人ならあるある話だと思うのですが、コードを書くよりクラス名を考えるほうが面倒に感じること、ありませんか? 業界的には色々と議論が尽くされているところでもありますが、結局明確な決まりはなく好みの問題もあるので、悩みも尽きないのです。 class命名の基本ルール まずは「そんなの常識だろう」と言われそうな、基本的に気をつけるべきこと達からです。 わかりやすい英語ベースの名前を付ける 当たり前すぎますが、パッと見てその要素の性質がまったく想像できない名前はNG。
MONSTER DIVEでも数年前からGitやSubversionでファイルのバージョン管理を行っているのですが、元来のビビり症に加え、デジタル世界全般=「インダストリア(出典)」的発想により、以前やったことのある操作であっても、「何事かやらかしてしまうのではないか」「このコマンドを実行したらしばらく沈黙したのち奇音を発して爆発するのではないか(あるいは個人情報がすべてネット上に公開されるのではないか)」という恐怖が一向に拭えません。 今回は、そんなアナログネイティブにも優しいGUIツール「SourceTree」を使ったGitの基本的な使い方についてまとめてみます。 SourceTreeのダウンロード&インストールはこちらから。 SourceTree Gitの概要 作業履歴を管理できる ファイルを共有できる Gitの主な機能としてはこの2つがあげられます。 他のPCとのファイル共有やバック
普段マークアップ関連は品質チェック中心の人間なのですが、何年ぶりかにマークアップをするとなかなかうまくいきませんね。 「知識だけあってもたまには実際に手を動かしてみないと本当の知識じゃない!」 と、つくづく頭デッカチになりかけている自分に反省しているARKです。 前置きが長くなりましたが、gulpって便利ですよね。 npmから直接叩くのもいいですが、他の人とかと合わせるには便利なものは使ってしまいたい派です。 今回はgulp-ectの導入・使い方のご紹介です。 ECTとは何ぞや? 過去記事でGrunt.jsからの使い方など紹介しているので、詳しくは見てもらえればわかると思いますが、ようはコーディングの際に共通DOMはテンプレート化しよう。ってことですね。 昔?でいう、Dreamweaverのテンプレート機能みたいなものです。 CMSのモジュールなどをイメージするとわかりやすいかもしれません
はじめまして。新人クリエイターのOhkiです。 自分は現在「Visual Studio Code」を使用してWebサイト制作をしているのですが、何故使い始めたかというと、某コードエディタを使用中、動作が重く頻繁にフリーズしていたため、機能が豊富で動作が軽いものはないかと探していたところ、丁度良いタイミングでベータ版がリリースされたので、試してみるとサクサク動いて使い勝手が良かったので、乗り換えました。 そこで、さらに使い勝手を良くするためにカスタマイズ方法をご紹介します。 Visual Studio Codeとは? Microsoft製のクロスプラットフォーム対応(Windows、Mac OS X、Linux)のコードエディタです。 Atomと同じく、GitHub製のElectronを使用して作られ、軽量で高速、IntelliSense搭載、デバッグ機能内蔵などが特徴です。 インストール方
ふと気づくと、やってみたいなぁと思う演出は大抵「ぐにゃっ」としていまして、「私だってぐにゃっとさせたい」と言ったら、先日、kentaro先生がSVGを制御できるJSライブラリ・Snap.svgについての勉強会を開いてくれました。 今回はそれを受けて、Snap.svgについて簡単にまとめてみたいと思います。 Snap.svgとは Snap.svg Snap.svgは、Adobeが提供しているオープンソースです。 Webブラウザ上でベクターデータが描画できるSVGの制御に特化したライブラリで、複雑なSVGタグの記述を簡略化して扱うことができる他、 パスの制御 フィルタ・マスク・クリッピング処理 アニメーション機能 等、様々な機能が提供されています。 用意されているメソッドもjQueryと似ていて、取り入れやすそうなところも良いですね。 今回使ってみたところ、少し重いかも?という印象はありました
Linux(CentOS)にScalaで書けるフレームワーク"Play Framework 2.3"をインストールしてみる こんにちは、mioです。 過去にLaravel4の記事を何本か上げた私ですが、先日Laravel5に初めて触ってみたら、想像以上に様変わりしていてちょっと面食らいました。 あたかも田舎では素朴な雰囲気だった女の子が上京してイケイケになってた、みたいな...私は4の方が馴染んだんですが、これはいい悪いではなくて方向性の問題ですね。 ところで、忙しくなればなるほど仕事とは関係のない勉強をしたくなるのは何故なんでしょうね。 試験前に部屋の掃除を始めるのと似た現実逃避の一種なのでしょう。 というわけで、以下は自分の個人サーバに「Play Framework」をインストールしてみた記録です。察して下さい。 Play Frameworkって? https://www.playfr
MONSTER DIVEでは、さまざまな企業・サービス提供のウェブインフラを、Amazon Web Services(AWS)を使って提供させていただいているケースが増えております。 今回は、そんな当社が、現場で役立っているTipsを一つ、ご紹介します。 基本的には、企業やサービスごとに、AWSアカウントを分け、インフラ環境を構築しているのですが、 「新規にアカウントを作るほどではないが、1インスタンスだけ立てたい。」 「EC2-Classicの環境が今から取得すると使えない。」 などの場合に、当社のメインでつかっているAWSアカウント内に、単独のインスタンスを立てたりすることがあります。 そんな使い方で、実務的には全く問題ないのですが、実は困るのが、ご請求のタイミングです。 AWSの場合、金額がまとめて請求されるので、その費用の算出が難しくなります。 自社とクライアントとの切り分けだけで
今回は、gulpを使ってTypeScriptをコンパイルして、WebPackをまとめる方法について紹介したいと思います。 今までは、RequireJSを使って、JS同士の依存関係を解消していました。最近は、WebPackを用いて依存関係を解決している記事を多く見ます。今回は実際にWebPackを試してみました。 gulp導入については、ビルドツール「gulp.js」を使ってみるの記事が参考になると思います。 準備 今回、やることは下記の通りです。 ファイルを監視して更新されたタイミングで、TypeScriptファイルをコンパイル コンパイルされた複数のJSファイルをWebPackで1つのJSファイルにマージする ファイルがマージされたらブラウザをリロードする ディレクトリ構成 準備する設定ファイルについては下記の通りです。 package.json(読み込むnode_modulesの設定フ
Movable Type(MT)についてこれまでいくつかのTipsをご紹介してきました。 「もっとマニアックに!!」という声が特に聞こえたわけではありませんが、今回は一部のニーズにお応えして、MTの初期設定で実はとっても便利なmt-config.cgiの設定(環境変数)を取り上げてみます。 ちょっとした設定で、MTがもっと安定する、安全性や軽量化にもつながるTipsです。SixApartの公式リファレンスも開きながらスタディしていただければ! mt-config 環境変数 基礎編 AdminScript 管理画面「mt.cgi」のファイル名を指定することが出来ます。 管理画面のURLを推測されにくいファイル名に変更することで、セキュリティ的にも安心! AdminScript mt-kanrigamen.cgi 的な感じで書き換えます。 同様に「mt-search.cgi」や「mt-chec
今回は、SVGアニメーションを取り上げてみます。 「なにをいまさら!」なんてツッコミが聞こえてきそう...というか実はもはや聞こえてきましたが、気にしません。 まずはSVGについて SVG(Scalable Vector Graphics)の利点というと、言わずもがなベクター形式なので拡大縮小で画像が劣化しない。所謂ジャギらないということです。 それはアニメーションについても同様で、タグやCSSでの指定で自由に拡大縮小が可能です。 スマートフォンサイト用(Retina用)にサイズ違いの画像を用意しなくて良いというのは、サイトを作る側にとってかなり嬉しい話。 ということで、SVGファイルの各ブラウザ対応状況については下記をご参照ください。 Internet Explorer9以上 Firefox 3.0以上 Chrome 4.0以上 Mac OS X Safari 3.2以上 Opera 9
世界のトップ100万サイトの内、22%はWordPressで出来ている!(W3Techs調べ) 『汎用CMS』用途においては、一時はその勢いに陰りが見えた(かに思えた)WordPressですが、ここに来てまた盛り返しているような気がします。 「WordPressってもともとブログ用CMSでしょ? 汎用的に使うなら汎用CMSを使った方が効率的じゃないの?」といった意見が強まり、「WordPressの天下が終わるのも時間の問題か...」なんて空気が漂っていた時期もありました。 ところがWordPress(WP)に替わるだけの完成度と機能性を持ったオープンソースCMSは結局現れず。WPが天下を譲らなかったのはこの後継者不足問題が一番大きいと思うのですが、やっぱりなんだかんだでWordPressはよく出来てます。 コードがレガシー? 確かにね。でもその反面可読性が高かったりバージョンアップ毎の学習
Facebook、Twitterに続いて急速に普及し続けているInstagram。 一般層における利用増加にともなって、"Instagramを絡めたプロモーションを行いたい!"といったプロジェクトの企画も増えてきたように思います。 プランニングの観点については、以前、NABANAがこのMD-Blogにエントリを上げてくれていますが、今回はもう少し技術よりのお話。Instagramが提供しているAPIを使って、データを取得する一例をざっくりとちょっぴりご紹介してみます。 このAPIには、Instagramと連携したモバイルアプリの開発するためのメソッドも用意されていますが、この記事ではもう少し簡易に、例えば自分がアップロードした写真や映像をWebサイト上にフィードしたり、特定のタグが付けられた最新記事を取得する、といった表示系処理に絞って書いていきます。 なお、規約や仕様は日々アップデートさ
導入 ここ2年ほどPC向けアプリケーションの開発にどっぷり入り込んでいて、久々にHTMLの世界へ戻ってきたので、今回はまだまだ元気なWordPressネタを紹介したいと思います。 僕が最後にWordPressをちゃんと触っていたのがWordPress 2.6ぐらいだったと思うので、もう5年以上前なんですね。 当時はまだPHPも4.xだったり、色々と苦労した記憶があります。 今回のお題はタイトルのとおり、「cronを使わずに定期処理をする」です。 もちろんググれば色々と情報は出てくると思うのですが、僕のなかでしっくりこなかったり、サンプルが動かなかったりしていたので、改めてここでまとめを書いてみたいと思います。 最近、実際にプロジェクトで経験したのですが、 毎回DBにアクセスするほど情報更新がない 処理をバックグラウンドに持っていくことにより負荷を分散させたい 本体の処理とは別に管理したい
『CSSアニメーションが終わったら、JSでなにかしらの処理を走らせる』といった場合、CSSアニメーションのduration値とJSのsetTimeoutの値を合わせたりするわけですが、それって結局同じ値。 これに限らず、CSS/JS間で共通した値(アニメーション時間やプロパティ)を使うんだったら一元管理したいですよね。 そんなときは...そうだあれだ! Gruntでやってしまいましょう! grunt-shared-configを使う Gruntのモジュール 「grunt-shared-config」 を使います。 CSSプリプロセッサー(SassとかSCSSとかLESSとかStylus)とJSで共通で使えるconfigファイルを生成してくれるモジュールです。 grunt-shared-config Gruntを使うので、Grunt.jsとNode.jsが必須です。 詳しくはこちら↓ Gru
CSS3 アニメーションを使ったWebサイトが増えてきました。サイトにちょっとしたアニメーションを付けるだけで、目を引くWebサイトになります。 今回は、SassとBourbonを使ってCSS3 アニメーションを作りたいと思います。 SassとBourbonを使うと、簡単にCSS3のアニメーションを作ることができるんです! CSSのみでアニメーションを実装 例えば、opacityを0から1にするアニメーションを1秒で実行するアニメーションを作りたいと思います。 Sassを使わず、CSSのアニメーションを記述する場合は下記の通りです。 .fadeIn { -webkit-animation-name: fadeIn; animation-name: fadeIn; -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-
前回は効率的な制作環境を作るために、Gruntについて紹介しました。今回はCSSを効率よく書くことができるSassについて紹介したいと思います。 Sassを使い始めて1年ほど経ちますが、その便利さに、今ではコーディングをする上で欠かせなくなりました。 CSSの場合は、同じスタイルを何度も定義したり、プロパティの変更の修正が面倒だったりします。 Sassを使うと、CSSでは面倒なことを解決できるだけでなく、変数が利用できたり、スタイルの使い回しができたり、for文や四則演算まで使えます! それらを使いこなせば、CSSをより便利で効率的に書くことが出来る。CSS設計もしやすくなります。CSSのパワーアップさせた言語、それがSass!のような感じです。 Sass特長 セレクタがネスト(入れ子)になっているので見やすい。また、セレクタの変更に柔軟に対応できる セレクタの使い回し(extend)がで
次のページ
このページを最初にブックマークしてみませんか?
『MONSTER DIVE - with DIGITAL CRAFTSMANSHIP.』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く