【Adobe XD】便利なプラグイン紹介 | バシャログ。
こんにちは。sitoです。 みなさん、XDのプラグイン、使ってますか？ 最近どんどん便利なプラグインが増えているようなので、sitoもいくつか導入してみました。 その中で、使ってみて便利だったプラグインをご紹介します。 Remove Decimal Numbers 図形等をリサイズしていて、小数点がついてしまったときに、整数（小数点以下切り捨て）に直してくれるプラグイン。 今まで手で地道に消していたので、めっちゃ楽になりました！ Stark カラーブラインドのシミュレーションと、コントラストチェックができるプラグインです。 カラーブラインドシミュレーションはアートボードごと、コントラストは２つのレイヤーを選択してチェックすることができます。 Ikono フリーアイコンサイト「ikonate」のプラグインです。 XD内でアイコンを選択して配置できるようになります。 線の太さを選択できたり、ア
Googleスプレッドシートで作成したファイルリストをVue.jsで表示する：IE11対応編 | バシャログ。
まさかの２週連続台風により週末が終わってしまいそうで、ちょっと悲しい kouraku です。おはこんばんちわ。予定は何も入れていなかったので、それだけが救いですね。。。 さて、前回『Googleスプレッドシートで作成したファイルリストをVue.jsで表示する』というお題にチャレンジしましたが、実は１つだけ問題がありました。それは・・・ IE11だと表示されないよ！！！！ ・・・はい、分かっていたのですが、コーディング中にIEを使うこともあまりないだろう・・・と思い放って置いたんです。 でも、仕事を進め行く内に、「IEでもちゃんとファイルリストが見られないと面倒！！」という場面にチョイチョイ出くわしたので、やっぱり直すことにします。 ということで今回は、このファイルリストをIE11でも表示できるように修正をしたいと思います。 まずはIE11のコンソールでどのようなエラーが起きているかチェック
WordPressサイトを一瞬でPWA化できる PWA for WordPress【プラグイン紹介】 | バシャログ。
今年の春頃、iOSのServiceWorker対応で、PWA（Progressive Web Apps)がWeb界隈を賑わせましたね。 私は6月にAndroid Bazaar and Conferenceに参加してまいりました。 春は東大の本郷キャンパスでしたが、秋は川崎で開催されます。現在も参加登録できます! 申込はconnpassから。 PWA for WordPress WordCamp Tokyo 2018や、私が参加した日本Androidの会9月定例会で紹介がありました。サイトをPWA化するためには、manifest.jsonとservice-worker.js、他にアイコン用の画像などが必要となります。 これらを非常に簡単に設定してくれるプラグインです！ (利用には対象のWordPressサイトがhttps化している必要があります) 使ってみました！ プラグインをインストールし
イラストが楽しいサイトのまとめ | バシャログ。
酔っ払ってガチャを回すと当たることがよくあるgamiです。 さて、最近は写真や映像を大きく使ってるサイトをよく見かけますがイラストもいいぞ。というわけでイラストが楽しいサイトを厳選しました。チェケラ！ おかもと歯科 歯科に限らず医院系のサイトは清潔感のある院内写真や診察風景などを載せます。 このサイトではコーラルピンクを基調とした口のイラストのアニメーションで優しさ、親しみやすさが感じられます。ロゴがかわいい。 FESSIダンススクール ダンスの写真・映像は映えます。ドカンと乗せれば画面も持ちますしインパクトがあります。 しかし優しいイラストのアニメーションを用いることで暖かさが感じられとっつきやすさも出てくるのではないでしょうか？ もう片方もマウスオンで動きますのでぜひサイトにてチェックしてみてください。 イベントスタジオ イベントと一言いっても音楽フェスや展覧会、トークセッションなど幅
画面遷移がすごいサイトのまとめ | バシャログ。
TVKで再放送されているあぶデカにハマっているgamiです。あの時代の関内・馬車道あたり物騒すぎるでしょ…。 さて、以前にも紹介しました、気になるデザインを共有するDesignClipという社内のチャットグループより、画面遷移がシームレスでこいつぁすげえや！となったものを幾つか紹介できればと思います。チェケラ！ 佐久間徹設計事務所 デザインはすごくシンプルで動きもいいと印象によく残ります。 仕事一覧から仕事詳細へ 一覧の写真をクリックするとコンテンツの後ろでニュッと大きくなる感じが好き。 下位ページへ グローバルメニューに注目してるといつの間にかコンテンツが変わってる。 Orenda Security セキュリティ会社のサイト。シャッターのような動きからのロゴアニメーションはまさに鍵をかけてるように感じました。 スタジオスプーン株式会社 四方のボタンをクリックすると、その方向から背景がスラ
HTMLをそのままPDFにできるPHPライブラリ TCPDF | バシャログ。
こんにちは。sagaraです。現在携わっているPHPのプロジェクトで、領収書をPDF出力する処理があって、 どういうプロセスで生成しているのか見てみたところ、 PDF作成ライブラリ TCPDFを使用していました。 というわけで、今回はPDFを作成するライブラリについてのお話です。 PDFを作成するライブラリ HaruPDF PDFlib（商用） FPDF TCPDF といったものがあります。上記のうち、HaruPDFとPDFlibは拡張モジュールでインストールが必要ですが、 FPDFとTCPDFはクラスライブラリなのでサーバーの適当な場所に配置すればいいです。 後者の方が手軽に始められますね。 TCPDFでPDF作成！ GitHubからダウンロードできます。 https://github.com/tecnickcom/tcpdf HTML(XHTML+CSS)そのままPDFに <?php
【PhpStorm/WebStorm】Markdownを使うためのプラグイン | バシャログ。
年々色白になっていくfukasawaです。こんにちは。 子供の頃はそこまで白くなかったはずなのですが。不思議です。集まれ、メラニン！ さて、今回はPhpStormやWebStormでMarkdownファイルを扱うためのプラグイン「Markdown support」についてです。 PhpStorm、WebStormでMarkdownファイルのシンタックスハイライトやプレビューを使う為には、別途プラグインをインストールする必要があります。「Markdown support」をインストールすることで、シンタックスハイライト、リアルタイムプレビューを使うことができるようになります。 PhpStormの画面を使用してインストール方法について説明していますが、WebStormでも同様の手順でインストール可能です。 インストール方法 メニューバーから [File] → [Settings...] を選択
PHP カンファレンス2015で PHP7の話をきいてきました #phpcon2015 | バシャログ。
『仮面ライダーゴースト』の第1話をまだみていない kagata です。ちょうど放映時刻に外出する用事があってタイマー録画したのですが、なんだかもったいない気がして手がつけられていません。第2話の放映までにはチェックします。 さて、その第1話放映の前日にあたる10月3日（土）に PHP カンファレンス2015が開催されました。今回のテーマはずばり「7」の一文字ということで、正式リリースが来月にも予定される PHP7の話題が多く取り上げられました。今回は当日参加したセッションについてご報告します。 参加したセッション 一部迷いつつ、以下のセッションを選びました。 PHP の今とこれから 2015 Composer で始めるアプリケーション開発 超高速 WordPress ～ PHP7 vs HHVM vs PHP5.6 ～ Rasmus Lerdorf による基調講演 “Speeding up
Vagrant+ItamaeでPHPアプリケーション開発環境を作る | バシャログ。
マウスといえばロジクール！なtanakaです。先日発売されたMX Master、もちろん買いました。数えてみるとVX Revolutionから始めて、7台は買ってました。先代のM950にくらべて形が少し変わりましたが、軽くなって操作しやすくなったと思います。 今日は、PHPアプリケーションの開発環境をVagrantとItamaeを使って構築する方法を紹介します。 Itamae について Itamaeとはサーバーの構成管理をするツールです。作成したサーバの設定を自動化してメンテナンスしやすくするために使います。設定ファイルの記述がシンプルなのが特長です。 私は、ITエンジニア向けイベントCROSS 2015のセッション インフラエンジニアの睡眠時間を確保する方法 ～Infrastructure as a Code時代のインフラ運用～に参加していて、Twitterに流れてきたコメントで知りまし
CSS で「吹き出し」をつくってみる | バシャログ。
こんにちは。mackyです！ 最近、何かと吹き出しを目にすることが多かったので自分でもサンプルを作成してみることにしました。 よかったら読んでみてください。 では、早速。 HTML HTMLはこの一行。 <div class="baloon">お久しぶりです。まっきーです。ここに好きなテキストをいれてね。</div> CSS：スタンダードな角丸長方形 使える環境であれば使いたい :before 。CSSもシンプルにできてしまいます。 .baloon { width: 400px; padding: 10px; background: #FF3399; position: relative; color: #fff; border-radius: 5px; text-align: center; } .baloon:before { content: ""; position: absolu
WordPress 4.1から title 要素の作り方が変わるという話 | バシャログ。
映画『インターステラー』を主に TARS 目当てに観てきた kagata です。『キカイダーREBOOT』といい『her／世界でひとつの彼女』といい、今年はロボットや人工知能の出てくる映画が印象に残っています。年末公開の『ベイマックス』も期待。 さて、WordPress の次期バージョン4.1が今月リリースを目指して準備されています。そのバージョン4.1から、title 要素の自動生成という新しい機能が盛り込まれる予定です。バシャログ読者に多いであろうフロントエンド畑の方々や、WordPress テーマカスタマイズの初心者のみなさまにもかかわりがありそうということで、ちょっと調べてみました。 おさらい：これまでの WordPress での title 要素 これまで、WordPress での title 要素はテーマの header.php にテンプレート関数 wp_title() を使っ
フォントサイズをremで指定する。（emとの比較） | バシャログ。
こんにちは。mackyです。 CSS3で追加されたremという単位が便利な理由をpxやemと比較してまとめてみました。 IE8以下は非対応ですので、px指定を追加する必要がありますが、 スマートフォンやRWDにはとても便利です。 ちなみに、 remというのは、「root+em」（ルートエム）の略でhtmlのサイズを継承するemだと。 なるほど、とてもわかりやすいです。 そのまえにem（pxも）の継承をおさらい。 px(ピクセル) ピクセル単位の指定。 環境によって変化しない絶対単位です。 em(エム) 文字の高さを基準にした単位。1emは1文字分で、環境によって大きさが変化する相対単位。 bodyなどでfont-sizeの指定をしていない場合、あるいはfont-size:100%なら「1em=16px」が基準になります。 まずはpxとemをおさらい pxとemについてのわかりやすい説明はこ
ボーダーに画像を指定する CSS3 プロパティ「border-image」を試してみる | バシャログ。
もういくつ寝るとワールドカップですね。こんにちはLatinです。 さて、スマホサイト制作では CSS3プロパティが特に威力を発揮し、非常に便利ですよね。 そんな CSS3プロパティですが、今回は使った事のない「border-image」プロパティについて色々と調べてみました。 border-imageプロパティとは border-imageプロパティは、画像ボーダーについてまとめて指定する際に使用します。 border-imageプロパティでは、border-image-source、border-image-slice、border-image-width、border-image-outset、border-image-repeatの各プロパティの値を、まとめて指定することができます。省略された値はそれらの初期の値に設定されます。 画像は上下左右それぞれのボーダー用に４枚必要となるわけ
スマートフォンサイトのコーディング Tips あれこれ | バシャログ。
ゴールデンウィークはゴールデンに過ごせそうにない Latin です。 今回はスマートフォンサイトのコーディング周りでのあれこれをまとめてみます。 先日の macky の記事、「スマホサイトの矢印付きメニューをCSSのみで実装する。」もあわせてご覧ください。 viewport 系の設定 描画サイズをデバイスの横幅に合わせる、拡大縮小を不可に これが一番よく見る形式でしょうか？ <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"> 文字サイズの自動調整をオフにする 各スマホブラウザでは、横向きにすると text-size-adjust の処理が走り、自動で文字サイズを最適化（拡大）する機能があります。 読
セキュリティ対策まとめ（2013年秋）
JOJOのアニメ第三部が正式に決まったそうですね！ 楽しみ～な、にわかファン Latin です。 最近のWordPress界隈ではAmazon Web Serviceが俄然盛り上がっておりますが、大好きなWordPressを守るため、セキュリティ対策をまとめてみました。 初期セットアップ・設定系の対策 データベースのプレフィクス（接頭辞）を変更する wp-config.php 内の「wp_」の接頭辞を任意のものへ変更します。 その場合、追加で以下の作業が発生します。 phpMyAdmin などを使い、データベースのテーブルネームを変更したカスタムプレフィクスに変更する。 options や usermeta テーブルなどの他のフィールドでも「wp_」プレフィクスが使われている可能性がある為、以下のクエリーを走らせてプレフィックスを変更する。 SELECT * FROM `myprefix_
【jQuery】要素が見えたタイミングでイベントを発生させるjQueryプラグイン | バシャログ。
はじめまして、今月よりバシャログのメンバーになったfukasawaと申します。 まだまだ勉強中で至らぬ点も多々あるとは存じますが、生温く見守っていただけると幸いです。 本題です。社内で行われているjQuery勉強会のネタ探しのためにWeb DesigningのjQuery Lab.を読んでいたのですが、記事の中でinviewというjQueryプラグインが使われていました。 記事では「グラフを描画する領域がブラウザの表示領域内に入ったタイミングで、アニメーションを実行しグラフを描画する」という動作を行うためにこのプラグインが使われているのですが、inviewを使うことで、このように「ブラウザ上で見えたときに処理を実行する」という動作を実現できるようです。 jquery.inview 気になったので使い方を調べてみました。 簡単な使い方 1. jQueryとjquery.inview.jsを読
[WordPress]スマホ対応プラグインの
どうすれば GW をゴールデンに過ごせるか、思案中のLatinです。 今回はスマートフォン対応プラグインの良し悪しについて。 WordPressのスマホ用プラグインは結構な数ありますが、結局の所、「いっちゃんいいヤツ」ってどれだろう？とふと思い立ち、勝手ながらカンタンに考察をまとめさせていただきました。 他にも、こっちの方がいいよ！こんなプラグインがあるよ！とかありましたらぜひ教えてください。 まずは、よく使われている5つのプラグインを比較 Ktai Style いわずと知れた有名プラグイン。サイトを携帯電話（ガラケー）対応させるプラグイン。 ガラケー人口って意外にまだまだ多いんですよね。 Ktay Style WPtouch こちらも有名プラグイン。 手軽にサイトをスマートフォン対応できます。 「メニュー」をタップするとタグ、カテゴリー、RSSフィード等のタブメニューが展開されます。 W
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Google Fonts正式版に日本語がやってきた！ | バシャログ。
【CSS】img画像の縦横比は元のまま、表示させたいボックスサイズの大きい方に合わせて縮小して表示させる。ついでに上下左右中央寄せで。 | バシャログ。
【WordPress】続・お問い合わせ履歴も管理できてCSVも出力できるトレビア〜ンなフォームプラグイン Trust Form | バシャログ。