---
# System prepended metadata

title: 20231224_ILIASに自動でログインしたい *日常生活を便利に*
tags: [ブログ記事]

---

# 20231224_ILIASに自動でログインしたい *日常生活を便利に*
(例：20210901_LT会を開催しました)
###### tags: `ブログ記事`

- [ ] 公開（ブログ公開担当者がいじるやつ）


太字斜体で書いてある内容を埋めて行ってください．
文章，画像は太字斜体の下の行に入れてください．
最初に書く時はREADMEを読んだら読むといいと思います．

<br>

## 表示されない情報
***書いた人の名前(自己紹介文と同じ名前)***
{
i2・よーちゃん
}


***記事の簡単な説明(検索した時にタイトルの下に出てくる文章)***
{
NUTMEGに加入して活動を初めて，8ヶ月ほど経とうとしている．
クリスマスが近づく中，レポートに追われる日々．
ふと，思いました．「ILIAS，毎回ログインするの面倒だなぁ.」
}


<br>

## 表示される部分
***サムネイル画像***
{
![Desktop - 25](https://hackmd.io/_uploads/SyvhkiHPT.jpg)

}

***カテゴリ***
以下の中から該当しそうなカテゴリを選択してください
※一つだけ選択してください
- [ ] 対外活動
- [ ] 活動の様子
- [ ] メンバーの趣味
- [x] NUTMEG Advent Calendar 2023

***タグ***
以下の中から該当しそうなカテゴリを選択してください．当てはまる物がない場合は適宜追加してください.
言語
- [x] HTML
- [ ] CSS
- [ ] Python
- [ ] Go
- [ ] Ruby
- [x] JavaScript
- [ ] TypeScript
- [ ] Dart
- [ ] Rust
- [ ] Kotlin
- [ ] Swift

フレームワーク・ライブラリ
- [ ] Ruby on rails
- [ ] Vue.js
- [ ] Nuxt.js
- [ ] React.js
- [ ] Next.js
- [ ] Gin
- [ ] Flluter

ツール
- [ ] GitHub
- [ ] ターミナル
- [ ] WSL
- [ ] Ubuntu
- [ ] Docker
- [ ] Raspberry Pi
- [ ] Figma

分野
- [ ] チームづくり
- [ ] フロントエンド
- [ ] バックエンド
- [ ] インフラ
- [ ] Web-design
- [ ] API関係
 


---

***以下に本文を記載してください***

## 日常生活を便利に

NUTMEGに加入して活動を初めて，8ヶ月ほど経とうとしている．
クリスマスが近づく中，レポートに追われる日々．

ふと，思いました．

> ILIAS，毎回ログインするの面倒だなぁ
 

## eラーニングシステム

ILIASとは長岡技術科学大学で使われている，学習管理システム．
授業資料の閲覧・ダウンロード，課題のアップロード，アップロードされた講義動画の閲覧ができる．

## ILIASのログイン面倒だなあ

ILIASのログインは，トグルボタンと，テキストボックスと，送信ボタンがある．
テキストボックスは，ブラウザのパスワード自動入力でなんとかなる．
そして，ログインボタンもEnterキーでなんとかなる．
しかし，トグルボタンはどうにもできなかった…

![image](https://hackmd.io/_uploads/HJVsq5SDp.png)

よし，もっと楽にしよう!!

じゃあ，まずはブラウザのDeveloper Mode でコードを見てみる．

![image](https://hackmd.io/_uploads/BJO255BwT.png)

```html
<div class="col-sm-9">
	<div id="auth_mode">	
		<div class="radio">
			<label class="radio-inline"><input type="radio" onclick="il.Form.showSubForm('subform_auth_mode_1', 'auth_mode', null);" name="auth_mode" id="auth_mode_1" value="1" checked="checked">
			ILIAS Native認証</label>
		</div>
			
		<div class="radio">
			<label class="radio-inline"><input type="radio" onclick="il.Form.showSubForm('subform_auth_mode_2_1', 'auth_mode', null);" name="auth_mode" id="auth_mode_2_1" value="2_1">
			LDAP認証（統合アカウント）</label>
				
		</div>
	</div>
</div>

```

こんな感じ．

GPTの提案で，URLを書き換えてみる．

https://cera-e1.nagaokaut.ac.jp/ilias/login.php?client_id=contents1&cmd=force_login&lang=ja&auth_mode=ldap

結果はダメです．

“ILIAS Native認証” のところにすでに “checked属性”がついている．
Webページがサーバからロードされるとき，すでにHTMLが生成されているため，URLパラメータによってコードが動的に変更されることはない．

→ URLで変更することは厳しそうとみた．

さて，どうするか．
JavaScriptを使用して，ページロード後に変更しよう！！
つまり，自分が操作したことと同じことをプログラムにさせよう！
そこで，“ブックマークレット” というものがある．


## ブックマークレットを使おう

> **ブックマークレット**
> 
> 
> ブラウザのブックマークから簡単なJavaScriptのコードが実行できるもの
> 

できたこと

ILIASのログインページを開いた状態で，
JavaScriptのコードを書いたブックマークレットを作成する．
“ILIAS ブックマーク…” を ポチッ と押す．

トグルボタンの選択を `LDAP認証 (統合アカウント)`  の方につけることができた．

![image](https://hackmd.io/_uploads/SkDWjcrPT.png)


![image](https://hackmd.io/_uploads/SkTWscHv6.png)


作り方

これとか参考になるかも
[ブックマークレットでブラウザに便利機能を追加してみよう - Qiita](https://qiita.com/yusuke113/items/48afc10899287b169105)


ブラウザはGoogle Chrome

1. ブックマークバーを右クリックする
2. `ページを追加…` をクリックする
3. 名前はお好みで
4. URLのところに，javaScriptのコードを貼る
    
    ```jsx
    javascript:(function() {
      var radioButton = document.getElementById('auth_mode_2_1');
      if (radioButton) {
        radioButton.click();
      } else {
        alert('ラジオボタンが見つかりません。');
      }
    })();
    ```
    
    今回は↑のコードを貼った．
    
5. 完成

## 今後に続く…

ILIASのログイン画面は，このほかに，`ユーザ名`　と`パスワード`の入力がある．

さらに，`ログインボタン`をクリックするという行程が残っている．
さらにさらに，上の項目が全部できたとしても，ログイン画面でブックマークレットをクリックする必要がある．
もっと **日常生活を便利** にという道のりは，続編*に続く．

---

*続編投稿時期未定(近いうちに書きます...)
