/// BANGBOO BLOG ///
■18/1/1 11:13PM
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の入れ子、どっちが親か、見極める(閃きで書いて行くのが面白かったりするが)
ロジック、アルゴリズムの検討が入ると時間が異常にかかる(図解して考えたい)
テストケースを作っておきたい(テストケースの量でアルゴリズムの難しさが分かる)
デバッグが面倒、コーダーとテスターは分けるべき(兼ねると思考が複雑化し脳が拒否る)
Comment (0)

■17/6/1 12:00AM
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

dig dddomain.com @ore-dns ore-dnsにドメインを聞く
dig dddomain.com @192.168.27.27 IPのDNSにドメインを聞く
dig -x 192.168.27.7 逆引き-x
nslookup 規定のDNSが表示>対話で使用するDNS情報と正か逆引きがでる
nslookup dddomain.com ore-dns 使用するDNS情報とドメインに対する正/逆引きがでる
nslookup 192.168.27.7 使用するDNS情報とIPに対する正/逆引きがでる
 DNSの調査(bind付属のdigだがnslookupはdigへ移行していくらしい)
 nslookupもDNS指定できるが、どこかのホストに入って操作しても◎

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(オフィス更新)

■リモート操作
ctrl+alt+delの代わりにリモートはctrl+alt+end

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

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

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

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

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

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

■Edge
edge://settings/privacy
 設定>プライバシー…>クリアするデータの選択
Win10でもインターネットオプション自体はコンパネにある、全般>削除に同様のものはある
 コントロール パネル\すべてのコントロール パネル項目

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


Comment (0)

■16/6/7 8:28PM
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/ シンプル


Comment (0)

Navi: <  12 | 13 | 14 | 15  >
-Home
-Column [128]
-Europe [9]
-Gadget [77]
-Web [133]
-Bike [4]

@/// BANGBOO BLOG ///