フロントエンジニアが3年間チャットワークにメモしてたことを振り返る
チャットワークのエクスポート
チャットワークには標準でエクスポートする機能がないので、以下のサービスを利用しました。 ChatWorkからファイルも含めてログをエクスポートしたいならgoodbye_chatworkだ!KDDI ChatWork対応 - Qiita
原因不明ですが、かなりの投稿が重複していたのと、Deleteも含まれていたので以下の作業を行いました。
- Excelで重複削除
201\d-(.*?)\[deleted]\nを置換- jsonにコンバート
チャットワークにメモを残した経緯
最初の方はブックマークなどを利用していたのですが、あまり見ることがなく、 気になったことは業務で一番利用するチャットワークに保存するようになりました。
なので入社して数ヶ月の履歴はあまり多くありません。
まとまったコードに関してはCacherに保存していました。
経歴
- 2015-05-08 入社
- 2018-06-29 退職
その間にフロントエンドエンジニア→バックエンドエンジニアとなっていますが、
ほとんどがフロントエンドの作業でした。
入った当時のスキルは
- マークアップの経験は0
- レスポンシブコーディングを理解している
- jQueryのプラグインをカスタマイズして独自の機能を追加できる
- WordPressの既存テーマが修正できる
という感じでした。
3年間のチャットワーク一覧
VuePressにもフォーム置ける。
肉球のしたの部分がはぐれメタルっぽくてよい。
AfterEffectで指部分をgooey(ねばねば)感を出したアニメーション
Hover時にセンスある動きを依頼。
SVGファイル
ロゴ(svg)
ロゴ(svg) + テキスト
AfterEffectファイル
動き(ae)
データ(json)
* analyticsアカウント作成
* vue-adsenseの動作確認
> PVが数十倍に増えたので、GitHub PagesからNetlifyへ引っ越しました。Netlifyが快適すぎるので、PVが増える前に早めに移行しておけば良かったです(^-^;)
You are using Node v7.2.1, but VuePress requires Node >=8.
Please upgrade your Node version.
$post_ids = explode( ',', $_REQUEST['ids'] );
explodeは文字列を配列化する
implodeは配列を文字列化する。
遷移前にhistory.replaceStateすれば、スクロールポジション記憶できる。
↑×
chromeはデフォルトでスクロールポジション記憶してくれてるので、urlだけ履歴残しておき、urlをもとに表示する記事数を変更すればよい。
> もしあなたが、幾つかのマーケティングのページの SEO を向上させるためだけに SSR を調べているとしたら (たとえば /, /about, /contact など)、代わりに**プリレンダリング (事前描画)**を使用することをオススメします。
infinite scrollと
ボタンを押してスクロールをするというのは結構違う仕様。
Ajax 読み込み historyとかで検索する。
RewriteRule ^column.* /blog/column/($1) [R=302,L]
RewriteBase /
RewriteCond %{REQUEST_FILENAME} !^(.*)\.(gif|jpg|jpeg|png|css|js|pdf|log)$ [NC]
RewriteRule ^column.* /blog/column/($1) [L]
{{ number_format($item['total_price_tax']) }}
https://www.chatwork.com/#!rid32663466-1003474361740468224
Eloquentのallメソッドはモデルテーブルの全レコードを結果として返します。Eloquentモデルはクエリビルダとしても動作しますのでクエリに制約を付け加えることもでき、結果を取得するにはgetメソッドを使用します。
$flights = App\Flight::where('active', 1)
->orderBy('name', 'desc')
->take(10)
->get();
Tip!! Eloquentモデルはクエリビルダですから、クエリビルダで使用できる全メソッドを確認しておくべきでしょう。Eloquentクエリでどんなメソッドも使用できます。
テストと本番で違うものは基本的に.env、wp-configで管理する。
難しい場合は.gitignoreで監視外にする。
> Vue2 + vuex + vue-router + webpack + ES6 / 7 + fetch + sass + flex + svg
: → Goto Line(指定した行番号へ移動)
@ → Goto Symbol(functionや、CSSセレクターなどをシンボルとして検索)
# → ファイル内検索。他の検索機能とは違い、入力に対する候補一覧が表示
public function store(Request $request)
> 依存注入により、現在のHTTPリクエストインスタンスを取得するには、タイプヒントでIlluminate\Http\Requestクラスをコントローラーのコンストラクターかメソッドに指定します。現在のリクエストインスタンスが、サービスプロバイダーにより、自動的に注入されます。
> シャツ
> チェックシャツ
> ボタンダウンシャツ
> という検索フォームがあったとして、シャツと選び検索したとします。
> わかる方はわかると思いますがこの場合、チェックシャツとボタンダウンシャツというパラメータがつい> た投稿も引っかかってしまいます。
storeパターンとwatchで無理やったらあきらめる。
他のやり方もありそうだが、ややこしい。
イベント、$('#a').click(function(){console.log(1)})
setTimeout、setTimeout(function(){console.log(2)}, 1000);
Ajaxのcomplete
文章が好きか、プログラムが好きか。
> これはほんの1例だが、私も含めてエンジニアが立てる企画のほどんどはシステム設計指向でコンテンツに対する考えがスカスカのが多い。コンテンツはシステム設計よりも優先して考えるべきことなのだ。
現在は1回ダウンロードするとフィル名のsessionを削除するので1回のみ。
session + $fingerを使用すればデバイス判定も行われるので、より強固なセキュリティとなる。
バック技術の知識のアウトプットの時間(4h)を毎週確保する。(求人にもなる。)
> 一緒にVue.jsを書きたい方、ぜひお待ちしております!
https://qiita.com/acro5piano/items/eb29f13b82f386220460
https://www.ritolab.com/entry/88
・確認画面
(ボタン・hiddenは確認画面に出力されないように。)
・完了画面
twitterカードとOGP対応していない。
20180424.md参照
・パラメーターにより、タイトル・テキストが異なる。
・フォームの項目は同じ。
・thanksページへは直接たどり着けない。(mw formいけるか?)
FAX送信自動化できる。
業務のFAX送信完了、購入完了とかはSlackですべて通知するのがよさげ。
> Eloquent はallやget以外にも色んな形で結果を返すことができ、それらはIlluminate\Database\Eloquent\Collection インスタンスとして返ってくる。
> ポリモーフィック関係の多対多
ポリモーフィックリレーションはあるモデルを一つの関係だけで、複数のモデルに所属させるものです。
> saveとcreateの違いはsaveが完全なEloquentモデルを受け付けるのに対し、createは普通のPHPの「配列」を受け付ける点です。
多:多のファクトリー
> 画像ファイル名 + ディレクトリ名で保存がよさげ?
sku_imagesはディレクトリ決まってるので、ファイル名だけでいいかも。
フォーム内では分けたほうが分かりやすいが、DB登録はaddressだけのほうがいいのでは?
> 登録&編集などのフォームからの保存で使用するので、フォームの形式に合わせたほうが使いやすい。
> randomElement(array)でこちらで用意した配列から生成可能。社内独自コードなどを利用する際に便利。
ISBN: 書籍
ASIN: 書籍以外
> 置換するのが大変そうなので、ファイル名のみがよさげ
https://qiita.com/keitakn/items/1a43d53e9c3b422ec5ef
> 何かを print 文やデバッガの式に書きたくなったときは、 代わりにその内容をテストに書くようにするんだ。
webpackでトランスパイルする際、エントリポイントからの相対パスで見るので、Storybook を導入する際や、ディレクトリ構成がズレた際に全てズレるし、醜いからです。
webpackのpath resolve機能を利用し、 @/src/components/user-profile みたいに書けるようにしましょう。
可読性がグッと上がります。
https://qiita.com/noplan1989/items/9ce7d6a04ffb82755ae1
そもそもvagrantで立ててるサーバーがホスト(win)のアドレスを10.0.2.2と認識してないかも。
PHPのcurlでアクセスできたので↑嘘。
見た目変更できるのか。
Laravelにcmsフォルダ(wordpress)を入れる
・Laravelの.htacessではトレイングスラッシュを削除する
https://qiita.com/bitnz/items/400bb6a0b124b8b3d398
php
npm
curlのインストール、パス設定
C:\Windows\System32\WindowsPowerShell\v1.0
$slider.slick('slickGoTo', 3);で特定スライダーへ移動
mobileFirst: true,
(コメントの存在をトリガー?)
スタイルは新機能で追加したの分のが全てで読み込む必要があるのでok
他のプラグインではどう読み込んでるか確認
> WordPressやMovableTypeなど、様々なタイプのブログに導入できる。
1. ヘッダーでjquery読み込み
2. ヘッダーraty読み込み
3. フッターでjquery読み込み
4. 実行 document.addEventListener('DOMContentLoaded', function() {});
DOMContentLoadedの実行順が最後なのでその前に2度目のjqueryが読み込まれてしまうのが問題っぽい
add_action( 'wp_footer', array( $this, 'script' ) );
add_action( 'wp_footer', array( $this, 'wp_enqueue_styles' ) );
add_action( 'wp_footer', array( $this, 'wp_enqueue_scripts' ) );
# 下階層全てのフォルダ内で ".uploads" ファイルを無視したい
*/wp-content/uploads/
# カレントディレクトリの.htacessのみ
/.htaccess
・仮想環境 -> FTPアップ時間ロス
・bitbucket運用 -> 自信ない
・全体システム把握(サイトマップ) -> 最初に確認する時間必要
・同時並行(コーディング外注・あてこみ 差異が発生してた) -> スケジュール遅れる
[qt][qtmeta aid=1355724 time=1519182792]スケジュールずらせますか?
コーディングのチェック終わった状態で作業進めたいです。[/qt]
・bitubucketのgitignore設定 -> 自信ない
・本アップ手順書作成 -> 必須
【コード】
・body_id, page_idの管理
・メタ情報の管理
php artisan vendor:publish --tag=laravel-paginationこれがエラーで実行できない。
APP_ENV=productionAPP_DEBUG=false
ステージング環境の場合
APP_ENV=stagingAPP_DEBUG=false
テスト環境の場合
APP_ENV=testingAPP_DEBUG=true
ローカル環境の場合
APP_ENV=localAPP_DEBUG=true
・フロントがまず全パターンのコーディングを行う(Ajax含む、Ajaxのデータはバックが用意)(どうしても同時並行の場合はバックに工数を確保する)
・フォームやアップロードのマークアップはバックに確認する。(後回しにされた場合はバックが回収する)
テキストエリアをtopからのpositionfixedでおいてやればよい。
javascript:(function()%7Balert(navigator.userAgent);%7D)()
mjはコンテンツ部分のみスクロールにする必要がある。
https://www.google.co.jp/search?q=%E7%AE%A1%E7%90%86%E7%94%BB%E9%9D%A2+vue&oq=%E7%AE%A1%E7%90%86%E7%94%BB%E9%9D%A2+vue&aqs=chrome..69i57j0.4999j1j7&sourceid=chrome&ie=UTF-8
vue-autosize
https://github.com/mage3k/vue-autosize
式に通常の属性をバインディングする。
idに変数を設定する
親->子に変数を渡す
form の input 要素 と textarea 要素で双方向 (two-way) データバインディングを作成するには、v-model ディレクティブを使用することができます。
※dataで宣言必要
windowサイズ変更でレイアウト調整できるのがないか。
nodist最新にアップデート
npm run devでエラーでたので、npm rebuild node-sass
npm run hot
http://localhost:8080/
▼その他のプロジェクトのgulpが動かなくなった。
Error: Couldn't resolve version spec %s: %s
C:\Program Files (x86)\Nodist
.node-versionファイルを削除
動画
https://qiita.com/Mon_chi/items/7541bc1ca02ab85d5874
http://elastic-info.jp/php/2016/12/03/laravelfacade/#LaravelFacade
View::share([
'cart_num' => count($item),
'body_id' => 'cart',
'login' => $login
]);
view側でこれで判定できる。
@if(isset( $login ))
ログイン中
@else
非ログイン
@endif
view側でauthクラスを直接使うこともできる <- ファサードを使ってるのでuse Auth 書かなくても使える?
@if(Auth::check())
ログイン中
@else
非ログイン
@endif
サービスプロバイダー + ビューコンポーザー
$item = Cookie::get('cart', []);
でカートの配列を取得しようとするも、ミドルウェアの処理前なので暗号化されており、配列で取得できない。
テンプレートの入っているフォルダ名を取れれば動的にあてれる。
Providers/***.php
public function boot()
{
// home default view composer
View::composer('index.index',function($view){
$view->with('page_id','home');
});
// 404 default view composer
View::composer('errors.404',function($view){
$view->with('page_id','page404');
});
}
または、ViewComposer
リモートの最新情報取得
git branch -a
* master
remotes/origin/develop
remotes/origin/master
ブランチを確認
git merge --allow-unrelated-histories origin/develop
リモートを現在のbranchにマージ
git branch origin/test
新規ブランチ作成
リモートにpush
Route53 -> ロードバランサー(RB) -> ターゲットグループ(TG) -> インスタンス
・Route53がRBを向いているか
・RBのリスナーのルールがTGになっているか
・TGのターゲットがインスタンスになっているか
・インスタンスのセキュリティが適切か
503 ロードバランサー関係の設定ミス(静的ファイル見れない)
504 DB接続ミス(静的ファイル見れる)(インスタンスのセキュティの設定が間違っている)
RDSがIP制限してる可能性がある。
153.142.97.59で制限していた。HeidiSQLから参照出来てawsから参照できなかったのはそのため。
このプログラムとjsでできることは何が違うのか。
Yelpと連携したらおもしろいかも。
https://www.airbnb.jp/s/%E4%BA%AC%E9%83%BD/homes?checkin=&checkout=&adults=1&children=0&infants=0&source=mc_search_bar&sem_keywords=airbnb&s_tag=V5s7Fvr5&allow_override%5B%5D=
その他
これ見る限りnonce csrfなさげ?
質問投げる。
https://engineeringblog.yelp.com/2017/06/upcoming-deprecation-of-yelp-api-v2.html
Yelp/yelp-fusion(本家)
https://github.com/Yelp/yelp-fusion
本家のはassertでエラーがでた。assertはphp7以上?
yelp fusion(非公式)
https://github.com/Yelp/yelp-fusion/blob/master/fusion/php/sample.php
トグル系
db-security (sg-17691e73)
db-security (sg-17691e73)
更新処理は全て実行される or 全て実行されない
状態で終わることを保証する性質。
$( '.mw_wp_form input[type="submit"]' ).click( function() {
console.log("click");
var formElement = $( this ).closest( 'form' )[0];
if ( formElement && formElement.checkValidity && !formElement.checkValidity() ) {
return;
}
if ( mw_wp_form_button_no_click ) {
mw_wp_form_button_no_click = false;
} else {
$( this ).prop( 'disabled', true );
}
} );submitボタンをdisableに。
//送信ボタンが画面にはいったタイミング
//最後のフォームのkeyup or focusoutのタイミング
◎全ての必須項目にフォーカスがあたったら
↓
バリデーションチェック
↓
okなら submitボタン disable無効
validate jqueryのカスタム
復習
・mwが二重送信防止しているので、jsでバリデートをくりっく以外で?
・エラーメッセージの位置。
本番に合わせて10に変更した。
無事画像反映。
jsのバリデーションをあてはめるだけ。
`plan_type` = '1' AND `service_type` LIKE '%,10,%' AND `disp_flg` = '1' AND `status` = '1' AND `valid` = '1'http://kray.jp/blog/git-pull-rebase/
https://readouble.com/laravel/5.1/ja/requests.html
・withInputメソッドをリダイレクトにチェーンして簡単に、入力をフラッシュデータとして保存
・oldを使って直前の直前のリクエストのフラッシュデータを取得する
もしくはSessionを使用する
http://elastic-info.jp/php/2016/05/17/laravel5%E3%81%A7%E3%83%95%E3%82%A9%E3%83%BC%E3%83%A0%E7%A2%BA%E8%AA%8D%E7%94%BB%E9%9D%A2%E3%82%92%E6%A7%8B%E7%AF%89%E3%81%99%E3%82%8B/
oldは直前のフラッシュデータなので更新したら消える。
Arrow Functionでthisを解決
export default class Chat {
constructor(opts={}) {
this.form = opts.form;
}
setSize() {
let fh;
fh = this.form.outerHeight();
}
$('textarea').each(function(){
autosize(this); // thisはtextarea
});
$(window).on('chat-submit',()=>{
this.setSize(); // thisはインスタンス自身
});
}・急変した日にツールチップ(アイコン)を設定でき、クリックでライトボックス表示
・ライトボックスは個人のツイートやIRニュース・日経記事などを表示
setTimeout( (function () { self.addClass(`is-${animations[i]}`) }()) , delayTime);
http://ashinoyoshi.tumblr.com/post/121965669616/multiblog
new $.ImgLoader({ でもなぜか通るようになった。
> functionという文字が行の先頭にあるかどうかという点です。行の先頭にあればそれは関数宣言(関数の文)となり、それ以外であれば関数は式となります。
> +function() { alert('これでも即時関数です。実はカッコである必要はないのです');}();
> (function() {alert('関数呼び出しの演算子である( )をくっつける');})(); <- 一般的な呼び出し方
事前レンダリングに対応しているブラウザはChromeと、IE11です。
IEは最新版での対応ですが、Chromeはかなり以前、13から対応しています。
.mp4追加して、Add To Queue。開いたダイアログでstart
そのため、MP4BOX(http://www.videohelp.com/tools/MP4Box)のようなアプリケーションでメタデータを書き換える必要あり。これを行うと、iPhone/iPadでも、Androidでも、PCの各種OSでも再生できる動画になる。
=>ローカルにconst TEMPLATEPATHを宣言。
画像パスはhttpsの関係からget_stylesheet_directory_uri()を使う
=>ローカルにget_stylesheet_directory_uri()を作る。home_url()も同様
その他の変数はglobal宣言を関数ごとに記述
=>
function mod_cv() {
$html = file_get_contents(TEMPLATEPATH . '/inc/mod_cv.php');
return $html;
}
add_shortcode('mod-cv', 'mod_cv');
http://www.a-tm.co.jp/news/
archive-{post_type}.php・・・メインループが使える。固定ページからメタ情報入力する場合、IDは静的で取得する必要がある(archiveページで固定ページのidが分からない為)。taxnomyページもまとめてメタ情報を設定できる。
カスタムテンプレートファイル(固定ページで指定したテンプレート)・・・固定ページでメタ情報が設定できる。taxonomyページは別。カスタムループの記述が必要。 <- CPT UIのアーカイブありをFALSE にしてこっちの設定のほうがいいかも。そもそもtaxonomyページはキーワード設定する必要ないし。
(CPTUIだと、「別の投稿タイプ名を選んでください。faq は既存のページスラッグと一致し、競合する可能性があります。」がでるので少しめんどくさい) 固定ページはページ送りもOK
固定ページで指定したテンプレート > page-{slug}.php 確認済み
↑CPT UIの アーカイブありTRUE/FALSEも関係あり。
アーカイブありTRUEにした場合は archive-.phpでarchive判定が行われる。
falseにしていた場合はarchive-.phpでもis_page判定が行われる。
https://blog.maromaro.co.jp/archives/1362
>特に困るのが、タグ一覧やカテゴリ一覧などのアーカイブページではディスクリプションなどのメタタグを出力してくれない点です。
SEO的に一覧ページはクロールが巡回してくれない方がいいのでそのような仕様になっているのですが、一覧ページが固定ページのように機能していたり、そのページをユーザーがfacebookやtwitterなどのsnsで共有してしまう可能性があるなど、メタタグを出力したいケースはままあります。
・カスタムフィールドで関連付ける場合は一方向(双方向もできるが設定が2倍)
・タクソノミーで関連づける場合は双方向
▼タクソノミーで関連付ける場合
・記事にタクソノミーページがある場合(他の投稿タイプのタクソノミーを記事に関連付ける必要があるので)
・登録数が多く、自動で関連づけたい場合。
▼ACF
・上記以外の場合、または
・特定の記事を指定したい場合
上層からエラーがでるか調べ、でるところとでないところの境目を見つければよい。
以下のようなクエリーでは取得できなかったので
.jp/?party_category=party_wakayama&party_high
.jp/party_category/party_high/?osaka
の?osakaで判定してクエリを条件分岐して取得した。
参考サイト: 【WordPress】人気の記事をどこにでもランキング表示できるプラグイン - WordPress Popular Postsの使い方 | WordPress College http://wordpresscollege.org/plug-in/wordpress-popular-posts/#ixzz4hQaNuHqY
http://wordpresscollege.org/plug-in/wordpress-popular-posts/
http://www.lottiefiles.com/?page=5
自動トランジションモードを解除するには?
アニメーション?キーフレーム補助?シーケンスレイヤー の トランジション:オフ
エムハンドのアイコンをマスクするには?
2. フッテージに移動する
3. 右クリック -> ベクターレイヤーからシェイプ作成
http://pannyatto.firebird.jp/archives/525
http://www.turnjs.com/#samples/magazine2/10
https://tympanus.net/Development/BookBlock/index2.html
指示の動きに似ているから
http://www.dascorp.co.jp/
そこにイラレのデータをコピペ
TweenLite.to(ターゲット, 秒数, プロパティ値);
http://codepen.io/shivasurya/pen/FatiB
http://codepen.io/syedrafeeq/pen/rcfsJ
http://codepen.io/tamak/pen/zrvwza
http://codepen.io/vsync/pen/dlwgj
http://codepen.io/hrtzt/pen/JdYaEZ
↓
画像をリネーム
↓
webブラウザに一括アップ、名前順でスプライト化、animation cssと同時に出力し、
スマホでも背景動画を使えるツールの作成
photoshop大きいサイズの画像はweb用に保存は使えない。
書き出し形式から保存する(時間かかる
15MB以上(69MBのpngで確認)だとiPhoneブラウザでクラッシュを確認。
mhFormはデフォルトでlabel要素。
label要素にクラスを付けたいならjsでやるのがベスト
よって3ページぺは404となる。
なので管理画面の設定記事数以上のパラメーターを設定してやればよい。
'posts_per_page' => 10
ページャーはquery_postsの'posts_per_page' を見るが、ページの表示するリライトはページ表示時のクエリーに影響することを押さえておく。
なのであえてメインクエリーを書き換える、query_postsを使うとうまくいく。(wp_queryでうまくいくならそれでよい)
なのでurlから取得する。
$post_types = array('event', 'information', 'store', 'staff', 'blog'); // [request]のwp_posts.post_type参照
$server = $_SERVER['REQUEST_URI'];
$uri_array = explode("/", $server);
$post_type = "";
if( in_array( $uri_array[1], $post_types ) ) { // test: /cms/event/
$post_type = $uri_array[1];
}elseif( in_array( $uri_array[2], $post_types ) ) { // honban /event/
$post_type = $uri_array[2];
}else {
echo "エラー";
}
echo "post_type = ". $post_type . "
";
/tax_area/fukushima/
taxonomy-tax_area.php or taxonomy.phpでアクセス。
テンプレートはイベントごとにことなるので、
リライトルール設定後
/event/tax_area/fukushima
url
post get_query_var('post_type')
商品レビュー投稿(E1-1)
・よろしければ「確認」する -> よろしければ「確認する」
商品レビュー投稿確認(E1-2)
・戻る矢印逆向き
商品レビュー投稿完了(E1-3)
・オレンジボーダー不要
http://www.pic-web.jp/blog/entry/googleyahoo.html
> 無料の基本検索エンジンの広告を無効にする
> 無料のカスタム検索エンジンで広告を無効にするには、米国内国歳入法の第 501 条(c)(3)項で免税が認められている団体にサイトが属している必要があります。米国外では、その国の法律で規定される公益法人が該当します。
http://challonge.com/ja/tournament/bracket_generator
https://wordpress.org/plugins/tournament-bracket-generator/
http://detail.chiebukuro.yahoo.co.jp/qa/question_detail/q1225663892
wp_list_comments( );は、 このタグでないと動かないらしいのです!
wp_footerで読むのが間違いなさそう。(標準のjquery消してる人対策)
http://www.phppro.jp/qa/4576#16373
http://phpspot.net/php/man/php/function.array-walk-recursive.html
http://gigazine.net/news/20170209-stackoverflow/
http://arimo.hatenablog.com/entry/icheck_radio_notwork
http://bashalog.c-brains.jp/11/02/09-111331.php
http://welcustom.net/comment-rating-field-plugin-customize/
https://github.com/thingsym/multi-device-switcher
茨木広告宣伝舎でもWordPressで商品紹介と集客を行い、購入はBASEに誘導するというウェブサイトを制作しています。WordPressからBASEの遷移をスムーズに行えるようにカスタマイズしています。
$post_type = get_post_types( array('public')=>true ) );
attachementを除く
$post_type = wp_list_filter( get_post_types(array('public'=>true)),array('attachement'), 'NOT' );
http://qiita.com/yoskmr/items/052b21adf29cfd97efcc
http://qiita.com/circled9/items/6f6eb1ae3478b7df4263
https://liginc.co.jp/web/tool/other-tool/70907
ボタンのモジュールのcssをfix
Welcartの案件増える[/task]
http://qiita.com/gatespace/items/e30f4749d089fd67184f
http://qiita.com/gatespace/items/cdff541981f7cffddfab
http://qiita.com/gatespace/items/324a037dd241ee908dd8
WordPress ローカルサーバー?テーマ・プラグイン構築 オレオレ環境 2016年版
http://qiita.com/gatespace/items/f540451d3b8706dafed8#_reference-976ffd8ab76f2138183b
http://fooplugins.github.io/FooTable/
photoshoからsvg その時に正方形にしておく。
イラレで複合パスの場合はパスファインダーから複合をする
http://black-flag.net/jquery/20121010-4227.html
//transition: duration property timing delay
transition: 1s border $ease-out-quad 0s,
//animation: name duration timing delay count direction;
animation: test 4.2s ease 0 infinite;
animation: movie 4.2s steps(49) 0 infinite; 無限
animation: movie 4.2s steps(49) 1s 1 alternate; movieを1回実行、逆再生実行
//both アニメーション再生後100%のスタイルが適用される。
animation-fill-mode: both;
@keyframes movie {
100% {
background-position: 0 0;
}
}
https://ics.media/entry/14687
H2MDライブラリ
https://h2md.axell-embedded.com/
http://kazzkiq.github.io/balloon.css/
ログイン時のパスワードをSSL無しで暗号化してくれるプラグイン。
http://so-zou.jp/web-app/text/encode-decode/
http://blog.webcreativepark.net/2015/12/24-221725.html
グローバルインストールするとここに入る。
C:\Program Files (x86)\Nodist\bin\node_modules\gulp-sass\node_modules\node-sass
2、ついでにnodistからnodeのverをあげる
3、ついでにnmpのverもあげる http://qiita.com/yokoh9/items/4ea3fa0e24623e53fc69
4、node-sassをリビルド
npm rebuild node-sass
http://www.nxworld.net/tips/15-useful-css-snippets-in-form-style.html
http://itnow.blog.jp/archives/1021508835.html
http://www.seleqt.net/programming/web-font-foic-fouc/
CSS: marginの正しい理解
http://kojika17.com/2012/08/margin-of-css.html
entryBody内の要素はmargin: 1em 0;とかで上下に相殺すればよかった・・。
http://hapisupu.com/2015/09/wordpress-editor-visual-text-switch-tag-erase-fix/
sticky_postsはカテゴリではきかないので一覧から表示しない設定したうえで
sticky_postsだけを表示してやればよい。
if ( $query->is_tax('cat_knowledge') ) {
$sticky = get_option( 'sticky_posts' );
$query->set('post__not_in', $sticky );
}
カテゴリーベースに . をいれることで
ページ送りもできるようになるはず。
add_filter('term_link',
のところをちゃんと理解してなかった。
↓
ただし、これだけだとテンプレートタグの が返すリンクは変更されません。
ここも手当てしてやるには、さらにこんな感じで term_link フィルタもフックしてあげましょう。
https://dogmap.jp/2011/04/21/change-category-link-to-different-link/
http://kachibito.net/useful-resource/herbert
WordPressでjQueryを使うときに、問題なく動作させる為の基礎知識やTipsと、動かない場合の対処例
http://kachibito.net/web-design/wordpress-with-jquery.html
http://hijiriworld.com/web/mvc-concept/
http://on-ze.com/archives/5580
https://blogs.adobe.com/creativestation/web-learning-emmet-snippets
http://kiyotatsu.com/web44/
https://havelog.ayumusato.com/develop/others/e613-concat_build_pattern_examples.html
http://hokaccha.github.io/slides/javascript_design_and_test/
http://takahashifumiki.com/web/programing/3512/
WordPress等のCMSがjQuery等を出力するとき、browserifyで上手いことやる。
https://torounit.com/blog/2015/07/29/2019/
wpで管理できるように。
https://liginc.co.jp/web/wp/customize/154374
2.Webサーバーに接続する
3.データのリクエストをする
4.サーバーからの返事を待つ
5.返事が返ってきたらダウンロードする
https://app.codegrid.net/entry/datauri-basic
https://liginc.co.jp/designer/archives/6869
http://mimpiweb.net/blog/seo/faster-image-load/#check3
tree /f > tree.txt
https://tukumemo.com/mq-scrollbar-width/
$('対象').offset().topで取得できる高さがスクロールにより細かく変動する。(ページ更新時は激しく変動する)
-対策
$('対象').offset().top - $('scroll-body').offset().top で取得すればよい。
スクロールしたあたいをもとにボックスをtranslatedでアニメーションさせる。
requestId = window.requestAnimationFrame(render);
TweenLite.to($scroll, 0.6, {
y:-windowTop
});
この処理だけでなめらかスクロールできるっぽい
http://lempens-design.com/
http://codepen.io/jacquelinclem/pen/udnwI
http://codepen.io/ImagineProgramming/pen/qdZWag
http://codepen.io/ykob/pen/YGXJZq
text-align: justify;
text-justify: inter-ideograph;
WebKit系ブラウザ(Chrome/Safari)で両端揃えはできないの?jQueryで検証してみた
chromeはそろえれない。
http://dotinstall.com/lessons/basic_threejs_v2
一番上におきたいときはtop: 0px;を指定する
HamlだのMarkdownだのSlimだのJadeだのSassだのSCSSだのLESSだのStylusだのCoffeeScriptだのLiveScriptだの
http://archiva.jp/web/html-css/web-typography.html
http://codepen.io/timbrown/pen/akXvRw
http://codepen.io/nickawalsh/pen/OydYWM
http://codepen.io/nickspiel/pen/LpepvQ
http://codepen.io/andyfitz/pen/akAKdV
http://codepen.io/jh3y/pen/pbrBZk
http://codepen.io/bennettfeely/pen/wWVZAW
http://nskw-style.com/2012/wordpress/plugin/posts-2-posts.html
ログインユーザに、「お気に入りページ」を持たせる
ログインユーザーとページの紐付け
http://coliss.com/articles/build-websites/operation/work/free-svg-tool-svgsus.html
https://creativeweb.jp/manga/graphics/page3
http://miz2403.com/sketch-koneta/
http://united-nagoya.hateblo.jp/entry/2016/07/23/141944
http://shimz.me/blog/google-map-api/4063
https://developers.google.com/maps/documentation/javascript/customoverlays?hl=ja
GoogleMapで任意の県に色をつける方法
https://tigawa.github.io/blog/2014/03/15/googlemap-shape/
バラバラに並んだたくさんのレイヤーをすべて選択し
移動ツールの「整列」→「垂直方向中央」と進みます。
http://daredemopc.blog51.fc2.com/blog-entry-802.html
googlemap display:none 問題
https://www.softel.co.jp/blogs/tech/archives/4069
http://www.nxworld.net/wordpress/wordpress-plugins-for-developers.html
Code Snippets - functions.phpのPHPコードを管理できるWordPressプラグイン
http://netaone.com/wp/code-snippets/
http://loumo.jp/wp/archive/20141206000043/
http://theorthodoxworks.com/web-design/drop-down-menu-multi-css/
https://developers.google.com/maps/documentation/javascript/controls?hl=ja
https://developers.google.com/maps/documentation/javascript/examples/control-positioning?hl=ja
http://codepen.io/bill-riley/pen/QEYApy
http://codepen.io/ninili/pen/grEokV
http://codepen.io/brycesnyder/pen/yJWgjQ
http://org-rabo.com/javascript-library/
http://sterfield.co.jp/demo/ninomiya/90/
on('click')かかない。反応がおそいから。
・visiblityが便利
・スマホはmouseenter、PCのホバーもmouseenterで
@media screen and (min-width: $wPc) {
a[href^="tel:"] {
pointer-events: none;
}
}
http://tech.respect-pal.jp/web-scraping/
┗■ PJAXのサイト
└────────────────────────……………‥‥‥
・https://www.trefectamobility.com/about/vision/
http://www.tyo-id.jp/
'post_type' => 'news',
'posts_per_page' => 5,
'order' => ASC,
'orderby' => 'meta_value',
'meta_query' => array(
'relation' => 'OR',
array (
'key' => 'date',
'value' => date('Y.m.d'),
'compare' => '>=',
'type' => 'DATE',
),
array(
'key' => 'date_last',
'value' => date('Y.m.d'),
'compare' => '>=',
'type' => 'DATE'
),
),
);
$the_query = new WP_Query($args);
if($the_query->have_posts()): while($the_query->have_posts()): $the_query->the_post(); ?>
https://github.com/frontainer/frontnote
・孫以上の固定ページは出力されない。(カレントの親ページまで。)
┗■ RSS登録するブログ
└────────────────────────……………‥‥‥
・https://torounit.com/blog/
・https://firegoby.jp/
・http://hijiriworld.com/web/
・https://dogmap.jp/
・http://nskw-style.com/feed
┗■ パンくず修正について
└────────────────────────……………‥‥‥・
・毎回静的な修正が必要 <- めんどくさい
・パーマリンクいろいろ変更してる場合プラグインのパンくずは動かなさそう <- うごいてた。
・構造化マークアップに対応してない <- preg_replace。
・以下preg_replace()
http://yamatonchu.hateblo.jp/entry/2016/06/24/%E4%BD%9C%E6%A5%AD%E7%94%A8%E3%83%A1%E3%83%A2%EF%BC%9APHP_%E6%AD%A3%E8%A6%8F%E8%A1%A8%E7%8F%BE%E3%81%A7%E6%96%87%E5%AD%97%E5%88%97%E3%82%92%E7%BD%AE%E6%8F%9B%E3%81%99%E3%82%8B%E9%96%A2%E6%95%B0preg_repla
http://smkn.xsrv.jp/blog/2011/09/2-points-of-regular-expression/
http://www.1ft-seabass.jp/memo/2011/09/26/php-url-preg_match-trouble-recover/
http://www.warna.info/archives/1310/
プラグインじゃないver
http://www.warna.info/archives/757/
http://www.warna.info/archives/723/[/task]
http://www.transformicons.com/
http://82nd-and-fifth.metmuseum.org/
https://www.sweetpunk.com/
https://bita.jp/dml/firedrop-ai
シングルクオーテーションで囲まれた文字列の中で、文字として「'」を記述したい場合はエスケープシーケンスを用いて「'」の代わりに「\'」と記述します。そして1つだけですが「\」記号はシングルクオーテーションの中でも特別な意味を持つため「\」と言う文字そのものを記述するには「\\」と記述します。
print '出身地は\'大阪\'です';
https://book.mynavi.jp/wdonline/detail_summary/id=44005
https://ics.media/entry/7162
http://qiita.com/st5757/items/663f17756d61aa8e8ea3
https://itunes.apple.com/jp/app/sumachuu/id993566417?mt=8
http://www.0shiki.jp/entry/moment/
起動したアプリ入力キー、ふりっくとかも記録できればgood
http://waka8s.com/archives/wp4android-imgup-possible/
http://contactform7.com/ja/selectable-recipient-with-pipes/
http://jgthms.com/web-design-in-4-minutes/
https://www.amazon.co.jp/%E3%83%87%E3%82%B6%E3%82%A4%E3%83%B3%E3%81%AE%E6%95%99%E5%AE%A4-%E6%89%8B%E3%82%92%E5%8B%95%E3%81%8B%E3%81%97%E3%81%A6%E5%AD%A6%E3%81%B6%E3%83%87%E3%82%B6%E3%82%A4%E3%83%B3%E3%83%88%E3%83%AC%E3%83%BC%E3%83%8B%E3%83%B3%E3%82%B0-%E4%BD%90%E8%97%A4-%E5%A5%BD%E5%BD%A6-ebook/dp/B01BBBZJIY?ie=UTF8&redirect=true&ref_=nosim&tag=coliss-22
http://whiskers.nukos.kitchen/2014/11/04/sketch-links.html
http://www.slideshare.net/asamieee7/sketch-50764516
http://kaorahi.bitbucket.org/shaker/
分かりやすい行列:http://wiki.fdiary.net/lacs/?GifAnimation
http://qiita.com/ANTON072/items/a1302f4761bf0ffcf525
https://app.codegrid.net/entry/snapsvg-1
http://www.tam-tam.co.jp/tipsnote/javascript/post8876.html
http://enum-kabu.com/blog/post-1883/
http://www.h2.dion.ne.jp/~defghi/snapsvg/snapsvg.xhtml
[hr]https://creativeweb.jp/Manga/graphics/page3
http://takabo.net/2011/04/28/rss-timeline/
http://detarame.moo.jp/2011/03/01/%E8%A4%87%E6%95%B0%E5%A4%96%E9%83%A8rss%E3%83%95%E3%82%A3%E3%83%BC%E3%83%89%E3%82%92wordpress%E3%81%A7%E8%A1%A8%E7%A4%BA/
http://on-ze.com/archives/2636
http://codepen.io/AllThingsSmitty/pen/MyqmdM
http://codepen.io/wwwebneko/pen/RRQKzZ
function shortcode_templateurl() {
return get_stylesheet_directory_uri();
}
add_shortcode('themePass', 'shortcode_templateurl');
// Contact Form 7 にショートコードを追加
function get_mytheme_url() {
wpcf7_add_shortcode( 'wpcf7_themePass', 'shortcode_templateurl' );
}
wpcf7_add_shortcode('wpcf7_init', 'get_mytheme_url');
http://coliss.com/articles/build-websites/operation/javascript/javascript-best-2016-july.html
https://github.com/terwanerik/ScrollTrigger
https://www.sakura.ad.jp/press/2016/0629_morisawa/
ID) ): ?>
ID, 'pic1000' ); ?>
https://unsplash.it/1000/550?image=">
https://firegoby.jp/archives/5657
http://knowledge.sakura.ad.jp/tech/2488/
http://www.lempens-design.com/#
http://lab.sonicmoov.com/development/animation-library-tweenmaxjs/
課金コンテンツ内では有料
http://un-tech.jp/tweenmax-started/
http://codepen.io/rgg/pen/WrKyzj
http://codepen.io/oknoblich/pen/wFGIH
http://codepen.io/abergin/pen/ihlDf
http://codepen.io/tonkec/pen/jWmgqN
http://codepen.io/jordanlachance/pen/yOJdRr
http://codepen.io/mallendeo/pen/xVXrYR
http://codepen.io/havardob/pen/RajdNR
http://codepen.io/florian-wirtz/pen/vjBxF
http://codepen.io/karlovidek/pen/aNYWKE
# BEGIN WordPress
RewriteEngine On
RewriteBase /
RewriteCond %{REQUEST_URI} !(^/btob/)
RewriteRule ^index\.php$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.php [L]
https://teratail.com/questions/30718
https://ja.forums.wordpress.org/topic/24460
/btob/ 以下のリクエストがきたとき、リライトしない設定をしたい。
/ でリライトを行わないので、/btob/のhtacessを次にみるはずだが、 / でリライトを行い404ページへ遷移している。
考えられる原因:
rewriteが効いている。(指定が間違ってて、/btob/以下が除外されてない。)
htaccessが反映されていない。(リネームしても正常にリライトを行っていたので。)
http://codepen.io/xhepigerta/pen/XdGarQ
http://codepen.io/takaneichinose/pen/QNogMg
http://codepen.io/alexerlandsson/pen/ONqdZY
http://codepen.io/THEORLAN2/pen/MyzWNw
http://codepen.io/tonkec/pen/gryZmg
http://codepen.io/fixcl/pen/WxeObg
http://codepen.io/joemaffei/pen/MeYdEo
http://codepen.io/kaylolo/pen/KzLwmR
http://codepen.io/dudleystorey/pen/KdAev
http://weboook.blog22.fc2.com/blog-entry-388.html
http://codepen.io/jkantner/pen/ezJaJY
http://css.programming.jp/?p=901
http://codepen.io/kkrueger/pen/qfoLa
http://photoshopvip.net/91670
http://horicdesign.com/css/entry-83.html
できるだけfloatで組む。
http://localhost:3000/styleguide/sass-module-_imgTxt.html
http://foundation.zurb.com/templates.html
http://purecss.io/extend/
https://github.com/sass-basis/basis/tree/master/src/scss/object
http://2inc.org/blog/2013/08/08/3478/
管理画面で生成したフォームであれば、別URLであっても完了画面に次のショートコードを貼る必要があります。
[mwform_formkey key=”xxxx”]
http://tonari-it.com/vccw/
https://firegoby.jp/archives/6221
GitHub Pagesで静的なサイトを公開し、独自ドメインを設定する
http://qiita.com/tiwu_official/items/d7fb6c493ed5eb9ee4fc
1、パラメーターで記事が出力されるか確認する。
2、rewriteルールで理想のurlに書き換える(通常はここで完了。それでもリダイレクトされる場合)
3、redirect_canonicalで特定のカノニカルをキャンセル。
プラグイン
Debug bar
ボタン => 記事内パーツ(.entryBody内) => カードリスト => 共通セクション
http://wp-kyoto.net/wordpress-pagenation-for-wp-query-using-paginate-links/
wordpressで最も簡単にページネーションを実装する方法
http://11neko.com/wordpress-12/
node - v = 0.12.6やと上手くインストールできない?
http://blog.claudetech.com/?p=38
今回は直接PHPコードをjadeに書き加えましたが、もちろん変数にまとめてくくりだしてしまったほうが好ましいのは言うまでもありません。 普通にJavascriptの関数として作っておけば、phpのメソッドに与える引数も自由にすることができます。
$img = get_sub_field('img_tmp01');
$img_url = $img[size][pic600];
$img_alt = $img[alt];

Advanced Custom Fields で画像の帰り値
https://third-party.org/isalog/acf-img/
$posts_num = $wp_query->found_posts;
$posts_per_page = get_query_var( 'posts_per_page' );
if( $posts_num > $posts_per_page ):
get_query_var('post_type') == 'case'通常の投稿は
get_post_type() == 'post' http://wpcj.net/806
【PHP Tips】sprintf()を使いこなそう
http://bashalog.c-brains.jp/09/12/07-172920.php
http://recost-design.com/1819.html
http://codechord.com/2012/12/basic_event_for_parallax/
上記のリライトが True の際、With Front を True にしておくと、
http://example.com/news/works/実績その1/ という、意図しない URL になってしまいます。
http://www.webopixel.net/javascript/350.html
http://qiita.com/morou/items/d54000396a2a7d0714de
http://www.buildinsider.net/web/popularjslib/2015
Backbone.js + Handlebars.js をgulp.jsで結合、コンパイルする
http://dev.classmethod.jp/etc/concrete-example-of-json/
Web APIにはJSONベースのフォーマットを使おう
http://qiita.com/tkawa/items/2841e155e5b51c09ed40
http://www.sria.co.jp/blog/2014/10/lets-use-ajax-part-1-try-it-with-ajax-and-json/
http://webnaut.jp/develop/1115.html
ジェネレーターつくろう
animation Flashのように細かいアニメーションの設定をする
transition: all 0.3s;
初期値のeaseが使われます
ease、ease-in、ease-out、linear、ease-in-outが使えます
数値で書く場合は cubic-bezier(0.2, 0.4, 0.7, 0.8) といった形になります
http://xn--nckmepf1g6g.com/blog-20151223/
http://on-ze.com/archives/1947
http://qiita.com/narikei/items/1a7fbd7895cfb4220172
http://love-guava.com/wordpress-theme-test-drive-plugin/
htmlにoverflow: auto;
bodyにoverflow: hidden;
https://github.com/Se7enSky/group-css-media-queries
https://app.codegrid.net/entry/webfont-2
http://www.tam-tam.co.jp/tipsnote/javascript/post5050.html
ループ中途かでも不変
echo "
";";
print_r($wp_query);
echo "
http://www.webopixel.net/javascript/195.html
get_header(); やget_footer()などで使うときは
globalを指定する必要がある
function.php
$kuma_voice_archive_id = 298;
header.php
global $kuma_voice_archive_id;
http://www.understandard.net/wordpress/wp027.html
http://outlook.aptrust.net/wp-toolset/set-relationship-post-types
get_terms('cat_knowledge')
・記事内
get_the_terms($post->ID, 'cat_knowledge')
http://qiita.com/nowri/items/242bc8a5d94e85d33a1e
add_filter( 'ppp_nonce_life', 'my_nonce_life' );
function my_nonce_life() {
return 60 * 60 * 24 * 5; // 5 日間(秒×分×時間×日)
}
カスタム投稿でpage-attributesを有効にして
array(
'post_type' => 'books',
'orderby' => 'menu_order',
'order' => 'DESC',
'posts_per_page' => 30
);
http://qiita.com/naru0504/items/58011181f2c271808c7f
出力を見る限りVCCWのバージョンが古いかVCCWではありません。
VCCWは最新版を使ってください。
VirtualBoxとVagrantも最新版がいいです。
https://firegoby.jp/archives/5644
http://oxynotes.com/?p=7392
http://www.paka3.net/wpplugin/
http://qiita.com/murapon/items/ba4eeb20eb49ff28471a
WordPress マルチサイトの新規サイト作成時にカスタム初期設定とカスタム初期データを設定しておく
http://hijiriworld.com/web/wp-multisite-initialize/
$name:任意の名前
$width:幅
$height:高さ
$crop:縮小しないで中央をトリミングなら true、比率を保ったまま縮小なら false のどちらか(デフォルトはfalse)
https://ja.forums.wordpress.org/topic/12984
トリミング
http://www.slideshare.net/riatw/201306-dynamicmtml
http://blog.1dz.jp/?eid=767
header('Access-Control-Allow-Origin: *');
http://tadtak.jugem.jp/?eid=59
/service/以下にリライト処理がかかるので、タグとの共存が難しい?
階層 false
カスタムリライトスラッグ service(カスタム投稿名)
function.phpに書く
// service
add_rewrite_rule('service/([^/]+)/?$', 'index.php?service_cat=$matches[1]', 'top');
add_rewrite_rule('service/([^/]+)/page/([0-9]+)/?$', 'index.php?service_cat=$matches[1]&paged=$matches[2]', 'top');
3が表示できていて、2が表示できていないということは、WordPressは hoge を %postname% と解釈して、該当するページがないため、404となってしまうのでしょう。
これを回避するには、add_rewrite_ruleを用いて、設定されているタームのみタームとして解釈されるように、URLの変換ルールを追加する必要があります。
また、設定されているタームのみ変換ルールに含ませるため、タームの追加や削除に応じて、変換ルールの更新を行う必要があります。
wp-config.php
/* ContactForm7 自動挿入なし */
define('WPCF7_AUTOP', false );
var tolerance = 3,
隣り合う要素のトップ位置の差(torelance=3)まで高さを揃える
$(".toggle").not($(this))
同じ日付は表示1回でおkaxiosでchatwork.jsonを取得chatworkのデータに公開してはいけないデータがないかチェック[info]...[/info][info]...[/info]の正規表現修正検索機能追加
日付での記事並び替え
[code]...[/code]の正規表現
検索からアンカーリンクおすとずれる。最初からいれておくとずれない。
sweetscrollがうごなかった原因はidの形式が間違ってたから。
#date-2018-06-26T14:09:22+09:00
2016年6月あたりからcssのクラス設計に興味をもってる模様 大規模サイトのコーディングで苦しんでいたのでしょうか。
2017年5月もまだまだコーディングをやってますね。
いみわからん http://codepen.io/zadvorsky/pen/VaXqRW
:beforeや<i>たぐはtransition効かない
あるある
2017年12月でやっと Laravelがでてきました
2018年1月で Vue.jsがでてきました。 gitもでてきました。(個人では使ってたんですが、会社でやっと浸透し始めた感じです)
この記事での技術メモ
正規表現 最短マッチ + gフラグ
[info]reg01[/info][info]reg02[/info]
↓
<div>reg01</div><div>reg02</div>
上記のように変換をしたい場合、最短マッチ + gフラグを付与する必要があります。
replace(/\[info](.*?)\[\/info]/g, '<div class="chat-body-info">$1</div>')
アロー関数でのthis
axios.get('/chatwork.json')
.then(response => {
this.items = response.data;
})
v-forの引数はvalue, key, indexが使える
リストレンダリング — Vue.js
<div class="chat-container" v-for="(item,key,index) in items">
<div class="chat-body" v-html="$options.filters.parse(item.content)"></div>
SweetScrollのoverflow:scrollボックスの場合
const sweetScroll = new SweetScroll({/*...*/}, "#container");
のように設定する必要がある。 またアンカーは#container内部に設置する必要がある。