2018年12月

1/2ページ

PWA VS ネーティブアプリ

  • 2018.12.28

PWAとネーティブアプリについて、いい感じにプレゼンされている動画があったので、シェアしたいと思います。リスニングができなくても、パワポだけでおおよその内容は分かるかと思いますので、PWAに興味がある方は一度視聴されたら良いと思います。 ネーティブアプリのメリット ネーティブアプリがWEBに優っている項目は以下の3点です。 動作が速い 一貫したUIを オフラインでの動作 ネーティブアプリのデメリッ […]

WordPress新しい投稿画面の使い方 Part.2

どうも中野です。今回は前回説明しました新しい投稿画面の使い方の続きになります。それでは早速説明していきます。 カスタムHTML(Custom HTML) HTMLを直接打ち込むことができます。なので、この機能を使えばいちいちコード表示に変えなくてもHTMLを打ち込むことができます。 ギャラリー(Gallery) ギャラリーの挿入ができます。鉛筆マークで編集もできます。右のパネルで細かな設定もできま […]

WordPress新しい投稿画面の使い方

どうも中野です。WordPressの投稿画面が変わっていて、驚かれた方も多いのではないでしょうか?プラグイン1つで昔の投稿画面に戻すことも可能ですが、1度使ってみて使用感等を味わってから決めるのはいかがでしょうか?ということで今回は新しい投稿画面の使い方を説明します。 新しいエディタの名前 新しいエディタの名前は「Gutenberg」みたいです。前の投稿画面との大きな違いは、全ての要素がブロック構 […]

WEBデザインをする上で参考になる記事

みなさん、どうも中野です。 今回は何を書こうかな? とネットを徘徊していると、為になる記事がいたる所に転がっているではないですか!! これは早速いただかねば!! ということで、中野が独断と偏見で選んだ「これは見といた方がいい」や「参考になる」と思った記事を紹介します。 1.レイアウトが考えやすくなるデザインのルール https://wp.yat-net.com/?p=3633 この記事はレイアウト […]

危険なXSS対策

ネットで見かけたXSS対策 最近ネットで、次のようなコードでXSS対策を行なっているサイトを見かけました。 皆さんはこの実装を見てどう思いましたか? 正直、僕はゾッとしました。 今回は、一部サンプルコードなので、ごく一部のタグしか置換していませんが、 皆さんは全ての危険なタグを消去する完璧な正規表現を書く自信はありますか? 僕はないです。 仮に<scriptのような形で全てのタグを置換できた […]

商用可 フリーフォントの紹介

どうも中野です。 今回は商用可のフリーフォントを紹介しているサイトを紹介します。 1.FONTODASU http://fontdasu.com/ このサイトは日本語の可愛い文字が多いサイトです。 2.フロップデザイン https://www.flopdesign.com/freefont.html このサイトで、特にオススメしたいのが、うつくし明朝体です。女性らしいしなやかな書体となっております […]

なぜXSS対策が大事なのか?

最近ネットでは、XSS攻撃がし放題のSNS(?)があり話題となていますが、なぜXSS対策を怠ってはいけないのでしょうか? XSS攻撃とは XSS(クロスサイトスクリプティング) は、JavaScriptをサイト内に埋め込み、任意のコードを実行してユーザーを攻撃する手法です。 XSS対策を行っていないと任意のJSをサイト内に埋め込むことができてしまうので、ユーザーを任意のサイトに飛ばすだけではなく、 […]

Bootstrapで通知を表示するライブラリ【Bootstrap Notify】

Bootstrap Notifyは、Bootstrap製の通知用ライブラリです。画面四隅に加え画面真ん中下、真ん中上の計6カ所にBootstrapのalertを簡単に表示することができます。 DEMO Bootstrap Notifyは、AjaxなどのJSの処理の結果やエラーをalert()よりもユーザー邪魔にならずに情報を表示することができます。 サンプルコード $.notify({ icon: […]

Photoshop 被写体を選択

どうも中野です。 最強寒波の影響でなのか、布団からなかなか抜け出せない日々を送っています。 そんなことはさておき、今回は夢の機能を紹介します。 なんと1クリックで選択範囲を作成してくれるという未来の機能です!! その名も「被写体を選択」!! まずは使い方の説明を 1.選択範囲を作成したい画像を用意します。 2.選択範囲メニュー → 被写体の選択   まだまだ試作段階な感じの選択範囲ですが […]

canvasを軽量な画像として保存する

canvasの保存は下記のようなコードで簡単に画像として保存できますが、 canvasを全画面での表示等を行っていた場合、 canvasの容量も大きくなり、保存する際にかなりのファイル容量になってしまい 場合によっては、保存に失敗することがあります。 これらの問題を解決するために保存する画像を軽量化しなくてはいけません。 <canvas id="canvas"></canvas& […]