サクサク読めて、アプリ限定の機能も多数！
トップへ戻る
アメリカ大統領選
webty.jp
Figという新しいターミナルプラグインを見つけました。かなり便利だったので、ご紹介したいと思います。このプラグインをインストールするとターミナルアプリやIDEのターミナルにオートコンプリート機能が利用できるようになります。 コマンドの補完 Figはコマンドのオプションの補完やMakeコマンドのようなユーザー定義のコマンドもリアルタイムで補完してくれます。 Github より ディレクトリの補完も行ってくれるため、lsコマンドなどを実行して、いちいちディレクトリの確認を行う必要がなくなり、サクサクとディレクトリを横断することができるようになります。 Fig より MacOS MacOSにインストールする場合、brewコマンドを使用して、インストールすることができます。インストール後は、追加されたアプリケーションを起動して、初期設定を行う必要があります。 $ brew install fig
sv*, lv*, dv* Safari 15.4よりメニューなどのブラウザのUIが表示されているときと表示されていないとき用のviewportの大きさを取得するためのCSSの単位が追加されました。 sv*: small viewport. メニューなどのUIが表示されたときのviewportの大きさ。lv*: large viewport. メニューなどのUIが表示されていないときのviewportの大きさ。dv*: dynamic viewport. 現在表示されている画面のviewportの大きさ。 これらを使用することで、画面いっぱいに表示するために、JSで表示中の画面幅を取得して計算するようなハックは不要となります。 Safari 15.4は、macOS Monterey 12.3およびiPadOS・iOS 15.4から使用できます。 svh, lvh, dvh New WebK
僕がTailwind CSSをThe State of CSS 2019で初めて知り使い始めてから約1年半が経ちました。約1年半使った感想やネットで見かける疑問や勘違い(？)についてお話したいと思います。 使用環境 LPやコーポレートサイトなどのフロントページでよく採用しています。構成は主にBlade + Tailwind CSS + SCSSです。テンプレートエンジンでコンポーネント化したりSCSSでBEM風の命名のコンポーネントクラスを作成したりしています。 管理画面を構築する場合は、エコシステムの多いBootstrapを採用しています。 採用して良かったところ Tailwind CSSを採用して、一番の気に入っている部分はやはりClass名を考えなくて良くなったことです。 プログラミングで一番むずかしいことしてネーミング作業が挙げられる程にネーミングは難しく、UIごとに適切な名前を考
Laravelでパーミッション(権限)とロール(役割)による表示の変更、アクセス制限などを行うための設定方法をご紹介します。 動作環境 PHP ^7.3Laravel 8Laravel-permission v4Laravel Enum 3.x Laravel-permissionのインストール・設定 Laravelにパーミッション機能を付与するためにLaravel-permissionをインストールします。 $ composer require spatie/laravel-permission config/app.phpに下記のコードを追加します。 'providers' => [ // ... Spatie\Permission\PermissionServiceProvider::class, ]; 次のコマンドを実行し設定ファイルを生成します。 $ php artisan ve
JSを使わずにiframeだけでYouTubeの埋め込み動画を自動再生かつループ再生させて、背景の動画をYouTubeの動画にする方法です。 動画の自動再生 動画を自動再生するためには、パラメータにautoplay=1, mute=1, playsinline=1を設定します。 https://www.youtube.com/embed/<video_id>?autoplay=1&mute=1 動画のループ再生 パラメータにloop=1, playlist=<video_id>を設定することで動画がループ再生されるようになります。 https://www.youtube.com/embed/<video_id>?loop=1&playlist=<video_id> 動画の自動再生&ループ再生 上記の２つを組み合わせることで動画を自動再生かつループ再生させることができます。 https://
どうもこんにちは塚本です。 2020年3月2日にInstagram APIがInstagram Graph APIに変わり 投稿をWeb上で読み込む方法が変わったかとおもいます。 それに伴って、 「Instagram Graph API v6.0 を使ってインスタの投稿を埋め込む方法」 というブログを書いていたんですが、もう今はバージョンが10になっているようです。 GUIも少し変わっているようなので、登録手順の更新と アクセストークン3とInstagram Business AccountのIDの自動取得ツールをつくってみました。 お急ぎの方へ、 自動取得ツールはこちらです → Instagram Graph API Acquisition tool ※ APIのバージョンがv13.0になっていたので、最新の記事を書き直しました。 Instagram Graph API v13.0 を使
昨今、YoutubeやTwitterなど、IE11に対応していないWebサイトが多くなって来ましたが、日本では未だにIE11を使用している方が多くいます。 IE11の開発は止まっており、ES2015など最新の技術には対応しておりません。 MSは、IE11からEdgeに乗り換えがなかなか進まないため、IE11に非対応なサイトからEdgeにリダイレクトするアップデートを行いました。 2020年10月の国内ブラウザシェア IE11からEdgeへの強制リダイレクト EdgeのアップデートでによりIEToEdge BHOというプラグインがIE11にインストールされ、IE11に非対応なサイトにアクセスするとEdgeにリダイレクトされるようになりました。 IEToEdge BHOは、IE互換性リストを参照して、IE11に非対応かどうか判断します。 IE互換性リストへの登録申請 自社のサイトをIE互換性リ
Pub/Subパターンとは Pub/Subパターンとは、イベント駆動型プログラミングのデザインパターンです。Publisher（発行者）が発行したイベントをBroker（仲介者）が取りまとめ、Subscriber（購読者）に伝達します。イベントはBrokerが管理しているため、PublisherとSubscriber同士は疎結合となります。 What is Pub-Sub? Rails Publish-Subscribe Pattern Tutorial | Toptalより Observerパターンとの違い 同じイベント駆動のデザインパターンにObseverパターンがあります。 ObseverパターンとPub/Subパターンの大きな違いは、イベントをどこで管理するのかにあります。Obseverパターンは、観測者と観測対象が直接イベントのやり取りを行いますが、Pub/Subパターンでは、E
Laravelnのテンプレートエンジンとして採用されているBladeをバニラPHPのプロジェクトに採用して良かったところをまとめました。 インストール Bladeには、BladeOneというスタンドアロン版があるので、今回はそちらのインストール方法を紹介します。 Without composer’s autoload.php 1.https://github.com/EFTEC/BladeOne/archive/master.zipをDLし解凍します。 2. includeして実行します include "lib/BladeOne.php"; // 解凍したBladeOneのパス Use eftec\bladeone; $views = __DIR__ . '/views'; // viewフォルダ $cache = __DIR__ . '/cache'; // キャッシュフォルダ $bl
Laravel8よりlaravel/uiは非推奨となり、laravel/jetstreamが認証系推奨ライブラリとなりました。 しかし、laravel/jetstreamでは、Tailwind CSSやLivewire、Inertiaの使用を強要されてしまいます。 Tailwind CSSはまだしもLivewireやInertiaは採用しないケースが殆どだと思いますので、それらの機能を無効化する方法をご紹介します。 また、合わせてルーティング設定やcontrollerの変更方法もご紹介します。 動作環境 laravel/framework v8.0.4laravel/jetstream v1.1.2 無効化手順 本記事は以下のようなコマンドでLaravel Jetstreamが初期設定されているとした上でデフォルトのルーティング解除などの手順などをご紹介します。 $ php artisan
2020年2月17日の週から、限られた初期人口向けのChrome 80 StableよりSame-Site属性のデフォルト値がNoneからLaxに変更されます。 Same-Site属性がLAXになると、他のサイトにGETメソッド以外を送信する際にCookieが送信されなくなります。 これはCSRF対策となり悪意のあるサイトから不正な操作を防ぐ事ができます。 しかし、これは喜ばしいことだけでは有りません。 クレジットカード決済代行サービスなどの悪意のないサイトからの通信時でもCookieが送信されなくなってしまいます。 Cookieが送信されないとステートレスなHTTP通信だけでは、セッションIDなどでのユーザーの識別を行うことができません。 これによりECサイトではクレジット決済時不具合が発生致します。 他にも他のサービスと連携しているサイトなどでは不具合が発生する可能性があります。 対策
最近のお気に入りのフレームワークは、Tailwind CSSです。 ユーティリティクラスが充実しており、ユニークなページを作る際を違和感なくサックと作成することができて大好きです。 もっと多くの人にTailwind CSSを使ってもらいたいので、今回は、Tailwind CSSの基本的な使い方を紹介します。 Tailwind CSSとは？ Tailwind CSSは、ユーティリティファーストのCSSフレームワークです。 Tailwind CSSのは、コンポーネントクラスは用意されていなく、その代わり豊富なユーティリティクラスが用意されています。 CSSメプロパティの大半をカバーするユーティリティが用意されっており、多くのデザインは、用意されているユーティリティクラスを組み合わせるだけで実装することができます。 See the Pen Slack Clone with Tailwind CS
SPAのサイトにGoogle Analyticsを導入することは色々大変なのですが、Vue.jsの場合はvue-analyticsを使用することで簡単に導入することができます。 インストール 以下のコマンドでvue-analyticsをインストールします。 $ npm install vue-analytics vue-analyticsのセットアップ vue-analyticsのセットアップは以下のように行います。 import Vue from 'vue'; import VueAnalytics from 'vue-analytics'; // Configuration VueAnalytics Vue.use(VueAnalytics, { id: 'UA-xxxxxxxxx-x' }); idには、自分のGoogle AnalyticsのIDを設定してください。 マニュアルでト
** 2021/03/09 追記 ** 新しいブログ記事、 Instagram Graph API v10.0 を使ってインスタの投稿を埋め込む方法を書きました。 Instagram Graph API v10.0 を使ってインスタの投稿を埋め込む方法 また、アクセストークン3の自動取得ツールも作成しました。 ↓からの情報は古いものです。 どうもこんにちは塚本です! ついに、2020年3月2日 既存のInstagram APIが廃止になります。 従来の方法だとHP内に埋め込んだインスタの投稿は見れなくなってしまうので、 Instagram Graph APIへ移行していく必要があります。 社内で共有・URL生成を楽にできるようにドキュメントを作ったので 一部をスタッフブログに公開しようと思います。 ※ブログでは自動生成とかできないのでURL頑張ってコピペしてやってください、、 Instag
APIのルーティング設定 createやeditのようなHTMLテンプレートを提供するルートを除外する場合は、apiResourceメソッドを使用できます。 APIのルーティングを行いたいならこちらを仕様しましょう。 Route::apiResource('/v1/photos', 'PhotoController'); コントローラーの作成 make:controller Artisanコマンドを使用することで、リソースコントローラーの雛形を生成出来ます。 $ php artisan make:controller PhotoController --resource /app/Http/Controllers/PhotoController.php namespace App\Http\Controllers; class PhotoController extends Control
本日、Chromium ベースの新しい Microsoft Edge が正式リリースされました。 この新しいEdgeでは、IEのレンダリング エンジンを使用してHPを表示するモード、IEモードが備わっています。 デフォルトでは、自動でHPを判別してモードが切り替わるのですが、設定を変更することで手動でIEモードに切り替えることができるようにできます。 IEではなくIEモードのEdgeを使用することで、IEのもっさりとしたディベロッパーツールではなく、Chromium ベースのモダンなディベロッパーツールを使用してIEのデバック作業が行えます。 ※ 追記：ディベロッパーツールは使用できませんでした。 IEモードの使用方法 まず、最新版のEdgeで、「edge://flags/#edge-internet-explorer-integration」をURLに入力して開きます。 「 Enable
MacはWindows10以上にアプリで使い心地をチューニングして上げる必要があって購入時は大変です。 いちいち思い出すのも大変なのでこれはそのための忘却録です。 パッケージマネージャ Homebrew Macのアプリがコマンド一つでインストールできるアプリ。 公式サイト インストール $ /usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)" homebrew-autoupdate Homebrewのアプリと定期的に自動アップデートしてくれるツール。これを入れておけば、新しいアプリをhomebrewでインストールするときにアップデートで入ってイライラする事がなくなります。 GitHub インストール $ brew install terminal-
1. 最新バージョンを使用する 最新の安定バージョンを使用している場合、安全で高性能なWebソリューションを利用できます。最新のLaravelのバージョンで作業することをお勧めします。 2. Bladeの中にクエリーを含めない Bladeの中でクエリを発行した場合、100件の投稿を取得するのに101回DBにクエリを発行してしまいます。 @foreach (Post::all() as $post) {{ $post->category->name }} @endforeach コントローラーなどでクエリを発行すれば、100件の投稿をたったの2回のクエリの発行で済みます。 $posts = Post::with(‘category’)->get(); ... @foreach ($posts as $post) {{ $post->category->name }} @endforeach
この記事は、「7 Practical Tips for Cheating at Design」 をざっくりと要約したものです。意訳多く含まれています。きちんとしたもの読みたい場合は、原文を読んでください。 1. フォントサイズの代わりに文字の色や太さで階層分ける テキストのUIを設計するときに過ちがちなミスは、フォントサイズに頼りすぎて、階層のコントロールできていないことです。 「このテキストは重要だから、文字を大きくしよう！」 「このテキストは重要ではないから、文字を小さくしよう！」 このように、普段設計していないですか？ すべてのテキストに、これを当てはめてはいけません。 文字の色や太さを、同じような役割として使用しましょう。 「このテキストは重要。だったら、文字を太くしよう！」 「このテキストは重要ではない。だったら、文字の色を明るくしよう！」 2,3色使用するのがおすすめです。 例
昨日、PWAをGoogle Playをアップロードできるようになったと話題になりましたが… 実際は、PWAをそのままGoogle Playにリリースすることができるようになったわけではなく、Chrome72で実装されたTWA(Trusted Web Activity)を使用することで、URLバー無しでPWAページを開かせるAndroidアプリを開発できるようになったということらしいです。 しかし、がっかりする必要はありません。 PWA2APKを利用すれば、アプリの用のコードを書かずにAPKを作成する事が可能です。 TWA VS WebView 今までもURLバー無しのAndroidアプリは、Web Viewを使うことで開発することができましたが、TWAの利点は、ChromeとCookieやlocalStorageを共有することができる点です。 Chromeでログインしていた場合、TWA側で
以前までは、audioタグにautoplay属性を付与することで音声の自動再生が可能でしたが… <audio autoplay id="audio"> <source src="audio/source.mp3"> </audio> ChromeとSafariのメディア要素（<video>, <audio>）の自動再生におけるポリシーの変更され、下記のコードのようなclickイベントを使用しないとaudioタグの自動再生ができなくなりました。 <audio autoplay id="audio"> <source src="audio/source.mp3"> </audio> document.addEventListener('click', audioPlay); function audioPlay() { document.getElementById('audio').play
Atomとは？ GitHub製のIDEです。Atomを編集するならこのエディタが一番だと思います。 こちらから、無料でDLできます。 Packageのインストール方法 左上のある「file」-> 「setting」->「install」の順に移動し、自分がインストールしたいPackageを検索することでPackageをインストールすることができます。 1. japanese-menu Atomを日本語化するPackageです。 2. markdown-preview-plus mdをpreviewすることができます。 HTMLへの返還なども可能です。 3. markdown-scroll-sync エディターをスクロールするとpreviewも一緒にスクロールしてくれるPackageです。 previewを見ながら編集できます。 4. markdown-toc 目次を自動生成してくれるPac
とあるWP製サイトがPHPのメモリ不足でエラーを吐いていました。 PHP Fatal error: Out of memory (allocated ****) (tried to allocate **** bytes) php.iniで設定されている値よりもかなり少ないメモリでエラーを吐いてしまっているので、その原因を調べました。 WPのPHP memory_limitデフォルト値 調べた結果、WPのPHP memory_limitデフォルト値は、シングルサイト40M、マルチサイト64M、管理画面256Mに設定されているようです。 これがエラーの原因ですね。 memory_limitの設定箇所 /wp-includes/default-constants.php の32行目辺りにmemory_limitを設定するスクリプトがありました。 $current_limit = @ini_ge
このページを最初にブックマークしてみませんか？
『岡山のホームページ制作会社 ウェブティ株式会社』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
