【WordPress】独自のブロックを簡単に作成できるプラグイン「Block Lab」 | バシャログ。
こんにちは、koyaです。 在宅勤務で自宅PCでAdobe製品を開きながら作業することが多くなり、メモリが足りなくなってしまったので16GBから48GBにアップグレードしました。めちゃくちゃ快適です。 最近はChromeだけでもメモリをたくさん使ってしまうので16GBだと足りなくなってしまいましたね… 今回はブロックエディタに独自のブロックを追加する事が出来る「Block Lab」を紹介します。 インストール プラグインの追加から検索、または以下のサイトからダウンロードしてインストールします。 wordpress.org 公式サイト 使用方法 インストールをするとサイドバーの一番下に「Block Lab」が追加されるので、ここからメニューを開くことが出来ます。 All Blocksを開くとデフォルトで「Example Block」が下書き状態で追加されています。 「Example Bloc
node.jsでスクレイピングしてみる | バシャログ。
初めまして。4月入社の山崎です。これが初投稿になります。 今回はnode.jsでスクレイピングをします。 経緯 とあるサイトをリニューアルしていて、旧サイトの静的ページからテキストなどのコンテンツを持ってきて新サイトのHTMLタグの中に貼り付けていくという作業はよくあると思います。 僕もとあるサイトのリニューアル時にそういった作業をやっていたのですが、旧サイトのよくある質問の質問と回答のページが分かれており、回答ページに行ってテキストをとってきてHTMLに貼り付けていました。 ただ、その質問も全部で100個くらいあり、1つ1つコピペするのは面倒くさいので、スクレイピングで特定のURLに一括アクセスし、テキストを引っ張ってきて、新サイトのHTML構造に埋め込み、HTMLを自動生成しようと思ったのがきっかけです。 僕はシェルスクリプトはほぼ書けず普段JSを使うことが多いため、node.jsを使
【Adobe XD】便利なプラグイン紹介 | バシャログ。
こんにちは。sitoです。 みなさん、XDのプラグイン、使ってますか？ 最近どんどん便利なプラグインが増えているようなので、sitoもいくつか導入してみました。 その中で、使ってみて便利だったプラグインをご紹介します。 Remove Decimal Numbers 図形等をリサイズしていて、小数点がついてしまったときに、整数（小数点以下切り捨て）に直してくれるプラグイン。 今まで手で地道に消していたので、めっちゃ楽になりました！ Stark カラーブラインドのシミュレーションと、コントラストチェックができるプラグインです。 カラーブラインドシミュレーションはアートボードごと、コントラストは２つのレイヤーを選択してチェックすることができます。 Ikono フリーアイコンサイト「ikonate」のプラグインです。 XD内でアイコンを選択して配置できるようになります。 線の太さを選択できたり、ア
【PhpStorm/WebStorm】正規表現をチェックするプラグイン | バシャログ。
fukasawaです。こんにちは。夏ですね。 多摩川沿いをジョギングしてると、日焼けしすぎてかりんとうみたいになったおじいちゃんを見かけます。自分は夏でも相変わらず白いままなので、少しメラニン分けてほしいです。 さて、WEB上には正規表現をチェックするためのサイトがいろいろとありますが、JetBrainsのプラグインとしても正規表現をチェックする機能が提供されているようです。今回はPhpStormでそちらのプラグインを使用してみたいと思います。 RegexpTester :: JetBrains Plugin Repository インストール [File] → [Settings] → [Plugins] → [Browse repositories ...] → テキストボックスに「regexpTester」を入力して検索。「Install」ボタンでインストール。インストールが完了した
jQuery Countdown を使ってカウントダウンタイマーを表示する | バシャログ。
ハッピーバースデートゥーミー！今日が誕生日のinoueです。 さて、診断テストのような入力フォームを表示する場合、時間制限を設けたい場合があります。 そういったページに「あと〇〇分」というカウントダウン表示を簡単に追加できるjQueryプラグイン 『jQuery Countdown』を今回紹介します。 概要 jQuery Countdown 使い方は上記のサイトのトップページを見ればすぐわかります、というくらい非常に簡単かつオプションも豊富。 多言語対応もすでにされています。 例えば、id:timeCount の要素に liftoffTime までの残り時間を 時分秒（=HMS）で表示したい場合は次のように記述します。 $('#timeCount').countdown({until: liftoffTime, format: 'HMS'}); サンプル：今から20分後までのカウントダウン
width:auto;とwidth:100%;の違い＋中央寄せについて。 | バシャログ。
どうも。mackyです。 花粉症とは無縁の私は、早くお花見シーズンにならないかなー…なんて、今はそれだけを楽しみに生きています。のみたい！食べたい！食べたい！ さて今日は、その大切さ＆重要さに近すぎて気づかない、みたいな存在の「width」についてちょっと書こうと思います。 これからレスポンシブどんどん勉強していきたいという方は是非。 width:100%とwidth:autoの違い 例えばPC版のコーディングから行うとして、widthをpx指定したときなどはブレイクポイントを設けてSP版用に幅を上書きする。この流れはよくあります。共に、親要素の幅に合わせるとういう意味では同じですが、paddingやborderを指定する場合にちょっと違ってきます。 width:auto;の場合 Media Queriesをつかってwidthを上書きする場合はこちらが便利です。 上の図を使って説明すると.
CSSだけでお手軽なフリック&ドラッグスライダーを作る | バシャログ。
今年のベスト映画はやっぱりガーディアン・オブ・ギャラクシーなminamiです。 左右にスクロールするスライダーのようなUIを作る機会は未だ多いですが、今回は主にタッチデバイスで便利なフリック&ドラッグで動くスライダーをCSSだけで作ります。 Amazonのスマートフォンサイトなどでも同じように実装されています。 作り方 PC用のブラウザではoverflow: autoやscroll を設定した要素の中にそれよりも大きな要素が含まれる場合、スクロールバーを表示させてスクロールすることができますが、iOSやAndroidなどのスマートフォン用のブラウザではうまくスライドしなかったり、スライドそのものができなかったりします。 今回ご紹介する方法だとCSSだけで慣性スクロールをつけることができます。 HTMLのマークアップは下記のようにしました。 <div class="slider-wrappe
Firefox 開発ツールの充実っぷりを見直す | バシャログ。
OS Xの新しいバージョンをリリース直後にアップグレードすると、今まで使ってきたツールの一部が使えなくなって悲しい思いをする(でもやめられない)、という敬虔な？Macユーザであるtanakaです。 最近リリースされたOS X Yosemiteでもとりあえず、普段使っているツールが使えるかどうかだけチェックしたところ問題なさそうでしたのでアップグレードしました。 YosemiteでJetBrains IDEを動かすを対応する必要があったり、MacPortsのYosemite対応版をインストールする必要がありましたが、問題無く動作しているようです。 今日は、Firefox 開発ツール(標準で付属しているもの)を紹介します。Firefoxにはバージョン10から開発者向けツールが付属していましたが、最初試したときは、Firebugの代わりに使えるものでは無かったように思います。 そのころからChr
<input type=
どうもfujiharaです。ここ最近の台風ラッシュには困りました。 通勤電車が見合わせてまったく動かない経験を久々にしました。 本日は<input type="file">の装飾を行っていきます。 方法は実在する<input type="file"> を見えないようにして、 装飾可能な a要素がクリックされたタイミングで見えない input要素を クリックしてあげます。 失敗例 $('input:file').css({ //元々のファイルフォームを隠す。 'opacity':0, 'display':'none' }); $('a').on('click', function(e) { //装飾用のリンクをクリックしたタイミング $('input:file').click(); //ファイルフォームをクリック e.preventDefault(); }); 実はこのままだと
子ページから親ページ（別ドメイン）の iFrame の大きさを操作する | バシャログ。
近いうちに大型の台風が来ると聞いてソワソワしている kimoto です。ここ数年で最強とか言われると身構えちゃいますよね…。 さて、今回は tips です。 別ドメインのページを iFrame 内に表示した際に、想定よりページの縦幅が大きくて、iFrame にスクロールバーが出てしまう…。 最初の表示時に大きさ合わせたけど、iFrame 内でページ遷移すると中のページの大きさが変わっちゃうので下に空間ができたり逆にスクロールバーが出たり… みたいな事を回避するための tips をご紹介します。 postMessage を利用するので、古めのブラウザでは動かない可能性があるのでご注意をば。 postMessage による値の受け渡し 他のページへのメッセージの受け渡しは window.postMessage() を使います。書き方は以下。 window.postMessage("value"
11の項目を設定するだけでJavaScriptコーディングガイドラインが作成できるjsCode | バシャログ。
ゴールデンウィーク中に5年ぶりにフットサルをしてまだ筋肉痛が癒えてないishidaです。社内でフットサル部を立ち上げてみましたが、参加人数が少ないので横浜近辺で一緒に球蹴りしてくれる人を募集中です。 さて今回は、JavaScriptのコーディングガイドラインを作成してくれるサービスのご紹介です。 JavaScript は HTMLやCSSよりも自由度が高いので、 ガイドライン化してコードを統一するのも手間がかかるかと思います。 また初めてガイドラインを作成する人にとっては、 JavaScriptのどこまでをルール化すればいいのかも悩む部分ではないでしょうか。 そんな時にお手軽でJavaScriptコーディングガイドラインを作成してくれるサービスがありました。 11の項目を設定するだけでJavaScriptコーディングガイドラインが作成できる jsCode http://jscode.org
改行コードやインデントスタイルをEditorConfigで統一する | バシャログ。
横浜に5年以上住んでて新横浜ラーメン博物館に行ったことがなかったので週末行ってきました。ほとんど前情報なしで行ったので中の異空間っぷりが歩いてて楽しかったですね。 今日は、制作/開発プロジェクトで改行コードやインデントをEditorConfigというプラグインを使って行う方法について紹介します。 EditorConfigとは EditorConfig は改行コードやインデントスタイルをプロジェクト内で制御するためのプラグインです。".editorconfig" という名前の設定ファイルを置くと、プロジェクト内のファイルを作成・編集したときに ".editorconfig" の指示に従ってインデントを行ったり指定の改行コード・文字コードで保存できたりします。、有名どころのエディタ(ただし海外製)にプラグインが用意されているので、プロジェクトのメンバーでエディタを1つに共通化せず最低限テキスト
【JavaScript】デザインパターンを知ってみる。シングルトン編 | バシャログ。
桜を見ながら飲み食いしたいminamiです。 前回に引き続きJavaScriptで書くデザインパターンです。今回はシングルトンパターンについて調べてみました。 なぜ使うの？ シングルトン(Singleton)パターンは、以下のような特徴があります。 あるクラスのインスタンスを一つだけにする つまり同じクラスを使って新しいオブジェクトを再度作成すると、最初に作ったオブジェクトの参照になる。 作られたオブジェクトへのグローバルなアクセス方法を提供する 機能の重複する新規のインスタンスを作ることなく、一つのオブジェクトを使いまわすことができるのでリソースを無駄にしません。また、インスタンスを一つだけにすることでグローバルな関数や変数を無駄に増やすことがなくなるので競合の危険をなくします。このあたりは前回のモジュールパターンの考え方と同様です。 簡単な書き方 var Single = { myNa
【Google Analytics】毎回ググって面倒なイベントトラッキングの使い方をまとめてみよう | バシャログ。
ソチってどっち？Latinです。今回は Google Analytics のイベントトラッキングの使い方についてです。コレ、毎回ググってる気がするんですよね･･･。なのでここらでまとめておこうと思います。 従来のクラシックアナリティクス（非同期型）とユニバーサルアナリティクス 従来のクラシック（非同期型）とユニバーサルアナリティクス版で実装の方法が若干違ってきますが、呼び出すメソッドが異なるだけで内容に大きな違いはありません。 今現在利用中のアナリティクスが従来型なのかユニバーサルアナリティクスなのかは、Google Analytics 画面の「アナリティクス設定→トラッキング情報」で確認できます。 また、実装されたトラッキングコードでも確認が可能です。 従来の非同期型のトラッキングコード例 _gaq.push(['_setAccount', 'UA-1234567-1']); ユニバーサ
【Photoshop】CS5でピクセルにスナップをさせる | バシャログ。
マリノスの中村俊輔の背番号10に心躍らせているokadaです。 どうぞよろしくお願いします。 今回取り上げるのは、Photoshop CS5でピクセルにスナップさせる方法です。 Fireworksだと(Ctrl＋k)で一発ですが、Photoshopだとシェイプがボケてしまうという事が、良くあります。その改善方法を紹介します。 シェイプでの改善方法とグリッドでの改善方法を紹介します。 シェイプをピクセルにスナップさせる なにも設定しないと上記のようにボケてしまうことがあります。 やり方 メニューバー下にあるシェイプツールのオプションを開きます。 オプションにあるピクセルにスナップにチェックを入れます。 上記のように鮮明になりました。 ガイドをピクセル単位でひく 1px × 1pxのグリッドをひいてピクセルにスナップさせる方法です。 やり方 [編集]→[環境設定]→ガイド・グリッド・スライスを
えっ！ビルド不要？JavaScriptで自動生成するスタイルガイドジェネレーターKalei | バシャログ。
娘の誕生日に、ドラえもんドンジャラDXをプレゼントしました ishida です。 娘とともにハマってしまいました。早く「ドンジャラ」って言いたいっ！ さてさて、皆さん HTML/CSSコーディングでスタイルガイド作成していますか？ スタイルガイドは、サイト内で定義されている部品を一覧化して こんなパーツを使ってますよーとするドキュメントです。 複数人でのページ制作や新規サイト構築後の運用には欠かせません。 ジェネレーターによるスタイルガイド生成も人気になりつつあり< 最近では、StyleDocco が有名ですね。 StyleDocco 以外にもスタイルガイド生成のツールはいろいろあります。 そのなかでもビルドを必要としないスタイルガイドジェネレーターのご紹介です。 ビルド不要なスタイルガイドジェネレーターKalei こちらのジェネレーター、コンパイルが不要で Ruby や Node.js
window.open で開いた窓に対して Post する | バシャログ。
いやあ、もうすぐスーパーマリオ3Dワールドの発売日だねえ！って言ったら「もうマリオはいいでしょ…」って言われた kimoto です。 なんでだよ！すっげえ面白そうじゃんかよ！よくないよ！ さて、本日はちょっと小ネタで、window.open で開いた窓に対して Post でデータを渡す方法です。 利用場面としては、フォームの確認画面を小窓で開きたい時などですね。 URL にデータを乗っけて Get で開く方法も無くはないですが、データ量に制限もあったりなど、いろいろと問題があります。 ということで、開いた窓に対して Post でデータを投げる方法です。 function open_preview() { window.open("about:blank","preview","width=600,height=450,scrollbars=yes"); document.input_for
WebStorm 7 の JavaScriptデバッガ：強力なElementsタブ | バシャログ。
何年かぶりにスーツを新調したら結構様式が変化していて驚いたtanakaです。 WebStorm/PhpStromのJavaScriptデバッガについては[PhpStorm/WebStorm]JavaScriptデバッガを使おう！で紹介しましたが、バージョン7にアップデートして試してみるといくつかの機能が追加されているようです。今日はその中で特に便利なElementsタブ機能を紹介します。 Elementsタブ：ブラウザで表示中のDOM/HTMLがエディタで見られる！ JavaScriptデバッガの更新で、Elementsタブが一番の目玉みたいです。下の画像を見てください エディタの上半分はフォルダツリーとエディタ、下半分がデバッガで、ブラウザでレンダリングされたDOMとHTMLがElementsタブで見られるようになっています。このElementsタブ、いまはまだChromeでしか使えない
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
チームで使うWebStorm／第14回HTML5ビギナーズ勉強会 | バシャログ。
WebStorm 社内勉強会をやりました | バシャログ。
