WordPress制作環境の過去と現在、そして未来はどうなる？wp-envの使い方を紹介 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
はいさい！ 沖縄からフルリモートでLIGでお仕事しているうーまーです。 WordPressを触りはじめて、なんやかんや12年くらい経ってました 最初の2年は個人的なサイト作ったりだったので、お仕事としてWordPressを扱いはじめて10年くらいです。歳をとるのって早いですね……。 そんなこんなで、LIGの制作環境をアップデートしたいと思い情報を探っていたら、wp-envなるものをワードプレス公式が公開しているではありませんか！ 知らなかったなんてWordPressエンジニア失格だな……と思っていたんですが、あまり知られていないのか、記事も少ないしそんなに話題になっていないみたいな雰囲気が（僕だけじゃなかった）。 理由は恐らく、下記のような感じでしょう。 DockerやLocal（Local by Flywheel）が優秀で、あまり必要性を感じていない せっかく作った制作環境をまた作り直す
【2018年WordPress魔改造TOP3】第3位：特定のテンプレートだけ別テーマを使う | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
「魔改造」。過剰なカスタマイズを施したものを、我々は時にこう呼びます。この字面に溢れる厨二感……。 こんにちは、バックエンドエンジニアのリョウタです。 WordPress系のイベントに登壇する際のスライドにも書いているのですが、私はWordPressの魔改造が大好きです。 「これやるんだったらスクラッチで作ればいいじゃん」って言われそうなものを、なかば無理やりにでもWordPressで実装するのが楽しいんです。わかりますかね？ この気持ち。 今年も今年とて、新規・リニューアル・保守とさまざまなWordPress案件に関わってきましたが、その中でも特に記憶に残った「魔改造」３つを順に振り返っていこうと思います。今回は第3位の発表です。 第３位：特定のテンプレートだけ別テーマを使う 予算や納期の兼ね合いで、段階的なリリースになる案件はままあります。 新規制作案件の場合、リリース後に待つフェーズ
Chromeのオリジナル拡張機能を開発しよう（ソースコードあり） | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
Chromeの拡張機能とは？ Chromeの拡張機能は実質的にはただの圧縮したフォルダです。そして、そのフォルダの中身もただのHTMLやCSS、JSファイルです。 つまり、拡張機能の作り方はWebページのそれとは大差ないということですね。 拡張機能にしか提供されていない豊富なChromeのネイティブのAPI群（Chrome.* API）を利用できるところが拡張の魅力です！ 一般公開目的ではなく、普段の業務効率化目的でも十分な利用価値があると思うので、まだの方はぜひ一度触ってみてください。 拡張機能の種類 拡張機能の種類は大きく分けて3つあります。 Browser actions Page actions Override Pages 1つずつ見ていきましょう。 Browser actions ツールバーの右側に小さなアイコンを表示させるタイプの拡張機能です。一番頻繁に見かけるのがこのタイプ
第15期 代表あいさつ | 株式会社LIG
みなさんこんにちは。今期の代表あいさつは、思い切ってフォントサイズを大きくしてみました。 フォントサイズって大きいと意外と見やすくていいですね。さて、それにしてもこの「代表あいさつ」ってたいていの企業サイトにありますが、あんまり心に響くようなものに出会ったことがないのですが、それってなんでなんですかね。どこの企業の代表あいさつも、昨今の経済状況や、自社における事業戦略やビジョンをまっとうに語っていますが、なんというか、なんら間違ってはいないですし、そのとおりなんですけど、みんな同じようなことを言い過ぎている気がします。そして、それによって記憶に残るような文章が生まれないのでは？ と思っています。 つまり、私の予想では企業のWebサイトにおける代表あいさつはすでに慣例化しており、サイト構築の際に他社でも当たり前のようにやっているので、我が社でも必要、というWeb担当者や制作側の思い込みによっ
Gulp.jsとPostCSSを使ってCSSの面倒な作業をなくそう | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
ここ最近はいろいろと勉強したいことがあふれかえってます。うまく時間を作って知識を増やしていきたいところです。こんにちは、CTOの林です。 近年のエンジニアリングは自動化の方向へどんどん流れています。 Grunt,Gulp,WebPack,CI,Chef,Ansible…… etc. もちろんCSSにも自動化の流れが来ています。 過去にこんなことがありませんでしたか？ CSSのインデントや記述の仕方がバラバラ パフォーマンス・チューニング？？ とりあえずベンダープレフィックスを全部つけておけばいいだろう！ 圧縮を納品前にやって、圧縮したら崩れた 今日は普段の制作ですぐに使えるCSS自動化の方法を紹介しつつ、実際に使えるパッケージを導入するところまでを行いたいと思います。 ※11月18日にいいオフィスで行われた「書籍『最強のCSS設計』出版記念イベント＆勉強会―CSS設計、チーム開発を成功させ
1分で分かる！Google AnalyticsでABテストを行う方法 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちわ！ひろゆきです。 WEBページを改善したい！となった時にデザイン見なおしたり導線確認したりいろいろやると思いますが、中でもABテストは「AとBの比較」という単純明快な手法でありながら信頼出来るテストだと思います。今回はそのようなWEBページを改善するときに行いたい「ABテスト」をGoogle Analyticsで簡単に行う方法をご紹介します。 また、以前同じような機能のgoogleウェブサイトオプティマイザー（googleウェブサイトオプティマイザーの使い方）をご紹介したのですが、こいつがanalyticsに統合されたみたいです。 ABテストとは ABテストとはページを2パターン用意して、「どちらが優れているか」を導き出す手法です。2つのページを用意してどちらがコンバージョンが多いかを測るだけなので、シンプルで信頼出来るテスト結果を得ることが出来ます。そんなABテストですが、Go
「RxJS」初心者入門 - JavaScriptの非同期処理の常識を変えるライブラリ | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、王です。 みなさん、「RxJS」をご存知でしょうか？ すごく大雑把に言うと、RxJSとは非同期処理（マウスクリックなどのイベントベースの処理も含める）をするときに超絶便利なライブラリです！ イメージしやすいように「便利」とは言いましたが、決して「便利」という言葉ではおさまらないくらいのインパクトがあると思います。ちょっとした「イノベーション」に近い感覚です。 今回は、RxJSを全く知らない初心者でもとっつきやすいように説明してみたいと思います。少し記事が長くなりますが、最後までお読みいただければ幸いです！ 目次 ReactiveXについて 非同期処理の問題点 RXと「Observerパターン」 ウォーミングアップ イベントを配列のように操る？ Stream（ストリーム） ストリームを操作する「オペレーター」 オペレーションチェーン ObserverとObservable Col
エンジニアがいい感じにフロントエンド開発を爆速化できる環境構築の手順 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
今年もHTML5 Minutesに登壇してきました。こんにちは、先生です。 当日は「フロントエンド開発スピードをあげるための環境を作ってみた話」をしてきました。 今回はその環境を使ってみるまでの手順を書いていきたいと思います。 必要なものをインストール NodeJS Gulp WebPack Bower PhantomJS NodeJSとGulpのインストールは過去の記事「Gulp.js入門 – コーディングを10倍速くする環境を作る方法まとめ」をご覧ください。 WebPackのインストール WebPackはさまざまな形式のモジュールを静的なファイルにまとめて出力してくれるツールで、拡張性が高く最近好んで使っています。 WebPack http://webpack.github.io/ インストールはnpmを使って簡単にできます。 npm install webpack -g ※ macは
【PHPで学ぶデザインパターン入門】第1回 Strategyパターン | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、エンジニアの王です。 今回はデザインパターンと、デザインパターンの中の「Strategy」について紹介したいと思います。 デザインパターンとは？ 端的にいうと、「よくある問題へのよくある解決策」です。 ここでは、あくまでもソフトウェア設計の場合に限定しているのですが、さまざまなコンテキストで活かせる概念です。 「今までの経験上、この手の問題なら、この方法（パターン）でやればうまくいくよ！」という経験則は誰にでもあると思います。それがゲームの場合なら「攻略法」、料理の場合なら「レシピ」、語学の場合なら「定型文」だったりします。 ソフトウェア設計の場合、特にオブジェクト指向プログラミングにおいて言うなら、「デザインパターン」とは、過去のソフトウェア設計者が失敗に失敗を重ね、試行錯誤の中から導き出した再利用しやすいノウハウの集大成のようなものです。 そう、要するに、柔軟性、拡張性、再
SVGとjQueryで絵を描いているようなアニメーションを実装する方法 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
どうもお久しぶりです。 フロントエンドエンジニアのはやちです( ˘ω˘)✌ 最近『天空のクラフトフリート』というソーシャルゲームにハマっております。 もともとは弊社のエンジニアの何人かに誘われてDLしたのですが、みなさん最近ログインしている様子がなく、もくもくとひとりでミッションをこなし、練り上げております( ∵ ) まけないひとりたのしい、強くなる✌(´ʘ‿ʘ｀)✌ さて、今回はSVGで絵を描いているようにアニメーションを生成してくれるサイト、LAZY LINE PAINTERの使用方法をご紹介します。 SVGとは Scallable Vecter Graphocs（スケーラブル・ベクター・グラフィックス）の略で、XMLをベースとした二次元ベクターイメージの画像形式のことです( ˘ω˘)☝ SVGはjpgの様にimg要素で扱ったり、cssで色を変えたり背景画像として扱ったりできます( ˘
フリーランスが請求書を作成するときの見落とし防止チェックリスト | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、LIGブログ編集者の朽木です。僕は学生時代からフリーライターをして日銭を稼いでいたのですが、生活費に原稿料を当て込んでいると、往々にして悲劇が起きることがありました。 請求書の記載ミスで本来の期日までに支払いがされなかったり、そもそも請求書を送り忘れていてやはり本来の期日までに支払いがされなかったりすると、翌月の振込日までもやしとか豆腐とかを食べて過ごさなければいけないわけです。 気をつけているつもりでも、何かとうっかりしがちなのが請求書。これはコンテンツ制作にかかるすべての工程をひとりでしなければならないフリーランスならではの悩みだと思います。 世間には請求書のテンプレートなるものも溢れていますが、とくに僕はExcelを上手に使いこなせないので、苦手意識から後回しにしたり、余計にミスも起こったりしがちでした。 そこで今回は、ビジネス向けクラウド請求書ソフト「MFクラウド請求書
Fixed固定ナビゲーションを設置するときに気をつけたい4つのこと | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
ライター内藤です。花粉、そして1pxと闘っているWebコーダーでもあります。 最近、立て続けに「上部固定グローバルナビゲーション」を使ったWebサイト構築に2件ほど携わりました。1件はWordPress、もう1件は手打ちの静的サイトです。改めて思ったのは「固定ナビゲーションには落とし穴がある」ということでした。 そこで、固定ナビゲーション設置に際して、私が個人的に体験した「落とし穴」と、その解決のためにやってみたことを4つほどご紹介したいと思います。 必ずしもこれが正解というわけではありませんが、同じようなことがあったときのお役に立てば幸いです。 …と、その前に。そもそも固定ナビゲーションとは何モノか、下図をご覧ください。 例としてFacebookを挙げてみました。上部に固定された青いバーの部分は、スクロールしても常に上部に固定されて消えません。 このようなナビゲーションは、一般的に下記の
プラグインまとめ20選 | 株式会社LIG
1月が終わってしまった・・・・・ どうも正月が恋しい段田です。 今回はWordPressサイトを構築している時に役に立つプラグインを紹介したいと思います。タイプ別で分けて紹介します。 目次 デバッグ系プラグイン 記事操作系プラグイン パーマリンク系プラグイン データ移行・操作系プラグイン その他 デバッグ系プラグイン WordPress構築時にWordPress内の情報を確認したい場合に利用すると便利なプラグインです。 Debug Bar 開発時のデバッグで利用するとても有名なプラグインです。パラメータ情報やエラー情報を確認できたりします。 また、このプラグインの拡張用プラグインもいくつかあるので、多機能です。 必須プラグインと言っていいでしょう。 Debug Bar Debug-Bar-Extender 先ほど紹介したDebug Barを拡張するプラグインになります。利用するときはDeb
スマホサイト全体のキャプチャを一度で撮って効率化！WebCollectorを使ってみた | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは。ライターの伊丹松です。最近喉が痛いです。9月10月に風邪を引かない人って逆になんなんでしょうね。 さて、最近では「モバイル・ファースト」などと言われるように、ますますプライオリティが高まっているのがスマホサイト制作。 しかし、PCサイトに比べてどうしても縦長になってしまうため、キャプチャが必要な場面でも一度に全画面を撮ることができません。スクロールして撮った複数の画面写真を後からPhotoshopで繋げて…という作業経験がある方も多いのではないでしょうか。 デザインチェック、デバグ、構成書・指示書への貼付けなど、キャプチャはさまざまな場面で必要になります。ちょっとした作業ですが、ページ数が多いサイトなどでは、トータルでみればけっこうな作業量になります。 そこで今回は、そんなキャプチャ作成作業の手間を解消してくれるアプリを紹介したいと思います。 WebCollectorの紹介 他
select要素（セレクトボックス）の装飾に使えるプラグイン3選 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは。デザイナーの白浜です。 今回はCSSだけではなかなか装飾が難しいSelect要素（セレクトボックス）をオリジナルのデザインにしたい時に有用なプラグインをご紹介したいと思います。 jQuery.customSelect() https://adam.co/lab/jquery/customselect/ 軽量で導入が簡単！IEもOK。 導入については下記記事が参考になります！ jQuery 軽量簡易！セレクトフォームを装飾・デザインするプラグイン【.customSelect()】 | Stronghold jQuery EasySelectBox Plugin https://github.com/kosinix/easyselectbox optionの中身がdivに置き換わるのでCSSでのデザイン調整が簡単にできます。わたしもよくお世話になっております。IEもOK。 導入につ
わずか5分！？ AWSのEC2でクラウドなウェブサーバーを構築してみた | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
はじめまして。五反田の「Clisk（クリスク）」という会社でシステムエンジニアなどをしている芹沢と申します。盟友であるLIGのゴウさんや紳さんと酒を酌み交わしているうちに、LIGブログに記事を書かせていただくことになりました。よろしくお願いいたします。 AWSとは？ http://aws.amazon.com/jp/ AWS（Amazon Web Servicesの略）とは、Amazonが提供しているクラウドサービスの総称で、その中にはさまざまなサービスが含まれています。 EC2（仮想サーバー）、S3（ストレージ）、RDS（リレーショナルデータベース）、CloudWatch（監視）など、たくさんのサービスが提供されていて、それらのITインフラのリソースを、使いたいときに、使いたいものを、使いたいだけ、必要なスペックで、利用することができるのが特徴です。 多くのサービスは管理画面から操作でき
JavaScriptで`undefined`の代わりに、`void 0`を使ったほうがいい理由 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
今まで平気でundefinedを使ってましたが、underscore.jsのソース読んで、無防備にundefinedを使っちゃいけないなってことを初めて知りました。いやはや、まったくもって面目ない！ 知っている方なら知っていると思いますが、意外と知らない方も多いのでは？という意味でのプチ記事です。 void 演算子 voidは１つの式を取って、常にundefinedを返す演算子です。 例えば void 0 void (0) void 99 void "wow" void {} //すべてundefinedが帰ってくる と、このように、voidはundefinedの代わりとして使えるのが分かりますよね。 上記の理屈で行くと、そんな面倒なことをするまでもなく、undefinedを直接使えば済む話じゃあ？と思いますよね。ところが話はそう簡単ではないようです。 何故なら、なんと、undefined
「Compass」、基礎から応用まで！ | 株式会社LIG
こんにちは、デザイナーの王です。 今回の記事ではCompass使いになるための必要最小限の知識から応用まで、体系的にひと通り紹介していきます。 全くの初心者でも問題ありません！ はじめに結論を言うと、CompassでCSSを書くと 早い！ 見やすい！ メンテしやすい！ コード量がぐっと減る！ 一度使い出したら最後、もう元には戻れない！ 一体どこまで便利なのかずらずら書くよりも、百聞は一見にしかず！ 簡単なプロジェクトを通して、各特徴について紹介した短いデモ動画を用意したので、まずはこちらを見てください！ Compassとは？ Compassを語る前に、まずは「Sass」を知っておく必要があります。なぜなら、CompassはSassを元に開発したフレームワークだからです。 Sassとは では「Sass」とは何かと言うと、正式名称は「Syntactically Awesome Style Sh
神の計算機、Wolfram Alpha(Wol神)を紹介したい。 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
どうも！こんにちは。 みなさん最近計算してますか？僕はしてません。 今回は何でも答えてくれる計算機、すなわち神の計算機を発見してしまったのでご紹介します。 某中学入試問題を解いてみる 突然ですが、こちら某中学入試の1問目です。まずは自力で解いてみました。みなさんは解けますか？ 僕はご覧の通り、式をたくさん描いた割には解にたどり着けませんでした。あと一歩だったんですけどね。 そこで登場するのが今回ご紹介したい神の計算機Wolfram Alpha。（以下Wol神） http://www.wolframalpha.com/ 早速さきほどの計算式を入れていきます。 計算結果がこちら！途中計算式やグラフまで描いてくれます。すごすぎる！ 解は３でした。 実はこの計算機、計算機能だけでなく、wikiのような辞書機能や数値を比較することもできます。 実際に触ってみてもらえばどんなものかわかると思いますが、
【完全にステマ】家事代行のベアーズのHPがリニューアルされました。 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
『皆さん、こんにちは！家事代行のベアーズイメージキャラクターのモモエと申します！』 『帰れ。』 『なんで！？ 帰るには早いよ！まだ登場したばかりだよ！』 『やるべき事はやっただろう？』 『志なかばにも程があるよ。』 『お土産に笹を用意した。これを持って帰ると良い。』 『笹、食べるのパンダだよ！てゆーか、なんでそんなに冷たいの！？』 『台東区の住民がやさしくする動物は、パンダとカマドウマだけだよ。』 『意味がわからないよ！クライアントにはもっと、やさしくしようよ？』 『HAHAHA.ジョークさ。LIGが対応の悪い会社だと勘違いされてしまうな。』 『正に今、ひどい対応をされたクマがいるよ。』 『で、今回は何のステマに来たんだ、モモエ？』 『ステマとか人聞きの悪いこと言わないでよ！ひどすぎるよ！』 『まぁ、ステマだけどね。』 『モモエ、巨大化して何かアピールできるの、あと3回だけだからな。』 『
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
