Category Note

JavaScript: Gulp4 + EJS のインクルードファイルの相対パスを変数化する

EJS を使用し、header や footer 等の共通部分を外部から呼び出す場合、インクルード元のファイルの階層が違うと、相対パスのリンクが切れてしまいます。 今回は、あらゆる階層から呼び出されても階層にあわせて相対パスが変わるように、EJS ファイルに変数を割り当てる方法を説明したいと思います。 目次 Gulp4 + EJS のインクルードファイルの相対パスを変数化する まとめ Gulp4 + EJS のインクルードファイルの相対パスを変数化する 以下のような階層構造で、index.ejs と page.ejs がともに header.ejs をインクルードした場合のサンプルコードとなります。 ファイルツリー gulpfile.js site.json サイト全体で使用するデータです。主に head タグ内で利用するものを記述しています。 (例) で “Your Sitename” が出力 header.ejs index.ejs page.ejs まとめ EJS を導入する以上、目的は静的ファイルの大量生成となるはずなので、相対パスの変数化は必須です。 gulpfile.js さえコーディングしてしまえば次回以降使い回しがきくので、今回説明した作業はしっかりとおさえておきたいところです。 この記事がみなさんのお役に立ちましたら、下記「Share it」よりブックマークやSNSで共有していただければ幸いです。

CSS3: hover 要素のマウスイベントを無効にする

UI デザイン上、ボタン自体は表示させるが、押せないようにしたい、hover エフェクトやポインターは無反応にしたい、といったケースがあると思いますが、そういった場合は、JavaScript を書くまでもなく、CSS のみで解決します。 今回は CSS でマウスイベントを無効にする方法をメモしておきます。 目次 hover 要素のマウスイベントを無効にする まとめ hover 要素のマウスイベントを無効にする pointer-events というプロパティがありますので、これを none にします。(デフォルトは auto) まとめ 今回説明したケース以外でも、親要素に hover やクリックイベントが効いていて、内包される子要素のボタンがクリックできない問題も、親要素に pointer-events: none; を適用することで解決します。 pointer-events は、Opera Mini を除くすべてのブラウザでサポートされているので、実際に利用してもほぼ問題ないと思います。 この記事がみなさんのお役に立ちましたら、下記「Share it」よりブックマークやSNSで共有していただければ幸いです。

JavaScript: Gulp で SCSS コンパイル後に FTP アップロードする

今回は非常にプロジェクトや、使いどころを選びますが、ウォッチしている SCSS に変更があった場合、コンパイルを行い、生成された CSS ファイルを FTP アップロードする方法をメモしておきます。 目次 Gulp で SCSS コンパイル後に FTP アップロードする まとめ Gulp で SCSS コンパイル後に FTP アップロードする 下記のパッケージをインストールし、gulpfile でタスクを設定します。 path.src に対象となる scss ファイルがあるフォルダを、path.dest に css ファイル出力先のフォルダを指定します。 ※下記 gulpfile では、CSS の minify は行ってますが、css ファイルのみアップロードするタスクとなっています。 npm install gulpfile.js まとめ 今回の説明は FTP アップロードという利用用途が限定されてしまう方法です。 利用例としては、WordPress のテーマファイルに SCSS を利用し、本番環境で確認しながら スタイル修正行い、頻繁に CSS アップロードを行うような場合、非常に有効な方法かと思います。 この記事がみなさんのお役に立ちましたら、下記「Share it」よりブックマークやSNSで共有していただければ幸いです。

CSS3: 擬似要素 :before, :after で配置した画像サイズを変更する

開発が完了した Web アプリやサイトで HTML ではなく、CSS 修正のみでアイコン画像等を挿入したい場面があります。 その際、擬似要素 :before, :after でコーディングを行いますが、画像を直接挿入した場合サイズ変更ができません。 今回は上記ケースで画像サイズを変更する方法を説明したいと思います。 目次 擬似要素 :before, :after で配置した画像サイズを変更する まとめ 擬似要素 :before, :after で配置した画像サイズを変更する 以下のような HTML ソースのリスト要素 li の先頭に、アイコン画像を挿入したい場合、content ではなく backgroud 指定による画像配置を行うことで画像サイズの調整が可能になります。 HTML CSS まとめ Web フォントやアイコンが使えない環境や、後方互換による表示不具合が起こる場合、今回の擬似要素による backgroud のイメージ指定を行うことで、解決できます。 レガシーブラウザ対策によるデザイン問題が起こった場合、有効な手段かと思いますので、参考になさってください。 この記事がみなさんのお役に立ちましたら、下記「Share it」よりブックマークやSNSで共有していただければ幸いです。

WordPress: ユーザー権限と判定一覧

今回は WordPress のユーザー権限と可能な、functions.php での判定の記述に関するメモです。 目次 ユーザー権限一覧 まとめ ユーザー権限一覧 上位権限は下位権限の実行レベルをすべて含みます。 権限グループ role ユーザーレベル 実行可能 購読者 Subscriber 0 ログイン        寄稿者 Contributor 1 レビュー待ち投稿        投稿者 Author 2 投稿 編集者 Editor 3-7 投稿 固定ページ カテゴリー 管理者 Administrator 8-10 テーマ プラグイン ユーザー サイト設定 functions.php 権限の判定サンプル まとめ ユーザーレベル判定は現在非推奨となっているため、できるだけ権限グループ名を利用した方がよいと思います。 この記事がみなさんのお役に立ちましたら、下記「Share it」よりブックマークやSNSで共有していただければ幸いです。

Tips: A・B規格サイズ表(デザイナーズメモ)

以前投稿した 封筒・ハガキ・名刺のサイズ に続き、今回はA・B規格に関するデザイナーズメモとなります。 目次 A・B規格サイズ表 まとめ A・B規格サイズ表 A規格 名称 サイズ(mm) A0 841×1189 A1 594×841 A2 420×594 A3 297×420 A4 210×297 A5 148×210 A6 105×148 A7 74×105 A8 52×74 A9 37×52 A10 26×37 B規格 名称 サイズ(mm) B0 1030×1456 B1 728×1030 B2 515×728 B3 364×515 B4 257×364 B5 182×257 B6 128×182 B7 91×128 B8 64×91 B9 45×64 B10 32×45 まとめ A・B規格ともに比率は 1:√2 となっており、この比率を元に、A・B共に基準となる1つのサイズさえ覚えておけば、全てのサイズが算出できる事になります。 とりあえず、実用的な A4、B5 のサイズだけでも暗記しておけば、便利かもしれませんね。 この記事がみなさんのお役に立ちましたら、下記「Share it」よりブックマークやSNSで共有していただければ幸いです。

Tips: 自力で法人税申告を行う方法

比較的小規模な法人税の申告を、会社の代表者本人が行う際に必要な情報のメモをしておきます。 結論から言いますと、必ず誰か(税理士)がやっていることですので、決してできないものではありません。 ここでは、決算書や申告書作成等、実務的な書類作成が完了していることを前提で話をすすめていきます。 目次 自力で法人税申告を行う方法 税務署(国) 都道府県 市町村 各申告書を郵送で送る場合 納税について まとめ 自力で法人税申告を行う方法 法人税は、国に申告(収める)税金、都道府県に申告(収める)税金、市町村に申告(収める)税金の3種類あり、それぞれ管轄が分かれています。 各所に申告と納税が必要なため、たとえ各申告書が完成したとしても、その後の手続きを理解しておく必要があります。 ここでは各管轄ごとに、提出が必要な書類をまとめ、その流れを説明したいと思います。 税務署(国) 準備するもの 決算報告書(決算書) 確定申告書(普通法人等の申告書)・別表1(1)OCR 確定申告書(普通法人等の申告書)・別表1(1) 同族会社等の判定に関する明細書(別表2) 所得の金額の計算に関する明細書(別表4) 利益積立金額及び資本金等の額の計算に関する明細書 租税公課の納付状況等に関する明細書 欠損金又は災害損失金の損金算入に関する明細書 交際費等の損金算入に関する明細書 法人事業概況説明書 預貯金等の内訳書 買掛金(未払金・未払費用)の内訳書 仮受金(前受金・預り金)の内訳書 借入金及び支払利子の内訳書 役員報酬手当等及び人件費の内訳書 税務署へ提出する関係書類が最も多く、ここをクリアすれば、都道府県、市町村への手続きは非常に容易です。 税務署で提出した資料をもとに必要箇所を記載し、上記の申告書と関係書類一式を提出することで完了します。 注意点としては、確定申告書(普通法人等の申告書)別表1(1)OCR は複写式になっているので 必ず手書き し、代表者印は会社の代表者印でも、代表者の実印でもなく、代表者個人の認印 を押すことです。 都道府県 準備するもの 第6号様式(道府県民税・事業税・地方法人特別税の確定申告書) 第6号様式別表9(欠損金額等の控除明細書) 送られてくる 第6号様式 は納付書と一緒にミシン目でつながっていますので、まずこれを切り離します。 切り離すことで、第6号様式別表9(欠損金額等の控除明細書)への記入が可能となります。 あとは申告書、明細書へ必要事項を記入し、納付書へは申告書に記載した金額を書き込めば完了です。 市町村 準備するもの 第20号様式(市町村民税の確定申告書) 都道府県の 第6号様式 と同様、こちらもミシン目を切り離し、必要事項を記載すれば申告書、納付書は完成です。 各申告書を郵送で送る場合 これらの申告書は、各所ともすべて郵送で送ることが可能です。 その際は、控えを送ってもらうために、返送先住所が記載された 返信用封筒 を同封するようにしてください。 納税について 各所での納税についても、わざわざ現地まで出向く必要はなく、対応する金融機関等で納税することが可能です。 申告書とともに送られてきている納付書の裏面をみれば、詳細が記載されていますので、チェックしてみてください。 まとめ 小規模な法人であれば、決算書からの申告書作成部分もある程度テンプレート化ができそうです。 機会があれば、申告書作成についても説明できるよう勉強しておきたいと思います。 この記事がみなさんのお役に立ちましたら、下記「Share it」よりブックマークやSNSで共有していただければ幸いです。

Tips: 封筒・ハガキ・名刺のサイズ(デザイナーズメモ)

今回は封筒・ハガキ・名刺に関するデザイナーズメモとなります。 目次 封筒・ハガキ・名刺のサイズ まとめ 封筒・便箋・ハガキ・名刺のサイズ 封筒のサイズ 長形 名称 サイズ (mm) 適合内容 郵便規格 長形1号 142×332 A4 -> 縦2つ折, B4 -> 横3つ折 定形外 長形2号 119×277 A4 -> 縦3つ折, B4 -> 横2つ折 定形外 長形3号 120×235 A4 -> 縦3つ折 定形 長形30号 92×235 A4 -> 縦4つ折 定形 長形40号 90×225 A4 -> 縦4つ折 定形 長形4号 90×205 B5 -> 縦4つ折 定形 長形6号 110×220 A4 -> 縦3つ折 定形 洋4タテ 105×235 A4 -> 縦3つ折 定形 洋5タテ 95×217 A5 -> 縦2つ折 定形 角形 名称 サイズ (mm) 適合内容 郵便規格 角形0号 287×382 B4 定形外 角形1号 270×382 B4 定形外 角形2号 240×332 A4 定形外 角形20号 229×324 A4 定形外 角形3号 216×277 B5, 書籍雑誌用 定形外 角形4号 197×267 B5, 新株割当通知用 定形外 角形5号 190×240 A5, 書籍雑誌用 定形外 角形6号 162×229 A5 定形外 角形7号 142×205 B6, 写真キャビネ判 定形外 角形8号 119×197 給料用, ダイレクトメール用 定形 洋形 名称 サイズ (mm) 適合内容 郵便規格 洋特1号 197×136 B6, 写真キャビネ用 定形外 洋形1号 176×120 カード用 定形 洋形2号 162×114 A5 -> 縦2つ折, ハガキ・カード用 定形 洋形3号 155×105 B5 -> 横4つ折, ハガキ・カード用 定形 洋形4号 235×105 A4 -> 横3つ折 定形 洋形5号 217×95 A5 -> 縦2つ折 定形 洋形6号 190×98 B5 -> 横3つ折 定形 洋形7号 165×92 A5 -> 縦3つ折, A5 -> 横3つ折 定形 洋形10号・洋長3 235×120 A4 -> 横3つ折 定形 DL 220×110 A4 -> 横3つ折 定形 ハガキのサイズ 名称 サイズ (mm) 郵便規格 通常はがき 100×148 定形 往復はがき… 続きを読む

iOS: iPad Pro 2018モデルの画面が突然ブラックアウトする問題

先月、発売日に購入した iPad Pro が充電不能になり、交換となりました。 その後1ヶ月程度、新しく送られてきた端末を使用していたら、今度は使用中に突然画面がブラックアウトする問題に直面しました。 こうなると何をどう操作しているのかがわからなくなるため、iPad Pro を強制再起動したのですが、再起動自体受け付けなくなり、一時文鎮化しました。 結論から言えば、現在は何事もなかったかのように使用できているのですが、今回はこの問題点について、少し原因を追求したいと思います。 目次 iPad Pro 2018モデルの画面がブラックアウトする問題 まとめ iPad Pro 2018モデルの画面がブラックアウトする問題 今回の一連の動作不良から、復帰までの手順は以下の通りです。 YouTube アプリで動画を見えていたら突然 画面がブラックアウトし、以後何も操作を受け付けなくなる iPad Pro の強制再起動 を実行するものの、なかなか強制再起動されない 何度か強制再起動を試すうち、偶然再起動が実行される 再起動後に同じく YouTube アプリを立ち上げようとしたら、再び画面がブラックアウト(フリーズ)する 今度は iPad Pro の 強制再起動すらできなくなる Apple サポートへ修理のためアクセスする 修理の依頼をしようとすると、「iPad を探す」機能を切ってから修理に出す趣旨の表示がされるが、そもそも「iPad を探す」の機能にアクセスできる状態ではないため、そのまま「確認」ボタンを押す 突然修理受付がエラーとなり、もう一度最初から受付のやり直しの表示が出る。※このとき iCloud(ネットワーク)経由で Apple の診断プログラムのようなものが走った可能性あり もう一度最初から修理依頼手続きをしようとすると、再びエラーとなり、今度は修理受付自体できなくなる iPad が突然再起動する 問題なく使用できるようになる 考えられる原因と解決方法 自分の場合、iCloud の容量不足により、iPad の iCloudバックアップ失敗が発生しており、設定アプリにバッジ「1」が常に表示されていました。 おそらくこれが Apple から iCloud 経由で iPad にアクセスした際、バグが引き起こされたものと判断し、iPad の iCloud バックアップをオフにしました。 iCloud バックアップの解除方法は、 設定アプリ -> パスワードとアカウント -> iCloudバックアップ(オフ) からアクセスできます。 このことが原因だったかどうかは不明ですが、以降、画面ブラックアウト問題は今のところ発生しなくなりました。 いずれにせよ次回何かあれば、ただちに Apple へ再度交換を求めようと思います。 まとめ ネット上では iPad Pro 2018モデルの不調を訴える情報が多数見られます。 iPad Pro は非常に使いやすのですが、安価ではないデバイスですので、Apple には今後しっかり対応してもらいたいものです。 この記事がみなさんのお役に立ちましたら、下記「Share it」よりブックマークやSNSで共有していただければ幸いです。

WordPress: 管理画面・固定ページ一覧のカラムにページ id を表示させる

WordPress で page id が知りたい場合、リンクの URL から調べることが可能です。 ただ、やはり functions.php で設定し、管理画面のページ一覧に表示できればと考えてしまいます。 今回は、固定ページ一覧のカラムにページ id を表示させてみたいと思います。 目次 管理画面・固定ページ一覧のカラムにページ id を表示させる まとめ 管理画面・固定ページ一覧のカラムにページ id を表示させる functions.php に以下のコードをコピーすればページ id が表示されるようになります。 実行前 実行後 まとめ WordPress Codex 日本語版の manage_pages_columns に関する情報は、プライオリティの低い要件なのか、数年前から更新されていません。 今回のソースコードは動作確認済みですので、実運用で利用しても問題ないと思います。 この記事がみなさんのお役に立ちましたら、下記「Share it」よりブックマークやSNSで共有していただければ幸いです。

siro:chro 無料ゲーム SQN をリリースしました

img_sqn_00

sirochro 初の無料ゲームアプリ SQN をリリースしました。
記事:SQN: iOS 無料ゲームアプリ SQN - Sequential Numbers をリリース
ちょっとした時間に楽しめる完全無料のゲームなっていますので、是非ダウンロードして遊んでみてください。

↓SQN のダウンロードはこちらから