サクサク読めて、アプリ限定の機能も多数!
トップへ戻る
災害への備え
atuweb.info
リプレイスなどでやむなく bootstrap-datepicker と Vue.js を連携しなけれならない、という場合の対処方法です。 Laravel での実装を想定しておりますが、ディレクトリ構成などは適宜読み替えれば Laravel 以外でも同様に実装できると思います。 また、Vue.js には 専用の素敵な Datepicker がいくつもありますから、新規開発ではぜひ Vue.js 用のものを使ってくださいね。 Vue.js と jQuery の併用は相性が悪い Vue.js はリアクティブ系ライブラリと言われます。 仮想のドキュメントツリー (VirtualDOM) を内部で管理し、イベントなどにより VirtualDOM に変更があった場合、DOM 側にそれを反映するという仕組みで動いています。 これに対し、jQuery は DOM を直接操作する、という点が大きく違います。
Vue.js のスロット機能を使ってみると意外に便利だったため、ざっくりまとめます。 スロット Vue.js のスロットとは、簡単にいうと「 子コンポーネントの一部を親コンポーネントから差し込む 」ことができる機能です。 Vue.js > ガイド > コンポーネント > スロットによるコンテンツ配信 https://jp.vuejs.org/v2/guide/components.html#スロットによるコンテンツ配信 コードサンプル スロットは、Bootstrap のようにタグ構成が決まっているコードのコンポーネント化と相性が良いと感じます。 さっそく例を見てみましょう。 確認環境 Node.js 7.7.x mpn 5.3.x Vue.js 2.4.x Panel を単一スロットのコンポーネントにする 整形前のコード 1<div class="panel panel-primary">
2022-08-29 2022-09-03 Google Cloud の顔検出で、目鼻口を拾ってみる Dev&Ops#GCP#VisionAI
Atuweb が開発した SPA サイトにログイン機能追加を行いました。 Overview Laravel と Vue.js で実装したサイトに Twitter 連携を実装し、Twitter のプロフィールをユーザ情報として利用する 大雑把な処理の流れは次です。 フロントから Twitter の認証へ飛ばし、認証結果によって JWT トークンを発行 サーバからフロントエンドにトークンを引き渡し フロントエンドからのリクエストにトークンを付加し、バックエンドで認証を行う 環境 PHP 7.0 Laravel 5.4 Vue.js 2.2.x npm 4.5.x Twitter連携 技術書サイトでは、thujohn/twitterを利用しております。 処理フローは次の通りです。 技術書サイトより Twitter 側の認証画面にリダイレクト Twitter上で ID/Password を入力する
小ネタです。 トランジション Vue.js でフェードイン / フェードアウトを実装するには transition (トランジション) を利用します。 トランジションとは画面遷移など「 場面転換時の演出効果 」を指し、ビデオ編集などでも使われる単語ですね。 Vue.js では簡単にトランジションを利用することができますよ。
再利用可能なコードとは 格付けでいうところの A、B ランクのコードが「 再利用可能なコード 」です。 ランク C は、都度コードの中身を調べる確認作業が発生し、生産性向上には貢献しません。 そのため、ランク C は「 生産性を落とすゴミ 」と言われます。 全てのコードがランク A で構成されれば良いのですが、ランク C のコードがほとんど、というのが実際のところです。 タイトなスケジュールでは、どうしてもその場しのぎの「ゴミコード」を大量生産してしまいがちです。 しかし、その一瞬が苦しくても、後で楽をするために、ちょっと頭をひねらせてコードを改善する工夫が必要になってきます。 その積み上げは、数日後、数か月後に生きてきて、あなたに「定時帰り」という恩恵をもたらしてくれるでしょう。 それに、苦労して実装したコードがすべてゴミだなんて、、、悲しすぎるじゃないですか。 C ランクのコードと改善
Vue.js の勉強が着々と進み Mixin (ミックスイン) を覚えましたため、使い方をまとめます。 mixin とは mixin とは Vue.js が提供する「再利用のための仕組」みです。 公式から引用します。 ミックスイン (mixin) は、Vue コンポーネントに再利用可能で柔軟性のある機能を持たせるための方法です。 ミックスインオブジェクトは任意のコンポーネントオプションを含むことができます。 コンポーネントがミックスインを使用するとき、ミックスインの全てのオプションはコンポーネント自身のオプションに”混ぜられ”ます。 Vue.js > ガイド > ミックスイン https://jp.vuejs.org/v2/guide/mixins.html mixin はとても簡単に使うことができます。 サンプルをご覧ください。 サンプル ゴール クライアントサイドレンダリングでよくある
Bootstrapを利用してフォームを実装しましたため、v-modelやバリデートなどについてまとめます。 イケてるフォーム イケてるフォーム 初期状態 初期状態です。 入力内容に不備がある入力欄はエラーとして赤字、赤枠で表示します。 また全ての不備が取り切れるまで Submit ボタンは disabled とします。 イケてるフォーム エラー状態が即時に反映 何か入力し、エラーがなくなるとリアルタイムでフォームに反映されます。 イケてるフォーム Submit可能状態 全てのエラーがなくなると、Submit ボタンがアクティブになり、ボタンを押下することができます。 ごめんなさい、普通のフォームでした。 環境 Node.js 7.7.x npm 4.4.x Vue.js 2.2.x 素のHTML イケてるフォーム Vue.js 化前の状態 上の状態、Vue.js の処理を入れる前の状態の
Vue.js を触って早数週間経過します。 最も理解に時間がかかった コンポーネントの連携 についてまとめてみます。 理解が怪しいところはマサカリをお願いいたします。 ゴール 子コンポーネントから親コンポーネントの関数を呼び出す 環境 Node.js 7.7.1 npm 4.4.2 Vue.js 2.2.4 propsでデータを渡す props とは「 親コンポーネントからデータを受け取るためにエクスポートされた属性のリスト/ハッシュ 」です。 Vue.js > API > props https://jp.vuejs.org/v2/api/#props 最もシンプルな例を見てみましょう。 呼び出し元
Vue.js が面白くなってきました。 過去に jQuery で実装したフォームを Vue.js で書き直しました。 jQuery 実装が Vue.js によってどう改善したか、比較いたします。 完成イメージ フォーム実装イメージ ラジオボタンを操作すると、下の補助入力欄が切り替わるフォームです。 環境 PHP 7 jQuery 3系 Node.js 7系 Vue.js 2.2.x Bootstrap フォームは Bootstrap で実装しておりますため、次に掲載いたします HTML は長めなことをご容赦ください。 jQuery実装 1<div class="form-group"> 2 <label class="col-lg-2 control-label">Input select</label> 3 <div class="col-lg-4"> 4 <div class="rad
この数年、たいへんなスピードでフロントエンド開発技術が発展しておりますね。 私はバックエンド開発が続いていたことを言い訳に、直近の小規模な Web ツール開発をjQueryで頑張ってしまったため、次は同じ轍を踏まない ために Vue.js を勉強してみました。 jQuery で頑張ってはいけない理由 jQuery(ジェイクエリー)は、ウェブブラウザ用のJavaScriptコードをより容易に記述できるようにするために設計された軽量なJavaScriptライブラリ https://ja.wikipedia.org/wiki/JQuery jQueryはフロントエンドの開発に大きく貢献してきた素晴らしいライブラリで、「Web サイトにちょっとしたギミックを足す」用途には使いやすいツールです。 しかしながら、jQuery での開発で、少しでも規模が大きくなってくると途端に苦しくなってきます。 それ
今回手持ちの Mac に PHPBrew を導入しましたため、作業ログを残します。 PHPBrew PHPBrew は Mac の PHP 管理ツールです。 複数の PHP バージョンを用意して、簡単にスイッチすることができ大変便利です。 目的 Mac にphp-fpm + nginx を導入して Laravel 5.3 を動かす。 なお、導入にあたって次のサイトの通りインストール作業を行いました。 karakaram-blog - MacでのPHP開発はphpbrewが非常に良い http://www.karakaram.com/mac-install-phpbrew 環境 ほぼまっさらなMacBook (12inch) macOS sierra PHPBrew 導入前の PHP バージョンは 5.6 でした。 1$ php -v 2PHP 5.6.25 (cli) (built: Se
今回はLaravelでprivateなメソッドのテスト方法を調べてみたことのメモです。 環境 PHP 7 PHPUnit 5.6 Laravel 5.3 PHPでprivateなメソッドのテスト方法 PHPでprivateなテストを行う方法は以下の2つがあります。 Reflection Closure この記事ではClosureを押します。 Reflection Reflection(リフレクション)とは、簡単に言うと[自分自身の構造を読み取って操作する]ものと言えば良いでしょうか。 コードはこんな感じです。 1$who = new Who(); 2 3$method = new ReflectionMethod($who, 'privateMethod'); 4$method->setAccessible(true); 5$method->invoke(); 「やったわー、こんなのJav
メイン PC を Mac に乗り換えましたので、経緯や感想をまとめてみました。 メイン PC はこれ MacBook 12インチのスペースグレイです。 2019年似ラインナップから外れてしまったため、次は MacBook Air にします。 APPLE MacBook (1.2GHzデュアルコア Intel CoreMプロセッサ/12型/8GB/512GB/USB-C/スペースグレイ) MJY42J/A 出版社:Apple(アップル) 発売日:2015-04-11 Q. 発売したばかりの MacBook Pro じゃないの ? A. はい、重いからやめました。 Q. ビルド重くない ? A. まだやってないです。 ガシガシビルドが必要な状況になったら、デスクトップを買い足すからいいのです。 経年で色々とツラくなってきたと感じたら、また買い直すからいいのです。 メインPCを変更した理由 エン
パフォーマンスが求められるWebアプリケーションは 極限までSQLを調整 するもの。 Laravelで実行されるSQLの把握するために、実行されるSQLをドバっとログファイルに出力するミドルウェアを書いてみました。 そうはいっても、とても簡単なコードですよ。 動作を確認した環境は以下です。 Laravel 5.3 PHP 7 ミドルウェアとは Laravelのミドルウェアは、要するに「 すべてのURLに共通した処理を行うフィルター 」です。 ミドルウェアを利用するメリットは「アプリケーション全体のふるまいを1か所で定義することができる」ことですね。 今回の「ログを一括で出力する」ような場合に、ログを全ファイルに埋め込むとなると、機械的で無意味作業となってしまいます。 ミドルウェアならば1ファイル追加するだけです。 何にも疑問を持たずに全ファイル修正とか、、、エンジニアがやる仕事じゃないです
Laravel と S3 を連携させて遊んでみました。 連携方法は 2 通りありますので、まとめてみます。 環境は次の通りです。 PHP 7 Laravel 5.3 CentOS 6.6 (Vagrant) Filesystem 1 つ目は ファイルシステム を利用する方法で。 これは公式ドキュメントで紹介されている方法ですね。
新規プロジェクトで Laravel を使おうと調べてみると、2016年08月23日 に Laravel 5.3 がリリースされていました! まずは動かしてみましょう。 composer install して Laravel の応答を確認します。 Laravel インストール直後のTOP画面 シンプルで素敵なデザイン。 問題ありませんね。 ではガシガシコードを書いていきましょう。 と思ったら あるはずの場所にroutes.phpがありません ! routes の引っ越し先 Laravel のルーティングといえば app/Http/routes.php ですが、いくら Http 以下を見直してもやっぱり routes.php はありません。 ドキュメントを探し、Routing のページを読んでみると一発解決。 The Default Route Files All Laravel routes
先日 Java + Spring Fraework で、サーバ/クライアント間の通信についてまとめました。 上記ではさらっとしか触れなかった、特殊文字の Unicode シーケンス 変換について整理いたしました。 Overview 何をするのか Jackson を利用した Json、Object のコンバートで特殊文字をエスケープする。 Cocos2d-x で実装したクライアントとの通信で、クライアント側 C++ の JSON パーサーでは特殊文字の扱いが苦手であったため、特殊文字をエスケープすることで回避したのでした。 開発環境 Java 7 Spring 4 Maven 3 jackson 2.4 数年前の実装のため Java 7 です。 新しいプロジェクトでは最新のバージョンをご利用ください。 エスケープ挙動 この記事で JSON にコンバートするオブジェクトの構造です。 1@Dat
「 Java をまれに書くことがあるくらいで、 Java 屋とは言えない」私がよく使う Stream API の備忘録です。 Web 系の実装で「 DAO から SELECT したリストを操作する」感じの処理が中心ですよ。 前提 テーブルをマッピングする ValueObject を用意します。 TCard.java 1@Data 2class TCard implements Serializable { 3 private Integer userId; 4 private Integer id; 5 private Integer cardId; 6 private Integer level; 7 private Boolean isDeleted; 8 : 9} 所持カードを管理テーブルのイメージです。 メンバは、所有者であるユーザ ID 、カードを識別するための連番、マスタ ID
少し前に読んだ「情熱プログラマ」では、プログラマの必須能力のひとつとして 作文技術 を挙げており、とても納得しました。 優れたプログラムは、ムダが少ないためにわかりやすく、そのうえ見た目にも美しいものです。 これに対し、良くないコードは読みにくく、把握が困難なために見ているだけでイライラしてきます。 そして、コードの良さはコメントひとつにもあらわれるものです。 今回はアンチパターンとして私が「 ないわー 」と思ったコメントの付け方をピックアップしてみます。 ノイズになっているコメント 良くないコメントの 9割 はノイズである by Atuweb コードをそのまま自然言語に直しただけのコメント 1// Bad: コードをそのまま自然言語に直しただけのコメント 2var $_item_id;//アイテムID 3var $_loginid;//ログインID 4var $_pass;//パスワード
Simplicityのダーティーなカスタマイズをご紹介します。 やりたいこと Simplicityのレイアウトを好みに修正したところ、「ちょっとサムネイルが小さいな」と感じるようになり、「記事一覧画面のサムネイルを任意のサイズ」で表示することにしました。 Before:サムネイルが150の正方形 Simplicity サムネイル修正前 150x150 After: サムネイルが270x200の長方形 Simplicity サムネイル修正後 270x200 %%※Simplicityを直接更新するためSimplicityのアップデートはできなくなる(アップデートすると修正が消えてしまう)点にご注意ください。%% 子テーマSimplicity childを利用して影響を最小限に抑えることができます。不勉強でした。 Simplicity childをインストール、有効化しておいてください。 また
Windows 10 へバージョンアップしたよ 2015年、Windows 10 がリリースされてすぐにアップグレードしました。 起動も早く、スタートメニューの柔軟性など、使い勝手も向上して快適ですね。 開発も全く問題ないと思っていたのですが、TortoiseSVN (以下、SVN) のマークが表示されていません。 マークとは、追加、変更、更新などを表すアイコン(マーク)で、アイコンオーバーレイという名称です。 プログラムは Git を使っていますが、ドキュメント類は SVN を利用することが多く、今まで出ていたアイコンセットが表示されないととっても違和感があります。 環境は次のとおりです。 Windows 10 TortoiseSVN 原因と対処方法 Windows のアイコンオーバーレイは上限がかなり少なく、15 しかありません。 今回はどうやら Windows 10 のアップグレード
PHPには非同期処理という概念がありません。 集計のような時間がかかる処理を実行するとブロックされ、ブラウザが反応しなくなってしまいます。 今回、Laravelを使ったプロジェクトで、 応答待ちを避けるためのバックグラウンド化 を実装するため試行錯誤しました。 Laravelには標準でキューシステムが用意されており、ドライバとしてBeanstalkd、Amazon SQS、Redisなどがサポートされていますが、「キューはちょっと大げさ」というケースの参考になれば幸いです。 検証した環境は次の通り Linux : Ubuntu, PHP5.5, Laravel 5.0.0 (Cloud9) Windows 10 : PHP5.4, Laravel 5.0.0 やってみたこと ケース1:exec() プロジェクト実装時はベターな方法が分からなく、最終手段のexec()に手を出してしまいました
あなたにはお判りでしょうか、 N連ガチャでN回インサートを実行している ソースに巡り合った時の衝撃。 Webアプリケーションでスループットが悪化する大きな要因はDBなどの ストレージアクセス です。 たとえば「0.001秒のクエリ」でも、100回実行すれば単純に0.1秒を要します。 「たった0.1秒」かもしれませんが、同時接続が1,000リクエスト、10,000リクエストもあるシステムではいかがでしょうか。 これを、「100回分のSQLを1回で実行する」ことができれば、所要時間が数分の1で済みます。 Java + Spring Framework で利用されることが多い OR マッパーは Hibernate、JPA、MyBatis などでしょうか。 この記事では「 MyBatis の動的 SQL でパフォーマンスを維持、改善するための、ちょっと複雑な SQL を書く方法 」をご紹介いたしま
CSVをアップロードしてDBに登録するシステム実装を行います。 利用バージョンはこちら。 PHP 5.4 Laravel 5.0.0 Bladeテンプレート ファイルアップロード HTML Formタグに、いつものenctype="multipart/form-data"属性を追加します。 1<form method="POST" action="{{ url('/edit') }}" enctype="multipart/form-data"> 2 <input type="hidden" name="_token" value="{{ csrf_token() }}"> 3 <input type="file" name="data_file"><br> 4 <input type="submit" value="upload"> 5</form> CSRFについて POSTで通信する
プリンシプル オブ プログラミング3年目までに身につけたい一生役立つ101の原理原則 上田 勲 出版社:秀和システム 発売日:2016-03-23 サブタイトルは 3年目までに身につけたい一生役立つ101の原理原則 です。 ソフトウェアエンジニアリングの「正道」を知り、「良いコード」を書けるエンジニアに成長しましょうというものですね。 ソフトウェアエンジニアリングに有効な情報がぎっしり詰まっており、「自分も3年目くらいまでに読んでおきたかったわー」「そしたら もっと近道できたわー 」というのが率直な感想です。 良いコードを書く プリンシプルとは プリンシプルとは、プログラミングの指針となる「前提」「原則」「思想」「習慣」「視点」「手法」「法則」のことです。これらは、歴史の審査を受けて生き残った、よいプログラミングのためのエッセンス(「普遍的」「定説的」「本質的」な知識)です。 P.4 まえ
このブログのデザインはSimplicityをベースに独自に手を入れています。 ( 2017年9月まで、現在は刷新 ) 最近は文字サイズや余白を多くとったデザインのWebサイトが増加しており、いいなと思っていましたので、当ブログも記事タイトルに大きな余白を入れて目立つようにしています。 ところが、タイトルが短く収まらなかった場合に、タイトル表示に改行が発生し残念な感じになっていました。 タイトルが複数行になってしまった残念なケース うーん、残念ですね。 前からこれを1行で表示してカッコよく見せたいと思っており、先日ようやく実装しました。 修正後の表示はこちら! タイトルがを 1 に納めたケース 1 行表示+簡単なアニメーションです。 カスタマイズ方法 Simplicityを使用している前提です。 WordPressの管理ツールにログインし、外観 > テーマの編集に遷移しfooter-inse
解説 A.登録ユーザ数、B.DAU 想定の登録ユーザ数、アクセス数をざっくりと見積もります。 サービス開始から 2 - 3か月ほど経過した時点での想定数値 を設定するのがポイントです。 その理由は「リリース直後はデータが少なく、ある程度データが溜まった時点で耐えられるか」を見るべきだからです。 C.一人当たりの平均プレイ時間、E.平均滞在時間 これは「 あるユーザがアクセスしてから離脱するまで 」の平均値を指します。 モデルケースを作成し、ユーザが 1 回に「連続してサービスを利用する時間」の平均値を割り出して設定してください。 [E.平均滞在時間] は単位を変換しただけのものです。 数値モデルが、ソーシャルゲームがベースのため「プレイ時間」と表現しています。 D.平均アクセス間隔 新しいユーザが「どのくらいの頻度でサービスにアクセスするか」という数値です。 DAU は言葉通り「 1 日に
Zabbix ロゴ Web監視を設定しているにもかかわらず、サービス障害時にアラート通知が発生せず対処が遅れるということがあり、Zabbixのウェブ監視とトリガーの設定方法を勉強しなおしました。 Web監視、コンテンツ監視。 複数のURLに対してレスポンスを見る監視ですね。 ZabbixAgentが収集するサーバ内部のデータではなく、インターネットアクセスに対する監視を行いますので、必須の監視項目と言えると思います。 そのため、ホストの監視と設定方法が異なります。 前提 Zabbix managerの管理者権限を持っている cURLは導入済み 監視対象のドメインは仮に api.example.com アクションは設定済み 設定方法 1. ホストの登録 設定 > ホストに遷移し、監視対象のサイトを登録します。 ホスト名、DSN名にはサイトドメインを api.example.com を設定して
次のページ
このページを最初にブックマークしてみませんか?
『atuweb 開発ブログ』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く