  |
はてなキーワード: Bootstrapとは
もうすぐ年末年始休暇も折り返しに差し掛かるので軽く振り返ってみる。
作っていたウェブアプリをJavascriptからTypeScriptに移行した。
自分はこのウェブアプリに関して『自分の死んだ後も変わらず動作し続け、後世の奇特な人が気が向いたらメンテ出来る』ことを目指しているので、できるだけフレームワークなどは利用せずpureなJavascriptで実装していた。最初はjqueryを使っていたが廃止し、bootstrapも使っていたが廃止し、Vue.jsで作り直したものも本番投入せず廃棄した。他のウェブアプリで新しい技術を試すことはあっても、このウェブアプリだけは徹底的に保守的なスタンスを貫いてきた。でもここ数年の流れから言って、TypeScriptなら将来的にも大丈夫かな、と思えて来たので、満を持してのTypeScript化。
イベントの実行順序などで多少苦戦したものの、それ以外は大きな問題もなくTypescriptで再構築することができた。
あーやっぱり型があると良いね。画面制御と描画処理が今まで１つのモジュールでやっててそれを何とか解消したかったんだけど、型が入ることでそのリファクタリングを安全に行うことができた。描画周りが分離できたんで、そこだけvueなりreactなりに再挑戦するのもアリかもしれない。どっぷりフレームワークに浸かるのは避けたいけど、部分導入だけなら後で捨てるのも容易になる。捨てるのが簡単ならちょっとくらい試しても良いかもしれない。
Google App Engineで動作している自分のサイトをPythonからGoに移行した。
サーバーサイドではほとんど何もやっていないので別にPythonで不便はなかったんだけど、インスタンスの起動がGoの方が早いらしいので、Goに移行することにした。起動が早ければ待機させるインスタンスの数を抑えられるので、費用の低減を図れる。Goで作り直すと言ってもほとんどが静的なhtml。手作りbootstrapからhugoに移行して、サーバーじゃないとできない最低限の処理をGoで書き直し。素人感丸出しのサイトが、hugoのテーマのお陰でそれなりに見栄えのするものになった。
問題は、実装可能性が乏しいデザインが多くてエンジニアからのフィードバックが膨大に必要だとか、画面サイズや内容の可変への考慮が浅いとか、そういう所では。
単にB2Bな業務システムなら、フォトショ使うまでもなく、ポンチ絵だけレイアウトしてあとはbootstrapなりbulmaなりmaterial-uiなりでいいだろって話ならまぁわかる。
…が、お前そこまで有能でもないよね。書いてる内容で分かる。他人disるほどデザインわかってる？
まぁこう言われると「俺はエンジニアであってデザイナーじゃないから」って言うんだろうけど、デザイナーも「私はデザイナーなのでHTML/CSSは私の仕事じゃないです」って思ってんだよ。
DTPからweb移行でももうちっとあるでしょなAdobe知識がないうえ、ワイヤー作ってくださいも最初通じずなんでもいいからデザイン出してって出てきたものに沿ってざっくりbootstrapで手抜きして組んだら
てめえPC/SPでデザインよこせつうたのに出てないし、aiのと異なる口頭での文字サイズがもっと大きい小さいのがいいとか舐めてんの？そう言うこだわりあるなら自分でコーディングするか人にちゃんと指示しれや
つかaiから画像の切り出しアセット関連の機能も知らず解像度てかサイズたりてねえっての
で、もらったデータはやつしか持ってないモリサワフォントでOLかけたのと元のとでLPなんこもつくるそれ×2とかで、全部同じファイルのアートボードに入れてよとかデータ作りからコケてるからデータもらった後にこう作って欲しかったとかできないじゃん
そこまで指示されるデザイナーってなに？素人？自称webデザ？つかデータ作るときに聞けよ
って期待してんのがクソか？ハァー
ジョー氏にはサイトが機能してればそんな細えこたあいいんだよって言われてるし締め切りも迫ってるから目先の制作をあげるの優先で本人はコーディング丸投げして暇になったからなんか仕事ある？って聞いてるんだーとか聞こえてんだよクソが
って言う愚痴です
htmlの中で
{{form}}とかやると受け取ったformを展開できて非常に便利なのだが
例えばbootstrapなどを使いたいときにclassの指定とかするのに困る時がある。特にテキストフィールドなど。
これに対しform.pyなどで定義した自作form内のコンストラクタでclass=form-controlを付与することで対応できるそうだ。
でもそれだと何のために見た目と中身を分けているの？html内の記述で対応できないと一貫性がなくない？
現にdjango-bootstrap-toolkitみたいなのがあってbootstrap4で使えるかはわからないけど
{{form | class-format}}みたいな記述ができるみたいだ。こういう方向性を目指すべきだと思うのに、何故フォーム作成のコンストラクタで対応しようとするのか。
はてなNGの代替品 for Firefox の Android 対応
はてなNGの代替品 Chrome1.0.3/Firefox1.0.1 を公開した
はてなNGの代替品 Chrome1.0.4/Firefox1.0.2 を公開した
疲れた。
連休なので、はてなNGフィルターを作ったらクソ快適になった話
HaxeやBootstrapは使わず、JavaScript(+jQuery)とポップアップ用htmlを手書きしてます。
$5は払いました。
一部サイトの強制非表示をどうしても解除したければソースを直接修正して開発用パッケージとして読み込めば行けますよ。
難読化はしてないので5分とかからず外せるでしょう。アップデートは適用されなくなりますが。
Web制作において持論がある。CSSの設計云々で議論できるのはまともな営業が居てまともなクライアントをつかまえてきてまともに意見を言えるからだ、そうでなければCSSの設計云々は話にならない、お話にならない。
OOCSSにBEMにSMACCS、そんなもんできるかよ。クソみたいな、デザインを破壊する修正が大量に来て統一性もなにもあったもんじゃないし、セマンティック? 知るかくたばれ。アニメーションすらバラバラに指定されてっからAnimate.cssすら使えねえ。そもそも統一させてもらえないからクラスの意味がほとんどねえ、全部IDでも変わんねーよ。
頑張ったよ。SASSで綺麗に書こうとしたし、Smartyみてーなテンプレートエンジンが効率良いってのも分かってるよ。でもヘッダーすら変えろとか言われたらどこを共通化すればいいんだよ。
俺は確信した。Bootstrapの"mt-2"とか"display-inline-block"みたいにクラスを付けてってそれにスタイルを適用してくのが正解だって。ってかBootstrapのクラスばっかりでスタイル作ってる。だってクラス見るだけでスタイルが分かるし、共通化は一切されてねーからな。
あいつら、グラフィックデザインと同じだと考えてやがる、くたばれ。ポスターじゃねーんだよ。
俺はもう闇のWeb製作者になり客にはバキバキに嘘をつくようになった。SEOがだとかデバイスの保有率のデータだかなんかを持ち出して出来るだけ頑張らなくて良いサイトを作る。だって頑張ったってそれはカオスを作るだけの技術が上がるだけでコーディングの技術が上がる訳じゃ無いからな。
かと言って外注に出したらクソみたいに思いCSSフレームワーク使ったサイトが上がってくる、くたばれ。しかもグリッドシステムぐらいしか使ってねーじゃねーか、skeletonでも使っとけ、ふざけんな。
おかげで俺は毎日Web2.0的なデザインとレスポンシブ対応が混合した、パラレルワールドみたいなサイトを作ってる、スチームパンクだろ、お前営業やめろよ。単価安いんだよ。俺が営業行くから。元営業だからお前より喋れるから。
とにかくモジュール化だとかクラス命名手法だとか議論出来るお前らは幸運だ。全部の国がそれぞれ違う大陸にいるようなもんだ、クラスいらないからな。誰かWebpackであいつらの前頭葉をパッキングしてくれよ。
まず、自分はweb製作会社に勤めてる身なので、一通りの制作手順は知ってる。
そして、アダルトアフィリエイトサイトなるものを教えてもらった。
なんせ金にならん。（※webクリエイターは金など気にせずシコシコ勉強するのが大事）
といっても、お金はかけたくない。
できれば無料で。
そして、色々調べた結果、
まあ、無料なだけあって、色々縛りはつくんだよね。
最初はスクレイピングで、ほぼ自動化したサイト作ればいいんじゃね！
的なことを考えていたけど、FC2の無料サーバだと致命的なことに、DBやサーバサイド言語が使えない。
飛車角抜きで将棋しろとか、コンバイン使わずに田植えしろとか言われてるようなもんかな。
なので、フロントエンドの技術(html / css/ js)だけで、RSSとかの情報取得したりしてねー的なことをしないといけなくなった。
うーん、要はドラクエで言うなら、簡単な呪文は使えるけど、ほぼ素手でたたかえって言われてるようなもんかな。
とりあえず、サイトの体裁を整えるためにまずは、bootstrapのサンプルを改変してベースを作った。
bootstrap便利。http://getbootstrap.com/
あとは、幾つかのアフィリエイトのサイトに登録してパーツを配置。
動画も著作権やアダルト動画を載せる際の調査をして、一通りの知識を得る。
あとは、どんなサイトにするか。
ぱっと思いついたのは、普通のエロサイトよりもページ遷移を無くして、
どんどん動画を見やすいようにすれば、いろんなページから探し出す手間を省けるのではと思った。
なので、構成としては、クリックしてモーダルウィンドウの中で、動画が再生する形に統一。
動画の採取場所はDMMの無料サンプルとXVIDEOSでおｋ。
で、１ヶ月運用してみると、シングルページの弱点を身を持って体験した。
SEOにクソ弱すぎる。
どうしよう流行りのシングルページ（なんちゃって）にしたのに・・・どんどん検索順位が下る。
そこで起用したのがpushState。
jsでURLを書き換える技術。ただ書き換えるだけじゃなく、履歴そのものを作成してくれる。
これをすると、グーグルさんのクローラがシングルページのサイトでもうまいこと動いて順位があがった。
（若干iframeとの挙動で問題はあるが、ないよりまし。まあいける・・・。うん。）
てな感じです。
収益化はまだ全然できてないけど、仕事でサイト作るよりも自由だし、
Webエンジニアはだまって、アフィリエイトしてみるのも面白いかもね。
最近は収益どうこうより、自分が作ったサイトに人が訪問してくれるだけで嬉しくて、
↓まあ抜いていってくだせえ。
◎ START ↓ ● 既存Webサービスはありますか？-yes→● 既存のWebサービスのCSSをいじってスマホ対応しましょう。おわり ↓no ● そのスマホアプリが関係しそうな要素を次の中から選んでください。いくつありますか？ カメラ マイクロフォン 3Dレンダリング スピーカー バイブレーター 加速度センサ GPS BlueTooth NFC 内蔵DB 地図 動画 Push通知 -2つ以上→● ネイティブ一択です。端末ごとにプログラムを書くのは面倒ですが、それを明らかに上回るメリットがあります。おわり ↓1つ ● Webに置いておけば誰でも見ることができるコンテンツを、あえてApp Store、Google Playで配信する理由はありますか？-no→● お察しの通り、Bootstrapか何かを使って普通のWebサイトを作るのが良いと思います。あとでURL教えてね。おわり ↓yes ● そこまで言うなら、PWAが良いと思います。あとで追加機能が欲しいと言われたら、PWAはすぐに捨ててネイティブに移植すること。それができないならあなたの気力が尽きておわり
まじな話をすると、N予備校のプログラミング入門コースやるのがオススメ。
一日8時間勉強時間があるなら、だいたい一ヶ月で終わる内容。
月額1000円だけどしっかり勉強すれば一ヶ月の無料期間中に終わると思う。
もともとN高等学校のノンプログラマーの生徒をWebエンジニアとして就職させるために作られたカリキュラムで講師曰く去年はこれで二人エンジニア就職を決めたらしい。
内容も相当親切に説明していて、プログラミングで何か作るだけじゃなくて、就職に必要な環境構築やセキュリティまでみっちりやる。
で講師が書いてる入門コースで習うことがまとめ。テキスト教材もあるけど授業も1項目を2時間で説明している。授業は週2の生放送とそのアーカイブがある。
↓みたいなことが学べる
----
Web ブラウザとは (Chrome, デベロッパーコンソール, alert)
はじめてのHTML (VSCode, HTML, Emmet)
さまざまなHTMLタグ (h, p, a, img, ul, tableタグ)
HTMLで作る自己紹介ページ (HTMLタグ組み合わせ, コンテンツ埋め込み)
はじめてのJavaScript (JS, ES6, エラー)
JavaScriptでの計算 (値, 算術演算子, 変数, 代入)
JavaScriptで論理を扱う (論理値, 論理積, 論理和, 否定, 比較演算子, if)
JavaScriptのループ (ループ, for)
JavaScriptのコレクション (コレクション, 配列, 添字, undefined)
JavaScriptの関数 (関数, 関数宣言, 引数, 戻り値, 関数呼び出し, 再帰)
JavaScriptのオブジェクト (オブジェクト, モデリング, プロパティ, 要件定義)
はじめてのCSS (CSS, セレクタ, background-color, border)
CSSを使ったプログラミング (transform, id, class)
Webページの企画とデザイン (企画, 要件定義, モックアップ, 16進数カラーコード)
診断機能の開発 (const, let, JSDoc, インタフェース, 正規表現, テストコード)
診断機能の組込み (div, 無名関数, アロー関数, ガード句, truthy, falsy)
ツイート機能の開発 (リバースエンジニアリング, URI, URL, URIエンコード)
LinuxというOS (VirtualBox, Vagrant, Ubuntuのインストール, OS, CUIの大切さ)
コンピューターの構成要素 (ノイマン型コンピューター, プロセス, lshw, man, ps, dfの使い方)
ファイル操作 (pwd, ls, cd, mkdir, rm, cp, mv, find, ホストマシンとの共有ディレクトリ)
標準出力 (標準入力、標準出力、標準エラー出力、パイプ、grep)
vi (vimtutor)
シェルプログラミング (シバン, echo, read, 変数, if)
通信とネットワーク (パケット, tcpdump, IPアドレス, TCP, ルーター, ping)
サーバーとクライアント (tmux, nc, telnet)
HTTP通信 (http, https, DNS, hostsファイル, ポートフォワーディング)
GitHubでウェブサイトの公開 (GitHub, リポジトリ, fork, commit, 情報モラル)
イシュー管理とWikiによるドキュメント作成 (Issues, Wiki)
GitとGitHubと連携 (git, ssh, clone, pull)
GitHubへのpush (init, add, status, インデックス, commit, push, tag)
Gitのブランチ (branch, checkout, merge, gh-pages)
Node.js (Node.js, nodebrew, Linux, REPL, コマンドライン引数, プルリク課題)
集計処理を行うプログラム (集計, 人口動態CSV, Stream, for-of, 連想配列Map, map関数)
アルゴリズムの改善 (アルゴリズム, フィボナッチ数列, 再帰, time, プロファイル, nodegrind, O記法, メモ化)
ライブラリ (ライブラリ, パッケージマネージャー, npm)
Slackのボット開発 (slack, mention, bot)
HubotとSlackアダプタ (hubot, yo)
モジュール化された処理 CRUD, オブジェクトライフサイクル, filter)
ボットインタフェースとの連携 (モジュールのつなぎ込み, trim, join)
同期I/Oと非同期I/O (同期I/O, 非同期I/O, ブロッキング)
例外処理 (try, catch, finally, throw)
HTTPサーバー (Web, TCPとUDP, Webサーバーの仕組み, Node.jsのイベントループ, リスナー)
HTTPのメソッド (メソッド, GET, POST, PUT, DELETE, CRUDとの対応)
HTMLのフォーム (フォームの仕組み, form, input)
HerokuでWebサービスを公開 (Webサービスの公開, heroku, dyno, toolbelt, login, create, logs)
認証で利用者を制限する (認証, Basic認証, Authorizationヘッダ, ステータスコード)
Cookie を使った秘密の匿名掲示板 (Cookie, Set-Cookie, expire)
UI、URI、モジュールの設計 (モジュール設計, フォームのメソッド制限, リダイレクト, 302)
フォームによる投稿機能の実装 (モジュール性, textarea, 303)
認証された投稿の一覧表示機能 (パスワードの平文管理の問題, 404, テンプレートのeach-in)
データベースへの保存機能の実装 (データベース, PostgreSQL, 主キー)
トラッキングCookieの実装 (トラッキング Cookie, IDの偽装, Cookie の削除)
削除機能の実装 (データベースを利用した削除処理, 認可, サーバーサイドでの認可)
管理者機能の実装 (Web サービスの管理責任, 管理者機能の重要性)
デザインの改善 (Bootstrap, レスポンシブデザイン, セキュリティの問題があるサイトを公開しない)
脆弱性 (脆弱性, 脆弱性で生まれる損失, 個人情報保護法, OS コマンド・インジェクション)
XSS脆弱性の対策 (XSS, 適切なエスケープ処理, リグレッション)
パスワードの脆弱性の対策(ハッシュ関数, メッセージダイジェスト, 不正アクセス禁止法, パスワードジェネレーター, 辞書攻撃)
セッション固定化攻撃脆弱性の対策 (セッション, セッション固定化攻撃, ハッシュ値による正当性チェック)
より強固なセッション管理 (推測しづらいセッション識別子, 秘密鍵)
安全なHerokuへの公開 (脆弱性に対する考え方, HTTPの廃止)
Webフレームワーク (Express.js, フレームワーク導入, 簡単なAPI, セキュリティアップデート, Cookie パーサー, ミドルウェア, 外部認証, ロガー)
ExpressのAPI (app, Properties, Request, Response, Router)
GitHubを使った外部認証 (Passport, OAuth)
テスティングフレームワーク (Mocha, レッド, グリーン, リファクタリング)
継続的インテグレーション (CircleCI)
クライアントのフレームワーク (Webpack, Chrome 以外のブラウザでもES6)
DOM操作のフレームワーク (jQuery, jQueryアニメーション, this)
AJAX (jQuery.ajax, クロスドメイン, 同一生成元ポリシー, x-requested-by, CORS)
WebSocket (WebSocket, WebSocketの状態遷移, Socket.io)
RDBとSQL (DDL, DCL, CREATE, DROP, INSERT, DELETE, UPDATE, WHERE)
テーブルの結合 (外部結合, 内部結合, 片側外部結合, JOIN ON)
インデックス (インデックス, 複合インデックス, Bツリー)
集計とソート (SUM, COUNT, ORDER BY, GROUP BY)
「予定調整くん」の設計 (要件定義、用語集、データモデル、URL設計、モジュール設計、MVC)
認証とRouterモジュールの実装 (Mocha, supertest, passport-stub, モックテスト)
予定とユーザーの保存 (セキュリティ要件, UUID, 複合主キー)
予定とユーザーの一覧の表示 (非同期処理, Promise, then)
出欠とコメントの表示 (入れ子の連想配列, Promise.all, 子どもからデータを消す)
出欠とコメントの更新 (Promiseチェイン, リファクタリング)
