/// BANGBOO BLOG ///
■20/4/1 12:01AM
G Suite -> Google workspace - GWS
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
 不要ラベル、Keyラベル等を付けて移動してもいいかも?
マイドライブ
 組織内でもグループ内でもWeb公開もURLでも編集やコメントも細かく共有設定ができる
 ファイルとしてDL、それをマイドライブにアップしG suite化できる
ドキュメント
 提案モードで修正→ツール>編集の提案の確認orチェック で承認ができる
スライド
 プレゼンター(マウス↓でメニュー表示、ノートや質問)、オンラインプレゼンは不可
コレクション
 +のURLのみ集められる?モバイルやPCは駄目かも
Keep
 メモの共有を外部にするとメールが送信
カレンダー
 デスクトップ通知は各種許可設定があり調べよ、Chromeの機能 chrome://flags/#enable-native-notifications

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

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

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

■アカウント
GWSアカウント
GWSグループメール
 GWSメーリングリスト(ML間のみで連絡できる)
個人gmailアカウント(Googleアカウント)
GWS以外のメール(メールボックス)※独自ドメインでのGoogleアカウントを作成すればいい
 独自ドメインでGoogleアカウントを取得する方法 (infact1.co.jp)
Gmailアカウントの作成方法と注意点:Tech TIPS - @IT (itmedia.co.jp)

■Gmail 自動振り分け(迷惑メールのブロック)設定ギア>全て表示>フィルタ関連のタブ
含むの項目使いやすい(特殊文字を省いて半角スペース区切りでキーワード網羅がいい、subject等は括弧や特殊文字で思うように行きにくい) 各項目間はAnd条件:あいうえお かきくけこ
 各項目でORやAND指定ができる:あいうえお OR かきくけこ
 覚えておきたいGmailの絞り込み条件指定方法|フィルタ利用時には検索演算子を使おう (keizokuma.com)
 フィルタや自動化ルールで正規表現を使用する - 検索広告 360 ヘルプ (google.com)
 gmailのフィルタ機能は超便利 - 愚鈍人 (hustle.ne.jp)

■Google spreadsheet
Googleスプシのvlookupは一番左の列のみしか検索しない仕様
アプリでシートを読み込むなら名前付き範囲が便利、文字列を変えず範囲を扱えメンテフリーになるから

/// Connected sheetsのデータ漏洩問題、というかスプシ自体ザル
Connected sheetsを閲覧するだけならBQ権限不要でスプシへの閲覧共有だけで良い BQ権限保持者でデータロードが必要だが、誰かが一度ロード済みでキャッシュがあれば他人はBQ権限不要ということ  抽出シートに保存しておいた場合のみでなくBQ連携画面だけでも見れてしまう
   時間制限設定ができるか、GWS制御設定があるかは分らんがリスクは大きい
  スプシに参照権限だけだとConnected sheetsのBQリロード更新はできない抽出シートの別のセルに転記するにはスプシへの編集権限が必要スプシの編集権限があればBQのクエリが編集できる

●BQ権限で管理ができず、スプシデータ削除やスプシ権限の厳格な管理が必要

/// 特定のデータだけ共有
スプシ設定のIMPORTRANGE関数で共有したいデータだけ別のシートに反映させ、別シートのみ共有できる
 >スプシの参照権限だけでBQ権限がなくても閲覧可能、関数からのアクセス許可は必要(両方オーナならポチるのみ)  >閲覧共有のないスプシでさえ、URLとシート名があれば、importrangeを仕込めば見れそうなところまで行けるのが危険
■Google Form
回答で保存先スプレッドシートを指定できる https://www.infact1.co.jp/staff_blog/webmarketing/43713/

■GAS
doPostとdoGetが使えるがほとんど何もできない? GASをWeb公開して実行(doPostとdoGet) | アンクルエンジニアの気づき (uncle-atsushi.com)

■Googleデータポータル(データスタジオ > Looker studio)ディメンション:未集計の値、指標を出す項目指標(metrics):集計、sumとか、ディメンションを計るという位置づけデータを統合:複数の表を各種joinするフィルタ:ディメンション等の条件で絞るコントロール:プルダウン等の操作系を作る、適応するには適応したいものを含めて、配置>グループ 事前にScheduledQueryでBQに表を日次で整備しておく等もあり 表の指標に先月とのdiffを計算 ROUND(costThisMonth - NARY_MAX(costMonthAgo, 0), 0)
  ヌルぽなら0に変えて引く  Null to zero in Google Data Studio | Datastudioland.com
  How to convert null values to zero in Data Studio reports : Supermetrics Support Forum 棒グラフは期間のディメンションにperiod、ディメンションにperiod、指標にcost等でsumになる、並び替えをperiodデータポータルでアナリティクスの表を作成する方法 | Googleアナリティクス | アナトミーBLOG (siteanatomy.com)Googleデータポータル(データスタジオ)使い方まとめ。無料BIツールでデータ分析を始めよう | できるネット (dekiru.net) デカい表でもデフォルトのデータソース更新は12時間ごとで使用に耐えるかも、joinもできそうで中間テーブルを作る意味はどこにある?集計やカラム数の調整のパフォーマンス向上はどれほど?
 →サマって中間テーブルを作った方が制御やパフォーマンスが良い(無いとつらい)
 →固定値等の素のデータをDataStudioは扱えないと思われ、SQLで定義しバッチでDB table保存しておくこと(viewはダメぽ)
Data Studio でフィルタパラメータを URL 指定する方法 | by Masahiro Yasuda | google-cloud-jp | Medium
 HTML等にembedする際にURL引数で操りやすくなる
レポートを埋め込む - Looker Studioのヘルプ (google.com)
 [ファイル] > [レポートを埋め込む] > [埋め込みを有効にする] 設定

PARSE_DATE("%Y%m", period)でテキストをLookerStudio上で日付扱いにでき指標にできる
期間比較を使い前年対比のグラフを出したいのだがBQ側でDateである必要がありそう(日付形式がyyyy-mm-dd等で決まっているようだ) 期間のディメンションを設定することで日付カラムの指定ができる  デフォルトの日付範囲や比較期間が設定できるようになるソースの型を変更した等の小さな変更でもソースを選択しなおし再接続すること

BQのデータ取得はページの作成者:オーナでの認証、サービスアカウントでの認証、閲覧者での認証の3種類から選択できる
 オーナにBQ権限があればいいか、SAか、各閲覧者か、決められる。ページの共有も要るが
■サービスアカウントでのGWSドライブやGAS利用GWSのテナント設定で許可ドメインは一つだけ設定できる それ以外のドメインはGWSテナントに入れないテナント内にサブ組織を作成し、そのサブで共有ドライブを外部共有可にする 全ての外部共有を許可するのでセキュリティ問題が残るGWSのドメイン委任設定をSAのクライアントIDに対して設定 テナント全体のアカウントでGWSアクセス可になってしまうSAのグループがアクセス可能なOUを作りOU内で共有ドライブを作成 これは良さそう

■Zapier
IFTTTみたいなやつ、アプリ間連携が簡単にできるドキュメントがあるのかないのか、全然見つからないので自分で検証が必要、簡単だが手間少し値を変えれば保存されるので弄る前にコピーをしコピーを弄るZap上のGoogleSpreadsheetのIDは行番号を含む行作成時のユニークID、他の行が削除され行番号がずれるとIDが取得できなくなる、RowID(他の行が削除されても参照が維持される)かRowNumber(行番号で再度他のカラムで検索すれば新たに参照可)を使いたい
■Slack
ChannelにJoin
スレッド返信(@メンションを付けた方がいい?)リアクションでアイコン返信メッセージ編集や削除ブックマークダイレクトメッセージ: 新規メッセージで相手を選んで送信 @メンションを付けてチャンネルに投稿するメッセージとは異なる
```で挟むと囲み線、`で囲むと囲み線で赤字
 うまくいかんときは文字を選択し右クリックで</>□等で>>>を付けると引用検索オプション
 in:channel from:userid
ナビを常時表示:サイドバーopen(?)https://dekiru.net/category/service-software/slack/

Comment (0)

■20/3/1 3:03AM
CSS Grid
Grid、Flex、旧(Float、position) は混在する
位置の調整はposition
 親要素にposition:relative
 該当要素にposition: absolute;
  top: 100;
  right: 20;
  z-index: 10; 必要なら大きいのが上
CSSのpositionを総まとめ!absoluteやfixedの使い方は? (saruwakakun.com)
中央寄せ
 文字を中央寄せしたいなら外のブロック要素に「text-align:center」
 ブロック要素自体をしたいなら 「margin-left:auto; margin-right:auto;」
  paddingにautoは指定不可、margin: autoの中央寄せの微調整はpaddingで
  widthプロパティの初期値はauto (横いっぱいに広がっているのでwidthを入れる)
  inlineの要素では、widthとheightの指定不可
.center_area { min-width: 450px; max-width: calc(61% - 20px); margin-top: 40px; margin-left: auto; margin-right: auto;
padding: 0px; 50px; 0px; 0px; }CSSの余白(margin/padding)と中央配置にする方法【CSSの書き方入門】 | Skillhub[スキルハブ]
テーブルの幅指定
 複数テーブルのレイアウト整合はtr width%指定とtd/tr nowrapを細かくすればなんとかなる
AJAX
 JS fetchで
【CSS】colorが効かない/文字色が変わらない原因と修正方法 (csshtml.work)
点数制、同点なら後述が勝つらしい


■CSSアニメーション
transition に時間を入れておき、JSでclassをremoveしたりaddする
変化にその時間分を掛ける動作となる
 now_classからfuture_classの2つをCSSで作り、JSでremoveやaddをする

[B! css] 2022年のモダンCSS改 (hatena.ne.jp)

中央揃え
.container{
  display: flex;
  justify-content: center;
  align-items: center;
}
.container{

  display: grid;
  justify-content: center;
}

アンカーリンク移動をスムーズにする
html {
  scroll-behavior: smooth;
}

スクロールで位置をずらすトップからのマージン
section {
  scroll-margin-top: 60px;
}

すりガラス
.box{
  backdrop-filter: blur(8px);
  background-color: rgba(255, 255, 255, 0.5);
}

1行でも両端ぞろえ
th{
  text-align-last: justify;
}

ナビがfixedの場合の本部のスクロール連動をなくす
.navi{
  overscroll-behavior-y: contain;
}

++++++++++++++++++
2020-03-01 wrote
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-fit
 画像の比率
 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

リストのマーカの位置に迷った
ulのpadding-leftが外側からマーカの右側迄の距離で15pxとかは必要
liのpadding-leftはマーカの右からから先頭文字までの距離で0px等で良い
https://maku77.github.io/web/layout/list-margin.html


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

CSSレイアウト再入門:完全に理解してCSSを記述するために - Speaker Deck
実例で学ぶFlexboxとCSS Gridの使い分け – TAKLOG (tak-dcxi.com)
2024年、Web制作者がチェックしておきたいCSSの新機能のまとめ | コリス


Comment (0)

■20/1/21 12:20AM
Update your home page
[Click for image]
そもそも下手糞魂、 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でやり、処理はサーバー側でやる
表示はメディアであり、処理はコンピューティング、そういうタイプで

==========

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

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

@/// BANGBOO BLOG ///