/// BANGBOO BLOG ///

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30


Web List
PWA on Apr 20, 2020 6:00 PM
G Suite on Apr 01, 2020 12:01 AM
CSS Grid on Mar 01, 2020 3:03 AM
Update your home page on Jan 21, 2020 12:20 AM
Cloud 9 on Nov 22, 2019 9:42 PM
Adobe Sensei on Jan 01, 2019 11:11 AM
Summer time blues on Aug 11, 2018 6:42 PM
Web font test on Jan 01, 2018 11:13 PM
Help desk on Jun 01, 2017 12:00 AM
RWD by HTML5 on Jun 07, 2016 8:28 PM
Big D on Jun 05, 2016 6:45 PM
SN on May 22, 2016 2:09 AM
Ant on Apr 03, 2016 10:01 PM
Windows env tips on Mar 31, 2016 1:44 AM
Cache on Mar 08, 2016 8:06 PM
Detected as bad site by virus company on Mar 08, 2016 1:07 AM
Google API on Feb 14, 2016 1:03 AM
OSS License on Jan 08, 2016 12:00 AM
Bash on Jan 07, 2016 10:41 PM
Regular expression on Jan 06, 2016 1:27 AM
Javascript on Jan 05, 2016 7:27 AM
Laravel on Jan 04, 2016 12:00 AM
XSS, CSRF, JSOP, SSO on Jan 03, 2016 10:53 PM
Git on Jan 03, 2016 12:00 AM
Agile on Jan 02, 2016 12:00 AM
PHP Developer on Jan 01, 2016 10:47 PM
Photo Boo on Aug 30, 2015 1:17 AM
Camoufla on Jan 09, 2014 12:08 AM
A Bao A Qu on Sep 02, 2013 12:02 AM
Online softwares on Oct 06, 2011 1:21 AM


April 20, 2020

PWA

■PWA
https://digital-marketing.jp/seo/what-is-progressive-web-apps/
https://developers.google.com/web/fundamentals/architecture/app-shell?hl=ja
https://qiita.com/kimamula/items/4e25b8d2caca314f9dd2
Service Worker, App Shell Model, PRPL Petternなどを駆使したGoogleが提唱するProgressive Web Apps
HTML / JS / CSS だけでほぼ構成、モバイルApp的なWebが提供できる
SW(JS)がブラウザとサーバの間に位置し、データを取ったり渡したりブラウザの影/裏側で動く、サーバと考えてしまうと分かり易い?
App Shell Modelで側(画面テンプレート)をプッシュしておくと早い(JSレスポンス悪すぎるからコレってな)

PRPLは以下の略
 Push: 最初のURLルートに不可欠なリソースを Pushする。
 Render: 最初のルートを Renderする。
 Pre-cache: 残りのルートをPre-cache(事前キャッシュ)する。
 Lazy-load: オンデマンドで残りのルートをLazy-load(遅延読み込み)する。
/// Service Worker
訪問がない状態でのバックグラウンド同期、プッシュメッセージ
データの更新を集中的に受信して複数ページがデータの一部を利用
https://developer.mozilla.org/ja/docs/Web/API/Service_Worker_API
https://qiita.com/kei4eva4/items/fa5f99211e45b7ca6f6e

Webページとは別にバックグランドで実行するスクリプト
ブラウザでキャッシュ操作ができる、容量もあり強力、データ期限や破棄に注意
 DOMに直接アクセスできない
 ブラウザを開いていなくても動作可能
 プログラム可能なネットワークプロキシとして動作可能
 HTTPS必須(またはlocalhost)
ネットワークに依存しない、早い(阿部寛はもっと早い)、プッシュ通信、ホームに追加
 
/// プッシュ配信
https://liskul.com/push-notification-25520
https://www.fenrir-inc.com/jp/boltzengine/
https://pushnate.com/labs/pushnate/webpush-case-guide

事前のコンセントがなくいきなり「プッシュ通知を有効にしますか」と出てくるのは駄目
ユーザーに何の通知をするかを知らせたい
通知から訪れたときの表示と挙動を決めておく
セグメントを分けて送りたい場合はセグメントの情報をどうやってブラウザからたどってくるか
スマホではアプリのインストールが必要だが、Webプッシュはブラウザさえあれば通知ができる
https://webtan.impress.co.jp/e/2018/12/06/31214
通知の許可のダイアログを出す前にダイアログで説明
https://push.appirits.com/webpush/

過去評価の高かったボケが、1日1つプッシュ通知で配信
1日1回、時間帯としては「20時前後」に4回に分けて(通常19:50、20:00、20:10、20:20)配信
年末年始やGWだけは、昼と夜に(1日2回)
DAUに15〜20%くらい影響がでます。「プッシュしないとアプリを開かない人」が一定数いる
アクティブ度、アプリのバージョン、端末のOS、属性(男女)などで、セグメント配信
休眠ユーザーだけにプッシュ1万人に1人くらい(0.01%)しか起動せず難しい
https://appmarketinglabo.net/bokete-push/

配信方法は現在ではChromはGCMを、FirefoxはSimplePushサーバを利用←他の方法も調査中
 受信する端末ごとに異なるメッセージを送るにはGoogle Firebaseが使われる様である
 https://android.googleapis.com/gcm/send https://updates.push.services.mozilla.com/push/
その許可を得たプッシュのエンドポイントを使用し配信
GCMの場合1度の送信で1000デバイスまで同時に指定できる、FirefoxのSimplePushでは1デバイスでの送信
デスクトップ/Webの場合はデスクトップに通知される(Win10の場合?Win7でも通知が来る)
https://qiita.com/zaru/items/f6e821052abb1b18bb0b
https://techblog.asahi-net.co.jp/entry/2018/09/28/173705

/// 結局
キャッシュを弄くってオフラインでもゴニョゴニョできる、先読みも可、プッシュ通知も可、モバイルAppぽく
 →G suiteのOfficeアプリがオフラインでもサクサク、メール受信通知もできるGoogleのG suite用みたいなもんか
 →PCよりスマホを売りたい、通信量でも儲けたいfbgcp、個人情報を取りたいので、モバイル優先、モバイルっぽくWeb、これはi-modeやね

UR evil.

■どのようにPWA化するのか
https://techblog.asahi-net.co.jp/entry/2018/07/06/145931
https://techblog.asahi-net.co.jp/entry/2018/08/10/175407
 1)Service Worker(PWAで必要な処理を記述するJavaScriptファイル)
 2)Manifest(PWAの仕様について記述するJSONファイル)
 3)アイコン…ショートカットアイコン、プッシュ通知時のアイコンや起動画面で配置する画像

navigator.serviceWorker.register('/servicew.js').then JSファイルを登録(中に下記を入れ込む)
 //キャッシュ動作部分
 ├addEventListener('install' キャッシュのインストール
 ├addEventListener('activate' アクティベート
 └addEventListener('fetch' オフラインでもアクセスの際にクライアントが呼んでキャッシュ取得
 //通知部分
 ├addEventListener('push で通知を受ける
 └addEventListener("notificationclick で通知クリック時の挙動
Notification.requestPermission(function(status) { 通知許可は登録JS外でOK

キャッシュはリンク先も保持するようであるが、、、?
ブラウザのURLの鍵アイコンをクリックすると通知許可を含めて設定ができる(デフォルトの確認、許可、ブロック)
 デフォルトとブロックの時は「Push通知On」のボタンを表示 → ボタンを押すとダイアログで何が通知されるか表示しOKボタンを押せる
 許可状態のときは「Push通知Off」のアイコンを表示
 キャッシュ優先のsw.jsだと更新ボタンでもキャッシュのまま、Cookieの中のサービスワーカーを削除

Service Workerキャッシュ戦略>保存日はLocalstrage(indexedbかと)に置き、HTMLの有効期限は1日にする
https://qiita.com/tiwu_official/items/47e8a7c3e6f2d57816d7

https://techblog.asahi-net.co.jp/entry/2018/09/28/173705
受信する端末ごとに異なるメッセージを送るにはGoogle Firebaseが使われる様である

 トークンを発行し端末とトークンを紐付け配信サーバに記録
 配信サーバでメッセージを作り、個別トークンに対しメッセージ通知
  JSONを送るがトークンを持っているもののみ通知が発火?

Notifications APIを見てみよう
https://developer.mozilla.org/ja/docs/WebAPI/Using_Web_Notifications
https://developer.mozilla.org/ja/docs/Web/API/Push_API
https://developer.mozilla.org/ja/docs/Web/API/ServiceWorkerRegistration/pushManager

通知自体はServiceWorkerが不要、下記2ステップでOK
 Notification.requestPermission(function(status) { 許可を取り
 var n = new Notification(theTitle,options); 通知を送る

カレンダーをサブカレンダー(o)化しPWAでオフライン対応(機内モード)
 キャッシュするよう指定しても全部一気にはオフライン化はしないようだ
  一度オフライン時にアクセスしエラーが出た上、ネットワークが回復すると自動にキャッシュされる
   エラーを出さずに一度通常表示をするだけではキャッシュされなかった
   アンドオイドでは通知も来る(1:準備ができるとChromeでページが読み込まれます→2:ページを表示できます)
  →スマホではDLに時間が掛かっていただけかも
 ServiceWorker内ではLocalStorageはセキュリティを理由らしいが使えない
  IndexedDBは使えるらしいが、、、→使えんかった、よく分らん
 SWをインスコしたディレクトリへのアクセスでSWが動く、SWJS自体へのアクセスではない
 PHPでJSを吐いてもOK js_serviceworker.phpとかでheaderをJavascriptとして

/// mmm
キャッシュが強い(指定以外もキャッシュ、手動でCookie/Serviceworker削除、くせ強)
 どの範囲をキャッシュするか、キャッシュページの案内方法(お気に入りに入れる?)
サイトページを開いてなくても通知を出すのはServiceworkerいるので要調査(Firebase以外でやりたい)

Posted by funa : 06:00 PM | Web | Comment (3) | Trackback (0)


April 1, 2020

G Suite
https://www.softbank.jp/biz/cloud/google/gsuite/
中途半端に移行するよりGsuite強制だと社員が勝手に使うシャドーITをなくせる
影響力のある社員の抵抗がないように、部長の関心協力→Topからのメッセージ
 デモを実施する(利点、コラボレーション、使い方)
戦略・組織の把握>パイロットユーザ(全社員の5%をGoogleガイド)>エバンジェリスト公募>全社
 画面や機能がどんどん変わる、また簡単になっていく、カチッと決め打ちはしにくい
 Gmail (アーカイブして検索で、容量無制限)
 カレンダー (会議スケジューリングのお勧めがある)
 Hangouts Chat (1to1かグループでチャット、共同編集、Voiceがあれば電話も、Botも)
 ハングアウトMeet (ビデオ通話)
 ドライブ (同時編集ができる、ここでドキュメントを作ると相互最新更新)
  ドキュメント (Word/PDF/html/txt等読込書出、AIで画像やグラフやデザインをクリックだけで、無制限変更履歴)
  スプレッドシート (Excelを変換して使う等 https://support.google.com/docs/answer/9331167?hl=ja )
  スライド (ブラウザでプレゼンテーション、PPT等から変換可、オフライン化も可だが問題がありそう)
 Currents (Google+社内SNS、フォロー、投稿、サークル、コミュニティ)
 フォーム (アンケート、クイズ/テスト、連絡先を含め申し込み欄)
 Keep (メモ:音声入力や写真も、リマインダー、Gmailユーザ共有)
 Jamboard (ホワイトボード、複数個所やマルチデバイスやGsuite連携)
 サイト (一般公開HP、イントラ)
 Apps script (aka GAS、マクロ、https://tonari-it.com/google-apps-script-manual/ )
 Cloud Search (Gsuite以外にもコネクタでAWSやMS系、Jira、Sap、Salesforce等も検索可)
 Vault (元が消されても全データ保存されている、管理者)
 管理コンソール (ユーザグループ管理/SSO/MFA、監査ログ、MDM、セキュリティ系レポート、移行ツール/API/Oauth/OpenID)
https://gsuite.google.co.jp/intl/ja/features/ 無料試用14日間

///Google Admin 管理コンソール
上ナビのタスクにダウンロード等がある
"ダッシュボード" ?
"ユーザ"でリストをCSVでDLし、一括アップロードもできる
 メールアドレス確認のメールが来ていた
"グループ"はグループオーナ/管理者/メンバー/組織全体/外部でアクセス管理
"組織部門"をツリー状に作成できる
"リソース管理"でビルディング/会議室/設備等々を設定
 カレンダーでの会議室の自動予約キャンセル(使われていない会議室が解放)
"ディレクトリ設定"で連絡先の共有、外部ディレクトリ共有の設定
"デバイス管理"でモバイル/Chromeデバイス/ブラウザ/Googleミーティングハード/エンドポイント/Jamboard
 よく分からない
"アプリ"で全ユーザONかOffか/SAMLアプリの追加
"セキュリティ"で2段階認証/アラートセンタ/ルール/PWポリシー/安全性の低いアプリへ接続/PW忘れのアカウント復元/PW強度監視/従業員IDでログイン時本人確認/3rdパーティSSO設定/Android用EMMプロバイダトークン/高度な保護機能/Context aware access/セッション時間/Cloud ConsoleとCloud SDKのセッション/OAuthのユーザーデータへのACL/API許可
"レポート" ?
"お支払い"で課金の管理、ユーザ数x費用/ドメイン登録費用/G Suite Enterprise/Voice Standard/Cloud Identity
"会社プロフィール"で管理者ID/サポート連絡先/タイムゾーン/即時か計画リリース/Googleからのお知らせ/ロゴ設定/追加ストレージ/コンプラ連絡先/データリージョン米か欧/会社自体のアカウント/カスタムURL
"管理者ロール"で特権/ヘルプデスク/サービス/ユーザ/モバイル等の権限者を設定
"ドメイン"でドメイン契約の設定/他のドメインで使用するためのドメインのホワイトリスト
"データ移行"でO365/Exchange等のメール/カレンダ/連絡先を移行できる
"サポート"でチャットできる
どうやってサポート?リモート?ファイル共有はできるのか?
ファイルが保存されているかどうか分かりにくい
保存が遅い場合も、待ってもう一度確認、全ての操作が記録されているはず

Gmailヘルプ https://support.google.com/?
各アプリでもヘルプ?があるので確認できる、FAQみたいなのも表示される
設定ギア>ここでほぼ設定している
Gmail
 迷惑メール/削除したメールは、[ゴミ箱] に 30 日間保存され、その後完全に削除
 メールはスレッドにまとめられ[削除] するとスレッド全体が削除
 Gmail で使用できる検索演算子 https://support.google.com/mail/answer/7190?hl=ja
マイドライブ
 組織内でもグループ内でもWeb公開もURLでも編集やコメントも細かく共有設定ができる
 ファイルとしてDL、それをマイドライブにアップしG suite化できる
ドキュメント
 提案モードで修正→ツール>編集の提案の確認orチェック で承認ができる
スライド
 プレゼンター(マウス↓でメニュー表示、ノートや質問)、オンラインプレゼンは不可
コレクション
 +のURLのみ集められる?モバイルやPCは駄目かも
Keep
 メモの共有を外部にするとメールが送信
カレンダー
 デスクトップ通知は各種許可設定があり調べよ、Chromeの機能 chrome://flags/#enable-native-notifications

何をサルベージできるのか不明:メールログ、Vaultで削除ファイルは見れる?

G-suiteはオフラインでも使える
 管理者側設定:許可設定
 ユーザ側設定:オフライン許可設定

O365とのプロコン
 G-suiteは少し安い、使用が簡単だがプア、共有や共同編集に優位、オフラインで機能が弱い

Posted by funa : 12:01 AM | Web | Comment (0) | Trackback (0)


March 1, 2020

CSS Grid

Gridは悪名高いテーブルレイアウトと考え方がまるで同じ
CSSの方が糞であったであろう、テーブルこそが発明でしょうに、セマンティック?
containerにdisplay: grid か flex か table を指定するので直接の要素には混在不可、入れ子なら可
https://ics.media/entry/15921/

■CSS grid
https://qiita.com/kura07/items/e633b35e33e43240d363
https://qiita.com/kura07/items/486c19045aab8090d6d9
 ページ全体のレイアウト、グリッドレイアウト
 コンテナを作り、グリッドに名前を付けて、割り当てる
 <section class="container">
  <div class="visual">(メインビジュアル)</div>
  <div class="number">(数字)</div>
  <div class="expression">(テキスト)</div>
  <div class="other">(3枚の写真)</div>
 </section>

 .container {
  display: grid;

  grid-template:
   "visual number expression" 1fr
   "visual other other" 220px /
   40% 120px 1fr;
 }

 .visual {
  grid-area: visual;
 }


 @media (max-width: 800px) {
  .container {
   grid-template:
   "visual visual" 100vw
   "number expression" 1fr
   "other other" auto /
   120px 1fr
  }
 }

■Flexbox
https://www.webcreatorbox.com/tech/css-flexbox-cheat-sheet
https://qiita.com/junya/items/7762da8052d86462f232
 縦横揃え、可変サイズ、でも複数配置が駄目、1行の並び
  justify-content
  align-items
  flex-grow
  flex-shrink

 .container {
  display: flex;
  justify-content: center;
  align-items: center;
 }

■display: table / display: table-cell
https://techacademy.jp/magazine/19415
https://app.codegrid.net/entry/css-table-1
https://www.yoheim.net/blog.php?q=20150102
https://nxpg.net/blog/tech/?p=10764
CSSのvertical-alignが効かない縦並び(display:gridの中にdisplay:tableの中にdisplay:table-cell)
#container{
 display: grid;
 grid-template-rows: 25px 1fr;
 grid-template-columns: 300px 1fr 200px;
}
#column_right{
   grid-row: 2;
 grid-column: 3 / 4;
 display: table;
}
#area{
 background-color: #eee;
 width: 150px;
 height: 150px;
 text-align: center;
 display: table-cell;
 vertical-align: middle;
}
<div id="container">
  <div id="navi_left">...</div><div id="navi_right">...</div>
  <div id="contents">...</div><div id="area">...</div>
</div>

■Float
 テキストの回りこみ
 .leftBox {
     width: 45%;
     float: left;
 }

Floatレイアウト
https://www.bangboo.com/cms/blog/page_18.html
Padding/Float/Height100%の問題
https://www.bangboo.com/cms/blog/page_184.html

■object-fi
 画像の比率
 img {
  object-fit: cover;
 }
 .image1 {
  object-position: 30% 40%;
 }

■その他
spanタグにline-heightを設定しても行間は設定できない、display:block;を追加するか親で設定する
ボックス要素のセンタリング(中のテキストは左寄せ)
 <div style="width:500px"><div style="text-align:left; display:inline-block;">
 https://qiita.com/KAMEch/items/b52c5e23212b8fef81a7
 https://www.granfairs.com/blog/staff/centering-by-css


2019見直したいCSS,Javascript
https://speakerdeck.com/tonkotsuboy_com/2019nian-madenijian-zhi-siteokitai-cssjavascriptfalseshou-fa

Posted by funa : 03:03 AM | Web | Comment (0) | Trackback (0)


January 21, 2020

Update your home page

そもそも下手糞魂、 BRF BANGBOO のトレーナを思い出したわSince 1992

■Web系通信系
/// WebRTC
リアルタイムにブラウザ間P2Pで送受信
ウェブブラウザ間のボイスチャット、ビデオチャット、ファイル共有が可能

/// Service Worker
訪問がない状態でのバックグラウンド同期、プッシュメッセージ
データの更新を集中的に受信して複数ページがデータの一部を利用
https://developer.mozilla.org/ja/docs/Web/API/Service_Worker_API
 →下記PWAで詳しく

/// Fetch API
jsのXMLHttpRequestに変わる非同期通信の手段、ServiceWorkerで使われる

/// Beacon API
window.onunload/window閉じる際に非同期HTTP通信を確実実行するAPI
統計情報等

■PWA
Progressive Web Apps
https://www.bangboo.com/cms/blog/page_333.html


■ユーザーエージェント(UA)凍結・非推奨
https://forest.watch.impress.co.jp/docs/serial/yajiuma/1229968.html
https://anond.hatelabo.jp/20200120125002

■文化を屠殺する
https://b.hatena.ne.jp/entry/s/anond.hatelabo.jp/20200311165317

■堕落したウェブはまだ直せる
https://japan.cnet.com/article/35133798/

表示はHTMLでやり、処理はサーバー側でやる
表示はメディアであり、処理はコンピューティング、そういうタイプで

==========


https://twitter.com/ken1kuroyama/status/1220258901850869760
トライアルは乗ったことがないが、コレは分かりやすいな
ヒザを緩めてから足ピンしながらチンコをハンドルに擦り上体反るんやな
MXとは逆やからこういうムーブは普通体が反応せえへん、

Posted by funa : 12:20 AM | Web | Comment (0) | Trackback (0)


November 22, 2019

Cloud 9

無料でクラウドを喰らう
AWS https://aws.amazon.com/jp/free/?all-free-tier.sort-by=item.additionalFields.SortRank&all-free-tier.sort-order=asc
GCP https://cloud.google.com/free/docs/gcp-free-tier?hl=ja
Azure https://azure.microsoft.com/ja-jp/free/
あくまでインフラだな、ソフトウェアレイヤーの人は自分でやる必要あるのか?マネジドでリソースが足りてると余計

=================================
■AWS
VPC(仮想Privateクラウド)>ELB(ロードバランサ)>EC2(仮想サーバ)x2>ElastiCache(インメモリ)>RDS(RDBZ)>S3(ストレージ)>Redshift(分析)
 EC2は機能毎、S3は変換前とRedshift変換後の前後、Rout53でラウンドロビン、動画配信、SageMaker/Deep learning ami

■ユーザ管理、セキュリティ
https://www.tdi.co.jp/miso/aws-day1-security-1
https://qiita.com/14kw/items/07d693a072ae0e99cf34
https://www.ashisuto.co.jp/security_blog/article/201902-aws.html

///ログイン
https://aws.amazon.com/jp/
チュート https://aws.amazon.com/jp/getting-started/tutorials/

///MFAの設定
Google 認証システムをモバイルにインスコ
モバイルに出た6桁を入力、30s後にでる6桁を入力(エラーなら削除しQR読み直してやりおなす)

///EC2
キーunco.pemでインスタンスを作成
ロードバランサーyarichinの設定

///その他
RDSのDBインスタンスyoshiwaraを作成 (ID:chinco/kintama)
ElastiCacheのインスタンスformsof48を作成
S3のインスタンスomekoを作成

■無料でやりたいが足がでるのでは
https://www.ryotaku.com/entry/2019/03/12/172937
https://dev.classmethod.jp/cloud/aws/overall-summary-about-aws-free-tier/

各サービスで有料等があるので要注意、1ヶ月750時間、複数インスタンス、ElasticIP割り当て、ビリング確認、予算、アラート通知

■AI Tensorflow は?
https://aws.amazon.com/jp/tensorflow/
https://aws.amazon.com/jp/machine-learning/
https://aws.amazon.com/jp/machine-learning/amis/
SageMaker/Deep learning ami?無料じゃむりそう

=================================
■GCP
https://techblog.gmo-ap.jp/category/gcp/
https://tech.zeals.co.jp/entry/2019/01/08/094054
https://techblog.gmo-ap.jp/category/tensorflow/

12 か月間300 ドル分だけ無料
https://console.cloud.google.com

=================================
■Azure
12 か月間 最初の30日間¥22,500分
https://portal.azure.com
ホーム>無料使用版>取り消し


ロードバランサの自動セッション維持(クッキー、URL、HTTPヘッダー)の具合を見たかったが、
https://www.fujitsu.com/jp/products/network/security-bandwidth-control-load-balancer/ipcom/material/data/1/2.html


大体の設計をして設定を詰めていく流れでいいのかね、使いたいサービス重点で
きちんと動けば気持ちいいかな、箱庭的な雰囲気もある

Posted by funa : 09:42 PM | Web | Comment (0) | Trackback (0)


January 1, 2019

Adobe Sensei

安定性がない、AI系操作で画像が大きく、メモリと仮想メモリに余裕がないと落ちる
日本語フォントは魅力的だが、俺的機能的にはCreativeSuiteで充分だったかも

オブジェクト選択ツール
 人物や動物などの被写体の周りを矩形か投げ縄で囲むだけで選択、自動調節で境界削除がよいようだ
プロパティパネル
 「背景を削除」をクリックするだけで、レイヤーマスク付きで被写体を切り抜く
被写体を選択
 選択範囲>被写体を選択
コンテンツに応じた移動ツール http://shuffle.genkosha.com/software/photoshop_navi/cs6_features/8160.html
 D&Dで移動すれば移動と同時に移動元を埋める(移動用途)
パッチ https://www.vanfu-vts.jp/blog/2014/05/photoshop
 D&Dすればドロップ先の画像でドラッグ元を埋める(消す用途)
マッチフォント
 画像からフォントを検索できる
ワープツール
 メッシュポイント変形
アートボード https://helpx.adobe.com/jp/photoshop/how-to/creating-multiple-banners-photoshop.html
 モバイルやPC等各デバイスごとの画像を一括管理
3Dオブジェクト https://www.pc-koubou.jp/magazine/24943
 3DCGみたいだ、3Dマテリアルスポイトもコレ用みたい
プリセットパレット/Adobe Fontsの充実
 プリセットは質向上、フォントはAdobe謹製やお気に入りやフィルタリング検索
変形時の縦横比固定
 Shiftキーが不要に(反対操作に

////Font
A-OTF 見出ゴMB31 Pr6N
A-OTF 見出ミンMA31 Pr6N
源ノ角ゴシック JP Heavy
TBカリグラゴシック Std E

TA-rb
TA-方縦M500
TA-candy
VDL ロゴJrブラック
TA-F1ブロックライン
かづらき SP2N
RoぶらっしゅStd
VDL 京千社

////人物切抜き
http://ess-graphics.com/blog/2016/11/kirinuki/
https://design-trekker.jp/design/photoshop/photoshop-clipping-hair/
http://photoshopvip.net/new-cropping
 クイック選択ツール(ブラシ系の選択、はみ出たところはAlt+で消す)等で大体選択
 選択範囲>選択とマスク
 境界線調整ブラシツールで足したり、引いたりを太さや表示透明度を調整しながら行う
 ↓旧ver
https://liginc.co.jp/web/design/photoshop/37657/
https://sitebk.com/photoshop/hair-clippings/
 クイック選択ツール(ブラシ系の選択、はみ出たところはAlt+で消す)等で大体選択
 境界線を調整

////Creative Cloudでアドベと契約(ちぎり)
https://www.adobe.com/jp/creativecloud/plans.html

既存の Creative Suite 製品のインストールは、Creative Cloud のデスクトップアプリケーションのインストールの影響を受けません。例えば、Photoshop CS6 永続ライセンス版を Photoshop CC と同じコンピューターにインストールして使用することもできます。
ライセンス認証は 1 ライセンスにつき 2 台のコンピューターに制限されています。これらのデバイスで同時にソフトウェアを使用することはできません。

CSとCCの並行可能、PCにインスコしてHDDがクラッシュしてももう一台にインスコできる、それもクラッシュすれば一度解約?
https://helpx.adobe.com/jp/creative-cloud/faq.html

ライセンス認証解除(ログアウトするだけ)
https://helpx.adobe.com/jp/download-install/kb/activate-deactivate-products.html
体験版またはサブスクリプションを解約
https://helpx.adobe.com/jp/manage-account/using/cancel-subscription.html

年契約の分割月払いなので、解約しようとすると違約金が発生する
 違約金は残っている期間の50%を一括
 なおクーリングオフで契約から14日は無料で解約可、ということは

////LightroomとLightroom classicの違い
Lightroomはクラウド使用なので画像UPが必要、Windows7非対応、モバイル端末使用向き
クラシックはPCローカル操作、Windows7対応

Posted by funa : 11:11 AM | Web | Comment (0) | Trackback (0)


August 11, 2018

Summer time blues

多言語でシステムを作ってたつもりだが、時間について意識してなかったかも。
面倒だが時間ができれば要チェックだ。サマータイム

■国際時間
■サーバーマシン
■クライアントマシン
■ローカル時間

http://blogos.com/article/316473/
https://blogs.msdn.microsoft.com/nakama/2018/08/11/timezone/
http://novtan.hatenablog.com/entry/2018/08/10/201046

1)ブログは投稿時間が手入力の選択制になっていた
2)DBには何の時間を入れている?サーバーの時間か?DBサーバの時間?
3)cronは時間を記載しているだけだから、サーバーの時間か?
4) バッチスケジュールの破綻
  実施タイミングは3amとかそれぞれの地域で違う
   日本案の2hrsは特殊、通常1hr
  開始日は22hrsになる バッチが走るキック時間が無くなる
   例:3/15 3amが5amに飛ぶ、3時4時がない
  終了日は26hrsになる バッチ2回走るかも
   例:10/25 5amなると思うと3amに戻る、3時4時が2回くる
   1回目はJST Daylight Time(DT),2回目はJST Standard Time(ST)と区別が必要
5)サーバ間の時間の統一、特に異業者間
6) クライアントから時間をサーバに送るアプリ(Webだとあんまりない?)
7) DBへの記録形式、アプリで生成する時間、テキスト記録系の時間は注意
8) 時系列、並び順(特に終了日は2回同じ時間が来るから)
  UTCで全て記録して、表示時にはアプリに持たせたロケールを使う
   日時の手入力だが夏時間を選択できるようにする?ロケールでUIF変えるの?

   OSのロケールは使わず独立させたいなぁ
   入力者と表示者のロケールが違う可能性、何を優先させるか、選択性


//// Active Directoryメモが見つかった AD
■ユーザ
AGDLP:アカウント(A)をグローバルグループ(G)に追加し、グローバルグループをドメインローカルグループ(DL)に追加して、ドメインローカルグループにアクセス許可(P)を下記ツールで
  「Active Directoryユーザーとコンピューター」管理ツールADUC
  「Active Directory管理センター」管理ツール
  「csvde」コマンド(コマンドプロンプトから実行)
  「ldifde」コマンド(コマンドプロンプトから実行)
  「dsadd」コマンド(コマンドプロンプトから実行)
  「New-ADUser」コマンドレット(Windows PowerShellから実行)

管理者グループおよびアカウント
  Enterprise Admins (フォレスト ルート ドメインにのみ存在)
  Domain Admins (すべてのドメインに存在)
  Schema Admins (フォレスト ルート ドメインにのみ存在)
  Group Policy Creator Owners (フォレスト ルート ドメインにのみ存在)
  Administrators グループ
  Administrator アカウント
  DS Restore Mode Administrator (ディレクトリ サービス復元モードでのみ使用可能。 ドメイン コントローラのローカル アカウント)

管理者アカウントの種類
  ローカルadmin=Server(ローカル コンピュータのすべての機能に無制限にアクセス
  ドメインadmin=AD(ドメイン、保護されていない場合はフォレスト全体の全機能
  フォレストadmin=forestRoot,AD(Enterprise Adminsグループは、フォレスト全体の全機能、証明機関のインスコでフォレスト内の任意のユーザーのふりができます)

通常ユーザとadminのユーザ名を変え切り替えてもらう

■オブジェクト
  グループ
  コンピューター(自動作成)
  OU
  グループポリシー(ユーザーやコンピューターへの設定を一元的に管理)
  プリンタ(プロパティのセキュリティタブでディレクトリに登録チェックをつけるとADへ登録される)
  共有フォルダ(フォルダ共有後にADUCで登録)
  サイト(ドメインコントローラー同士で複製が15s後に起こる範囲、外は3hr後)

■シェアポイント
AD
├ADグループ
│└ADユーザ
│ └AD社外ユーザ

└──SharePointグループ(SharePoint内でのみ使用可)

SPのアクセス管理はADユーザでもADグループでもSPグループでも良い
社外ユーザもAD(orLDAP/DB etc.)に入れれば使える
社外管理にはブラウザに証明書をインストールしたり、モバイルはVPNで社内からアクセスしたり

AD社外ユーザの注意点
 アクセス範囲を決め特定のフォルダやイントラサイトしか無理にする
 ほぼSharePoint用?
 SPをDMZに置く等の物理的に設計する?

=========================
Win10 ゲーミング設定
https://chimolog.co/bto-gaming-pc-settings/

ChromeにはServiceWorkersの無効化を
https://qiita.com/rana_kualu/items/52d8cb7b200d6fefddc8
https://www.google.com/search?q=chrome+flags+service+worker

Posted by funa : 06:42 PM | Web | Comment (0) | Trackback (0)


January 1, 2018

Web font test
コンパネでWebFontをONにしておく必要があるヨ さくらは、また当CMSはJSもCSSもインラインで宵

リュウミン M-KL Ryumin Medium KL
リュウミン R-KL Ryumin Regular KL
見出ミンMA31 Midashi Min MA31
A1明朝 A1 Mincho
新ゴ R Shin Go Regular
新ゴ M Shin Go Medium
ゴシックMB101 B Gothic MB101 Bold
見出ゴMB31 Midashi Go MB31
じゅん 201 Jun 201
じゅん 501 Jun 501
新丸ゴ R Shin Maru Go Regular
フォーク R Folk Regular
フォーク M Folk Medium
丸フォーク R Maru Folk Regular
丸フォーク M Maru Folk Medium
カクミン R Kakumin Regular
解ミン 宙 B Kaimin Sora Bold
シネマレター Cinema Letter
トーキング Talking
はるひ学園 Haruhi Gakuen
すずむし Suzumushi
新丸ゴ 太ライン Shin Maru Go Futoline
正楷書CB1 Sei Kaisho CB1
隷書101 Reisho 101
UD新ゴ R UD Shin Go Regular
UD新ゴ M UD Shin Go Medium
UD新ゴ コンデンス90 L UD Shin Go Conde90 L
UD新ゴ コンデンス90 M UD Shin Go Conde90 M
ナウ-GM NOW-GM
G2サンセリフ-B GSanSerif-B

リュウミン M-KL Ryumin Medium KL
リュウミン R-KL Ryumin Regular KL
見出ミンMA31 Midashi Min MA31
A1明朝 A1 Mincho
新ゴ R Shin Go Regular
新ゴ M Shin Go Medium
ゴシックMB101 B Gothic MB101 Bold
見出ゴMB31 Midashi Go MB31
じゅん 201 Jun 201
じゅん 501 Jun 501
新丸ゴ R Shin Maru Go Regular
フォーク R Folk Regular
フォーク M Folk Medium
丸フォーク R Maru Folk Regular
丸フォーク M Maru Folk Medium
カクミン R Kakumin Regular
解ミン 宙 B Kaimin Sora Bold
シネマレター Cinema Letter
トーキング Talking
はるひ学園 Haruhi Gakuen
すずむし Suzumushi
新丸ゴ 太ライン Shin Maru Go Futoline
正楷書CB1 Sei Kaisho CB1
隷書101 Reisho 101
UD新ゴ R UD Shin Go Regular
UD新ゴ M UD Shin Go Medium
UD新ゴ コンデンス90 L UD Shin Go Conde90 L
UD新ゴ コンデンス90 M UD Shin Go Conde90 M
ナウ-GM NOW-GM
G2サンセリフ-B GSanSerif-B


----------

■リファクタリングは難しい
すでに存在するという煩悩を排除するのに、時間が余計に掛かる
IFの入れ子、どっちが親か、見極める(閃きで書いて行くのが面白かったりするが)
ロジック、アルゴリズムの検討が入ると時間が異常にかかる(図解して考えたい)
テストケースを作っておきたい(テストケースの量でアルゴリズムの難しさが分かる)
デバッグが面倒、コーダーとテスターは分けるべき(兼ねると思考が複雑化し脳が拒否る)

Posted by funa : 11:13 PM | Web | Comment (0) | Trackback (0)


June 1, 2017

Help desk

■画面キャプチャ
Win+S

■ServiceNow
★がお気に入り、ドラッグ&ドロップで入れられる
リストで項目を右クリックしFilterOutを選ぶことで除外できる。State=resolvedを外す等

■CスクリプトでVBSをキック
CMDを管理者で起動
cscript test.vbs

■BBC
送信者の送信メールにはBBCが誰か記載されている、Fromの人は分かる
Toの人には記載されておらず分からない
BBCの人はなぜ受け取ったか普通分からない、ヘッダーにはBBCであるほのめかしがある場合がある ■IPアドレス
nslookup ドメイン
 で対象DNSとレコード一覧がでる?、nslookup -type=mx domainでMXレコードだけ出る?

■完全なパス
Shiftを押しながら、ドライブをクリックすることでパスを取得できる

■WebページのWord化
Chromeからはコピペが可能、一部画像はWin+Sで

■グループポリシーの強制適用
gpupdate /force

■全ドライブ割り当てのフルパス取得
net use

■スタートアップ プログラム
msconfig  (win7もwin10でもOK)

win10 Ctrl+alt+del / コンパネ>アプリ>スタートアップ
https://pc-karuma.net/windows-10-app-startup-disable/

■RUNコマンド
RUNはWinキー+R

■cmd パイプ
 ipconfig /displaydns | more
 リターンで1行、スペースで1ページ

■cmd network
コマンドプロンプト:ネットワーク系コマンドまとめ
https://qiita.com/toyokky/items/0bf0c5672b4b7cc27be0
tracert
https://www.atmarkit.co.jp/ait/articles/0305/03/news002.html
nslookup
https://www.atmarkit.co.jp/ait/articles/0203/21/news003.html
https://beginners-network.com/nslookup.html
ipconfig /flushdns
https://milestone-of-se.nesuke.com/sv-basic/windows-basic/nslookup/

■Outlook
送信取り消し、削除済みアイテムの復元、かく

■用語
MirrorID(設定を他の方と同じにしたいという意味で参考ID)
NDR (non delivery receipt)
CUCM (Cisco Unified Communication Manager) メールやSMS,ビデオ会議、IP電話
LM (line manager)

■OneNote
1)コピー等で持ってきた元々の実体のローカルファイル (下記に移動し通常使わない?)
2)ノートブックのプロパティの場所 (開くときに改めてココに作る、通常ココを使う)
 C:\Users\userid\Documents\OneNote ノートブック
3)パッケージファイルとしてデスクトップ等に保存(これから開くが実体もあるがミラーなだけ?)
4)バックアップ (オプションからバックアップ設定、即時も可)
 C:\Users\usesrid\AppData\Local\Microsoft\OneNote\14.0\バックアップ\

問題があれば2か4のデータをどこかにコピーしパッケージとして別名保存、そのときプロパティの場所に新たにデータが作られる、またできれば手動でバックアップを取っておく

■Outlookキャッシュ(名前解決)のクリア
Outlook>ファイル>オプション>メール>メッセージの送信>オートコンプリートのリストを空にする

■Outlookキャッシュのクリア
1. Outlookを閉じます
2. Windows key + Rを押す
3. ウィンドウに次を入力しEnter%localappdata%\Microsoft\Outlook
4. RoamCacheフォルダを開く
5. 全選択しSiftキー+Delキーで完全削除します
6. Outlookを再度開きますとキャッシュが自動的に作成され直しされます

■SharepointのUpload ceter cache / Officeドキュメントキャッシュをクリアする、下記URLステップ2
 https://support.office.com/en-gb/article/delete-your-office-document-cache-b1d3765e-d71b-4bb8-99ca-acd22c42995d
(翻訳)https://translate.google.co.jp/translate?hl=ja&tab=rT1&sl=en&tl=ja&u=https%3A%2F%2Fsupport.office.com%2Fen-gb%2Farticle%2Fdelete-your-office-document-cache-b1d3765e-d71b-4bb8-99ca-acd22c42995d

■Winネットワーク設計の調査(Firewall、サービスが主か)
Firewallでポートを止めたりしたいがはGPOでおおよそ管理されるので、主にサービスを止める等をしたい
http://www.atmarkit.co.jp/ait/articles/0207/30/news002.html
プロセスやサービスを1つずつ停止させながら、netstat -anコマンドでリッスンしているポートを調査する
 リッスンしているプロトコルとそのポート番号、プロセスID
  netstat -oan
 通信を行っているプログラムが分かる
  netstat -anbv
 タスクリスト、プロセスIDが分かる
  tasklist
 タスクを出している親のサービスが分かる
  tasklist /svc
 Wellknowはこのテキストに書かれている
  %windir%\system32\drivers\etc\services
ALMon(Shophos関連), Alsvc(Shophos関連), CcmExec(SMS:バッチ管理), csrss(クラサバランタイム), IAstorIcon(インテルラピッドストレージ), igfx(インテルグラフィックドライバ), lsass(ローカルセキュリティオーソリティ), svchost(サービス), spoolsv(印刷スプーラ), wmiprvse(OS管理), BrcmMgmt, services(Broadcom社ネットワーク系/モニタリング), OSE(オフィス更新)

===
■サポートは謝り方と悟れ、あと情報の整理
ITは結局情報の管理、記録を取って残す、過不足無くアップデート/メンテをする事
 →結局、網羅が必要で情報量が多くなる →情報の整理をして重複を無くす、見やすく、探しやすく

■見切り発車、現場を知らない
システムは整合性が鍵、見切り発車はコントロールできる範囲でないと収拾がつかなくなる
 (スピードが重要だが、それ以上に知見がある人が決定することが大事)
現場を知らないマネージャが決定すると、現場の業務や負担ばかり増える
 (メリットは?現場の人間が会議にでなくてよく業務に集中できる)

■共有フォルダ構成
階層はできるだけ浅いほうが良い → アイテムをベタでたくさん置く
ベタで置くと優先順をつけたくなる → 頭数字を入れがちだが、、、アンダースコアの数で階層を作る(一覧的階層)
 べた並び → 重要なものは階層を上げるため_を付与 → もっと重要なものは__を接頭
ファイル名は判り易くつける

■マニュアル
サマリが主要になるように作る、一覧性重視(詳細を見る時間がない、基本は知ってる人に聞いて覚える)
詳細の説明をサマリの後に付ける、時間浪費は良くないので見にくくてもよい。
 サマリは抜けなくしっかり作ること、詳細説明は細かな記録/言質を重視
チーム用備考欄とすればユーザが見れる資料でも記載可として一元化できる、派生はさせない(資料のパスなど)

■ナレッジ管理に関しては、
レイヤーやピアが低いところではエスカレーションすればよい
個人の管理に頼る方が仕組み上すっきりし、コストが掛からず良い
ですが、大事なところを定義し、そこのみマニュアル等の更新をきっちりすべき

また、
KBの情報共有は、連絡が頻繁にあり効率化すべき
理解に掛ける時間が人数分になりますので、メールのシェアより情報の一元化がよい

■BYOD vs Fortify
 1. プライベートのPCをVPNで企業のWebアプリに繋げる、自由/高効率、ウィルス/情報漏えいなど危険が危ない
 2. ウィルススキャン、スパム、情報漏洩、フィッシング、Webアクセス制限、マルウェアインスコから完全に守る

Posted by funa : 12:00 AM | Web | Comment (0) | Trackback (0)


June 7, 2016

RWD by HTML5

■HTML5
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charSet="utf-8"/>
<title>Title</title>
<meta name="description" content=""xxx/>
<link rel="stylesheet" href="xxx.css"/>
<script src="js.php"></script>

/// Resource Hintsによる表示高速化
https://blog.members.co.jp/article/33474
dns-prefetch、preconnect、prefetch、prerenderの4つの要素、やりすぎよくないが
<meta http-equiv="x-dns-prefetch-control" content="on">
<link rel="dns-prefetch" href="//example.com">
<link rel="preconnect" href="//example.com">
 <link rel="preconnect" href="//cdn.example.com" crossorigin>
<link rel="prefetch" href="//example.com/next-page.html" as="html" crossorigin="use-credentials">
 <link rel="prefetch" href="/library.js" as="script">
<link rel="prerender" href="//example.com/next-page.html">

/// 他
 大きめな画像でもRetina端末で見るとぼやけてしまうというのでSVG、大きい画像だと容量も食う
 IMGタグやCSSだとSVG形式ファイルに対してJavaScript等で一切操作ができない、objectならマウスオーバ等データにイベントを含めておける
 <img src="logomark.svg" width="32" height="32">
 <object type="image/svg+xml" data="logomark.svg" width="256" height="256"></object>
 <svg id="logomark" x="0px" y="0px" width="155px" height="155px" viewBox="0 0 155 155" enable-background="new 0 0 155 155">
  <polygon id="logomark-polyline" fill-rule="evenodd" clip-rule="evenodd" fill="#0CB9C7" points="128.25,26 147.19,96.69 95.44,148.44 24.75,129.5 5.81,58.81 57.56,7.06 "/>
 </svg>

■OGP
<head prefix="og: http://ogp.me/ns# website: http://ogp.me/ns/website#">
<head prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb# article: http://ogp.me/ns/article#">
 TOPページであれば上の「website」、TOP以外のページでは下の「article」を使う、fbはFacebook用

<meta property="og:url" content=" ページの URL" />
<meta property="og:type" content=" ページの種類" />
<meta property="og:title" content=" ページの タイトル" />
<meta property="og:description" content=" ページのディスクリプション" />
<meta property="og:site_name" content="サイト名" />
<meta property="og:image" content=" サムネイル画像の URL" />

<meta property="fb:app_id" content="App-ID(15文字の半角数字)" />

<meta name="twitter:card" content="カード種類" />
<meta name="twitter:site" content="@ツイッターユーザー名" />

他にも細かい要素がある
https://ferret-plus.com/610

OGP画像確認
http://ogimage.tsmallfield.com/
ツイッターカード確認
https://cards-dev.twitter.com/validator

■CSS
CSSレイアウト(Grid、Float)
https://www.bangboo.com/cms/blog/page_327.html
https://www.bangboo.com/cms/blog/page_18.html
CSSセレクター
https://www.bangboo.com/cms/blog/page_152.html
ブラウザ間の問題
https://www.bangboo.com/cms/blog/page_184.html
https://www.bangboo.com/cms/blog/page_19.html

/// calc は計算ができるのでレイアウトもできる
.foo {
    width: calc(100% - 50px);
}
他にもいろんな計算が、単位は要調査
.foo {
    width: calc(50vmax + 3rem);
    padding: calc(1vw + 1em);
    transform: rotate( calc(1turn + 28deg) );
    background: hsl(100, calc(3 * 20%), 40%);
    font-size: calc(50vw / 3);
}

/// @supports は機能クエリ、機能があるかないかでCSS適応を変えられる
https://coliss.com/articles/build-websites/operation/css/css-supports-how-to-works.html

/// グラデーション
http://www.htmq.com/css3/linear-gradient.shtml
http://www.css-lecture.com/log/css3/css3-gradient.html
https://qiita.com/yasumodev/items/9ccac31860c31ce24a13
 webkit系:Safari/Chrome, Moz系:Firefox
#gMenu .menu > li > a{
 background-color:#006600;
 background: -webkit-gradient(linear, 0 0, 0 bottom, from(#006600), to(#003300));
 background: -moz-linear-gradient(#006600, #003300);
 background: linear-gradient(#006600, #003300);
}

■RWD
ビューポート <meta name="viewport" content="width=device-width, initial-scale=1">
メディアクエリ CSS側に@media screen and (max-width:767px){
相対サイズ指定
 max-width: 100%; ではみ出るのを押さえる
  → https://www.homepage-tukurikata.com/css/max-width.html
  maxとminの一般的な使い方→ https://saruwakakun.com/html-css/basic/max-min-width

liを使ってナビやパンくずを表現し、サイズでスタイルを変える
Divを使ってパーツを表現し、サイズでスタイルを変える、レイアウトを変える(Floatの流れ、Grid等)

/// srcset と sizes による画像切り替え
https://www.tagindex.com/html5/embed/img_srcset_sizes.html
https://laboradian.com/img-srcset-sizes/
https://terkel.github.io/srcset-sizes/
https://qiita.com/taichi0514/items/7ffc93b8b4d0f349e9b6

<img src="image/small.jpg" srcset="image/small.jpg 320w,
 image/medium.jpg 640w,
 image/large.jpg 1280w"
 sizes="(max-width: 1280px) 100vw, 1280px" alt="a">
ビューポートの幅が1280pxまでは100%の幅で、それ以上の場合は1280pxの幅で画像を表示します

<img src="image/small.jpg" srcset="image/small.jpg 320w,
 image/medium.jpg 640w,
 image/large.jpg 1280w"
 sizes="(max-width: 420px) 100vw,
 (max-width: 800px) 70vw, 50vw" alt="a">
2つのブレイクポイントを設定し、画像の表示幅が3段階で変化するようにしています

<img src="image/small.jpg" srcset="image/small.jpg 1x,
 image/medium.jpg 2x" alt="a">
一般的なディスプレイでは small.jpg、高画素密度のディスプレイでは medium.jpg が使用されます

<img src="image/small.jpg" srcset="image/small.jpg 320w,
 image/medium.jpg 640w,
 image/large.jpg 1280w"
 sizes="(min-width: 600px) calc(100vw - 300px),
 100vw" alt="a">
表示領域の幅が600px以上ある場合はサイドバー用の余白(300px)が入り、それ以外の場合は幅100%で画像が表示されます

ブラウザは上から見ていって最初に合致したものを採用
メディアクエリーで場合分けする場合はwidth属性を指定しない事、指定すると場合分けされない
指定するサイズの単位は、px, em, vw など、但し% は使えない
em は親要素のfont-sizeプロパティの値を1としたときの大きさ、rem はルート/htmlに対する
ピクセル密度記述子は (1x や 2x など)により指定
実際のピクセルでのサイズ単位は w で指定、スマホやRetinaは物理ピクセル数が違い3pxを1pxで扱う等で
vw ビューポートの幅に対する割合
vh ビューポートの高さに対する割合
vmin ビューポートの幅と高さのうち、値が小さい方に対する割合
vmax ビューポートの幅と高さのうち、値が大きい方に対する割合

相対単位「px」「ex」「em」「rem」
絶対単位「ch」「cm」「mm」「q」「in」「pt」「pc」「mozmm」「vw」「vh」「vmin」「vmax」

↓使うならこんな感じ?ブラウザサイズで読み直しがなかったり、preloadが必要だったり、%でいいんじゃ?
<img src="small.jpg"
     srcset="large.jpg 1024w, medium.jpg 640w, small.jpg 320w"
     sizes="100vw"
     alt="A rad wolf" />

<img srcset="img-320w.jpg 320w,
             img-480w.jpg 480w,
             img-800w.jpg 800w"
     sizes="(max-width: 320px) 280px,
            (max-width: 480px) 440px,
            800px"
     src="img-800w.jpg" alt="a">

POLY シンプル
 http://treehouse-code-samples.s3.amazonaws.com/poly/index.html
normalize.css
 ブラウザごとの要素の相違を吸収

レスポンシブウェブデザイン?テンプレートを使えば?(有料でも無料でも商用可でも)
https://ferret-plus.com/3312
http://photoshopvip.net/109116
https://www.site-convert.com/archives/1310
https://free-hp.net/
https://liskul.com/homepage-template-27631
https://popo-design.net/template/ シンプル

Posted by funa : 08:28 PM | Web | Comment (0) | Trackback (0)


Navi: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11  >
PhotoGallery


TWITTER
Search

Mobile
QR for cellphone  QR for smart phone
For mobile click here
For smart phone click here
Popular Page
#1Web
#2Hiace 200
#3Gadget
#4The beginning of CSSレイアウト
#5Column
#6Web font test
#7Ora Ora Ora Ora Ora
#8Wifi cam
#9みたらし団子
#10Arcade Controller
#11G Suite
#12PC SPEC 2012.8
#13Javascript
#14REMIX DTM DAW - Acid
#15RSS Radio
#16Optimost
#17通話SIM
#18Attachment
#19Summer time blues
#20Enigma
#21Git
#22Warning!! Page Expired.
#23Speaker
#24Darwinian Theory Of Evolution
#25AV首相
#26htaccess mod_rewite
#27/// BANGBOO BLOG /// From 2016-01-01 To 2016-01-31
#28竹書房
#29F☆ck CSS
#30Automobile Inspection
#31No ID
#32Win7 / Win10 Insco
#33Speaker
#34Arcade Controller
#35Agile
#36G Suite
#37Personal Information Privacy Act
#38Europe
#39Warning!! Page Expired.
#40GoogleMap Moblile
#41CSS Selectors
#42MySQL DB Database
#43Ant
#44☆od damnit
#45Teeth Teeth
#46Itinerary with a eurail pass
#47PHP Developer
#48Affiliate
#49/// BANGBOO BLOG /// From 2019-01-01 To 2019-01-31
#50/// BANGBOO BLOG /// From 2019-09-01 To 2019-09-30
#51/// BANGBOO BLOG /// On 2020-03-01
#52/// BANGBOO BLOG /// On 2020-04-01
#53Windows env tips
#54恐慌からの脱出方法
#55MARUTAI
#56A Rainbow Between Clouds‏
#57ER
#58PDF in cellphone with microSD
#59DJ
#60ICOCA
#61Departures
#62Update your home page
#63CSS Grid
#64恐慌からの脱出方法
#65ハチロクカフェ
#66/// BANGBOO BLOG /// On 2016-03-31
#67/// BANGBOO BLOG /// From 2017-02-01 To 2017-02-28
#68/// BANGBOO BLOG /// From 2019-07-01 To 2019-07-31
#69/// BANGBOO BLOG /// From 2019-10-01 To 2019-10-31
#70/// BANGBOO BLOG /// On 2020-01-21
#71Bike
#72Where Hiphop lives!!
#73The team that always wins
#74Tora Tora Tora
#75Blog Ping
#76無料ストレージ
#77jQuery - write less, do more.
#78Adobe Premire6.0 (Guru R.I.P.)
#79PC SPEC 2007.7
#80Google Sitemap
#81Information privacy & antispam law
#82Wifi security camera with solar panel & small battery
#83Hope get back to normal
#84Vice versa
#85ハイエースのメンテ
#86Camoufla
#87α7Ⅱ
#88Jack up Hiace
#89Fucking tire
#90Big D
#914 Pole Plug
#925-year-old shit
#93Emancipation Proclamation
#94Windows env tips
#95Meritocracy
#96Focus zone
#97Raspberry Pi
#98Mind Control
#99Interview
#100Branding Excellent
Category
Recent Entry
Trackback
Comment
Archive
<     September 2020     >
Sun Mon Tue Wed Thi Fri Sat
1 2 3 4 5
6 7 8 9 10 11 12
13 14 15 16 17 18 19
20 21 22 23 24 25 26
27 28 29 30
Link