Windows Update、お好きですか。私は嫌いです。
だっていつの間にか仕様変更してるし、バグるし。
いや…「アップデート内容確認しろよ」言われたら何も言えないんだけどさ…

今回はこのWindows Update後に起き始めた文字化けを直すという記事です。

とはいうのもですね、2018/06中旬頃、いつもどおり「さぁ、仕事するか」と意気込んでノートPCを開くとですね、バッテリーが切れていたのかPCの電源が落ちていたんです。
で、起動するとどうやらWindows Updateが走っているらしく、とりあえず待ってログイン。

「さぁ、仕事するか」(2回目)でGoogle Cloud PlatformのCloud SDKのコマンドを叩いて作業しようにもなんかエラーが出てる。
LookupError: unknown encoding: cp65001
ググるとコマンドプロンプトでPython実行時に文字コードが分からなくてエラーになっているらしい
こちらのQiitaの記事を参考にしてPYTHONIOENCODINGという環境変数を設定するも同じくLookupError

んー…Cloud SDKのアップデートが悪いのかな…、と思いアンインストール、再インストールを行うも問題は解消されず…

さぁ、どうしたものか

引き続き調査しているとWindows10で稀に文字コードがバグる問題があるらしい
https://support.microsoft.com/ja-jp/help/3144536

で、手順に合わせてDISM.exe /Online /Get-Packagesを実行してみると

ババーン……はぁ…
一応手順に沿ってパッケージ選択して再起動をかけてみましたが状況は変わらず

そして他にも作業をしてみると
・客先からもらったzipを展開したら文字化けで中身が確認できない
・タスクバーのアイコンをオンマウスした時の文字が文字化けしている
・Excelのシート名やら検索バーが文字化けしている
といった事象が発生していました。




仕事用のPCがこんな状態で仕事できないのでもう帰りたかったですがそこは抑えて
最終的にはWindowsとMacの2台持ちになりました。

が、なんか直らないのも気になるので引き続き文字化けの調査を行っていたらどうやら解決できたっぽい!?

長かったですが以降Windows Update後に様々なアプリが文字化けした際の対応法となります。

1. [設定]を開き、[時刻と言語]を選択


2. [地域と言語]を選択


3. [管理用の言語の設定]を選択


4. [システム ロケールの変更]を選択


5. [ベータ: ワールドワイド言語サポートで Unicode UTF-8 を使用] のチェックを外す


6. 再起動を促されるのでPCを再起動


上記の手順を実施後にPCを起動して確認すると文字化けが解消されていると思います。



念の為確認で再度チェックをつけて再起動したら文字化けが発生しました。

GCPの方も無事にコマンド実行できてよかった…


にしてもこのベータ機能、2017年11月に追加されたものなのに何故今頃問題になったのか…
というかベータ版の機能をデフォルトで有効にすんじゃねぇよ
0

コメントを追加

  1.  
    やりたい。やるか。

    経緯

    • 諸事情により近々引っ越すことに
    • 最近よく「IoT」って聞くし気になるから何かやってみよう
    • というか楽したいよね
    • あとアフィリエイトの報酬とかね!
    という感じでいわゆる「おうちハック」始めました

    そもそも「IoT」とは

    モノのインターネット(物のインターネット、英語: Internet of Things:IoT)とは、様々な「モノ(物)」がインターネットに接続され(単に繋がるだけではなく、モノがインターネットのように繋がる)、情報交換することにより相互に制御する仕組みである。それによるデジタル社会の実現も指す。近年ではIoTに次ぐ技術として、ヒトのインターネット(Internet of Human:IoH = ヒトがインターネットと繋がる)が言われている。
    Wikipedia - モノのインターネット
    ちょろっとGoogleTrendsで見てみるとここ1年間よく検索されているみたい
    世界的に見てもまだ検索されてるらしい

    IoTの具体例

    • ビルなどの入退室監視
    • 公共交通機関の運行情報
    • 農場などでのセンサーによる気温・湿度・土壌などの状態監視・分析
    • Amazonダッシュボタン
    • MAMORIO
    などなど

    我が家で実現できているおうちハック

    • 気温・湿度・空気の汚さを監視
    • 外出先からの家電操作
      • エアコン(というかdyson)
        • 暑かったら送風で緩和させる
        • 寒かったら暖房で部屋を暖める
      • ブルーレイレコーダー
        • なんか東芝製のやつだったはず
        • 録画した番組を通勤中などにスマホから見れる
        • 録画予約し忘れた番組を番組表から録画予約できる

    実現させたいおうちハック

    • スマートスピーカー
      • IoTといったら、というぐらい
      • 選択肢は「Google Home」か「Alexa
      • 個人的にはGoogle Homeがいいけど「OK, Google」って長くない?
      • それとGoogle Homeってモニタ無いからなぁ…視覚からも情報欲しい…
      • 導入したらやっぱり音声操作させたいよね
    • スマホでドアの鍵を開閉「Qrio
      • スマホと連携させておけば近付くだけで解錠される
      • 逆に離れれば施錠される
      • アプリで鍵の共有もできる
    • 時間になったらカーテンを開閉「mornin
      • 単調なカーテン開け閉めから開放される
      • 朝になれば自然に光が入るので起きやすくなるかも
    • 尿で健康状態を判断してくれる「SYMAX
      • デブで不健康なので単純に興味がある
      • まだ発売されてない
      • 健康的な生活をおくれるかも
    具体的なものはこんな感じ
    あとは「家に帰ってきたら電気とかテレビ付ける」とかIFTTT的なのも使っていきたいネ

    社内でもIoT導入とかどうですか!?
    重さを図って減ってきたら発注するってのがありますよ!ASKULじゃなくてAmazonだけど!!

    0

    コメントを追加

  2. Windows Update、お好きですか。私は嫌いです。
    だっていつの間にか仕様変更してるし、バグるし。
    いや…「アップデート内容確認しろよ」言われたら何も言えないんだけどさ…

    今回はこのWindows Update後に起き始めた文字化けを直すという記事です。

    とはいうのもですね、2018/06中旬頃、いつもどおり「さぁ、仕事するか」と意気込んでノートPCを開くとですね、バッテリーが切れていたのかPCの電源が落ちていたんです。
    で、起動するとどうやらWindows Updateが走っているらしく、とりあえず待ってログイン。

    「さぁ、仕事するか」(2回目)でGoogle Cloud PlatformのCloud SDKのコマンドを叩いて作業しようにもなんかエラーが出てる。
    LookupError: unknown encoding: cp65001
    ググるとコマンドプロンプトでPython実行時に文字コードが分からなくてエラーになっているらしい
    こちらのQiitaの記事を参考にしてPYTHONIOENCODINGという環境変数を設定するも同じくLookupError

    んー…Cloud SDKのアップデートが悪いのかな…、と思いアンインストール、再インストールを行うも問題は解消されず…

    さぁ、どうしたものか

    引き続き調査しているとWindows10で稀に文字コードがバグる問題があるらしい
    https://support.microsoft.com/ja-jp/help/3144536

    で、手順に合わせてDISM.exe /Online /Get-Packagesを実行してみると

    ババーン……はぁ…
    一応手順に沿ってパッケージ選択して再起動をかけてみましたが状況は変わらず

    そして他にも作業をしてみると
    ・客先からもらったzipを展開したら文字化けで中身が確認できない
    ・タスクバーのアイコンをオンマウスした時の文字が文字化けしている
    ・Excelのシート名やら検索バーが文字化けしている
    といった事象が発生していました。




    仕事用のPCがこんな状態で仕事できないのでもう帰りたかったですがそこは抑えて
    最終的にはWindowsとMacの2台持ちになりました。

    が、なんか直らないのも気になるので引き続き文字化けの調査を行っていたらどうやら解決できたっぽい!?

    長かったですが以降Windows Update後に様々なアプリが文字化けした際の対応法となります。

    1. [設定]を開き、[時刻と言語]を選択


    2. [地域と言語]を選択


    3. [管理用の言語の設定]を選択


    4. [システム ロケールの変更]を選択


    5. [ベータ: ワールドワイド言語サポートで Unicode UTF-8 を使用] のチェックを外す


    6. 再起動を促されるのでPCを再起動


    上記の手順を実施後にPCを起動して確認すると文字化けが解消されていると思います。



    念の為確認で再度チェックをつけて再起動したら文字化けが発生しました。

    GCPの方も無事にコマンド実行できてよかった…


    にしてもこのベータ機能、2017年11月に追加されたものなのに何故今頃問題になったのか…
    というかベータ版の機能をデフォルトで有効にすんじゃねぇよ
  3. 恥ずかしながらつい最近SwaggerというAPIのソースコードを生成してくれるサービスを知りました。
    便利な世の中になったものですね。苦労することはどんどん楽にする流れ良いぞもっとやれ。

    ということでSwagegr Editorを使ってyamlに記述した内容を基にSpringを生成していたのですが
    途中からSwagger2.0からOpenAPI3.0.0に方針が変わりました。びっくり。

    どうやらSwaggerの記法からOpenAPIの記法へ変換してくれるサービスがあるようです。
    Mermade Swagger 2.0 to OpenAPI 3.0.0 converter
    よっしゃこれでSwagger2.0で書いた内容をムダにしないでOpenAPI3.0.0に移行できるぞ!
    と思った矢先、今までSwagger Editorにあった [Generate Server] - [Spring]が消えてるではないか!!!
    えぇ…(困惑)
    調べてみたらswaggerのGitHubのissuesにありました。
    swagger-codegen for openapi 3.0 doesnt support spring and spring boot #7919

    これどうしよう…やっぱSwagger2.0でやるしかないのか…、と思っていたら同僚が助けてくれました

    ということでつい最近オープンソース化されたという OpenAPI Generatorを使ってSpringBootに組み込むRest APIのソースコードを生成してみます。

    jarを準備する

    まず生成するために必要なjarの準備を行います。
    とは言ってもこのREADME.mdにあるDownload JARからダウンロードすればいいんでs…!?
    し、死んでるじゃねぇか!!
    いきなり詰みです。もう疲れたお家帰りたい。

    仕方がないのでGitHubからソースコードをチェックアウトしてローカルでjarファイルの作成を試みます。
    無事にチェックアウトできました。mavenコマンドでmvn clean installを実行します。
    (なぜでしょう。私の環境ではコマンドプロンプトからやったらエラーになりました。)
    (なのでIntellij IDEAのmavenからclean, installを実行しました。)

    終わりました。良かったですね。ホントに。
    するとjarファイルが[projectroot]\modules\openapi-generator-cli\target\openapi-generator-cli-sources.jarに生成されているはずなのでこれを使用していきます。

    ソースコードの生成

    予めyamlは作っておきます。書き方とかは己でがんばってください。
    GitHubにはjarの使い方としてサンプルでbat(Linuxとかはsh)置いてあるから見ろやスタンスのようなので中身を見てみます。
    [projectroot]\bin\windows\java-petstore.bat
    set executable=.\modules\openapi-generator-cli\target\openapi-generator-cli.jar
    
    If Not Exist %executable% (
      mvn clean package
    )
    
    REM set JAVA_OPTS=%JAVA_OPTS% -Xmx1024M
    set ags=generate -i modules\openapi-generator\src\test\resources\2_0\petstore-with-fake-endpoints-models-for-testing.yaml -l java -o samples\client\petstore\java -DdateLibrary=joda -DhideGenerationTimestamp=true
    
    java %JAVA_OPTS% -jar %executable% %ags%
    
    簡単にまとめて見るとコマンドは以下の通りになります。
    java -Xmx1024M -jar [openapi-generator-cli.jarのパス] generate -i [yamlのパス] -l spring -o [出力先のパス] -DhideGenerationTimestamp=true

    これでSpringBootに組み込めるRest APIのソースコードが生成されます。

    残りの詳細なことはGitHubのREADNE.mdかコマンドでjava -jar openapi-generator-cli.jarのpath helpを実行してみて下さい。

    以上。
    0

    コメントを追加

  4. 社内にて行われた「Scrum」(スクラム)についての勉強会のメモ
    資料は公式にあるスクラムガイドを使用。

    メモ

    定義・用途

    • Scrum自体は軽量で理解が容易だが修得は困難
    • Scrumの本質は少人数制のチーム
      • 7人程度までが理想
      • あまりに少人数(3人程度)だとまわらない

    理論

    • 結果責任を持つものに対して見える化されていることである
      • プロセスの用語を参加者全員で共有している
      • 作業する人と検査する人が「完成」の定義を共有している
    • ツールを使うことによって見える化を行うことは可能だが見えたことによる解決には至っていない。
    • 検査
      • 成果物やゴールまでの進捗を頻繁に検査する
        • 好ましくない変化を検知する必要がある
      • ただ頻繁にやりすぎても作業の妨げになってしまう
    • 適応
      • プロセスの不備が許容値を超えてしまい検査する担当者がこれ以上受け入れられないと判断した場合は構成要素や今後の工程の調整を行う必要がある

    チーム

    • Scrumチームは以下の3つで構成される
      • プロダクトオーナー
        • プロダクトバックログの管理に責任を持っている人
      • 開発チーム
        • 各スプリント
        • 属人化している作業が合ったとしても、Scrumにおける開発チームのメンバーに肩書は存在しない
        • ビジネス分析や運用、アーキテクチャのような専門領域があってもScrumではサブチームの存在を認めていない
      • スクラムマスター
        • スクラムガイドで定義されたScrumの促進と支援に責任を持つ
        • Scrumの理論・ルール・価値基準を全員に理解してもらえるように支援する
        • 教えるをしてはいけない。支援をする。(スクラムガイド2017年版Page 7を参照)
    • 開発チームの中には○○担当者といったものは存在しない
      • 「テスト担当、実装担当」や「デザイン担当、DB担当、インフラ担当」といった括りはまず無い
      • ・iOS担当、Android担当といったものも無し
      • 「コンポーネントチーム」と「フィーチャーチーム」
        • Scrumではフィーチャーチームとして活動していくべき
    • チームに必要なのは各個人のリーダーシップ力管理能力
      • Scrumでは管理する人は時に決められていない。じゃあ誰が管理するの?自分でしょ

    スクラムイベント

    • Scrumと言えば以下の図
    • Scrumで定義されていないミーティングの必要性を最小化する
    • Refinementについては定期的にやっている所もあれば不定期でやっている所もある

    スプリントプランニング

    • スプリントプランニング
      • スプリントの作業を計画する。
      • スクラムチームの共同作業。
      • タイムボックスは1週間の場合だと最大2時間(不慣れの場合は3時間程度になることも)
      • 2時間の中では以下の2点を打ち合わせ/計画してみる
        • 1. スプリントで何ができるのか
        • 2. 選択した作業をどのように成し遂げるか
      • 打ち合わせではプランニングポーカーが有効

    デイリースクラム

    • デイリースクラムは毎日、同じ時間、同じ場所で開催する
      • 毎日(マスト)
    • 話す内容の例
      • 自分が昨日やった内容は何か
      • 自分が今日やる内容は何か
      • 障害となるものを発見したか
    • 一つ一つに質疑応答するのではなく、気になることはデイリースクラムが終わった後にして他のメンバーの作業妨げない
    • 開発チームのためのミーティングであるため、開発チーム以外の人が参加する分には問題ないがどうこう言う資格はない
      • 言われる/言われそうな場合はスクラムマスターが止める(障害を除外する)

    スプリントレビュー

    • 基本的にはドヤ顔する場面
      • ここまでやってやったぜHAHAHA
    • 今回できなかったものが合あった場合は次回のスプリントにまわしていく

    スプリントレトロスペクティブ

    • 人・関係・プロセス・ツールの観点から今回のスプリントを検査する
    • うまく言った項目や今後の改善が必要な項目を特定・整理する
    • スクラムチームの作業の改善実施計画を作成する

    成果物

    プロダクトバックログ

    • プロダクトに必要だと把握しているものを全て順番に並べた一覧
    • プロダクトバックログは唯一のものなのでパターンA, パターンBという複数候補はまず無い
    • プロダクトバックログを決める打ち合わせに開発チームは参加した方が良いのか
      • 可能であれば参加したほうが良い
        • プロダクトオーナーには分からないことを助言/発言できるため
        • ただし順番を並べる資格はない

    スプリントバックログ

    • スプリントバックログは開発チームのためのものであり、開発チームが管理していく

    成果物の透明性

    完成の定義

    • プロダクトバックログアイテムやインクリメントの完成を決める際はチーム全員がその完成の意味を理解しておかなければならない
    • リリーススプリントが発生しているチームがあるが、これはダメ
      • 基本的には週や月毎にやっているスプリントに含めるべき
      • リリーススプリントが発生しているということは完成の定義が曖昧となっている
    0

    コメントを追加

  5. 実際には"ちょろっと"いかなかったのでまぁメモるよね。
    ここ1週間くらい調べながら簡単な画面を作って試してみたので情報が散らかってしまわないようにまとめます。

    やりたい事

    独自のログインフォーム、またはGoogleアカウントを用いてログインを行う。

    要点

    要点は以下の通り
    • SpringSecurityのWebSecurityConfigurerAdapterを拡張してOAuth2.0によるログインを有効にする
    • application.ymlにGoogle Developerで生成したクライアントID/クライアントシークレットを設定する
    ソースコードはGitHubに上げています。
    WebSecurityConfigurerAdapterを拡張して記述した認可が問題なければ
    ログイン処理もログアウト処理もSpring様がよしなにやってくれます!素敵

    解説

    OAuth2.0によるログインを有効化

    WebSecurityConfigurerAdapterを拡張したWebSecurityConfigを作成します。
    重要なのは33行目からあるWebSecurityConfigurerAdapter#configure(http)のOverride。
    このメソッドで認証/認可の設定を行います。
    WebSecurityConfig.java
    package example.security;
    
    import example.service.impl.AuthenticationProviderImpl;
    
    import java.util.List;
    
    import org.springframework.beans.factory.annotation.Autowired;
    import org.springframework.context.annotation.Configuration;
    import org.springframework.security.config.annotation.authentication.builders.AuthenticationManagerBuilder;
    import org.springframework.security.config.annotation.web.builders.HttpSecurity;
    import org.springframework.security.config.annotation.web.configuration.WebSecurityConfigurerAdapter;
    import org.springframework.security.core.GrantedAuthority;
    import org.springframework.security.core.authority.SimpleGrantedAuthority;
    import org.springframework.security.core.authority.mapping.GrantedAuthoritiesMapper;
    import org.springframework.security.oauth2.core.user.OAuth2UserAuthority;
    
    import com.google.common.collect.Lists;
    
    /**
     * Spring Security設定クラス.
     */
    @Configuration
    public class WebSecurityConfig extends WebSecurityConfigurerAdapter {
    
        /** ログインフォーム利用時の認証クラス */
        @Autowired
        private AuthenticationProviderImpl authenticationProvider;
    
        /**
         * SpringSecurityを用いてページアクセスの認証/認可を設定
         */
        @Override
        protected void configure(HttpSecurity http) throws Exception {
            http.authorizeRequests()
                // 認証対象外のパスを指定してアクセスを許可する
                .antMatchers("/css/**", "/js/**", "/images/**").permitAll()
                // ADMIN roleじゃないと/showAdministratorには入れない
                .antMatchers("/showAdministrator").hasRole("ADMIN")
                // それ以外は匿名アクセス禁止
                .anyRequest().authenticated()
                // ログアウト後にログイン画面を表示するための設定
                .and().logout().logoutSuccessUrl("/login").invalidateHttpSession(true).deleteCookies("JSESSIONID").permitAll()
                // フォームログインを有効化, ログインURLは"/login", ログイン成功時の遷移先は"/", ログイン失敗時の遷移先は"/login-error"
                .and().formLogin().loginPage("/login").defaultSuccessUrl("/").failureUrl("/login-error")
                .usernameParameter("inputUserName").passwordParameter("inputPassWord").permitAll()
                // OAuth2認証を有効化, ログインURLは"/login", GrantedAuthoritiesMapperを適用する
                .and().oauth2Login().loginPage("/login").permitAll().userInfoEndpoint().userAuthoritiesMapper(oauth2UserAuthoritiesMapper());
        }
    
        /**
         * OAuth2.0を用いてログインした場合のユーザーの権限を設定
         */
        private GrantedAuthoritiesMapper oauth2UserAuthoritiesMapper() {
            // インタフェース的には複数件受け取ることができるが、実際には権限情報(ROLE_USER)の1件のみが渡される
            return authorities -> {
                List<GrantedAuthority> mappedAuthorities = Lists.newArrayList();
                for (GrantedAuthority authority : authorities) {
                    // オリジナルの権限情報は引き継ぐ
                    mappedAuthorities.add(authority);
                    if (OAuth2UserAuthority.class.isInstance(authority)) {
                        // OAuth 2.0 Login機能でログインしたユーザに与える権限情報(ROLE_OAUTH_USER)を追加
                        mappedAuthorities.add(new SimpleGrantedAuthority("ROLE_OAUTH_USER"));
                    }
                }
                return mappedAuthorities;
            };
        }
    
        @Autowired
        public void configureGlobal(AuthenticationManagerBuilder auth) {
            // 独自認証クラスを設定する
            auth.authenticationProvider(authenticationProvider);
        }
    }
    それぞれコメントを記載していますがOAuth2.0を有効とするためには
    一番下にあるoauth2Login()を明記することでOAuth2.0によるログインが可能となります。
    後ろに付与しているuserAuthoritiesMapper()ではoauth2UserAuthoritiesMapper()メソッドを設定しており
    OAuth2.0によるログインを行ったユーザーに対する認可(権限)の設定はこの場所で行われます。
    因みにデフォルトの認可として"ROLE_USER"が設定されているので
    通常ユーザーでログイン + OAuth2.0によるログインを行ったユーザーに対する認可が設定できるような形となっています。

    OAuth2.0を利用するサービスを設定

    OAuthによるログインを行うサービスの設定をSpringBootではapplication.ymlに設定します。
    application.yml
    spring:
      security:
        oauth2:
          client:
            registration:
              google:
                clientId: {生成したクライアントID}
                clientSecret: {生成したクライアントシークレット}
    
    クライアントID/クライアントシークレットはGoogleの場合
    GoogleCloudPlatformのメニューから[APIとサービス]▶認証情報から生成します。
    [認証情報を作成]から[OAuthクライアントID]を選択。
    [アプリケーションの種類]は今回の場合WebAppとしています。
    [認証済みのリダイレクトURI]にはOAuth認証を行う際のURIを設定します。
    とは言ってもこの[認証済みのリダイレクトURI]、SpringSecurityのソースコードに以下のような記述があります。
    OAuth2LoginAuthenticationFilter.java
    public class OAuth2LoginAuthenticationFilter extends AbstractAuthenticationProcessingFilter {
        /**
         * The default {@code URI} where this {@code Filter} processes authentication requests.
         */
        public static final String DEFAULT_FILTER_PROCESSES_URI = "/login/oauth2/code/*";
        private static final String AUTHORIZATION_REQUEST_NOT_FOUND_ERROR_CODE = "authorization_request_not_found";
        private ClientRegistrationRepository clientRegistrationRepository;
        private OAuth2AuthorizedClientService authorizedClientService;
        private AuthorizationRequestRepository<OAuth2AuthorizationRequest> authorizationRequestRepository =
            new HttpSessionOAuth2AuthorizationRequestRepository();
     
        /**
         * Constructs an {@code OAuth2LoginAuthenticationFilter} using the provided parameters.
         *
         * @param clientRegistrationRepository the repository of client registrations
         * @param authorizedClientService the authorized client service
         */
        public OAuth2LoginAuthenticationFilter(ClientRegistrationRepository clientRegistrationRepository,
            OAuth2AuthorizedClientService authorizedClientService) {
            this(clientRegistrationRepository, authorizedClientService, DEFAULT_FILTER_PROCESSES_URI);
        }
     
        ......
     
    }
    SpringSecurityのOAuth2の設定から認証ページへのリダイレクトURLはデフォルトとして/login/oauth2/code/*が設定されています。
    *の部分にはapplication.ymlにてregistration下に設定したサービス名が入ってきます。
    これらを組み合わせるとデフォルト時の[認証済みのリダイレクトURI]はlocalhostの場合http://localhost:8080/login/oauth2/code/googleとなります。

    ログインページの作成

    ログインページについてはSpringSecurityの場合、
    自動で生成してくれるのでOAuth2の認証がお試しできるだけで良い方は飛ばしても構いません。
    (デフォルトのログインページで運用とかは流石に無いとは思うけど…)

    ログインページのHTMLには27行目以降のように記述すると
    SpringSecurityで読み込まれたOAuth2の設定を元にOAuth2を用いてログインするリンクが生成されます。
    login.html
    <!DOCTYPE HTML>
    <html xmlns:th="http://www.thymeleaf.org">
    <head>
      <title>ログイン</title>
      <meta charset="UTF-8">
      <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
      <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    </head>
    <body style="background-color: cornsilk;">
    <h1>ログイン</h1>
    <!-- ログインできなかった時のエラーメッセージ -->
    <p th:if="${loginError}" style="color: #F00;">ログインに失敗しました。</p>
    <form name="loginForm" th:action="@{/login}" method="post">
      <label th:for="username">ユーザー名:</label>
      <input name="inputUserName" type="text" title="ユーザー名"/>
      <br/>
      <label th:for="password">パスワード:</label>
      <input name="inputPassWord" type="password" title="パスワード"/>
      <br/>
      <input type="submit"/>
    </form>
    <div>
      <p>admin:管理者ユーザー</p>
      <p>user:一般ユーザー</p>
    </div>
    <h3>Login with OAuth 2.0</h3>
    <!-- OAuth 2.0 Login用のリンクを表示するエリア -->
    <table>
      <tr th:each="clientRegistration : ${@clientRegistrationRepository}">
        <td>
          <a th:href="@{/oauth2/authorization/{id}(id=${clientRegistration.registrationId})}"
             th:text="|Sign in with ${clientRegistration.clientName}|">Sign in with App</a>
        </td>
      </tr>
    </table>
    </body>
    </html>
    
    OAuth2の設定を保持しているOAuth2ClientRegistrationRepositoryConfigurationclientRegistrationRepository()メソッドから取得しています。
    表示にはSpringBootと仲良しなthymeleafを使用しています。

    参考資料

    0

    コメントを追加

  6. iTunesのアップデートに失敗(?)したので再インスコしようとしたのですが、Apple Software Updateが壊れてしまい再インストールしようにもバージョンが古いとかなんとか言っててiTunesのインストールに失敗してしまうので、iTunesのみをインストールする手順をメモ

    念の為に、この手順に従ってiTunesをインストールした際、PCに問題があったとしても私は責任を負いません。あしからず。
    1. iTunesダウンロードページからiTunesのインストーラーをダウンロード
    2. iTunesのインストーラーを7-Zipなどの展開ソフトで展開
      すると中身はこんな感じ(64bit版)
    3. Win + Rで「ファイル名を指定して実行」ダイアログを開き以下の二点をインストールする。
      1. AppleApplicationSupport.msi
      2. iTunes64.msi
      インストールするときのコマンドは[アプリ名].msi /passiveというような風に
      (.msiと/passiveの間には半角スペース)
    4. 通常のインストーラーと同様にインストールを実施
    以上です。多分途中にあったチェックボックスを何もいじってない場合はデスクトップにiTunesのショートカットが作成されているはず。

    参考記事

    0

    コメントを追加

  7. 忘れないようにめもめも

    新規アプリケーションを作成

    command
    ng new projectName

    アプリケーションをサーブ

    command
    # プロジェクトフォルダ内で実行
    ng serve --open

    ng serveコマンドはアプリケーションをビルド、開発用サーバーを起動し、ソースファイルを監視します。 あなたが監視されているファイルに変更を行ったときには、変更があったファイルに対し再ビルドを行います。

    --openフラグを指定すると、http://localhost:4200がブラウザで開かれます。

    Angular - アプリケーションシェル#アプリケーションをサーブする

    コンポーネントを作成

    command
    ng generate component componentName

    サービスを作成/提供

    command
    ng generate service serviceName --module=app

    ルーティングモジュールを作成

    command
    ng generate module moduleName --flat --module=app

    --flatは、固有のフォルダの代わりに、src/appに生成したファイルを置きます。

    --module=appは、AppModuleのimports配列に、生成したモジュールを登録するようCLIに指示します。

    Angular - ルーティング#AppRoutingModuleを追加する
    0

    コメントを追加

  8. お仕事で必要になったのでとりあえず触ってみましょうかね。

    動作確認してる環境はWindows10に搭載されている「Bash on Ubuntu on Windows」です。
    ひとまずAngular公式サイトに行ってみましょうか。


    ふむふむ、何ができるのかさっぱり。
    聞いている話ではフロントエンド(ブラウザで表示する部分)をどうこうするものだとか。

    んじゃ「はじめる」をクリックして初めてみよ。

    Step 1. 環境構築

    nodejsとnpmの設定は既にインストール&最新バージョンにアップデート済なのでスルーします。
    とりあえず次のコマンドを実行。
    npm install -g @angular/cli
    無事にAngular CLIがインストールされました。

    Step 2. 新規プロジェクト作成

    クイックスタートに書いてあるので以下のコマンドをプロジェクトを作成する任意のフォルダで実行してプロジェクトの作成を行ってみます。
    ng new my-app
    多分成功してる。やったぜ。

    Step 3. アプリケーションをサーブ

    さて、何もしてないですが実行してみましょう。
    以下のコマンドでプロジェクト内に入り実行します。
    cd my-app
    ng serve --open
    --openオプションを使うとブラウザで自動的に開いてくれるみたいですが私の環境では開いてくれませんでした。
    ツンデレだからしょうがない。
    起動したっぽいのでこの赤枠で囲ったアドレスをブラウザで開いてみます。
    おー、見れた。

    Step 4. Angularコンポーネントを編集

    ファイルを編集してページに表示する内容を変更してみますか。
    理解が足りてないのでどういうことなのか理解が追いついてませんが、どうやらAngular CLIがコンポーネントを作成してくれたみたいです。
    ルートコンポーネント?だそうでapp-rootと名付けられているらしい。
    そしてこのファイルは./src/app/app.component.tsにあるそう。

    とりあえず./my-app/src/appに何があるの?
    root:/var/angular/my-app# ll ./src/app/
    total 8
    drwxr-xr-x 0 root root  512 Apr 12 17:45 ./
    drwxr-xr-x 0 root root  512 Apr 12 17:45 ../
    -rw-r--r-- 1 root root    0 Apr 12 17:45 app.component.css
    -rw-r--r-- 1 root root 1141 Apr 12 17:45 app.component.html
    -rw-r--r-- 1 root root  986 Apr 12 17:45 app.component.spec.ts
    -rw-r--r-- 1 root root  207 Apr 12 17:45 app.component.ts
    -rw-r--r-- 1 root root  316 Apr 12 17:45 app.module.ts
    root:/var/angular/my-app#
    
    ほうほう、なんか色々入ってる。htmlとcssもここにあるのね。
    HTMLを開いてみますか。
    <!--The content below is only a placeholder and can be replaced.-->
    <div style="text-align:center">
      <h1>
        Welcome to {{ title }}!
      </h1>
      <img width="300" alt="Angular Logo" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNTAgMjUwIj4KICAgIDxwYXRoIGZpbGw9IiNERDAwMzEiIGQ9Ik0xMjUgMzBMMzEuOSA2My4ybDE0LjIgMTIzLjFMMTI1IDIzMGw3OC45LTQzLjcgMTQuMi0xMjMuMXoiIC8+CiAgICA8cGF0aCBmaWxsPSIjQzMwMDJGIiBkPSJNMTI1IDMwdjIyLjItLjFWMjMwbDc4LjktNDMuNyAxNC4yLTEyMy4xTDEyNSAzMHoiIC8+CiAgICA8cGF0aCAgZmlsbD0iI0ZGRkZGRiIgZD0iTTEyNSA1Mi4xTDY2LjggMTgyLjZoMjEuN2wxMS43LTI5LjJoNDkuNGwxMS43IDI5LjJIMTgzTDEyNSA1Mi4xem0xNyA4My4zaC0zNGwxNy00MC45IDE3IDQwLjl6IiAvPgogIDwvc3ZnPg==">
    </div>
    <h2>Here are some links to help you start: </h2>
    <ul>
      <li>
        <h2><a target="_blank" rel="noopener" href="https://angular.io/tutorial">Tour of Heroes</a></h2>
      </li>
      <li>
        <h2><a target="_blank" rel="noopener" href="https://github.com/angular/angular-cli/wiki">CLI Documentation</a></h2>
      </li>
      <li>
        <h2><a target="_blank" rel="noopener" href="https://blog.angular.io/">Angular blog</a></h2>
      </li>
    </ul>
    
    あーさっきのページかな。ひげ記法で書いてある{{ title }}ってのが変数っぽい。
    あとは…CSSファイルまぁどうせCSSだからいっか…。
    tsファイルって何でしょうね。とりあえず見てみるか。
    import { Component } from '@angular/core';
    
    @Component({
      selector: 'app-root',
      templateUrl: './app.component.html',
      styleUrls: ['./app.component.css']
    })
    export class AppComponent {
      title = 'app';
    }
    
    なんかやってる(雑
    何やってるかはよく分かんないけどさっきHTMLにあった{{ title }}に代入されるであろう部分が9行目にある。
    ここをこう変えてみる
    import { Component } from '@angular/core';
    
    @Component({
      selector: 'app-root',
      templateUrl: './app.component.html',
      styleUrls: ['./app.component.css']
    })
    export class AppComponent {
      title = '社畜';
    }
    
    さぁ!!どうなる!!!!
    0

    コメントを追加

  9. メモ

    • データの洗い出し
    • 正規化
      • 名前とIDが繋がるとIDが分かれば名前がわかる、逆も然り、みたいな
      • 正規化により冗長が回避される
    • マスタ/イベント
      • マスタ
        • 基本的に動かない情報
      • イベント
        • 履歴として保持したほうが良い情報
      • マスタとイベントは色分けや接頭辞とかで分けたりとかすると良い感じ
    • 発生イベント
      • nullが入るようなカラムはテーブルを分ける
      • nullを分けるのはいいけど、実際、現実的には難しい。。。
    • 多重度
      • 0:0
      • 0:n
      • n:m
    • 将来こんなことがあるんじゃないかなー、というのを考えてみる
    • 複雑すぎると自分を苦しめることになる
    • でも多く考えすぎても工数が増えてしまうのである程度の落とし所を決めておく

    実習

    しまむらのレシートを基にデータモデリングを実施

    レシートのデータを洗い出し

    • 店名・電話番号
    • 日付
    • レシートNo
    • 商品情報
      • ID
      • 商品名
      • 点数・・・在庫?
      • 価格
    • 合計
      • 点数
      • 金額
    • 預り金
    • 釣り銭

    正規化

    多重度

    結果:多重度でごっちゃごちゃになってしまった。。。
    0

    コメントを追加

  10. Thymeleafを用いて静的リソースの読み込みを行う。

    デフォルトの読み込みフォルダの設定はプロジェクトのルートフォルダの下にあるstaticフォルダになるらしい。へぇ。


    この場所を変更したい場合はJava側以下のようにWebMvcConfigurerAdapter#addResourceHandlersをオーバーライドして記述すると良い。
    @Configuration
    public class WebMvcConfigurer extends WebMvcConfigurerAdapter {
        @Override
        public void addResourceHandlers(ResourceHandlerRegistry registry) {
            registry.addResourceHandler("/static/**") // Pathは/src/main/resources/の下にある場所を指定する
                .addResourceLocations("classpath:/static/");
        }
    }
    
    上記の記述で読み込まれるフォルダは/[プロジェクトのルート]/src/main/resources/static/となる。
    サーバーを起動すると、http://localhost:8080/static/semantic/semantic.cssといった感じのURLでファイルへアクセス出来る。
    実際に読み込むHTML側の記載はこんな感じ。
    <head>
        <meta charset="UTF-8"/>
        <title>ダーマ神殿 | スキルマップ</title>
        <link rel="stylesheet" href="/static/semantic/semantic.css" th:href="@{/semantic/semantic.css}"/>
        <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.js"
                th:src="@{'https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.js'}"></script>
        <script type="text/javascript" src="/static/semantic/semantic.js" th:src="@{/semantic/semantic.js}"></script>
        <script>
    </head>
    
    このように設定することで静的リソースの読み込みを行うことができる。
    0

    コメントを追加

自己紹介
自己紹介
アーカイブ
ラベル
Translate
Translate
Powered by Google TranslateTranslate
人気の投稿
人気の投稿
  • 実際には"ちょろっと"いかなかったのでまぁメモるよね。 ここ1週間くらい調べながら簡単な画面を作って試してみたので情報が散らかってしまわないようにまとめます。 やりたい事 独自のログインフォーム、またはGoogleアカウントを用いてログインを行う。 ...
  • 恥ずかしながらつい最近 Swagger というAPIのソースコードを生成してくれるサービスを知りました。 便利な世の中になったものですね。苦労することはどんどん楽にする流れ良いぞもっとやれ。 ということでSwagegr Editorを使ってyamlに記述した内容を基にSpr...
  • Windows Update、お好きですか。私は嫌いです。 だっていつの間にか仕様変更してるし、バグるし。 いや…「アップデート内容確認しろよ」言われたら何も言えないんだけどさ… 今回はこのWindows Update後に起き始めた文字化けを直すという記事です。 とは...
読み込んでいます
「動的ビュー」テーマ. Powered by Blogger.

Original text